From fa352c224d3c05619ff156090ec5c6d852a6556c Mon Sep 17 00:00:00 2001
From: nocheol <qkdl60@gmail.com>
Date: Sat, 16 Mar 2024 14:36:23 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20:=20#490=20-=20=EB=A9=94=EC=9D=B8?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=ED=97=A4=EB=8D=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_components/MainHeader/MainHeader.tsx     | 30 +++++++++++++++++++
 .../main/_components/MainHeader/index.scss    | 23 ++++++++++++++
 2 files changed, 53 insertions(+)
 create mode 100644 src/app/main/_components/MainHeader/MainHeader.tsx
 create mode 100644 src/app/main/_components/MainHeader/index.scss

diff --git a/src/app/main/_components/MainHeader/MainHeader.tsx b/src/app/main/_components/MainHeader/MainHeader.tsx
new file mode 100644
index 00000000..14f3b6cf
--- /dev/null
+++ b/src/app/main/_components/MainHeader/MainHeader.tsx
@@ -0,0 +1,30 @@
+'use client';
+
+import { Icon } from '@/components';
+import Link from 'next/link';
+import './index.scss';
+
+const headerContent = {
+  notice: {
+    text: '🕊️[공지] 이용 약관과 개인 정보 처리방침이 변경되었습니다. 다들 확인 부탁드립니다.',
+    link: '/notice',
+  },
+};
+// TODO 알림 버튼 클릭 처리
+export default function MainHeader() {
+  return (
+    <div className="main-header__container">
+      <Link className="main-header__text" href={headerContent.notice.link}>
+        {headerContent.notice.text}
+      </Link>
+      <div className="main-header__buttons">
+        <Link href={'/notice'}>
+          <Icon name="CAMPAIGN" size="lg" />
+        </Link>
+        <button>
+          <Icon name="NOTIFICATION_ON" size="lg" />
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/main/_components/MainHeader/index.scss b/src/app/main/_components/MainHeader/index.scss
new file mode 100644
index 00000000..ae51fe6f
--- /dev/null
+++ b/src/app/main/_components/MainHeader/index.scss
@@ -0,0 +1,23 @@
+.main-header {
+  &__container {
+    padding: 1rem 0;
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+  }
+  &__text {
+    flex-grow: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  &__buttons {
+    button {
+      background-color: transparent;
+      cursor: pointer;
+    }
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+  }
+}