From 1928a244e2a663e9136be5e11422daa3c78eeef1 Mon Sep 17 00:00:00 2001
From: Ubinquitous <ubinquitous1@gmail.com>
Date: Sun, 30 Jul 2023 22:17:25 +0900
Subject: [PATCH] =?UTF-8?q?chore(SettingHeader):=20=EC=84=A4=EC=A0=95=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=ED=97=A4=EB=8D=94=20?=
 =?UTF-8?q?=ED=8D=BC=EB=B8=94=EB=A6=AC=EC=8B=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Modal/SettingModal/SettingHeader.tsx      | 48 +++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 src/components/common/Modal/SettingModal/SettingHeader.tsx

diff --git a/src/components/common/Modal/SettingModal/SettingHeader.tsx b/src/components/common/Modal/SettingModal/SettingHeader.tsx
new file mode 100644
index 00000000..bd5541b4
--- /dev/null
+++ b/src/components/common/Modal/SettingModal/SettingHeader.tsx
@@ -0,0 +1,48 @@
+import Setting from "@/global/assets/svgs/Setting";
+import XIcon from "@/global/assets/svgs/XIcon";
+import { font } from "@/styles/font";
+import React from "react";
+import styled from "styled-components";
+
+const SettingHeader = () => {
+  return (
+    <Header>
+      <HGroup>
+        <Setting width={16} height={16} />
+        <SettingTitle />
+      </HGroup>
+      <CloseButton>
+        <XIcon />
+      </CloseButton>
+    </Header>
+  );
+};
+
+const Header = styled.header`
+  width: 100%;
+  padding: 10px 0 10px 18px;
+  display: flex;
+  align-items: center;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
+`;
+
+const HGroup = styled.hgroup`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+`;
+
+const SettingTitle = styled.div`
+  ${font.p2};
+  font-weight: 500;
+
+  &:after {
+    content: "설정";
+  }
+`;
+
+const CloseButton = styled.button`
+  margin: 0 20px 0 auto;
+`;
+
+export default SettingHeader;