modern-agile-team · bluetree7878 · Dec 12, 2024 · Dec 4, 2024 · Dec 5, 2024 · Dec 5, 2024
@@ -76,5 +76,8 @@ jobs:
       # Docker Compose로 서비스 배포
       - name: Docker run
         run: |
+          if [ -n "$(docker images -f "dangling=true" -q)" ]; then
+            docker rmi $(docker images -f "dangling=true" -q)
+          fi
           docker compose -f /home/ubuntu/docker-compose.yml down
           docker compose -f /home/ubuntu/docker-compose.yml up -d --pull always
@@ -8,7 +8,7 @@
       href="https://cdn.jsdelivr.net/gh/fonts-archive/Maplestory/subsets/Maplestory-dynamic-subset.css"
       type="text/css"
     />
-    <link rel="icon" href="public/favicon.svg" />
+    <link rel="icon" href="/favicon.svg" />
     <title>CokoEdu</title>
   </head>
   <body>

@@ -1,23 +1,27 @@
 import api from './instance';
+import { getCookie } from '@utils/cookies';
+
+// 요청 인터셉터
 api.interceptors.request.use(config => {
-  //요청 성공 직전 호출
-  //헤더에 인가 토큰 부착
-  //로컬스토리지에 저장한다고 가정한다면
-  const accessToken: string | null = localStorage.getItem('Token');
-  if (accessToken !== null) {
+  // 쿠키에서 accessToken 가져오기
+  const accessToken: string | undefined = getCookie('accessToken');
+  if (accessToken) {
     config.headers.Authorization = `Bearer ${accessToken}`;
   }
 
   return config;
 });
+
+// 응답 인터셉터
 api.interceptors.response.use(
-  //http status가 200번대인 경우 호출
   response => {
+    // HTTP 상태 코드가 200번대인 경우
     console.log(response);
     return response;
   },
   error => {
+    // HTTP 상태 코드가 에러인 경우
     console.log(error);
-    //http status가 에러 코드인경우 실행
+    return Promise.reject(error);
   }
 );
@@ -1,16 +1,42 @@
+import { useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { getImageUrl } from '@utils/getImageUrl';
-import HeaderItem from '../ui/HeaderItem';
 import { HeaderBox } from './style';
+import * as S from '../ui/style';
+import HeaderItem from '../ui/HeaderItem';
 import Login from '@features/login/ui/Login';
-import { ProfileWrapper, ProfileIcon, HeaderIcon } from '../ui/style';
 import useModal from '@hooks/useModal';
 import useUserStore from '@/store/useUserStore';
+import useAuth from '@hooks/useAuth';
+import useDropdown from '@hooks/useDropdown';
+import useOutsideClick from '@hooks/useOutsideClick';
+import handleLogout from '@features/login/service/handleLogout';
 
 export default function Header() {
   const points: number = 2999999999;
   const lifePoints: number = 5;
+
+  const navigate = useNavigate();
   const { isShow, openModal, closeModal, Modal } = useModal();
   const { user } = useUserStore();
+  const { isLoggedIn } = useAuth();
+
+  const { isOpen, toggleDropdown, closeDropdown } = useDropdown();
+  const profileRef = useRef<HTMLDivElement>(null);
+
+  // DropdownMenu가 닫히지 않도록 ProfileWrapper를 제외 대상에 추가
+  const dropdownRef = useOutsideClick(closeDropdown, {
+    excludeRefs: [profileRef],
+  });
+
+  const handleProfileClick = () => {
+    if (isLoggedIn) {
+      toggleDropdown(); // 열림/닫힘 상태 변경
+    } else {
+      openModal(); // 로그인 모달 열기
+    }
+  };
+
   return (
     <HeaderBox>
       {user && (
@@ -27,14 +53,45 @@ export default function Header() {
           />
         </>
       )}
-      <ProfileWrapper onClick={openModal}>
-        <ProfileIcon src={getImageUrl('테두리.svg')} alt="프로필 테두리" />
-        <HeaderIcon src={getImageUrl('코코-프로필.svg')} alt="코코 프로필" />
-      </ProfileWrapper>
-      {/* Modal 컴포넌트 */}
-      <Modal isShow={isShow}>
-        <Login openModal={openModal} closeModal={closeModal} />
-      </Modal>
+      <S.ProfileWrapper ref={profileRef} onClick={handleProfileClick}>
+        <S.ProfileIcon src={getImageUrl('테두리.svg')} alt="프로필 테두리" />
+        <S.HeaderIcon src={getImageUrl('코코-프로필.svg')} alt="코코 프로필" />
+        {isLoggedIn && isOpen && (
+          <S.ProfileDropdownMenu
+            ref={dropdownRef}
+            onClick={e => e.stopPropagation()}
+          >
+            <S.UserNameText>유저이름</S.UserNameText>
+            <S.UserJoinDate>2024.11.19</S.UserJoinDate>
+            <S.UserInfoButton
+              $backgroundColor="#00FAFF;"
+              $boxShadow="0 2px #00E1EC;"
+              onClick={() => navigate('/profile')}
+            >
+              프로필
+            </S.UserInfoButton>
+            <S.UserInfoButton
+              $backgroundColor="#3DFF4A;"
+              $boxShadow="0 2px #00EB6A;"
+              onClick={() => navigate('/setting')}
+            >
+              설정
+            </S.UserInfoButton>
+            <S.UserInfoButton
+              $backgroundColor="#FF3F3D;"
+              $boxShadow="0 2px #EB0000;"
+              onClick={handleLogout}
+            >
+              로그아웃
+            </S.UserInfoButton>
+          </S.ProfileDropdownMenu>
+        )}
+      </S.ProfileWrapper>
+      {!isLoggedIn && (
+        <Modal isShow={isShow}>
+          <Login openModal={openModal} closeModal={closeModal} />
+        </Modal>
+      )}
     </HeaderBox>
   );
 }
@@ -20,6 +20,7 @@ export const HeaderBox = styled.header`
   height: 42px;
   position: fixed;
   padding-right: 20px;
+  z-index: 1;
 `;
 
 export const LogoBoxWrapper = styled.div`
@@ -42,4 +43,5 @@ export const OverRay = styled.div`
   width: 100vw;
   height: 100vh;
   background-color: rgba(0, 0, 0, 0.2);
+  z-index: 100;
 `;
@@ -1,19 +1,12 @@
-import styled from 'styled-components';
+import styled, { keyframes } from 'styled-components';
 import { Link } from 'react-router-dom';
 
-interface SectionButtonProps {
-  $backgroundImage: string;
+interface UserInfoButtonProps {
+  $backgroundColor: string;
+  $boxShadow: string;
 }
 
-interface MenuButtonProps {
-  $activeStyle: boolean;
-}
-
-interface IconWrapperProps {
-  $color: string;
-}
-
-export const SectionButton = styled.button<SectionButtonProps>`
+export const SectionButton = styled.button<{ $backgroundImage: string }>`
   width: 100px;
   height: 75px;
   margin-top: 75px;
@@ -31,7 +24,7 @@ export const MenuButtonWrapper = styled.nav`
   display: inline-block;
 `;
 
-export const MenuButton = styled.button<MenuButtonProps>`
+export const MenuButton = styled.button<{ $activeStyle: boolean }>`
   width: 193px;
   height: 42px;
   font-size: 15px;
@@ -58,7 +51,7 @@ export const MenuIcon = styled.img`
   height: 26px;
 `;
 
-export const IconWrapper = styled.div<IconWrapperProps>`
+export const IconWrapper = styled.div<{ $color: string }>`
   display: flex;
   align-items: center;
   margin-right: 16px;
@@ -90,3 +83,65 @@ export const LogoImg = styled.img`
   width: 147px;
   height: 117px;
 `;
+
+// DropdownMenu 열릴 때 애니메이션
+const slideIn = keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+
+export const ProfileDropdownMenu = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  margin-top: 3px;
+  right: 0;
+  cursor: default;
+  width: 200px;
+  height: 200px;
+  background-color: #fff;
+  border-radius: 15px;
+  border: 3px solid #ffb53d;
+  animation: ${slideIn} 0.3s ease-out;
+`;
+
+export const UserNameText = styled.p`
+  color: #000;
+  font-size: 18px;
+  text-align: center;
+  font-weight: 700;
+`;
+
+export const UserJoinDate = styled.p`
+  font-weight: 300;
+  color: #cbcbcb;
+  font-size: 12px;
+`;
+
+export const UserInfoButton = styled.button<UserInfoButtonProps>`
+  width: 80%;
+  height: 30px;
+  margin-top: 12px;
+  border: none;
+  background-color: ${({ $backgroundColor }) => $backgroundColor};
+  box-shadow: ${({ $boxShadow }) => $boxShadow};
+  text-align: center;
+  font-size: 17px;
+  font-weight: 700;
+  color: #ffffff;
+  border-radius: 6px;
+  text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
+  &:hover {
+    transform: translateY(-2px);
+    transition: background-color 0.2s ease, transform 0.2s ease, color 0.2s ease,
+      box-shadow 0.2s ease;
+  }
+`;
@@ -0,0 +1,23 @@
+// import { setCookie } from '@utils/cookies';
+
+const BASE_URL = import.meta.env.VITE_BASE_URL;
+
+const handleLogin = (provider: 'google' | 'kakao' | 'github') => {
+  const redirectUrl = `${BASE_URL}/auth/${provider}`;
+  window.location.href = redirectUrl;
+
+  // 테스트용 accessToken 및 refreshToken 생성 및 쿠키에 저장 (실제 Service에 배포할 때는 주석 달거나 삭제)
+  // const fakeAccessToken = 'test.access.token';
+  // const fakeRefreshToken = 'test.refresh.token';
+
+  // setCookie('accessToken', fakeAccessToken, { path: '/', maxAge: 3600 }); // 1시간 유효
+  // setCookie('refreshToken', fakeRefreshToken, {
+  //   path: '/',
+  //   maxAge: 3600 * 24 * 30,
+  // }); // 30일 유효
+
+  // alert('AccessToken 생성 완료: ' + fakeAccessToken);
+  // alert('RefreshToken 생성 완료: ' + fakeRefreshToken);
+};
+
+export default handleLogin;
@@ -0,0 +1,9 @@
+import { removeCookie } from '@utils/cookies';
+
+const handleLogout = () => {
+  removeCookie('accessToken');
+  removeCookie('refreshToken');
+  window.location.reload(); // 로그아웃 후 새로고침
+};
+
+export default handleLogout;
@@ -1,5 +1,4 @@
 import styled, { keyframes } from 'styled-components';
-import { getImageUrl } from './../../utils/getImageUrl';
 
 interface SocialLoginLinkProps {
   $color: string;

@@ -8,7 +8,7 @@ import {
   DashLineHr,
 } from '../styles';
 import { LogoImg } from '@common/ui/style';
-import handleSocialLogin from '../service/handleSocialLogin';
+import handleLogin from '../service/handleLogin';
 
 interface LoginProps {
   openModal: () => void;
@@ -28,23 +28,23 @@ export default function Login({ closeModal }: LoginProps) {
         <SocialLoginButton
           $color="#000000"
           $backgroundColor="#ffffff"
-          onClick={() => handleSocialLogin('google')}
+          onClick={() => handleLogin('google')}
         >
           <img src={getImageUrl('구글.svg')} alt="구글 로그인" />
           Google 로그인
         </SocialLoginButton>
         <SocialLoginButton
           $color="#000000"
           $backgroundColor="#FEE500"
-          onClick={() => handleSocialLogin('kakao')}
+          onClick={() => handleLogin('kakao')}
         >
           <img src={getImageUrl('카카오.svg')} alt="카카오 로그인" />
           Kakao 로그인
         </SocialLoginButton>
         <SocialLoginButton
           $color="#ffffff"
           $backgroundColor="#000000"
-          onClick={() => handleSocialLogin('github')}
+          onClick={() => handleLogin('github')}
         >
           <img src={getImageUrl('깃허브.svg')} alt="깃허브 로그인" />
           GitHub 로그인