From 9984b1cd9078f6dbafd8e91732947eca1c5dd1d2 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: Wed, 1 Nov 2023 00:02:35 +0900
Subject: [PATCH 1/3] =?UTF-8?q?Feat:=20=ED=81=B4=EB=A6=BD=EB=B3=B4?=
 =?UTF-8?q?=EB=93=9C=20=EB=B0=8F=20=EB=A9=94=EC=9D=BC=20=EC=95=84=EC=9D=B4?=
 =?UTF-8?q?=EC=BD=98=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/@types/icon.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/@types/icon.ts b/src/@types/icon.ts
index bf62a726..1d263965 100644
--- a/src/@types/icon.ts
+++ b/src/@types/icon.ts
@@ -14,4 +14,6 @@ export type IconKind =
   | 'modify'
   | 'setting'
   | 'cancel'
-  | 'shortcut';
+  | 'shortcut'
+  | 'message'
+  | 'mail';

From 482677327eced85b47f5742afdb168229e4d896c 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: Wed, 1 Nov 2023 00:03:38 +0900
Subject: [PATCH 2/3] =?UTF-8?q?Feat:=20=EC=95=84=EC=9D=B4=EC=BD=98=20?=
 =?UTF-8?q?=ED=83=80=EC=9E=85=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Icon/index.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
index f9d7962d..3ffeb8d0 100644
--- a/src/components/Icon/index.tsx
+++ b/src/components/Icon/index.tsx
@@ -17,6 +17,8 @@ import {
   MdCancel,
   MdIndeterminateCheckBox,
   MdOutlineShortcut,
+  MdMessage,
+  MdEmail,
 } from 'react-icons/md';
 import { MouseEventHandler } from 'react';
 
@@ -37,6 +39,8 @@ const ICON: { [key in IconKind]: IconType } = {
   cancel: MdCancel,
   disqualification: MdIndeterminateCheckBox,
   shortcut: MdOutlineShortcut,
+  message: MdMessage,
+  mail: MdEmail,
 };
 
 interface IconProps {

From cefea24f3928372c779ee634628457c2ed8bcc20 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: Wed, 1 Nov 2023 00:04:01 +0900
Subject: [PATCH 3/3] =?UTF-8?q?Feat:=20=ED=81=B4=EB=A6=BD=EB=B3=B4?=
 =?UTF-8?q?=EB=93=9C=20=EB=B3=B5=EC=82=AC=20=EA=B8=B0=EB=8A=A5=20=EB=B0=8F?=
 =?UTF-8?q?=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Header/Header.tsx | 96 ++++++++++++++++++++++++--------
 1 file changed, 72 insertions(+), 24 deletions(-)

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 17e176fa..fec0aa2c 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -37,32 +37,51 @@ const Header = () => {
       Cookies.remove('refreshToken');
 
       router.push('/');
-    } catch (error) {}
+    } catch (error) {
+      alert('로그아웃에 실패하였습니다.\n다시 시도해주세요');
+    }
+  };
+
+  const copyInviteCode = async () => {
+    const { channelLink } = router.query;
+    try {
+      await navigator.clipboard.writeText(channelLink as string);
+      alert('클립보드에 초대링크가 복사되었습니다.');
+    } catch (e) {
+      alert('복사에 실패하였습니다. 다시 시도해주세요');
+    }
   };
 
   return (
     <Headers>
       <Container>
-        {profileContext?.profile ? (
-          <LoginBtn onClick={handleDropDown}>
-            <ProfileImg
-              src={profileContext.profile.profileUrl}
-              width={24}
-              height={24}
-              alt='profile'
-            />
-            <Text>{profileContext.profile.nickname}</Text>
-            <DropDown click={clickDropdown}>
-              <DropList onClick={moveToMypage}>마이페이지</DropList>
-              <DropList onClick={handleLogout}>로그아웃</DropList>
-            </DropDown>
-          </LoginBtn>
-        ) : (
-          <LoginBtn onClick={handleLink}>
-            <Icon kind='my' color='white' size={24} />
-            <Text>로그인</Text>
-          </LoginBtn>
-        )}
+        <ContentsWrapper>
+          <Content onClick={copyInviteCode}>
+            <ContentText>초대코드</ContentText>
+            <Icon kind='mail' size={20} />
+          </Content>
+          <Content>
+            <ContentText>문의</ContentText>
+            <Icon kind='message' size={20} />
+          </Content>
+        </ContentsWrapper>
+        <MyInfo>
+          {profileContext?.profile && (
+            <LoginBtn onClick={handleDropDown}>
+              <ProfileImg
+                src={profileContext.profile.profileUrl}
+                width={24}
+                height={24}
+                alt='profile'
+              />
+              <Text>{profileContext.profile.nickname}</Text>
+              <DropDown click={clickDropdown}>
+                <DropList onClick={moveToMypage}>마이페이지</DropList>
+                <DropList onClick={handleLogout}>로그아웃</DropList>
+              </DropDown>
+            </LoginBtn>
+          )}
+        </MyInfo>
       </Container>
     </Headers>
   );
@@ -72,22 +91,51 @@ export default Header;
 
 const Headers = styled.header`
   width: calc(100% - 5rem);
+
   margin: 0 2.5rem;
-  background-color: #f1f1f1;
 
+  background-color: #f1f1f1;
   border-radius: 0 0 16px 16px;
 `;
 
 const Container = styled.div`
   width: 95%;
   height: 5.5rem;
+
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+const ContentsWrapper = styled.div`
   display: flex;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: center;
+`;
+
+const Content = styled.button`
+  height: 3.6rem;
+  border: none;
 
-  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 1rem;
+  padding: 0 1rem;
+
+  background-color: #ffffff;
+  border-radius: 10px;
+  font-size: 1.4rem;
+  cursor: pointer;
 `;
 
+const ContentText = styled.span`
+  margin-right: 1rem;
+`;
+
+const MyInfo = styled.div``;
+
 const ProfileImg = styled(Image)`
   border-radius: 50%;
 `;