Merge branch 'main' into test/테스트용-브랜치

HaruDamda · Dec 19, 2023 · 9d48ffa · 9d48ffa
2 parents ed1ea03 + 78a9b26
commit 9d48ffa
Show file tree

Hide file tree

Showing 37 changed files with 1,870 additions and 1,785 deletions.
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -7,7 +7,7 @@
     <title>PicPic</title>
   </head>
   <body>
-    <div id="root"></div>
+    <div id="root"><canvas id="canvas"></canvas></div>
     <script type="module" src="/src/main.jsx"></script>
   </body>
 </html>
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,74 +1,75 @@
-import "./App.css";
-import { useEffect } from "react";
-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 ApplyFrame from "./pages/Frame/ApplyFrame";
-import Photobook from "./pages/Photobook/Photobook";
-import PhotobookUuid from "./pages/Photobook/PhotobookUuid";
-import { BrowserView, MobileView } from "react-device-detect";
-import FrameList from "./component/AllFrameCpn/FrameList";
-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() {
-    let vh = window.innerHeight * 0.01;
-    document.documentElement.style.setProperty("--vh", `${vh}px`);
-  }
-  useEffect(() => {
-    setScreenSize();
-  });
-
-  window.addEventListener("resize", setScreenSize);
-
-  return (
-    <>
-      <div className="App">
-        <header className="App-header">
-          <BrowserView>
-            <BrowserRouter>
-              <Routes>
-                <Route path="/" element={<Main />} />
-                <Route path="/login" element={<Login />} />
-                <Route path="/join" element={<Join />} />
-                <Route path="/frame" element={<Frame />} />
-                <Route path="/makeframe" element={<MakeFrame />} />
-                <Route path="/applyframe" element={<ApplyFrame />} />
-                <Route path="/photobook" element={<Photobook />} />
-                <Route path="/photoselect" element={<PhotoSelect />} />
-                <Route path="/photobook/:uuid" element={<PhotobookUuid />} />
-                <Route path="/example" element={<Example />} />
-              </Routes>
-            </BrowserRouter>
-          </BrowserView>
-          <MobileView>
-            <BrowserRouter>
-              <Routes>
-                <Route path="/" element={<Main />} />
-                <Route path="/login" element={<Login />} />
-                <Route path="/join" element={<Join />} />
-                <Route path="/frame" element={<Frame />} />
-                <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 />} />
-              </Routes>
-            </BrowserRouter>
-          </MobileView>
-        </header>
-      </div>
-    </>
-  );
-}
-
-export default App;
+import "./App.css";
+import { useEffect } from "react";
+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 ApplyFrame from "./pages/Frame/ApplyFrame";
+import Photobook from "./pages/Photobook/Photobook";
+import PhotobookUuid from "./pages/Photobook/PhotobookUuid";
+import { BrowserView, MobileView } from "react-device-detect";
+import FrameList from "./component/AllFrameCpn/FrameList";
+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() {
+    let vh = window.innerHeight * 0.01;
+    document.documentElement.style.setProperty("--vh", `${vh}px`);
+  }
+
+  useEffect(() => {
+    setScreenSize();
+  });
+
+  window.addEventListener("resize", setScreenSize);
+
+  return (
+    <>
+      <div className="App">
+        <header className="App-header">
+          <BrowserView>
+            <BrowserRouter>
+              <Routes>
+                <Route path="/" element={<Main />} />
+                <Route path="/login" element={<Login />} />
+                <Route path="/join" element={<Join />} />
+                <Route path="/frame" element={<Frame />} />
+                <Route path="/makeframe" element={<MakeFrame />} />
+                <Route path="/applyframe" element={<ApplyFrame />} />
+                <Route path="/photobook" element={<Photobook />} />
+                <Route path="/photoselect" element={<PhotoSelect />} />
+                <Route path="/photobook/:uuid" element={<PhotobookUuid />} />
+                <Route path="/example" element={<Example />} />
+              </Routes>
+            </BrowserRouter>
+          </BrowserView>
+          <MobileView>
+            <BrowserRouter>
+              <Routes>
+                <Route path="/" element={<Main />} />
+                <Route path="/login" element={<Login />} />
+                <Route path="/join" element={<Join />} />
+                <Route path="/frame" element={<Frame />} />
+                <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 />} />
+              </Routes>
+            </BrowserRouter>
+          </MobileView>
+        </header>
+      </div>
+    </>
+  );
+}
+
+export default App;
diff --git a/src/apis/onSignUp.js b/src/apis/onSignUp.js
@@ -1,19 +1,22 @@
-import axios from "axios";
-// import sha256 from "crypto-js/sha256";
-
-export const onSignUp = (userInfo, router) => {
-  // let newUserInfo = {
-  //   ...userInfo,
-  //   // 비밀번호 암호화 로직
-  //   password: sha256(userInfo.password).toString(),
-  // };
-  axios
-    .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");
-    })
-    .catch((err) => {
-      console.log(err);
-    });
-};
+import axios from "axios";
+// import sha256 from "crypto-js/sha256";
+
+export const onSignUp = (userInfo, router) => {
+  // let newUserInfo = {
+  //   ...userInfo,
+  //   // 비밀번호 암호화 로직
+  //   password: sha256(userInfo.password).toString(),
+  // };
+  axios
+    .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");
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+};
diff --git a/src/assets/template-0.png b/src/assets/template-0.png
diff --git a/src/assets/template-1.png b/src/assets/template-1.png
diff --git a/src/assets/template-10.png b/src/assets/template-10.png
diff --git a/src/assets/template-11.png b/src/assets/template-11.png
diff --git a/src/assets/template-12.png b/src/assets/template-12.png
diff --git a/src/assets/template-13.png b/src/assets/template-13.png
diff --git a/src/assets/template-14.png b/src/assets/template-14.png
diff --git a/src/assets/template-2.png b/src/assets/template-2.png
diff --git a/src/assets/template-3.png b/src/assets/template-3.png
diff --git a/src/assets/template-4.png b/src/assets/template-4.png
diff --git a/src/assets/template-5.png b/src/assets/template-5.png
diff --git a/src/assets/template-6.png b/src/assets/template-6.png
diff --git a/src/assets/template-7.png b/src/assets/template-7.png
diff --git a/src/assets/template-8.png b/src/assets/template-8.png
diff --git a/src/component/AllFrameCpn/FrameList.jsx b/src/component/AllFrameCpn/FrameList.jsx
@@ -1,72 +1,72 @@
-import { useState, useEffect } from "react";
-import styles from "./FrameList.module.css";
-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] = useAtom(accessTokenAtom);
-  const axios = useAxios();
-
-  useEffect(() => {
-    // 액세스 토큰이 있을 때만 API 요청을 보내도록 조건 처리
-    if (accessToken) {
-      console.log("Framelist ACT:", accessToken); // accessToken jotai에서 잘 불러오는지 확인
-      const config = {
-        headers: {
-          Authorization: `Bearer ${accessToken}`, // 헤더에 accessToken을 추가
-        },
-      };
-      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);
-        });
-    }
-  }, [accessToken]); // useEffect가 실행되는 조건을 accessToken이 변경될 때로 설정
-
-  return (
-    <div className={styles.FrameList}>
-      <Link to="/makeframe">
-        <button className={styles.newFrame}>새 프레임 만들기</button>
-      </Link>
-      <div className={styles.FrameScroll}>
-        {frames.length === 0 ? ( // frames 배열이 비어 있는 경우
-          <div className={styles.InfoMsg}>
-            <h3>새 프레임을 추가해주세요</h3>
-          </div>
-        ) : (
-          // frames 배열에 프레임이 있는 경우
-          <ul className={styles.FrameUl}>
-            {frames.map((frame, index) => (
-              <li key={frame.id} className={styles.FrameItem}>
-                <Link to={"/applyframe"} state={{ selectedFrame: frame }}>
-                  <img
-                    key={index}
-                    src={frame}
-                    alt="frame"
-                    className={styles.FrameImage}
-                  />
-                </Link>
-              </li>
-            ))}
-          </ul>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default FrameList;
+import { useState, useEffect } from "react";
+import styles from "./FrameList.module.css";
+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] = useAtom(accessTokenAtom);
+  const axios = useAxios();
+
+  useEffect(() => {
+    // 액세스 토큰이 있을 때만 API 요청을 보내도록 조건 처리
+    if (accessToken) {
+      console.log("Framelist ACT:", accessToken); // accessToken jotai에서 잘 불러오는지 확인
+      const config = {
+        headers: {
+          Authorization: `Bearer ${accessToken}`, // 헤더에 accessToken을 추가
+        },
+      };
+      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);
+        })
+        .catch((err) => {
+          // 오류 처리
+          console.error("API 요청 중 오류 발생:", err);
+        });
+    }
+  }, [accessToken]);
+
+  return (
+    <div className={styles.FrameList}>
+      <Link to="/makeframe">
+        <button className={styles.newFrame}>새 프레임 만들기</button>
+      </Link>
+      <div className={styles.FrameScroll}>
+        {frames.length === 0 ? ( // frames 배열이 비어 있는 경우
+          <div className={styles.InfoMsg}>
+            <h3>새 프레임을 추가해주세요</h3>
+          </div>
+        ) : (
+          // frames 배열에 프레임이 있는 경우
+          <ul className={styles.FrameUl}>
+            {frames.map((frame, index) => (
+              <li key={frame.id} className={styles.FrameItem}>
+                <Link to={"/applyframe"} state={{ selectedFrame: frame }}>
+                  <img
+                    key={index}
+                    src={frame}
+                    alt="frame"
+                    className={styles.FrameImage}
+                  />
+                </Link>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default FrameList;