Merge pull request #157 from Team-INSERT/feat/setting

설정 클릭 시 모달 창 뜨도록 하기
Team-INSERT · Jan 4, 2024 · b341695 · b341695
2 parents 1e58b8b + 1cc0f5a
commit b341695
Show file tree

Hide file tree

Showing 10 changed files with 94 additions and 92 deletions.
diff --git 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
@@ -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
@@ -1,7 +1,5 @@
 import Provider from "@/provider/MainProvider";
 import React from "react";
-import * as gtag from "@/hooks/useGtag";
-import Script from "next/script";
 
 export const metadata = {
   title: "BSM",
@@ -13,27 +11,8 @@ export default function RootLayout({
 }: {
   children: React.ReactNode;
 }) {
-  gtag.useGtag();
   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/assets/images/Back.png b/src/assets/images/Back.png
diff --git 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/layouts/setting.tsx b/src/components/common/Header/@setting/layouts/setting.tsx
@@ -0,0 +1,69 @@
+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";
+
+const SettingModal = () => {
+  const { closeModal } = useModal();
+
+  return (
+    <Modal>
+      <ModalContent>
+        <SettingBox>
+          <SettingText>설정</SettingText>
+          <ExitButton>
+            <XIcon onClick={closeModal} />
+          </ExitButton>
+        </SettingBox>
+        <LogoutBox>로그아웃</LogoutBox>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+const Modal = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  ${flex.CENTER};
+  width: 100%;
+  height: 100%;
+  background-color: 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.div`
+  margin-left: 17rem;
+`;
+
+const LogoutBox = styled.div`
+  ${flex.CENTER};
+  margin-top: 7%;
+  padding: 2%;
+  border-radius: 5%;
+  background-color: ${theme.btn_background};
+  color: ${theme.black};
+  ${font.H4};
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${theme.content};
+  }
+`;
+
+export default SettingModal;
diff --git a/src/components/common/Header/index.tsx b/src/components/common/Header/index.tsx
@@ -2,14 +2,22 @@ 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";
 
 const Header = () => {
+  const { openModal } = useModal();
+
+  const handleOpenSettingModalClick = () => {
+    openModal({ component: <SettingModal /> });
+  };
+
   return (
     <Layout>
       <Logo width={42} />
       <Navigation />
-      <Setting />
+      <Setting onClick={handleOpenSettingModalClick} />
     </Layout>
   );
 };

diff --git 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/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",

diff --git 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"
 
-[email protected]:
-  version "1.40.1"
-  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.40.1.tgz#442d15e86866a87d90d07af528e0afabe4c75c05"
-  integrity sha512-+hkOycxPiV534c4HhpfX6yrlawqVUzITRKwHAmYfmsVreltEl6fAZJ3DPfLMOODw0H3s1Itd6MDCWmP1fl/QvQ==
-
-[email protected]:
-  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"
+[email protected]:
+  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"
Original file line number	Diff line number	Diff line change
		@@ -1,3 +0,0 @@
		/// <reference types="gtag.js" />

		declare module "gtag.js";