From 53c8cc1bbb7459f3b54a50cfacfcd98839176c7a Mon Sep 17 00:00:00 2001
From: HeoJiye <heoze1031@gmail.com>
Date: Tue, 14 Nov 2023 15:51:57 +0900
Subject: [PATCH 1/9] =?UTF-8?q?feature/#831-test:=20Header=20story=20?=
 =?UTF-8?q?=ED=8C=8C=EC=9D=BC=20=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/stories/Header.stories.tsx | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100644 frontend/src/stories/Header.stories.tsx

diff --git a/frontend/src/stories/Header.stories.tsx b/frontend/src/stories/Header.stories.tsx
new file mode 100644
index 00000000..290715bf
--- /dev/null
+++ b/frontend/src/stories/Header.stories.tsx
@@ -0,0 +1,23 @@
+import { Icon } from '@iconify/react';
+import type { Meta, StoryObj } from '@storybook/react';
+import Header from '@components/Header';
+
+const meta = {
+  title: 'components/Header',
+  component: Header,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Header>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const AIChatHeader: Story = {
+  args: { rightItems: [<Icon icon="octicon:sidebar-expand-24" />] }
+};
+
+export const HumanChatHeader: Story = {
+  args: { rightItems: [<Icon icon="basil:chat-outline" />]}
+};

From 9566b007953371055fec9f285da707821f12cd67 Mon Sep 17 00:00:00 2001
From: HeoJiye <heoze1031@gmail.com>
Date: Tue, 14 Nov 2023 15:58:09 +0900
Subject: [PATCH 2/9] =?UTF-8?q?feature/#31-feat:=20Header=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=ED=8B=80=EB=A7=8C=20=EC=9E=91?=
 =?UTF-8?q?=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Header/Header.tsx      | 15 +++++++++++++++
 frontend/src/components/Header/HeaderLeft.tsx  |  3 +++
 frontend/src/components/Header/HeaderRight.tsx |  7 +++++++
 frontend/src/components/Header/index.ts        |  1 +
 4 files changed, 26 insertions(+)
 create mode 100644 frontend/src/components/Header/Header.tsx
 create mode 100644 frontend/src/components/Header/HeaderLeft.tsx
 create mode 100644 frontend/src/components/Header/HeaderRight.tsx
 create mode 100644 frontend/src/components/Header/index.ts

diff --git a/frontend/src/components/Header/Header.tsx b/frontend/src/components/Header/Header.tsx
new file mode 100644
index 00000000..8f093bb0
--- /dev/null
+++ b/frontend/src/components/Header/Header.tsx
@@ -0,0 +1,15 @@
+import HeaderLeft from "./HeaderLeft";
+import HeaderRight from "./HeaderRight";
+
+interface HeaderProps {
+  rightItems: React.ReactNode[];
+}
+
+export default function Header(props: HeaderProps) {
+  return (
+    <div className="flex">
+      <HeaderLeft />
+      <HeaderRight items={props.rightItems} />
+    </div>
+  );
+};
diff --git a/frontend/src/components/Header/HeaderLeft.tsx b/frontend/src/components/Header/HeaderLeft.tsx
new file mode 100644
index 00000000..0162dd15
--- /dev/null
+++ b/frontend/src/components/Header/HeaderLeft.tsx
@@ -0,0 +1,3 @@
+export default function HeaderLeft() {
+  return <div>마법의 소라고둥</div>;
+};
diff --git a/frontend/src/components/Header/HeaderRight.tsx b/frontend/src/components/Header/HeaderRight.tsx
new file mode 100644
index 00000000..cf2b2cb1
--- /dev/null
+++ b/frontend/src/components/Header/HeaderRight.tsx
@@ -0,0 +1,7 @@
+interface HeaderRightProps {
+  items: React.ReactNode[];
+}
+
+export default function HeaderRight(props: HeaderRightProps) {
+  return <div>{props.items}</div>;
+};
diff --git a/frontend/src/components/Header/index.ts b/frontend/src/components/Header/index.ts
new file mode 100644
index 00000000..579f1ac2
--- /dev/null
+++ b/frontend/src/components/Header/index.ts
@@ -0,0 +1 @@
+export { default } from './Header';

From 20b0f1216df17816a040ed70dc89b52a8ddc4870 Mon Sep 17 00:00:00 2001
From: HeoJiye <heoze1031@gmail.com>
Date: Tue, 14 Nov 2023 16:11:47 +0900
Subject: [PATCH 3/9] =?UTF-8?q?feature/#31-chore:=20storybook=20tailwind?=
 =?UTF-8?q?=20css=20=EC=97=B0=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/.storybook/preview.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/.storybook/preview.ts b/frontend/.storybook/preview.ts
index 817ac3ce..e7caa123 100644
--- a/frontend/.storybook/preview.ts
+++ b/frontend/.storybook/preview.ts
@@ -1,5 +1,7 @@
 import type { Preview } from '@storybook/react';
 
+import '../src/tailwind.css'; 
+
 const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },

