From 47a24afbc3c5ba94c1693b3f5f38fc9f85a9e7d9 Mon Sep 17 00:00:00 2001
From: youngeunkim <pkhj286@gmail.com>
Date: Wed, 3 Jan 2024 08:20:54 +0900
Subject: [PATCH 1/9] =?UTF-8?q?feat:=20=EC=84=A4=EC=A0=95=20=EB=AA=A8?=
 =?UTF-8?q?=EB=8B=AC=20=EC=B0=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/Back.png                    | Bin 0 -> 230 bytes
 src/assets/images/index.ts                    |   1 +
 .../common/Header/@setting/setting.tsx        |  64 ++++++++++++++++++
 src/components/common/Header/index.tsx        |  16 ++++-
 4 files changed, 79 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/images/Back.png
 create mode 100644 src/components/common/Header/@setting/setting.tsx

diff --git a/src/assets/images/Back.png b/src/assets/images/Back.png
new file mode 100644
index 0000000000000000000000000000000000000000..e14e1a65bff69e98153c755c21ad7087a18597d7
GIT binary patch
literal 230
zcmeAS@N?(olHy`uVBq!ia0vp^Vj#@H1|*Mc$*~4foCO|{#S9GG!XV7ZFl&wkP>``W
z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eBezm8IV@L(#(aVWk4GKK04=x^kcGhOs*TWoB
zEWgJcb`&}JJ7Bp|{K^lel3y#M>KB_z-l{h__|Zxti`S*Vy!*lJnH+NSPWUn0+Z8(D
zWjp7E6|Mi9))k2FeG;%V$JOg|P+#;ZR?nT6P6*xQxh!J5nkDO@6`#V2Y>|hn_sE;8
XyzUBCYB@Cr=nMu=S3j3^P6<r_%hFNl

literal 0
HcmV?d00001

diff --git a/src/assets/images/index.ts b/src/assets/images/index.ts
index 5b400b57..5a480dca 100644
--- a/src/assets/images/index.ts
+++ b/src/assets/images/index.ts
@@ -4,6 +4,7 @@ export { default as defaultProfile } from "./profile_default.png";
 export { default as QR } from "./QR.png";
 export { default as TestBanner } from "./test_banner.png";
 export { default as PageNotFound } from "./page_not_found.png";
+export { default as Back } from "./Back.png";
 
 export { default as Banner1Image } from "./banner/banner1.png";
 export { default as Banner2Image } from "./banner/banner2.png";
