feat: 로컬 스토리지에 jwt토큰 존재할 경우 로그인, 회원가입, 로그아웃 버튼 조건부 렌더링

LikeLionHGU · Aug 3, 2024 · 826da09 · 826da09
1 parent 7ab3f46
commit 826da09
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 4 deletions.
diff --git a/src/components/Common/HeaderLightVer.jsx b/src/components/Common/HeaderLightVer.jsx
@@ -8,6 +8,7 @@ import LoginModal from "../MainPage/LoginModal";
 function HeaderLightVer() {
   const [isLoginModalOpen, setLoginModalOpen] = useState(false);
   const navigate = useNavigate();
+  const token = localStorage.getItem("jwtToken");
 
   const handleMenuClick = (url) => {
     navigate(url);
@@ -29,6 +30,8 @@ function HeaderLightVer() {
     navigate("/sign");
   };
 
+  const handleSignOutBtnClick = () => {};
+
   return (
     <Wrapper>
       <Menus>
@@ -44,8 +47,14 @@ function HeaderLightVer() {
         </Logo>
       </Menus>
       <SignInSection>
-        <SignIn onClick={toggleLoginModal}>로그인</SignIn>
-        <SignIn onClick={handleSignInClick}>회원가입</SignIn>
+        {!token ? (
+          <>
+            <SignIn onClick={toggleLoginModal}>로그인</SignIn>
+            <SignIn onClick={handleSignInClick}>회원가입</SignIn>
+          </>
+        ) : (
+          <SignOut onClick={handleSignOutBtnClick}>로그아웃</SignOut>
+        )}
       </SignInSection>
       {isLoginModalOpen && <LoginModal toggleModal={toggleLoginModal} />}
       <SearchSection>
@@ -138,3 +147,11 @@ const SignIn = styled.div`
   font-size: 14px;
   cursor: pointer;
 `;
+
+const SignOut = styled.div`
+  color: #1997fc;
+  font-size: 14px;
+  cursor: pointer;
+  /* border: 1px solid red; */
+  margin-left: 70px;
+`;
diff --git a/src/components/MainPage/HeaderMain.jsx b/src/components/MainPage/HeaderMain.jsx
@@ -8,6 +8,7 @@ import LoginModal from "./LoginModal";
 function HeaderMain() {
   const [isLoginModalOpen, setLoginModalOpen] = useState(false);
   const navigate = useNavigate();
+  const token = localStorage.getItem("jwtToken");
 
   const toggleLoginModal = () => {
     setLoginModalOpen((prevState) => !prevState);
@@ -17,6 +18,8 @@ function HeaderMain() {
     navigate("/sign");
   };
 
+  const handleSignOutBtnClick = () => {};
+
   useEffect(() => {
     document.body.style.overflow = isLoginModalOpen ? "hidden" : "auto";
   }, [isLoginModalOpen]);
@@ -44,8 +47,14 @@ function HeaderMain() {
         </Logo>
       </Menus>
       <SignInSection>
-        <SignIn onClick={toggleLoginModal}>로그인</SignIn>
-        <SignIn onClick={handleSignInClick}>회원가입</SignIn>
+        {!token ? (
+          <>
+            <SignIn onClick={toggleLoginModal}>로그인</SignIn>
+            <SignIn onClick={handleSignInClick}>회원가입</SignIn>
+          </>
+        ) : (
+          <SignOut onClick={handleSignOutBtnClick}>로그아웃</SignOut>
+        )}
       </SignInSection>
       {isLoginModalOpen && <LoginModal toggleModal={toggleLoginModal} />}
       <SearchSection>
@@ -131,10 +140,19 @@ const SignInSection = styled.div`
   top: 30%;
   transform: translateX(-50%);
   z-index: 1;
+  /* border: 1px solid red; */
 `;
 
 const SignIn = styled.div`
   color: #1997fc;
   font-size: 14px;
   cursor: pointer;
 `;
+
+const SignOut = styled.div`
+  color: #1997fc;
+  font-size: 14px;
+  cursor: pointer;
+  /* border: 1px solid red; */
+  margin-left: 70px;
+`;