From 0536041896d07d1b7bd365e2c8161142b1a6a311 Mon Sep 17 00:00:00 2001
From: HeoJiye <heoze1031@gmail.com>
Date: Tue, 14 Nov 2023 16:25:08 +0900
Subject: [PATCH 4/9] =?UTF-8?q?feature/#31-feat:=20Header=20=EB=A0=88?=
 =?UTF-8?q?=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Header/Header.tsx     | 2 +-
 frontend/src/components/Header/HeaderLeft.tsx | 2 +-
 frontend/src/stories/Header.stories.tsx       | 7 +++++++
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Header/Header.tsx b/frontend/src/components/Header/Header.tsx
index 8f093bb0..6033cc11 100644
--- a/frontend/src/components/Header/Header.tsx
+++ b/frontend/src/components/Header/Header.tsx
@@ -7,7 +7,7 @@ interface HeaderProps {
 
 export default function Header(props: HeaderProps) {
   return (
-    <div className="flex">
+    <div className="flex justify-between items-center surface-content text-default pr-[28px] pl-[28px] pt-[12px] pb-[12px]">
       <HeaderLeft />
       <HeaderRight items={props.rightItems} />
     </div>
diff --git a/frontend/src/components/Header/HeaderLeft.tsx b/frontend/src/components/Header/HeaderLeft.tsx
index 0162dd15..b466a67f 100644
--- a/frontend/src/components/Header/HeaderLeft.tsx
+++ b/frontend/src/components/Header/HeaderLeft.tsx
@@ -1,3 +1,3 @@
 export default function HeaderLeft() {
-  return <div>마법의 소라고둥</div>;
+  return <div className="display-bold16">마법의 소라고둥</div>;
 };
diff --git a/frontend/src/stories/Header.stories.tsx b/frontend/src/stories/Header.stories.tsx
index 290715bf..59039f56 100644
--- a/frontend/src/stories/Header.stories.tsx
+++ b/frontend/src/stories/Header.stories.tsx
@@ -7,7 +7,14 @@ const meta = {
   component: Header,
   parameters: {
     layout: 'fullscreen',
+    backgrounds: {
+      default: 'colored',
+      values: [
+        { name: 'colored', value: '#181818' },
+      ],
+    },
   },
+
   tags: ['autodocs'],
 } satisfies Meta<typeof Header>;
 

From 161a05e77504e52aecb8eb59e98f92c2964e6b0a Mon Sep 17 00:00:00 2001
From: HeoJiye <heoze1031@gmail.com>
Date: Tue, 14 Nov 2023 17:05:00 +0900
Subject: [PATCH 5/9] =?UTF-8?q?chore:=20=EC=9E=84=EC=8B=9C=20=EB=A1=9C?=
 =?UTF-8?q?=EA=B3=A0=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Header/HeaderLeft.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/Header/HeaderLeft.tsx b/frontend/src/components/Header/HeaderLeft.tsx
index b466a67f..24ba4245 100644
--- a/frontend/src/components/Header/HeaderLeft.tsx
+++ b/frontend/src/components/Header/HeaderLeft.tsx
@@ -1,3 +1,3 @@
 export default function HeaderLeft() {
-  return <div className="display-bold16">마법의 소라고둥</div>;
+  return <div></div>;
 };

From 60900d35bbb510f4ec8e8991fb39b6915b5564ad Mon Sep 17 00:00:00 2001
From: HeoJiye <heoze1031@gmail.com>
Date: Tue, 14 Nov 2023 17:05:53 +0900
Subject: [PATCH 6/9] =?UTF-8?q?test:=20Header=20story=20rightItem=EC=97=90?=
 =?UTF-8?q?=20Button=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/stories/Header.stories.tsx | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/frontend/src/stories/Header.stories.tsx b/frontend/src/stories/Header.stories.tsx
index 59039f56..ee680f1f 100644
--- a/frontend/src/stories/Header.stories.tsx
+++ b/frontend/src/stories/Header.stories.tsx
@@ -1,6 +1,9 @@
-import { Icon } from '@iconify/react';
 import type { Meta, StoryObj } from '@storybook/react';
+
+import { Icon } from '@iconify/react';
+
 import Header from '@components/Header';
+import CustomButton from '@components/CustomButton';
 
 const meta = {
   title: 'components/Header',
@@ -22,9 +25,23 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const AIChatHeader: Story = {
-  args: { rightItems: [<Icon icon="octicon:sidebar-expand-24" />] }
+  args: {
+  rightItems: [
+    <CustomButton color="transparent" size="s">
+      <Icon icon="octicon:sidebar-expand-24" />
+    </CustomButton>
+  ]}
 };
 
 export const HumanChatHeader: Story = {
-  args: { rightItems: [<Icon icon="basil:chat-outline" />]}
+  args: {
+  rightItems: [
+    <CustomButton color="active" size="s">
+      상담 종료
+    </CustomButton>
+    ,
+    <CustomButton color="transparent" size="s">
+      <Icon icon="basil:chat-outline" />
+    </CustomButton>
+  ]}
 };

From fe807e1e85558d84a4fd0726ee6a310a2840bcf4 Mon Sep 17 00:00:00 2001
From: HeoJiye <heoze1031@gmail.com>
Date: Tue, 14 Nov 2023 17:06:29 +0900
Subject: [PATCH 7/9] =?UTF-8?q?feat:=20Header=20rightItems=20=EC=82=AC?=
 =?UTF-8?q?=EC=9D=B4=20gap=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Header/HeaderRight.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/Header/HeaderRight.tsx b/frontend/src/components/Header/HeaderRight.tsx
index cf2b2cb1..fb6f317f 100644
--- a/frontend/src/components/Header/HeaderRight.tsx
+++ b/frontend/src/components/Header/HeaderRight.tsx
@@ -3,5 +3,5 @@ interface HeaderRightProps {
 }
 
 export default function HeaderRight(props: HeaderRightProps) {
-  return <div>{props.items}</div>;
+  return <div className="flex gap-[16px]">{props.items}</div>;
 };

From 759646b835f4c79e99bb4f75ab90296f90b36053 Mon Sep 17 00:00:00 2001
From: HeoJiye <heoze1031@gmail.com>
Date: Tue, 14 Nov 2023 18:55:50 +0900
Subject: [PATCH 8/9] =?UTF-8?q?style:=20Header=20props=20->=20=EA=B5=AC?=
 =?UTF-8?q?=EC=A1=B0=EB=B6=84=ED=95=B4=20=ED=95=A0=EB=8B=B9=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Header/Header.tsx      | 4 ++--
 frontend/src/components/Header/HeaderRight.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Header/Header.tsx b/frontend/src/components/Header/Header.tsx
index 6033cc11..5f967060 100644
--- a/frontend/src/components/Header/Header.tsx
+++ b/frontend/src/components/Header/Header.tsx
@@ -5,11 +5,11 @@ interface HeaderProps {
   rightItems: React.ReactNode[];
 }
 
-export default function Header(props: HeaderProps) {
+export default function Header({ rightItems }: HeaderProps) {
   return (
     <div className="flex justify-between items-center surface-content text-default pr-[28px] pl-[28px] pt-[12px] pb-[12px]">
       <HeaderLeft />
-      <HeaderRight items={props.rightItems} />
+      <HeaderRight items={rightItems} />
     </div>
   );
 };
diff --git a/frontend/src/components/Header/HeaderRight.tsx b/frontend/src/components/Header/HeaderRight.tsx
index fb6f317f..f7790235 100644
--- a/frontend/src/components/Header/HeaderRight.tsx
+++ b/frontend/src/components/Header/HeaderRight.tsx
@@ -2,6 +2,6 @@ interface HeaderRightProps {
   items: React.ReactNode[];
 }
 
-export default function HeaderRight(props: HeaderRightProps) {
-  return <div className="flex gap-[16px]">{props.items}</div>;
+export default function HeaderRight({ items }: HeaderRightProps) {
+  return <div className="flex gap-[16px]">{items}</div>;
 };

From fd51de2793e5fb47421f8e95092faa09ab58645f Mon Sep 17 00:00:00 2001
From: HeoJiye <heoze1031@gmail.com>
Date: Tue, 14 Nov 2023 19:10:03 +0900
Subject: [PATCH 9/9] =?UTF-8?q?feat:=20Header=20logo=20=EC=B6=94=EA=B0=80,?=
 =?UTF-8?q?=20=ED=99=88=EC=9C=BC=EB=A1=9C=20=EC=9D=B4=EB=8F=99=20Link=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- router 사용하게 되면서 story 파일은 삭제함
---
 frontend/src/components/Header/HeaderLeft.tsx |  8 +++-
 frontend/src/stories/Header.stories.tsx       | 47 -------------------
 2 files changed, 7 insertions(+), 48 deletions(-)
 delete mode 100644 frontend/src/stories/Header.stories.tsx

diff --git a/frontend/src/components/Header/HeaderLeft.tsx b/frontend/src/components/Header/HeaderLeft.tsx
index 24ba4245..61755c2d 100644
--- a/frontend/src/components/Header/HeaderLeft.tsx
+++ b/frontend/src/components/Header/HeaderLeft.tsx
@@ -1,3 +1,9 @@
+import { Link } from "react-router-dom";
+
 export default function HeaderLeft() {
-  return <div></div>;
+  return (
+    <div className="display-bold16">
+      <Link to="/">마법의 소라고둥</Link>
+    </div>
+  );
 };
diff --git a/frontend/src/stories/Header.stories.tsx b/frontend/src/stories/Header.stories.tsx
deleted file mode 100644
index ee680f1f..00000000
--- a/frontend/src/stories/Header.stories.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Icon } from '@iconify/react';
-
-import Header from '@components/Header';
-import CustomButton from '@components/CustomButton';
-
-const meta = {
-  title: 'components/Header',
-  component: Header,
-  parameters: {
-    layout: 'fullscreen',
-    backgrounds: {
-      default: 'colored',
-      values: [
-        { name: 'colored', value: '#181818' },
-      ],
-    },
-  },
-
-  tags: ['autodocs'],
-} satisfies Meta<typeof Header>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const AIChatHeader: Story = {
-  args: {
-  rightItems: [
-    <CustomButton color="transparent" size="s">
-      <Icon icon="octicon:sidebar-expand-24" />
-    </CustomButton>
-  ]}
-};
-
-export const HumanChatHeader: Story = {
-  args: {
-  rightItems: [
-    <CustomButton color="active" size="s">
-      상담 종료
-    </CustomButton>
-    ,
-    <CustomButton color="transparent" size="s">
-      <Icon icon="basil:chat-outline" />
-    </CustomButton>
-  ]}
-};