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

feat: 로그아웃 및 로컬스토리지 구성
HaruDamda · Nov 21, 2023 · 2faa247 · 2faa247
2 parents 88da1e0 + 19e61ea
commit 2faa247
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 58 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -13,6 +13,9 @@ import {
 } 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";
 
 function App() {
   function setScreenSize() {

diff --git a/src/apis/emailCheck.js b/src/apis/emailCheck.js
@@ -1,8 +1,9 @@
 import axios from "axios";
 
 export const emailCheck = (formData, setFormData) => {
+
   axios
-    .post("api/users/idcheck", { email: formData.email })
+    .post(`http://ec2-3-35-208-177.ap-northeast-2.compute.amazonaws.com:8080/v2/api-docs/user/${formData.email}`)
     .then(() => {
       alert("사용할 수 있는 이메일입니다.");
     })

diff --git a/src/pages/Join/Join.jsx b/src/pages/Join/Join.jsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useNavigate, Link } from "react-router-dom";
 import { useState } from "react";
 import styles from "./Join.module.scss";
@@ -11,7 +9,6 @@ export default function SignUp() {
   const initialState = {
     email: "",
     nickname: "",
-    birth: "",
     password: "",
     passwordConfirm: "",
   };
@@ -23,7 +20,6 @@ export default function SignUp() {
   const [errorMessages, setErrorMessages] = useState({
     email: "",
     nickname: "",
-    birth: "",
     password: "",
     passwordConfirm: "",
   });
@@ -32,7 +28,6 @@ export default function SignUp() {
   const [isValid, setIsValid] = useState({
     email: false,
     nickname: false,
-    birth: false,
     password: false,
     passwordConfirm: false,
   });
@@ -193,7 +188,7 @@ export default function SignUp() {
               <span className={`message error`}>{errorMessages.email}</span>
             )}
           </div>
-          <div>
+          <div className={styles.boxWrapper}>
             <h5>닉네임</h5>
             <input
               className={
@@ -209,7 +204,7 @@ export default function SignUp() {
               <span className={`message error`}>{errorMessages.nickname}</span>
             )}
           </div>
-          <div>
+          <div className={styles.boxWrapper}>
             <h5>비밀번호</h5>
             <input
               name="password"
@@ -240,23 +235,7 @@ export default function SignUp() {
               </span>
             )}
           </div>
-          <div>
-            <h5>나이</h5>
-            <select
-              className={styles.ageScroll}
-              value={formData.birth || ""}
-              onChange={(e) =>
-                setFormData({ ...formData, birth: Number(e.target.value) })
-              }
-            >
-              <option value="">출생년도 입력(선택)</option>
-              {[...Array(87)].map((_, index) => (
-                <option key={index} value={2004 - index}>
-                  {2004 - index}
-                </option>
-              ))}
-            </select>
-          </div>
+
           <div className={styles.agreeForm1}>
             <div className={styles.allWrapper}>
               <input

diff --git a/src/pages/Join/Join.module.scss b/src/pages/Join/Join.module.scss
@@ -201,6 +201,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  overflow-y: scroll;
 }
 
 .signUpBox {
@@ -213,11 +214,10 @@
   // overflow: auto;
   flex-direction: column;
   // max-height: calc(100vh - 80px);
-  background-color: aliceblue;
   .header {
     width: 100vw;
     height: 10vh;
-    background-color: #eaeaea;
+    background-color: white;
     display: flex;
     align-items: center;
     justify-content: space-around;
@@ -246,60 +246,73 @@
   }
 }
 .body {
+  width: 86vw;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+
   span {
     margin: 10px auto;
   }
   h5 {
-    width: 100vw;
+    width: 86vw;
     text-align: left;
-    margin: 10px auto 0 11vw;
+    margin-top: 10px;
+    margin-bottom: 0;
     font-weight: 600;
     font-size: 14px;
     color: #888;
   }
   .emailWrapper {
     margin: 0;
-    width: 100vw;
-    background-color: #6ab5ff;
+    width: 86vw;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
   }
   .emailInputBox,
   .emailInputBox1 {
-    width: 40vw;
+    width: 57vw;
     height: 50px;
     min-height: 50px;
-    padding: 0px 12px;
+    padding: 0px 3vw;
     outline: none;
     background-color: transparent;
     border: 1px solid #e1e2e3;
     border-radius: 5px;
-    // margin: 8px auto;
+    margin: 8px 0;
     font-size: 16px;
     color: #333;
   }
   .emailCheck {
     cursor: pointer;
     display: inline-block;
-    // margin: 0 0 8px 12px;
+    margin: 0;
     outline: none;
     border: 1px solid #e1e2e3;
     font-size: 12px;
     border-radius: 5px;
     color: #333;
-    padding: 0px 12px;
+    background-color: #eaeaea;
+    // padding: 0px 3vw;
     height: 50px;
-    bottom: 2px;
+    width: 20vw;
   }
-  .inputBox,
-  .inputBox1,
-  .ageScroll {
-    width: 330px;
+  .boxWrapper {
+    margin: 0;
+    width: 86vw;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+  .inputBox, .inputBox1 {
+    width: 79.5vw;
     height: 50px;
     min-height: 50px;
-    padding: 0px 12px;
+    padding: 0px 3vw;
     outline: none;
     background-color: transparent;
     border: 1px solid #e1e2e3;
@@ -312,9 +325,8 @@
   .inputBox1 {
     border: 1px solid #fe415c;
   }
-  .emailCheck + span,
-  .inputBox1 + span {
-    width: 348px;
+  .emailWrapper + span, .inputBox1 + span {
+    width: 86vw;
     color: #fe415c;
     display: block;
     text-align: left;
@@ -323,16 +335,10 @@
     margin-bottom: 8px;
     margin-top: 0px;
   }
-  .ageScroll {
-    width: 356px;
-    padding: 0 8px;
-    color: #666;
-    margin-bottom: 20px;
-  }
 }
 .agreeForm1 {
   margin: 4px auto;
-  width: 430px;
+  width: 86vw;
   .allWrapper {
     width: 100%;
     display: flex;
@@ -359,7 +365,7 @@
 }
 .agreeForm2 {
   margin: 4px auto;
-  width: 430px;
+  width: 86vw;
   display: flex;
   justify-content: flex-start;
   align-items: center;

diff --git a/src/pages/Login/Login.jsx b/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 Login() {
+export default function Main() {
   return (
     <>
       <LoginForm />
@@ -69,6 +69,7 @@ function LoginForm() {
       .then((res) => {
         const accessToken = res.data;
         setAct(accessToken); // 액세스 토큰을 Jotai 상태에 업데이트
+				localStorage.setItem("accessToken", `${accessToken}`);
         router('/framelist');
       })
       .catch((err) => {

diff --git a/src/pages/Main/Main.jsx b/src/pages/Main/Main.jsx
@@ -1,15 +1,46 @@
 import styles from "./Main.module.scss";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import main_logo from "../../assets/main-logo.png";
+import { useAtom } from "jotai";
+import { accessTokenAtom } from "../../store/jotaiAtoms";
 
 export default function Login() {
+  const [accessToken, setAccessToken] = useAtom(accessTokenAtom);
+  const router = useNavigate();
+
+  const logout = () => {
+		if (confirm("정말 로그아웃 하시겠습니까?")) {
+			localStorage.removeItem("accessToken");
+			setAccessToken("");
+      router("/");
+		}
+  }
+
   return (
-    <>
+    <div className={styles.root}>
       <Link to="/login" className={styles.linkBtn_container}>
         <button className={styles.linkBtn}>
           <img src={main_logo} alt="main-logo" />
         </button>
       </Link>
-    </>
+      <button
+        className={styles.loginBtn}
+        onClick={() => router("/login")}
+      >
+        로그인
+      </button>
+      <button
+        className={styles.logoutBtn}
+        onClick={() => logout()}
+      >
+        로그아웃
+      </button>
+      <button
+        className={styles.frameBtn}
+        onClick={() => router("/framelist")}
+      >
+        프레임 만들기
+      </button>
+    </div>
   );
 }
diff --git a/src/pages/Main/Main.module.scss b/src/pages/Main/Main.module.scss
@@ -1,3 +1,10 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-items: center;
+  gap: 20px;
+}
 .linkBtn {
   width: 100%;
   height: 100%;
@@ -10,3 +17,17 @@
     display: inline-flex;
   }
 }
+button {
+  width: 50vw;
+  height: 46px;
+  background-color: #009EFF;
+  border: none;
+  border-radius: 50px;
+  color: white;
+  font-size: 14px;
+}
+.frameBtn {
+  background-color: #C4CAD4;
+  color: black;
+  font-weight: 500;
+}
diff --git a/src/store/jotaiAtoms.js b/src/store/jotaiAtoms.js
@@ -1,3 +1,8 @@
 import { atom } from 'jotai';
 
-export const accessTokenAtom = atom("");
+export const accessTokenAtom = atom(localStorage.getItem('accessToken') || '');
+
+export const updateToken = (newToken) => {
+  localStorage.setItem('accessToken', newToken);
+  accessTokenAtom[1](newToken);
+};