From f30db9f22ed317c1c9212a0bc0051b51d2b3720d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=87=E1=85=A1=E1=86=A8=E1=84=8C=E1=85=A5=E1=86=BC?=
 =?UTF-8?q?=E1=84=89=E1=85=A5=E1=86=A8?= <wjdtjr8649@Naver.com>
Date: Sun, 10 Sep 2023 18:30:07 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=20=ED=97=A4=EB=8D=94=20=EB=93=9C=EB=A1=AD?=
 =?UTF-8?q?=EB=8B=A4=EC=9A=B4=20=EB=A9=94=EB=89=B4=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Header/Header.tsx | 60 ++++++++++++++++++++++++++++++--
 1 file changed, 58 insertions(+), 2 deletions(-)

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 007e352..51f48e6 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -2,15 +2,19 @@ import { useRouter } from 'next/router';
 import styled from '@emotion/styled';
 
 import Icon from '@components/Icon';
-import { useContext } from 'react';
+import { useContext, useState } from 'react';
 import Image from 'next/image';
 import ProfileContext from '@contexts/ProfileContext';
+import authAPI from '@apis/authAPI';
+import Cookies from 'js-cookie';
 
 const Header = () => {
   const router = useRouter();
 
   const profileContext = useContext(ProfileContext);
 
+  const [clickDropdown, setClickDropdown] = useState<boolean>(false);
+
   // 로그인을 누른 url 저장
   const handleLink = () => {
     if (!router.asPath.includes('login?callback=')) {
@@ -18,11 +22,29 @@ const Header = () => {
     }
   };
 
+  const handleDropDown = () => {
+    setClickDropdown((prev) => !prev);
+  };
+
+  const moveToMypage = () => {
+    router.push('/mypage');
+  };
+
+  const handleLogout = async () => {
+    try {
+      const res = await authAPI({ method: 'post', url: '/api/member/logout' });
+      Cookies.remove('accessToken');
+      Cookies.remove('refreshToken');
+
+      router.push('/');
+    } catch (error) {}
+  };
+
   return (
     <Headers>
       <Container>
         {profileContext?.profile ? (
-          <LoginBtn onClick={handleLink}>
+          <LoginBtn onClick={handleDropDown}>
             <ProfileImg
               src={profileContext.profile.profileUrl}
               width={24}
@@ -30,6 +52,10 @@ const Header = () => {
               alt='profile'
             />
             <Text>{profileContext.profile.nickname}</Text>
+            <DropDown click={clickDropdown}>
+              <DropList onClick={moveToMypage}>마이페이지</DropList>
+              <DropList onClick={handleLogout}>로그아웃</DropList>
+            </DropDown>
           </LoginBtn>
         ) : (
           <LoginBtn onClick={handleLink}>
@@ -56,6 +82,8 @@ const Container = styled.div`
   display: flex;
   align-items: center;
   justify-content: flex-end;
+
+  position: relative;
 `;
 
 const ProfileImg = styled(Image)`
@@ -78,3 +106,31 @@ const Text = styled.div`
   font-size: 1.4rem;
   font-weight: 900;
 `;
+
+const DropDown = styled.ul<{ click: boolean }>`
+  position: absolute;
+
+  display: ${(prop) => (prop.click ? 'block' : 'none')};
+
+  width: 10rem;
+
+  top: 5.5rem;
+  right: 0rem;
+
+  color: black;
+`;
+
+const DropList = styled.li`
+  list-style: none;
+
+  align-items: center;
+  justify-content: center;
+
+  display: flex;
+
+  background-color: #344051;
+  color: white;
+
+  height: 4rem;
+  border: 1px solid black;
+`;