Merge pull request #20 from HaruDamda/test/테스트용-브랜치

#10 feat: 포토북 기능 완전구현, 기타 에러 수정
HaruDamda · Dec 19, 2023 · d897b47 · d897b47
2 parents 78a9b26 + 9d48ffa
commit d897b47
Show file tree

Hide file tree

Showing 11 changed files with 599 additions and 466 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -15,6 +15,7 @@ import PhotoSelect from "./pages/Photobook/PhotoSelect";
 // import { useAtom } from "jotai";
 // import axios from "axios";
 // import { accessTokenAtom, setAccessToken } from "./store/jotaiAtoms";
+import Example from "./pages/Example/Example";
 
 function App() {
   function setScreenSize() {
@@ -44,6 +45,7 @@ function App() {
                 <Route path="/photobook" element={<Photobook />} />
                 <Route path="/photoselect" element={<PhotoSelect />} />
                 <Route path="/photobook/:uuid" element={<PhotobookUuid />} />
+                <Route path="/example" element={<Example />} />
               </Routes>
             </BrowserRouter>
           </BrowserView>
@@ -59,6 +61,8 @@ function App() {
                 <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 />} />
               </Routes>
             </BrowserRouter>
           </MobileView>

diff --git a/src/apis/emailCheck.js b/src/apis/emailCheck.js
@@ -1,14 +1,21 @@
 import axios from "axios";
 
-export const emailCheck = (formData, setFormData) => {
-
-  axios
-    .post(`http://ec2-3-35-208-177.ap-northeast-2.compute.amazonaws.com:8080/v2/api-docs/user/${formData.email}`)
-    .then(() => {
+export const emailCheck = async (formData, setFormData) => {
+  try {
+    // 서버에 이메일 중복 체크 요청
+    const response = await axios.post(`http://ec2-3-35-208-177.ap-northeast-2.compute.amazonaws.com:8080/user/${formData.email}`);
+
+    // 응답이 200이면 이메일 중복 없음
+    if (response.status === 200) {
       alert("사용할 수 있는 이메일입니다.");
-    })
-    .catch(() => {
+    } else {
+      // 다른 상태 코드가 반환된 경우
       alert("사용할 수 없는 이메일입니다.");
       setFormData({ ...formData, email: "" });
-    });
+    }
+  } catch (error) {
+    // 오류가 발생한 경우 (401 등)
+    alert("오류가 발생했습니다. 다시 시도해주세요.");
+    console.error(error);
+  }
 };
diff --git a/src/pages/Example/Example.jsx b/src/pages/Example/Example.jsx
@@ -0,0 +1,75 @@
+// import { useRef } from 'react';
+// import { useDrag } from 'react-use-gesture';
+// import memopic1 from "../../img/memopic1.png";
+
+// import styles from './Example.module.scss';
+
+// export default function App() {
+//   const domTarget = useRef(null);
+
+//   const bind = useDrag(({ offset: [dx, dy] }) => {
+//     // 특정 범위 내에서만 드래그 허용
+//     const newX = Math.min(Math.max(dx, -100), 100);
+//     const newY = Math.min(Math.max(dy, -100), 100);
+
+//     domTarget.current.style.transform = `translate3d(${newX}px, ${newY}px, 0)`;
+//   });
+
+//   return (
+//     <div className={styles.container}>
+//       <img
+//         ref={domTarget}
+//         className={styles.card}
+//         style={{
+//           transform: 'perspective(600px)',
+//         }}
+//         {...bind()}
+//         src={memopic1}
+//         alt="memopic"
+//       />
+//     </div>
+//   );
+// }
+
+import { useState, useRef } from 'react';
+import imageUrl from "../../img/memopic1.png";
+
+const DraggableImage = () => {
+  const [imagePosition, setImagePosition] = useState({ x: 0, y: 0 });
+
+  const handleImageDrag = (clientX, clientY) => {
+    // Update the image position based on the drag
+    setImagePosition({ x: clientX, y: clientY });
+  };
+  const [isDragging, setIsDragging] = useState(false);
+  const imageRef = useRef(null);
+
+  const handleDragStart = (e) => {
+    e.dataTransfer.setData('text/plain', ''); // Necessary for some browsers
+    setIsDragging(true);
+  };
+
+  const handleDragEnd = () => {
+    setIsDragging(false);
+  };
+
+  const handleDrag = (e) => {
+    if (isDragging) {
+      handleImageDrag(e.clientX, e.clientY);
+    }
+  };
+
+  return (
+    <img
+      ref={imageRef}
+      src={imageUrl}
+      alt="draggable"
+      draggable
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+      onDrag={handleDrag}
+    />
+  );
+};
+
+export default DraggableImage;
diff --git a/src/pages/Example/Example.module.scss b/src/pages/Example/Example.module.scss
@@ -0,0 +1,23 @@
+.card {
+  position: relative;
+  width: 200px;
+  height: 200px;
+  transition: box-shadow 0.5s, opacity 0.5s;
+  will-change: transform;
+  border: 10px solid white;
+  cursor: grab;
+  overflow: hidden;
+  touch-action: none;
+}
+img {
+
+  transform: translate(-50%, -50%);
+}
+
+.container {
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/src/pages/Login/Login.jsx b/src/pages/Login/Login.jsx
@@ -72,6 +72,7 @@ function LoginForm() {
       router("/frame");
     } catch (error) {
       console.error(error);
+      alert("확인할 수 없는 회원정보입니다. 다시 입력해주세요.");
     }
   };
 

diff --git a/src/pages/Photobook/PhotoSelect.jsx b/src/pages/Photobook/PhotoSelect.jsx
@@ -8,6 +8,7 @@ export default function PhotoSelect() {
   const axios = useAxios();
   const [getPhotos, setGetPhotos] = useState([]);
   const [selectedPhotos, setSelectedPhotos] = useState([]);
+  const [isPhotobookExist, setIsPhotobookExist] = useState(false);
   const router = useNavigate();
 
   const handlePhotoClick = (index) => {
@@ -37,7 +38,7 @@ export default function PhotoSelect() {
       .get("/photo")
       .then((response) => {
         setGetPhotos(response.data.photoList);
-        console.log(response.data);
+        setIsPhotobookExist(response.data.present);
       })
       .catch((error) => console.error(error));
   }, [selectedPhotos]);
@@ -47,20 +48,42 @@ export default function PhotoSelect() {
       name: "토리",
       addPhotoList: selectedPhotos.map((index) => getPhotos[index]),
     };
-
-    try {
-      const response = await axios.post("/photoBook", data);
-      console.log("API 응답:", response.data);
-      router("/photobook");
-    } catch (error) {
-      console.error("API 오류:", error);
+
+    if (selectedPhotos.length === 0) {
+      // 선택된 사진이 없을 경우 알림 창 띄우기
+      alert("사진을 선택해주세요.");
+      return;
+    } 
+    else {
+      try {
+        const response = await axios.post("/photoBook", data);
+        console.log("API 응답:", response.data);
+        router("/photobook");
+      } catch (error) {
+        console.error("API 오류:", error);
+      }
     }
   };
 
+  const checkPhotobook = () => {
+    router("/photobook");
+  }
+
   return (
     <div className={styles.wrapper}>
       <div className={styles.header}>
-        <button onClick={handlePostData}>나만의 포토북 제작하기</button>
+        {isPhotobookExist ? (
+          <button onClick={checkPhotobook} className={styles.active}>
+            내 포토북 확인하기
+          </button>
+        ) : (
+          <button
+            onClick={handlePostData}
+            className={selectedPhotos.length !== 0 ? styles.active : styles.inactive}
+          >
+            나만의 포토북 제작하기
+          </button>
+        )}
       </div>
       <div className={styles.bodySection}>
         <div className={styles.boxWrapper}>

diff --git a/src/pages/Photobook/PhotoSelect.module.scss b/src/pages/Photobook/PhotoSelect.module.scss
@@ -14,21 +14,22 @@
   align-items: center;
   justify-content: center;
   background-color: white;
-  margin-top: 44px;
-  button {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  .inactive, .active {
     height: 50px;
     width: 340px;
     border-radius: 10px;
-    border: 1px solid #009eff;
+    border: 2px solid #009eff;
     color: #009eff;
     text-align: center;
     font-size: 14px;
     font-weight: 500;
     background-color: white;
-    &:hover {
-      background-color: #009eff;
-      color: white;
-    }
+  }
+  .active {
+    background-color: #009eff;
+    color: white;
   }
 }