feat: 헤더에 로그인 버튼 추가

Author: 1g2g

src/components/Header/Header.style.ts

@@ -71,10 +71,10 @@ export const Title = styled.div`
   text-align: center;
 `;
 
-export const RightSideContainer = styled.div`
+export const RightSideContainer = styled.div<{ isLogin?: boolean }>`
   width: 5.5rem;
   ${({ theme }) => theme.STYLES.FLEX_JUSTIFY_CENTER}
-  justify-content: space-between;
+  justify-content:${({ isLogin }) => (isLogin ? 'flex-end' : 'space-between')};
 
   &.invisible {
     visibility: hidden;

src/components/Header/Header.tsx

@@ -1,4 +1,9 @@
-import { useNavigate } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+
+import { Button } from '@components/shared/Button';
+
+import { theme } from '@styles/theme';
 
 import bellIcon from '@assets/bell.svg';
 import leftArrowIcon from '@assets/leftArrow.svg';
@@ -52,6 +57,28 @@ export const Header = ({
     navigate('/all-services');
   };
 
+  const handleLoginClick = () => {
+    navigate('/login');
+  };
+
+  const url = useParams();
+  const [isLogin, setIsLogin] = useState(false);
+  useEffect(() => {
+    const loginInfo = localStorage.getItem('LOGIN_INFO');
+
+    if (!loginInfo) {
+      setIsLogin(false);
+    } else {
+      const { refreshToken } = JSON.parse(loginInfo);
+
+      if (!refreshToken) {
+        setIsLogin(false);
+      } else {
+        setIsLogin(true);
+      }
+    }
+  }, [url]);
+
   return (
     <>
       <HeaderBackground>
@@ -70,23 +97,43 @@ export const Header = ({
             </BackwardWrapper>
           )}
           {title === '' ? <></> : <Title>{title}</Title>}
-          <RightSideContainer className={isRightContainer ? '' : 'invisible'}>
-            <RightSideIconWrapper>
-              <RightSideIcon onClick={() => handleSearchIconClick()}>
-                <img src={searchIcon} alt="" />
-              </RightSideIcon>
-            </RightSideIconWrapper>
-            <RightSideIconWrapper>
-              <RightSideIcon onClick={() => handleBellIconClick()}>
-                <img src={bellIcon} alt="" />
-              </RightSideIcon>
-            </RightSideIconWrapper>
-            <RightSideIconWrapper>
-              <RightSideIcon onClick={() => handleProfileIconClick()}>
-                <img src={profileIcon} alt="" />
-              </RightSideIcon>
-            </RightSideIconWrapper>
-          </RightSideContainer>
+          {isLogin ? (
+            <RightSideContainer className={isRightContainer ? '' : 'invisible'}>
+              <RightSideIconWrapper>
+                <RightSideIcon onClick={() => handleSearchIconClick()}>
+                  <img src={searchIcon} alt="" />
+                </RightSideIcon>
+              </RightSideIconWrapper>
+              <RightSideIconWrapper>
+                <RightSideIcon onClick={() => handleBellIconClick()}>
+                  <img src={bellIcon} alt="" />
+                </RightSideIcon>
+              </RightSideIconWrapper>
+              <RightSideIconWrapper>
+                <RightSideIcon onClick={() => handleProfileIconClick()}>
+                  <img src={profileIcon} alt="" />
+                </RightSideIcon>
+              </RightSideIconWrapper>
+            </RightSideContainer>
+          ) : (
+            <RightSideContainer
+              className={isRightContainer ? '' : 'invisible'}
+              isLogin={true}
+            >
+              <Button
+                width="60px"
+                height="24px"
+                fontWeight={300}
+                textColor={theme.PALETTE.GRAY_600}
+                fontSize={theme.FONT_SIZE.XS}
+                backgroundColor="white"
+                borderColor={theme.PALETTE.GRAY_600}
+                onClick={handleLoginClick}
+              >
+                로그인
+              </Button>
+            </RightSideContainer>
+          )}
         </HeaderContainer>
       </HeaderBackground>
     </>

src/pages/LoginPage/LoginPage.tsx

@@ -17,12 +17,7 @@ const LOGIN_MAIN =
   'https://github.com/Java-and-Script/pickple-front/assets/87280835/1134921d-2e91-4b47-b99a-4095c91f0a6d';
 
 export const LoginPage = () => {
-  // const KAKAO_REST_API_KEY = import.meta.env.VITE_KAKAO_REST_API_KEY;
-  // const KAKAO_REDIRECT_URI = import.meta.env.VITE_KAKAO_REDIRECT_URI;
-
   const onClickKakaoLogin = async () => {
-    // await fetch('https://dev.pickple.kr/auth/kakao');
-    // window.location.href = `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${KAKAO_REST_API_KEY}&redirect_uri=${KAKAO_REDIRECT_URI}`;
     getAuthRedirect({ oauthProvider: 'KAKAO' });
   };
 
@@ -42,7 +37,7 @@ export const LoginPage = () => {
           width="100%"
           height="auto"
           alt="kakao login"
-          onClick={() => onClickKakaoLogin()}
+          onClick={onClickKakaoLogin}
         />
       </Main>
     </LoginContainer>