Merge pull request #16 from HaruDamda/feature/#7-포토북-UI-작업

#7 feat: 포토북 UI 작업

.env

@@ -0,0 +1 @@
+VITE_APP_SERVER_HOST=http://ec2-3-35-208-177.ap-northeast-2.compute.amazonaws.com:8080/

package.json

@@ -11,11 +11,13 @@
     "deploy": "npm run build && aws s3 sync dist/ s3://picpic-bucket --delete"
   },
   "dependencies": {
+    "@react-spring/web": "^9.7.3",
     "@reduxjs/toolkit": "^1.9.7",
     "axios": "^1.6.1",
     "crypto-js": "^4.2.0",
     "html2canvas": "^1.4.1",
     "jotai": "^2.5.1",
+    "lodash": "^4.17.21",
     "node-sass": "^9.0.0",
     "path": "^0.12.7",
     "react": "^18.2.0",
@@ -26,6 +28,7 @@
     "react-scripts": "^5.0.1",
     "react-spring": "^9.7.3",
     "react-use-gesture": "^9.1.3",
+    "react-use-measure": "^2.1.1",
     "redux": "^4.2.1",
     "redux-persist": "^6.0.0",
     "redux-persist-transform-encrypt": "^5.0.1",

src/App.jsx

@@ -1,12 +1,13 @@
 import "./App.css";
 import { useEffect } from "react";
-import { Routes, Route, BrowserRouter } from "react-router-dom";
+import { Routes, Route, BrowserRouter, useParams } from "react-router-dom";
 import Login from "./pages/Login/Login";
 import Join from "./pages/Join/Join";
 import Main from "./pages/Main/Main";
 import Frame from "./pages/Frame/Frame";
 import MakeFrame from "./pages/Frame/MakeFrame";
 import Photobook from "./pages/Photobook/Photobook";
+import PhotobookUuid from "./pages/Photobook/PhotobookUuid";
 import {
   BrowserView,
   MobileView,
@@ -41,8 +42,8 @@ function App() {
               <Route path="/frame" element={<Frame />} />
               <Route path="/makeframe" element={<MakeFrame />} />
               <Route path="/photobook" element={<Photobook />} />
-              <Route path="/framelist" element={<FrameList />} />
               <Route path="/photoselect" element={<PhotoSelect />} />
+              <Route path="/photobook/:uuid" element={<PhotobookUuid />} />
             </Routes>
           </BrowserRouter>
         </BrowserView>

src/apis/axios.js

@@ -0,0 +1,10 @@
+import axios from "axios";
+
+const { VITE_APP_SERVER_PORT } = import.meta.env;
+
+const instance = axios.create({
+  baseURL: VITE_APP_SERVER_PORT,
+  withCredentials: true
+});
+
+export default instance;

src/apis/axiosWithToken.js

@@ -0,0 +1,22 @@
+import axios from "axios";
+import { useAtom } from "jotai";
+import { accessTokenAtom } from "../store/jotaiAtoms";
+
+const { VITE_APP_SERVER_PORT } = import.meta.env;
+
+const useAxios = () => {
+  const [accessToken, ] = useAtom(accessTokenAtom);
+
+  const instance = axios.create({
+    baseURL: VITE_APP_SERVER_PORT,
+    withCredentials: true,
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+      "Content-Type": "application/json"
+    }
+  });
+
+  return instance;
+};
+
+export default useAxios;

src/apis/onSignUp.js

@@ -8,10 +8,7 @@ export const onSignUp = (userInfo, router) => {
   //   password: sha256(userInfo.password).toString(),
   // };
   axios
-    .post(
-      "http://ec2-3-35-208-177.ap-northeast-2.compute.amazonaws.com:8080/user/join",
-      userInfo
-    )
+    .post("http://ec2-3-35-208-177.ap-northeast-2.compute.amazonaws.com:8080/user/join", userInfo)
     .then((res) => {
       console.log(res.data);
       router("/login");

src/component/AllFrameCpn/FrameList.jsx

@@ -1,40 +1,30 @@
 import { useState, useEffect } from "react";
 import styles from "./FrameList.module.css";
-import axios from "axios";
+import useAxios from "../../apis/axiosWithToken";
 import { Link } from "react-router-dom";
 // import { getAllFrames } from "../../apis/getFrame";
 import { useAtom } from "jotai";
 import { accessTokenAtom } from "../../store/jotaiAtoms";
 
 const FrameList = () => {
   const [frames, setFrames] = useState([]);
-  const [accessToken, setAccessToken] = useAtom(accessTokenAtom);
+  const [accessToken, ] = useAtom(accessTokenAtom);
+  const axios = useAxios();
 
   useEffect(() => {
     // 액세스 토큰이 있을 때만 API 요청을 보내도록 조건 처리
     if (accessToken) {
       console.log("Framelist ACT:", accessToken); // accessToken jotai에서 잘 불러오는지 확인
       // axios 요청 설정
-      const config = {
-        headers: {
-          Authorization: `Bearer ${accessToken}`, // 헤더에 accessToken을 추가
-        },
-      };
+      // const config = {
+      //   headers: {
+      //     Authorization: `Bearer ${accessToken}`, // 헤더에 accessToken을 추가
+      //   },
+      // };
       // API 요청 보내기
-      axios
-        .get(
-          "http://ec2-3-35-208-177.ap-northeast-2.compute.amazonaws.com:8080/frame/list",
-          config
-        )
-        .then((res) => {
-          console.log(res.data);
-          // 성공적으로 데이터를 받아온 경우
-          setFrames(res.data); // 받아온 데이터로 frames 상태 업데이트
-        })
-        .catch((err) => {
-          // 오류 처리
-          console.error("API 요청 중 오류 발생:", err);
-        });
+      axios.get('/frame/list') // 인스턴스로 axios 요청 보내기
+        .then((response) => setFrames(response.data))
+        .catch((error) => console.error(error));
     }
   }, [accessToken]); // useEffect가 실행되는 조건을 accessToken이 변경될 때로 설정
 

src/index.css

@@ -4,15 +4,19 @@
 }
 
 :root {
+  width: 100vw;
+  height: calc(var(--vh, 1vh) * 100);
   font-family: "SUIT Variable", -apple-system, BlinkMacSystemFont, Pretendard,
     "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
     sans-serif;
   font-weight: 400;
   color: #1a1e27;
-  height: 844px;
   margin: 0;
   overflow-x: hidden;
   overflow-y: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 button {

src/pages/Login/Login.jsx

@@ -10,7 +10,7 @@ import { useAtom } from "jotai";
 import { accessTokenAtom } from "../../store/jotaiAtoms";
 import axios from "axios";
 
-export default function Main() {
+export default function Login() {
   return (
     <>
       <LoginForm />
@@ -61,20 +61,15 @@ function LoginForm() {
       password,
     };
 
-    axios
-      .post(
-        "http://ec2-3-35-208-177.ap-northeast-2.compute.amazonaws.com:8080/user/login",
-        data
-      )
-      .then((res) => {
-        const accessToken = res.data;
-        setAct(accessToken); // 액세스 토큰을 Jotai 상태에 업데이트
-				localStorage.setItem("accessToken", `${accessToken}`);
-        router('/framelist');
-      })
-      .catch((err) => {
-        console.log(err);
-      });
+    try {
+      const response = await axios.post("http://ec2-3-35-208-177.ap-northeast-2.compute.amazonaws.com:8080/user/login", data);
+      const accessToken = response.data;
+      setAct(accessToken);
+      localStorage.setItem("accessToken", accessToken);
+      router('/frame');
+    } catch (error) {
+      console.error(error);
+    }
   };
 
   return (

src/pages/Login/Login.module.scss

@@ -327,7 +327,7 @@ body {
 }
 
 .LOGO {
-  margin: 0 auto;
+  margin: 0px auto 20px auto;
   align-items: center;
 }
 

src/pages/Main/Main.jsx

@@ -5,7 +5,7 @@ import { useAtom } from "jotai";
 import { accessTokenAtom } from "../../store/jotaiAtoms";
 
 export default function Login() {
-  const [accessToken, setAccessToken] = useAtom(accessTokenAtom);
+  const [ , setAccessToken] = useAtom(accessTokenAtom);
   const router = useNavigate();
 
   const logout = () => {
@@ -19,28 +19,21 @@ export default function Login() {
   return (
     <div className={styles.root}>
       <Link to="/login" className={styles.linkBtn_container}>
-        <button className={styles.linkBtn}>
+        <button className={styles.logoBtn}>
           <img src={main_logo} alt="main-logo" />
         </button>
       </Link>
-      <button
-        className={styles.loginBtn}
-        onClick={() => router("/login")}
-      >
-        로그인
-      </button>
-      <button
+      <Link to="/login" className={styles.linkBtn_container}>
+        <button className={styles.loginBtn}>
+          로그인
+        </button>
+      </Link>
+      <button 
         className={styles.logoutBtn}
-        onClick={() => logout()}
+        onClick={logout}
       >
         로그아웃
       </button>
-      <button
-        className={styles.frameBtn}
-        onClick={() => router("/framelist")}
-      >
-        프레임 만들기
-      </button>
     </div>
   );
 }