Merge pull request #22 from HaruDamda/feature/#21-프레임-저장시-스티커-함께-저장

Feature/#21 프레임 저장시 스티커 함께 저장
HaruDamda · Dec 19, 2023 · 5c8539b · 5c8539b
2 parents d897b47 + 08b7776
commit 5c8539b
Show file tree

Hide file tree

Showing 8 changed files with 158 additions and 90 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -59,7 +59,6 @@ function App() {
                 <Route path="/makeframe" element={<MakeFrame />} />
                 <Route path="/applyframe" element={<ApplyFrame />} />
                 <Route path="/photobook" element={<Photobook />} />
-                <Route path="/framelist" element={<FrameList />} />
                 <Route path="/photoselect" element={<PhotoSelect />} />
                 <Route path="/photobook/:uuid" element={<PhotobookUuid />} />
                 <Route path="/example" element={<Example />} />

diff --git a/src/assets/template-15.png b/src/assets/template-15.png
diff --git a/src/assets/template-9.png b/src/assets/template-9.png
diff --git a/src/component/MakeFrameCpn/Template.jsx b/src/component/MakeFrameCpn/Template.jsx
@@ -7,12 +7,13 @@ import template5 from "../../assets/template-5.png";
 import template6 from "../../assets/template-6.png";
 import template7 from "../../assets/template-7.png";
 import template8 from "../../assets/template-8.png";
-// import template9 from "../../assets/template-9.png";
+import template9 from "../../assets/template-9.png";
 import template10 from "../../assets/template-10.png";
 import template11 from "../../assets/template-11.png";
 import template12 from "../../assets/template-12.png";
 import template13 from "../../assets/template-13.png";
 import template14 from "../../assets/template-14.png";
+import template15 from "../../assets/template-15.png";
 import styles from "./Template.module.css";
 
 const Template = ({ changeFrameImage }) => {
@@ -50,6 +51,9 @@ const Template = ({ changeFrameImage }) => {
         <button onClick={() => handleFrameButtonClick(template8)}>
           <img src={template8} alt="template8" />
         </button>
+        <button onClick={() => handleFrameButtonClick(template9)}>
+          <img src={template9} alt="template9" />
+        </button>
         <button onClick={() => handleFrameButtonClick(template10)}>
           <img src={template10} alt="template10" />
         </button>
@@ -65,6 +69,9 @@ const Template = ({ changeFrameImage }) => {
         <button onClick={() => handleFrameButtonClick(template14)}>
           <img src={template14} alt="template14" />
         </button>
+        <button onClick={() => handleFrameButtonClick(template15)}>
+          <img src={template15} alt="template15" />
+        </button>
       </div>
     </div>
   );

diff --git a/src/pages/Frame/ApplyFrame.jsx b/src/pages/Frame/ApplyFrame.jsx
@@ -104,43 +104,80 @@ const ApplyFrame = () => {
       const frameElement = document.querySelector(`.${styles.Frame}`);
       frameElement.src = selectedFrame;
 
-      html2canvas(frameElement).then((canvas) => {
-        const context = canvas.getContext("2d");
-
-        const selectedFrameImg = new Image();
-        selectedFrameImg.crossOrigin = "anonymous";
-        selectedFrameImg.src =
-          selectedFrame + "?timestamp=" + new Date().getTime();
-        console.log(selectedFrameImg);
-        selectedFrameImg.onload = () => {
-          context.drawImage(selectedFrameImg, 0, 0);
-
-          // Convert canvas content to blob and save
-          canvas.toBlob((blob) => {
-            const formData = new FormData();
-            formData.append("photo", blob, "frame.png");
-
-            const config = {
-              headers: {
-                "Content-Type": "multipart/form-data",
-                Authorization: `Bearer ${accessToken}`,
-              },
-            };
-
-            axios
-              .post(
-                "http://ec2-3-35-208-177.ap-northeast-2.compute.amazonaws.com:8080/photo",
-                formData,
-                config
-              )
-              .then((res) => {
-                console.log("프레임 적용한 사진 저장 API 응답:", res.data);
-              })
-              .catch((err) => {
-                console.error("API 요청 중 오류 발생:", err);
-              });
-          }, "image/png");
-        };
+      const uploadedImageElement = document.querySelector(
+        `.${styles.UploadedImage}`
+      );
+
+      const uploadedImageWidth = uploadedImageElement.clientWidth;
+      const uploadedImageHeight = uploadedImageElement.clientHeight;
+
+      const canvas = document.createElement("canvas");
+      canvas.width = uploadedImageWidth;
+      canvas.height = uploadedImageHeight;
+      const context = canvas.getContext("2d");
+
+      const selectedFrameImg = new Image();
+      selectedFrameImg.crossOrigin = "anonymous";
+      selectedFrameImg.src =
+        selectedFrame + "?timestamp=" + new Date().getTime();
+
+      const uploadedImage = new Image();
+      uploadedImage.crossOrigin = "anonymous";
+      uploadedImage.src = uploadedImageElement.src;
+
+      Promise.all([
+        new Promise((resolve) => {
+          selectedFrameImg.onload = () => {
+            resolve();
+          };
+        }),
+        new Promise((resolve) => {
+          uploadedImage.onload = () => {
+            resolve();
+          };
+        }),
+      ]).then(() => {
+        context.drawImage(
+          uploadedImage,
+          0,
+          0,
+          uploadedImageWidth,
+          uploadedImageHeight
+        );
+
+        context.drawImage(
+          selectedFrameImg,
+          0,
+          0,
+          uploadedImageWidth,
+          uploadedImageHeight
+        );
+
+        // Convert canvas content to blob and save
+        canvas.toBlob((blob) => {
+          const formData = new FormData();
+          formData.append("photo", blob, "frame.png");
+
+          const config = {
+            headers: {
+              "Content-Type": "multipart/form-data",
+              Authorization: `Bearer ${accessToken}`,
+            },
+          };
+
+          axios
+            .post(
+              "http://ec2-3-35-208-177.ap-northeast-2.compute.amazonaws.com:8080/photo",
+              formData,
+              config
+            )
+            .then((res) => {
+              console.log("프레임 적용한 사진 저장 API 응답:", res.data);
+            })
+            .catch((err) => {
+              console.error("API 요청 중 오류 발생:", err);
+            });
+        }, "image/png");
       });
     }
   };

diff --git a/src/pages/Frame/ApplyFrame.module.css b/src/pages/Frame/ApplyFrame.module.css
@@ -60,7 +60,7 @@ button {
 
 .Middle {
   width: 390px;
-  height: 479px;
+  flex: 1;
   display: inline-block;
   flex-direction: column;
   justify-content: center;
@@ -71,7 +71,7 @@ button {
 
 .MiddleTop {
   width: 390px;
-  height: 49px;
+  height: 50px;
   background-color: #ffffff;
 }
 
@@ -103,6 +103,9 @@ button {
 
 .UploadedImage {
   position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
   z-index: 1;
 }
 

diff --git a/src/pages/Frame/MakeFrame.jsx b/src/pages/Frame/MakeFrame.jsx
@@ -300,37 +300,64 @@ const MakeFrame = () => {
       const frameElement = document.querySelector(`.${styles.Frame}`);
 
       html2canvas(frameElement, { backgroundColor: null }).then((canvas) => {
-        canvas.toBlob((blob) => {
-          const formData = new FormData();
-          formData.append("frame", blob, "frame.png");
-
-          console.log(formData);
-
-          // axios 요청 설정
-          const config = {
-            headers: {
-              "Content-Type": "multipart/form-data",
-              Authorization: `Bearer ${accessToken}`, // 헤더에 accessToken을 추가
-            },
-          };
-
-          axios
-            .post(
-              "http://ec2-3-35-208-177.ap-northeast-2.compute.amazonaws.com:8080/frame",
-              formData,
-              config
-            )
-            .then((res) => {
-              console.log("프레임 저장 API 응답:", res.data);
-              const updatedFrames = [...frames, res.data]; // 새로운 데이터 추가
-              setFrames(updatedFrames);
-              return <Navigate to="/frame" />;
-            })
-            .catch((err) => {
-              // 오류 처리
-              console.error("API 요청 중 오류 발생:", err);
-            });
-        }, "image/png");
+        const ctx = canvas.getContext("2d");
+
+        const stickerImagePromises = selectedStickers.map((selectedSticker) => {
+          return new Promise((resolve) => {
+            const stickerImg = new Image();
+            stickerImg.crossOrigin = "anonymous"; // Set cross-origin attribute
+            stickerImg.onload = () => resolve(stickerImg);
+            stickerImg.src =
+              selectedSticker + "?timestamp=" + new Date().getTime();
+          });
+        });
+
+        Promise.all(stickerImagePromises).then((loadedStickerImages) => {
+          loadedStickerImages.forEach((stickerImg, index) => {
+            const stickerPos = stickerPositions[index];
+            if (stickerPos) {
+              ctx.drawImage(
+                stickerImg,
+                stickerPos.x,
+                stickerPos.y,
+                stickerSize,
+                stickerSize
+              );
+            }
+          });
+
+          canvas.toBlob((blob) => {
+            const formData = new FormData();
+            formData.append("frame", blob, "frame.png");
+
+            console.log(formData);
+
+            // axios 요청 설정
+            const config = {
+              headers: {
+                "Content-Type": "multipart/form-data",
+                Authorization: `Bearer ${accessToken}`, // 헤더에 accessToken을 추가
+              },
+            };
+
+            axios
+              .post(
+                "http://ec2-3-35-208-177.ap-northeast-2.compute.amazonaws.com:8080/frame",
+                formData,
+                config
+              )
+              .then((res) => {
+                console.log("프레임 저장 API 응답:", res.data);
+                const updatedFrames = [...frames, res.data]; // 새로운 데이터 추가
+                setFrames(updatedFrames);
+                return <Navigate to="/frame" />;
+              })
+              .catch((err) => {
+                // 오류 처리
+                console.error("API 요청 중 오류 발생:", err);
+              });
+          }, "image/png");
+        });
       });
     }
   };
@@ -465,20 +492,15 @@ const MakeFrame = () => {
               />
             ))}
           </div>
-          <div className={styles.Return}>
-            <button onClick={undoAction}>실행 취소</button>
-          </div>
         </div>
         <div
           className={styles.Bottom}
           // style={{ transform: `translateY(${bottomContentHeight - 130}px)` }}
         >
-          <div
-            className={styles.BottomContent}
-            style={{ height: `${bottomContentHeight}px` }}
-          >
-            {bottomContent}
+          <div className={styles.Return}>
+            <button onClick={undoAction}>실행 취소</button>
           </div>
+          <div className={styles.BottomContent}>{bottomContent}</div>
           <div className={styles.ListBottom}>
             <button
               className={styles.now}

diff --git a/src/pages/Frame/MakeFrame.module.css b/src/pages/Frame/MakeFrame.module.css
@@ -86,6 +86,11 @@ body {
   position: absolute;
 }
 
+.BaseFrame {
+  position: absolute;
+  z-index: 2;
+}
+
 .UploadedImage {
   position: absolute;
   top: 0;
@@ -94,11 +99,6 @@ body {
   z-index: 1;
 }
 
-.BaseFrame {
-  position: absolute;
-  z-index: 2;
-}
-
 .UploadedSticker {
   width: 5px;
   height: 5px;
@@ -124,6 +124,11 @@ body {
   margin-top: 10px;
 } */
 
+.Bottom {
+  width: 100%;
+  height: 270px;
+}
+
 .Return {
   width: 390px;
   height: 40px;
@@ -140,11 +145,6 @@ body {
   border: none;
 }
 
-.Bottom {
-  width: 100%;
-  height: 270px;
-}
-
 .ListTop {
   height: 40px;
   padding: 14px 14px 14px 18px;