Merge pull request #147 from boostcampwm2023/chore/142-login-additional

[chore] 로그인 유지 박스 기능 추가, 회원가입 클릭 시 뷰 전환
boostcampwm2023 · Nov 27, 2023 · 265c224 · 265c224
2 parents 3e64165 + dc59e3a
commit 265c224
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 4 deletions.
diff --git a/FE/src/App.js b/FE/src/App.js
@@ -38,7 +38,8 @@ function App() {
   const [userState, setUserState] = useRecoilState(userAtom);
 
   useLayoutEffect(() => {
-    const accessToken = localStorage.getItem("accessToken");
+    let accessToken = localStorage.getItem("accessToken");
+    accessToken = accessToken || sessionStorage.getItem("accessToken");
     if (accessToken) {
       setUserState({ ...userState, isLogin: true, accessToken });
     }

diff --git a/FE/src/components/LoginModal/LoginModal.js b/FE/src/components/LoginModal/LoginModal.js
@@ -14,6 +14,7 @@ import naver from "../../assets/naver.png";
 
 function LoginModal() {
   const [userId, setUserId] = useState("");
+  const [keepLogin, setKeepLogin] = useState(false);
   const [password, setPassword] = useState("");
   const setUserState = useSetRecoilState(userAtom);
   const setHeaderState = useSetRecoilState(headerAtom);
@@ -40,7 +41,11 @@ function LoginModal() {
             isLogin: true,
             accessToken: data.accessToken,
           }));
-          localStorage.setItem("accessToken", data.accessToken);
+          if (keepLogin) {
+            localStorage.setItem("accessToken", data.accessToken);
+          } else {
+            sessionStorage.setItem("accessToken", data.accessToken);
+          }
         } else {
           errorRef.current.innerText = data.message;
         }
@@ -87,7 +92,11 @@ function LoginModal() {
             onChange={(e) => setPassword(e.target.value)}
           />
           <CheckBar>
-            <input type='checkbox' />
+            <input
+              type='checkbox'
+              checked={keepLogin}
+              onChange={setKeepLogin}
+            />
             <div>로그인 유지</div>
           </CheckBar>
         </InputBar>
@@ -97,7 +106,15 @@ function LoginModal() {
             로그인
           </ModalButton>
         </ModalButtonContainer>
-        <HelpBar>
+        <HelpBar
+          onClick={() => {
+            setHeaderState((prev) => ({
+              ...prev,
+              isLogin: false,
+              isSignUp: true,
+            }));
+          }}
+        >
           <div>회원가입</div>
           <HelpBarBorder />
           <div>아이디/비밀번호 찾기</div>
@@ -165,6 +182,8 @@ const HelpBar = styled.div`
 
   font-size: 1rem;
   color: #ffffff;
+
+  cursor: pointer;
 `;
 
 const HelpBarBorder = styled.div`

diff --git a/FE/src/components/SideBar/SideBar.js b/FE/src/components/SideBar/SideBar.js
@@ -62,6 +62,7 @@ function SideBar() {
               accessToken: "",
             }));
             localStorage.removeItem("accessToken");
+            sessionStorage.removeItem("accessToken");
           }}
         >
           로그아웃