diff --git a/src/components/common/Header/@setting/setting.tsx b/src/components/common/Header/@setting/setting.tsx
new file mode 100644
index 00000000..5a264f85
--- /dev/null
+++ b/src/components/common/Header/@setting/setting.tsx
@@ -0,0 +1,64 @@
+import React from "react";
+import styled from "styled-components";
+import Image from "next/image";
+import { Back } from "@/assets/images";
+import { theme, flex, font } from "@/styles";
+
+interface SettingModalProps {
+  onClose: () => void;
+}
+
+const SettingModal = ({ onClose }: SettingModalProps) => {
+  return (
+    <ModalOverlay>
+      <ModalContent>
+        <SettingBox>
+          <SettingText>설정</SettingText>
+          <button onClick={onClose}>
+            <ExitButton src={Back} alt="Back" />
+          </button>
+        </SettingBox>
+        <LogoutBox>로그아웃</LogoutBox>
+      </ModalContent>
+    </ModalOverlay>
+  );
+};
+
+const ModalOverlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  ${flex.CENTER};
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+`;
+
+const ModalContent = styled.div`
+  background-color: ${theme.white};
+  padding: 1.5%;
+  border-radius: 3%;
+`;
+
+const SettingBox = styled.div`
+  ${flex.VERTICAL}
+`;
+const SettingText = styled.p`
+  ${flex.CENTER};
+  ${font.H4};
+`;
+const ExitButton = styled(Image)`
+  margin-left: 17rem;
+`;
+const LogoutBox = styled.div`
+  ${flex.CENTER};
+  margin: 7% 0 0 0;
+  border-radius: 5%;
+  color: ${theme.black};
+  ${font.H4};
+  background-color: #f1f3f5;
+  padding: 2%;
+  cursor: pointer;
+`;
+
+export default SettingModal;
diff --git a/src/components/common/Header/index.tsx b/src/components/common/Header/index.tsx
index 73f1209c..3e84ef16 100644
--- a/src/components/common/Header/index.tsx
+++ b/src/components/common/Header/index.tsx
@@ -1,15 +1,27 @@
-import React from "react";
+import React, { useState } from "react";
 import styled from "styled-components";
 import { theme, flex } from "@/styles";
 import { Logo, Setting } from "@/assets/icons";
 import Navigation from "./Navigation";
+import SettingModal from "./@setting/setting";
 
 const Header = () => {
+  const [isSettingModalOpen, setSettingModalOpen] = useState(false);
+
+  const openSettingModal = () => {
+    setSettingModalOpen(true);
+  };
+
+  const closeSettingModal = () => {
+    setSettingModalOpen(false);
+  };
+
   return (
     <Layout>
       <Logo width={42} />
       <Navigation />
-      <Setting />
+      <Setting onClick={openSettingModal} />
+      {isSettingModalOpen && <SettingModal onClose={closeSettingModal} />}
     </Layout>
   );
 };

From 422a7e1f94cfe440dd9ec20bf753177569feba22 Mon Sep 17 00:00:00 2001
From: youngeunkim <pkhj286@gmail.com>
Date: Wed, 3 Jan 2024 09:48:10 +0900
Subject: [PATCH 2/9] =?UTF-8?q?chore:=20=ED=8F=B4=EB=8D=94=20=EA=B5=AC?=
 =?UTF-8?q?=EC=A1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Header/@setting/layouts/setting.tsx       | 64 +++++++++++++++++++
 src/components/common/Header/index.tsx        |  2 +-
 2 files changed, 65 insertions(+), 1 deletion(-)
 create mode 100644 src/components/common/Header/@setting/layouts/setting.tsx

diff --git a/src/components/common/Header/@setting/layouts/setting.tsx b/src/components/common/Header/@setting/layouts/setting.tsx
new file mode 100644
index 00000000..5a264f85
--- /dev/null
+++ b/src/components/common/Header/@setting/layouts/setting.tsx
@@ -0,0 +1,64 @@
+import React from "react";
+import styled from "styled-components";
+import Image from "next/image";
+import { Back } from "@/assets/images";
+import { theme, flex, font } from "@/styles";
+
+interface SettingModalProps {
+  onClose: () => void;
+}
+
+const SettingModal = ({ onClose }: SettingModalProps) => {
+  return (
+    <ModalOverlay>
+      <ModalContent>
+        <SettingBox>
+          <SettingText>설정</SettingText>
+          <button onClick={onClose}>
+            <ExitButton src={Back} alt="Back" />
+          </button>
+        </SettingBox>
+        <LogoutBox>로그아웃</LogoutBox>
+      </ModalContent>
+    </ModalOverlay>
+  );
+};
+
+const ModalOverlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  ${flex.CENTER};
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+`;
+
+const ModalContent = styled.div`
+  background-color: ${theme.white};
+  padding: 1.5%;
+  border-radius: 3%;
+`;
+
+const SettingBox = styled.div`
+  ${flex.VERTICAL}
+`;
+const SettingText = styled.p`
+  ${flex.CENTER};
+  ${font.H4};
+`;
+const ExitButton = styled(Image)`
+  margin-left: 17rem;
+`;
+const LogoutBox = styled.div`
+  ${flex.CENTER};
+  margin: 7% 0 0 0;
+  border-radius: 5%;
+  color: ${theme.black};
+  ${font.H4};
+  background-color: #f1f3f5;
+  padding: 2%;
+  cursor: pointer;
+`;
+
+export default SettingModal;
diff --git a/src/components/common/Header/index.tsx b/src/components/common/Header/index.tsx
index 3e84ef16..145a1dd9 100644
--- a/src/components/common/Header/index.tsx
+++ b/src/components/common/Header/index.tsx
@@ -3,7 +3,7 @@ import styled from "styled-components";
 import { theme, flex } from "@/styles";
 import { Logo, Setting } from "@/assets/icons";
 import Navigation from "./Navigation";
-import SettingModal from "./@setting/setting";
+import SettingModal from "./@setting/layouts/setting";
 
 const Header = () => {
   const [isSettingModalOpen, setSettingModalOpen] = useState(false);

From 783877b9c297ce5ed18556fe8039e65b3298c427 Mon Sep 17 00:00:00 2001
From: youngeunkim <pkhj286@gmail.com>
Date: Wed, 3 Jan 2024 10:24:59 +0900
Subject: [PATCH 3/9] =?UTF-8?q?refactor:=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/Header/@setting/hooks/index.ts     |  1 +
 .../Header/@setting/hooks/useSettingModal.tsx | 21 ++++++
 .../common/Header/@setting/setting.tsx        | 64 -------------------
 src/components/common/Header/index.tsx        | 14 ++--
 4 files changed, 26 insertions(+), 74 deletions(-)
 create mode 100644 src/components/common/Header/@setting/hooks/index.ts
 create mode 100644 src/components/common/Header/@setting/hooks/useSettingModal.tsx
 delete mode 100644 src/components/common/Header/@setting/setting.tsx

diff --git a/src/components/common/Header/@setting/hooks/index.ts b/src/components/common/Header/@setting/hooks/index.ts
new file mode 100644
index 00000000..258ce90c
--- /dev/null
+++ b/src/components/common/Header/@setting/hooks/index.ts
@@ -0,0 +1 @@
+export { default as useSettingModal } from "./useSettingModal";
diff --git a/src/components/common/Header/@setting/hooks/useSettingModal.tsx b/src/components/common/Header/@setting/hooks/useSettingModal.tsx
new file mode 100644
index 00000000..8425f257
--- /dev/null
+++ b/src/components/common/Header/@setting/hooks/useSettingModal.tsx
@@ -0,0 +1,21 @@
+import { useState } from "react";
+
+const useSettingModal = () => {
+  const [isSettingModalOpen, setSettingModalOpen] = useState(false);
+
+  const openSettingModal = () => {
+    setSettingModalOpen(true);
+  };
+
+  const closeSettingModal = () => {
+    setSettingModalOpen(false);
+  };
+
+  return {
+    isSettingModalOpen,
+    openSettingModal,
+    closeSettingModal,
+  };
+};
+
+export default useSettingModal;
diff --git a/src/components/common/Header/@setting/setting.tsx b/src/components/common/Header/@setting/setting.tsx
deleted file mode 100644
index 5a264f85..00000000
--- a/src/components/common/Header/@setting/setting.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import Image from "next/image";
-import { Back } from "@/assets/images";
-import { theme, flex, font } from "@/styles";
-
-interface SettingModalProps {
-  onClose: () => void;
-}
-
-const SettingModal = ({ onClose }: SettingModalProps) => {
-  return (
-    <ModalOverlay>
-      <ModalContent>
-        <SettingBox>
-          <SettingText>설정</SettingText>
-          <button onClick={onClose}>
-            <ExitButton src={Back} alt="Back" />
-          </button>
-        </SettingBox>
-        <LogoutBox>로그아웃</LogoutBox>
-      </ModalContent>
-    </ModalOverlay>
-  );
-};
-
-const ModalOverlay = styled.div`
-  position: fixed;
-  top: 0;
-  left: 0;
-  ${flex.CENTER};
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.5);
-`;
-
-const ModalContent = styled.div`
-  background-color: ${theme.white};
-  padding: 1.5%;
-  border-radius: 3%;
-`;
-
-const SettingBox = styled.div`
-  ${flex.VERTICAL}
-`;
-const SettingText = styled.p`
-  ${flex.CENTER};
-  ${font.H4};
-`;
-const ExitButton = styled(Image)`
-  margin-left: 17rem;
-`;
-const LogoutBox = styled.div`
-  ${flex.CENTER};
-  margin: 7% 0 0 0;
-  border-radius: 5%;
-  color: ${theme.black};
-  ${font.H4};
-  background-color: #f1f3f5;
-  padding: 2%;
-  cursor: pointer;
-`;
-
-export default SettingModal;
diff --git a/src/components/common/Header/index.tsx b/src/components/common/Header/index.tsx
index 145a1dd9..70b8ef1c 100644
--- a/src/components/common/Header/index.tsx
+++ b/src/components/common/Header/index.tsx
@@ -1,20 +1,14 @@
-import React, { useState } from "react";
+import React from "react";
 import styled from "styled-components";
 import { theme, flex } from "@/styles";
 import { Logo, Setting } from "@/assets/icons";
 import Navigation from "./Navigation";
 import SettingModal from "./@setting/layouts/setting";
+import { useSettingModal } from "./@setting/hooks";
 
 const Header = () => {
-  const [isSettingModalOpen, setSettingModalOpen] = useState(false);
-
-  const openSettingModal = () => {
-    setSettingModalOpen(true);
-  };
-
-  const closeSettingModal = () => {
-    setSettingModalOpen(false);
-  };
+  const { isSettingModalOpen, openSettingModal, closeSettingModal } =
+    useSettingModal();
 
   return (
     <Layout>

From 8814fb94785a8f66d8bcbd8d540aad8b19f523dc Mon Sep 17 00:00:00 2001
From: youngeunkim <pkhj286@gmail.com>
Date: Wed, 3 Jan 2024 14:09:19 +0900
Subject: [PATCH 4/9] style: css

---
 .../Header/@setting/layouts/setting.tsx       | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/components/common/Header/@setting/layouts/setting.tsx b/src/components/common/Header/@setting/layouts/setting.tsx
index 5a264f85..5e159dc8 100644
--- a/src/components/common/Header/@setting/layouts/setting.tsx
+++ b/src/components/common/Header/@setting/layouts/setting.tsx
@@ -10,7 +10,7 @@ interface SettingModalProps {
 
 const SettingModal = ({ onClose }: SettingModalProps) => {
   return (
-    <ModalOverlay>
+    <Modal>
       <ModalContent>
         <SettingBox>
           <SettingText>설정</SettingText>
@@ -20,18 +20,15 @@ const SettingModal = ({ onClose }: SettingModalProps) => {
         </SettingBox>
         <LogoutBox>로그아웃</LogoutBox>
       </ModalContent>
-    </ModalOverlay>
+    </Modal>
   );
 };
 
-const ModalOverlay = styled.div`
-  position: fixed;
-  top: 0;
-  left: 0;
+const Modal = styled.div`
   ${flex.CENTER};
   width: 100%;
   height: 100%;
-  background: rgba(0, 0, 0, 0.5);
+  background: #00000080;
 `;
 
 const ModalContent = styled.div`
@@ -43,22 +40,29 @@ const ModalContent = styled.div`
 const SettingBox = styled.div`
   ${flex.VERTICAL}
 `;
+
 const SettingText = styled.p`
   ${flex.CENTER};
   ${font.H4};
 `;
+
 const ExitButton = styled(Image)`
   margin-left: 17rem;
 `;
+
 const LogoutBox = styled.div`
   ${flex.CENTER};
   margin: 7% 0 0 0;
+  padding: 2%;
   border-radius: 5%;
+  background-color: #f1f3f5;
   color: ${theme.black};
   ${font.H4};
-  background-color: #f1f3f5;
-  padding: 2%;
   cursor: pointer;
+
+  &:hover {
+    background-color: ${theme.content};
+  }
 `;
 
 export default SettingModal;

From 48be7cc21cc4315712f844586f0b5c8d3f912059 Mon Sep 17 00:00:00 2001
From: youngeunkim <pkhj286@gmail.com>
Date: Wed, 3 Jan 2024 16:44:22 +0900
Subject: [PATCH 5/9] =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 gtag.d.ts                                     |  3 --
 package.json                                  |  3 +-
 src/app/layout.tsx                            | 25 ++----------
 .../Header/@setting/layouts/setting.tsx       |  3 ++
 src/components/common/Header/index.tsx        |  1 -
 src/hooks/useGtag.ts                          | 40 -------------------
 yarn.lock                                     | 37 ++++++-----------
 7 files changed, 20 insertions(+), 92 deletions(-)

diff --git a/gtag.d.ts b/gtag.d.ts
index e02ce14e..e69de29b 100644
--- a/gtag.d.ts
+++ b/gtag.d.ts
@@ -1,3 +0,0 @@
-/// <reference types="gtag.js" />
-
-declare module "gtag.js";
diff --git a/package.json b/package.json
index c638524d..00817ca0 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
     "test:ci": "jest --ci"
   },
   "dependencies": {
-    "@playwright/test": "^1.29.1",
+    "@playwright/test": "1.34.3",
     "@sentry/nextjs": "^7.90.0",
     "@tanstack/react-query": "^4.35.3",
     "@testing-library/jest-dom": "^6.1.5",
@@ -75,7 +75,6 @@
     "@semantic-release/npm": "^9.0.1",
     "@semantic-release/release-notes-generator": "^10.0.3",
     "@types/graphql": "^14.5.0",
-    "@types/gtag.js": "^0.0.18",
     "@types/jest": "^29.2.4",
     "@types/react-beautiful-dnd": "^13.1.3",
     "@types/react-slick": "^0.23.12",
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 8f60a6d5..c431ddd4 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,7 +1,5 @@
 import Provider from "@/provider/MainProvider";
-import React from "react";
-import * as gtag from "@/hooks/useGtag";
-import Script from "next/script";
+import React, { useEffect } from "react";
 
 export const metadata = {
   title: "BSM",
@@ -13,27 +11,10 @@ export default function RootLayout({
 }: {
   children: React.ReactNode;
 }) {
-  gtag.useGtag();
+  useEffect(() => {}, []);
+
   return (
     <html lang="en">
-      <Script
-        strategy="afterInteractive"
-        src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`}
-      />
-      <Script
-        id="gtag-init"
-        strategy="afterInteractive"
-        dangerouslySetInnerHTML={{
-          __html: `
-                window.dataLayer = window.dataLayer || [];
-                function gtag(){dataLayer.push(arguments);}
-                gtag('js', new Date());
-                gtag('config', '${gtag.GA_TRACKING_ID}', {
-                  page_path: window.location.pathname,
-                });
-              `,
-        }}
-      />
       <body>
         <Provider>{children}</Provider>
       </body>
diff --git a/src/components/common/Header/@setting/layouts/setting.tsx b/src/components/common/Header/@setting/layouts/setting.tsx
index 5e159dc8..356d2228 100644
--- a/src/components/common/Header/@setting/layouts/setting.tsx
+++ b/src/components/common/Header/@setting/layouts/setting.tsx
@@ -25,6 +25,9 @@ const SettingModal = ({ onClose }: SettingModalProps) => {
 };
 
 const Modal = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
   ${flex.CENTER};
   width: 100%;
   height: 100%;
diff --git a/src/components/common/Header/index.tsx b/src/components/common/Header/index.tsx
index 70b8ef1c..9e455e0e 100644
--- a/src/components/common/Header/index.tsx
+++ b/src/components/common/Header/index.tsx
@@ -19,7 +19,6 @@ const Header = () => {
     </Layout>
   );
 };
-
 const Layout = styled.div`
   ${flex.VERTICAL};
   width: 100%;
diff --git a/src/hooks/useGtag.ts b/src/hooks/useGtag.ts
index e5ea4b50..e69de29b 100644
--- a/src/hooks/useGtag.ts
+++ b/src/hooks/useGtag.ts
@@ -1,40 +0,0 @@
-import { useRouter } from "next/router";
-import { useEffect } from "react";
-
-export const GA_TRACKING_ID = "G-J8DK7F6M37";
-
-export const pageview = (url: URL) => {
-  window.gtag("config", GA_TRACKING_ID, {
-    page_path: url,
-  });
-};
-
-export const event = (
-  action: Gtag.EventNames,
-  { event_category, event_label, value }: Gtag.EventParams,
-) => {
-  window.gtag("event", action, {
-    event_category,
-    event_label,
-    value,
-  });
-};
-
-export const useGtag = () => {
-  const router = useRouter();
-
-  useEffect(() => {
-    if (process.env.NODE_ENV === "development") return;
-
-    const handleRouteChange = (url: URL) => {
-      pageview(url);
-    };
-
-    router.events.on("routeChangeComplete", handleRouteChange);
-    router.events.on("hashChangeComplete", handleRouteChange);
-    return () => {
-      router.events.off("routeChangeComplete", handleRouteChange);
-      router.events.off("hashChangeComplete", handleRouteChange);
-    };
-  }, [router.events]);
-};
diff --git a/yarn.lock b/yarn.lock
index d018b802..aa7f0ec3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1168,12 +1168,15 @@
   resolved "https://registry.yarnpkg.com/@open-draft/until/-/until-1.0.3.tgz#db9cc719191a62e7d9200f6e7bab21c5b848adca"
   integrity sha512-Aq58f5HiWdyDlFffbbSjAlv596h/cOnt2DO1w3DOC7OJ5EHs0hd/nycJfiu9RJbT6Yk6F1knnRRXNSpxoIVZ9Q==
 
-"@playwright/test@^1.29.1":
-  version "1.40.1"
-  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.40.1.tgz#9e66322d97b1d74b9f8718bacab15080f24cde65"
-  integrity sha512-EaaawMTOeEItCRvfmkI9v6rBkF1svM8wjl/YPRrg2N2Wmp+4qJYkWtJsbew1szfKKDm6fPLy4YAanBhIlf9dWw==
+"@playwright/test@1.34.3":
+  version "1.34.3"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.34.3.tgz#d9f1ac3f1a09633b5ca5351c50c308bf802bde53"
+  integrity sha512-zPLef6w9P6T/iT6XDYG3mvGOqOyb6eHaV9XtkunYs0+OzxBtrPAAaHotc0X+PJ00WPPnLfFBTl7mf45Mn8DBmw==
   dependencies:
-    playwright "1.40.1"
+    "@types/node" "*"
+    playwright-core "1.34.3"
+  optionalDependencies:
+    fsevents "2.3.2"
 
 "@pnpm/config.env-replace@^1.1.0":
   version "1.1.0"
@@ -1831,12 +1834,7 @@
   integrity sha512-MOkzsEp1Jk5bXuAsHsUi6BVv0zCO+7/2PTiZMXWDSsMXvNU6w/PLMQT2vHn8hy2i0JqojPz1Sz6rsFjHtsU0lA==
   dependencies:
     graphql "*"
-
-"@types/gtag.js@^0.0.18":
-  version "0.0.18"
-  resolved "https://registry.yarnpkg.com/@types/gtag.js/-/gtag.js-0.0.18.tgz#d6bc7cb1acc64ff4f4e4be918d401c53fe9ccf20"
-  integrity sha512-GJxnIvuXuVhKaHfsOdzGipoOoXq72y3mdcncc9h6i6E7nlz89zBEj2wrLM7bqO5Xk9Lm2B94MwdQsSwRlaPSWw==
-
+    
 "@types/hast@^2.0.0":
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/@types/hast/-/hast-2.3.8.tgz#4ac5caf38b262b7bd5ca3202dda71f0271635660"
@@ -8355,19 +8353,10 @@ pkg-dir@^7.0.0:
   dependencies:
     find-up "^6.3.0"
 
-playwright-core@1.40.1:
-  version "1.40.1"
-  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.40.1.tgz#442d15e86866a87d90d07af528e0afabe4c75c05"
-  integrity sha512-+hkOycxPiV534c4HhpfX6yrlawqVUzITRKwHAmYfmsVreltEl6fAZJ3DPfLMOODw0H3s1Itd6MDCWmP1fl/QvQ==
-
-playwright@1.40.1:
-  version "1.40.1"
-  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.40.1.tgz#a11bf8dca15be5a194851dbbf3df235b9f53d7ae"
-  integrity sha512-2eHI7IioIpQ0bS1Ovg/HszsN/XKNwEG1kbzSDDmADpclKc7CyqkHw7Mg2JCz/bbCxg25QUPcjksoMW7JcIFQmw==
-  dependencies:
-    playwright-core "1.40.1"
-  optionalDependencies:
-    fsevents "2.3.2"
+playwright-core@1.34.3:
+  version "1.34.3"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.34.3.tgz#bc906ea1b26bb66116ce329436ee59ba2e78fe9f"
+  integrity sha512-2pWd6G7OHKemc5x1r1rp8aQcpvDh7goMBZlJv6Co5vCNLVcQJdhxRL09SGaY6HcyHH9aT4tiynZabMofVasBYw==
 
 postcss-selector-parser@^6.0.10:
   version "6.0.13"

From c6dd598387fd14e3da260fbf5de75999d8095f64 Mon Sep 17 00:00:00 2001
From: youngeunkim <pkhj286@gmail.com>
Date: Wed, 3 Jan 2024 16:48:16 +0900
Subject: [PATCH 6/9] =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/layout.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index c431ddd4..40415dcf 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,5 +1,5 @@
 import Provider from "@/provider/MainProvider";
-import React, { useEffect } from "react";
+import React from "react";
 
 export const metadata = {
   title: "BSM",
@@ -11,8 +11,6 @@ export default function RootLayout({
 }: {
   children: React.ReactNode;
 }) {
-  useEffect(() => {}, []);
-
   return (
     <html lang="en">
       <body>

From 0c2f8e2d20e30076c9db2d651f44c1756928ce77 Mon Sep 17 00:00:00 2001
From: youngeunkim <pkhj286@gmail.com>
Date: Wed, 3 Jan 2024 23:22:10 +0900
Subject: [PATCH 7/9] =?UTF-8?q?style:=20XIcon=20=EC=82=AC=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/Header/@setting/layouts/setting.tsx        | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/common/Header/@setting/layouts/setting.tsx b/src/components/common/Header/@setting/layouts/setting.tsx
index 356d2228..d9982a06 100644
--- a/src/components/common/Header/@setting/layouts/setting.tsx
+++ b/src/components/common/Header/@setting/layouts/setting.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import Image from "next/image";
-import { Back } from "@/assets/images";
+import { XIcon } from "@/assets/icons";
 import { theme, flex, font } from "@/styles";
 
 interface SettingModalProps {
@@ -14,9 +13,9 @@ const SettingModal = ({ onClose }: SettingModalProps) => {
       <ModalContent>
         <SettingBox>
           <SettingText>설정</SettingText>
-          <button onClick={onClose}>
-            <ExitButton src={Back} alt="Back" />
-          </button>
+          <ExitButton>
+            <XIcon onClick={onClose} />
+          </ExitButton>
         </SettingBox>
         <LogoutBox>로그아웃</LogoutBox>
       </ModalContent>
@@ -49,7 +48,7 @@ const SettingText = styled.p`
   ${font.H4};
 `;
 
-const ExitButton = styled(Image)`
+const ExitButton = styled.div`
   margin-left: 17rem;
 `;
 

From 4d01118ed337d669ba72f30a423b8801db8d46b9 Mon Sep 17 00:00:00 2001
From: youngeunkim <pkhj286@gmail.com>
Date: Wed, 3 Jan 2024 23:28:01 +0900
Subject: [PATCH 8/9] =?UTF-8?q?refactor:=20=ED=9B=85=20=EC=82=AC=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/Header/@setting/hooks/index.ts     |  1 -
 .../Header/@setting/hooks/useSettingModal.tsx | 21 -------------------
 .../Header/@setting/layouts/setting.tsx       |  9 ++++----
 src/components/common/Header/index.tsx        | 13 +++++++-----
 4 files changed, 12 insertions(+), 32 deletions(-)
 delete mode 100644 src/components/common/Header/@setting/hooks/index.ts
 delete mode 100644 src/components/common/Header/@setting/hooks/useSettingModal.tsx

diff --git a/src/components/common/Header/@setting/hooks/index.ts b/src/components/common/Header/@setting/hooks/index.ts
deleted file mode 100644
index 258ce90c..00000000
--- a/src/components/common/Header/@setting/hooks/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as useSettingModal } from "./useSettingModal";
diff --git a/src/components/common/Header/@setting/hooks/useSettingModal.tsx b/src/components/common/Header/@setting/hooks/useSettingModal.tsx
deleted file mode 100644
index 8425f257..00000000
--- a/src/components/common/Header/@setting/hooks/useSettingModal.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { useState } from "react";
-
-const useSettingModal = () => {
-  const [isSettingModalOpen, setSettingModalOpen] = useState(false);
-
-  const openSettingModal = () => {
-    setSettingModalOpen(true);
-  };
-
-  const closeSettingModal = () => {
-    setSettingModalOpen(false);
-  };
-
-  return {
-    isSettingModalOpen,
-    openSettingModal,
-    closeSettingModal,
-  };
-};
-
-export default useSettingModal;
diff --git a/src/components/common/Header/@setting/layouts/setting.tsx b/src/components/common/Header/@setting/layouts/setting.tsx
index d9982a06..125f3f92 100644
--- a/src/components/common/Header/@setting/layouts/setting.tsx
+++ b/src/components/common/Header/@setting/layouts/setting.tsx
@@ -2,19 +2,18 @@ import React from "react";
 import styled from "styled-components";
 import { XIcon } from "@/assets/icons";
 import { theme, flex, font } from "@/styles";
+import { useModal } from "@/@modal/hooks";
 
-interface SettingModalProps {
-  onClose: () => void;
-}
+const SettingModal = () => {
+  const { closeModal } = useModal();
 
-const SettingModal = ({ onClose }: SettingModalProps) => {
   return (
     <Modal>
       <ModalContent>
         <SettingBox>
           <SettingText>설정</SettingText>
           <ExitButton>
-            <XIcon onClick={onClose} />
+            <XIcon onClick={closeModal} />
           </ExitButton>
         </SettingBox>
         <LogoutBox>로그아웃</LogoutBox>
diff --git a/src/components/common/Header/index.tsx b/src/components/common/Header/index.tsx
index 9e455e0e..569ebe11 100644
--- a/src/components/common/Header/index.tsx
+++ b/src/components/common/Header/index.tsx
@@ -2,23 +2,26 @@ import React from "react";
 import styled from "styled-components";
 import { theme, flex } from "@/styles";
 import { Logo, Setting } from "@/assets/icons";
+import { useModal } from "@/@modal/hooks";
 import Navigation from "./Navigation";
 import SettingModal from "./@setting/layouts/setting";
-import { useSettingModal } from "./@setting/hooks";
 
 const Header = () => {
-  const { isSettingModalOpen, openSettingModal, closeSettingModal } =
-    useSettingModal();
+  const { openModal } = useModal();
+
+  const handleOpenSettingModalClick = () => {
+    openModal({ component: <SettingModal /> });
+  };
 
   return (
     <Layout>
       <Logo width={42} />
       <Navigation />
-      <Setting onClick={openSettingModal} />
-      {isSettingModalOpen && <SettingModal onClose={closeSettingModal} />}
+      <Setting onClick={handleOpenSettingModalClick} />
     </Layout>
   );
 };
+
 const Layout = styled.div`
   ${flex.VERTICAL};
   width: 100%;

From 1cc0f5a1969820ce4f7098eca2d69c3e4c22d4f4 Mon Sep 17 00:00:00 2001
From: youngeunkim <pkhj286@gmail.com>
Date: Wed, 3 Jan 2024 23:33:12 +0900
Subject: [PATCH 9/9] =?UTF-8?q?style:=20css=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Header/@setting/layouts/setting.tsx | 6 +++---
 src/styles/theme.ts                                       | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/common/Header/@setting/layouts/setting.tsx b/src/components/common/Header/@setting/layouts/setting.tsx
index 125f3f92..613d601e 100644
--- a/src/components/common/Header/@setting/layouts/setting.tsx
+++ b/src/components/common/Header/@setting/layouts/setting.tsx
@@ -29,7 +29,7 @@ const Modal = styled.div`
   ${flex.CENTER};
   width: 100%;
   height: 100%;
-  background: #00000080;
+  background-color: rgba(0, 0, 0, 0.5);
 `;
 
 const ModalContent = styled.div`
@@ -53,10 +53,10 @@ const ExitButton = styled.div`
 
 const LogoutBox = styled.div`
   ${flex.CENTER};
-  margin: 7% 0 0 0;
+  margin-top: 7%;
   padding: 2%;
   border-radius: 5%;
-  background-color: #f1f3f5;
+  background-color: ${theme.btn_background};
   color: ${theme.black};
   ${font.H4};
   cursor: pointer;
diff --git a/src/styles/theme.ts b/src/styles/theme.ts
index 7b9dae64..a2c6c9df 100644
--- a/src/styles/theme.ts
+++ b/src/styles/theme.ts
@@ -8,7 +8,7 @@ const theme = {
   green: "#3CAD4E",
 
   background: "#F9FAFF",
-
+  btn_background: "#f1f3f5;",
   primary_red: "#E54F5A",
   primary_blue: "#73AEE3",
   primary_yellow: "#FEBC56",