Skip to content

Commit b341695

Browse files
UbinquitousUbinquitous
authored
Merge pull request #157 from Team-INSERT/feat/setting
설정 클릭 시 모달 창 뜨도록 하기
2 parents 1e58b8b + 1cc0f5a commit b341695

File tree

10 files changed

+94
-92
lines changed

10 files changed

+94
-92
lines changed

‎gtag.d.ts

-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +0,0 @@
1-
/// <reference types="gtag.js" />
2-
3-
declare module "gtag.js";

‎package.json

+1-2
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"test:ci": "jest --ci"
1212
},
1313
"dependencies": {
14-
"@playwright/test": "^1.29.1",
14+
"@playwright/test": "1.34.3",
1515
"@sentry/nextjs": "^7.90.0",
1616
"@tanstack/react-query": "^4.35.3",
1717
"@testing-library/jest-dom": "^6.1.5",
@@ -75,7 +75,6 @@
7575
"@semantic-release/npm": "^9.0.1",
7676
"@semantic-release/release-notes-generator": "^10.0.3",
7777
"@types/graphql": "^14.5.0",
78-
"@types/gtag.js": "^0.0.18",
7978
"@types/jest": "^29.2.4",
8079
"@types/react-beautiful-dnd": "^13.1.3",
8180
"@types/react-slick": "^0.23.12",

‎src/app/layout.tsx

-21
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import Provider from "@/provider/MainProvider";
22
import React from "react";
3-
import * as gtag from "@/hooks/useGtag";
4-
import Script from "next/script";
53

64
export const metadata = {
75
title: "BSM",
@@ -13,27 +11,8 @@ export default function RootLayout({
1311
}: {
1412
children: React.ReactNode;
1513
}) {
16-
gtag.useGtag();
1714
return (
1815
<html lang="en">
19-
<Script
20-
strategy="afterInteractive"
21-
src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`}
22-
/>
23-
<Script
24-
id="gtag-init"
25-
strategy="afterInteractive"
26-
dangerouslySetInnerHTML={{
27-
__html: `
28-
window.dataLayer = window.dataLayer || [];
29-
function gtag(){dataLayer.push(arguments);}
30-
gtag('js', new Date());
31-
gtag('config', '${gtag.GA_TRACKING_ID}', {
32-
page_path: window.location.pathname,
33-
});
34-
`,
35-
}}
36-
/>
3716
<body>
3817
<Provider>{children}</Provider>
3918
</body>

‎src/assets/images/Back.png

230 Bytes
Loading

‎src/assets/images/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ export { default as defaultProfile } from "./profile_default.png";
44
export { default as QR } from "./QR.png";
55
export { default as TestBanner } from "./test_banner.png";
66
export { default as PageNotFound } from "./page_not_found.png";
7+
export { default as Back } from "./Back.png";
78

89
export { default as Banner1Image } from "./banner/banner1.png";
910
export { default as Banner2Image } from "./banner/banner2.png";

‎src/components/common/Header/@setting/layouts/setting.tsx

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import React from "react";
2+
import styled from "styled-components";
3+
import { XIcon } from "@/assets/icons";
4+
import { theme, flex, font } from "@/styles";
5+
import { useModal } from "@/@modal/hooks";
6+
7+
const SettingModal = () => {
8+
const { closeModal } = useModal();
9+
10+
return (
11+
<Modal>
12+
<ModalContent>
13+
<SettingBox>
14+
<SettingText>설정</SettingText>
15+
<ExitButton>
16+
<XIcon onClick={closeModal} />
17+
</ExitButton>
18+
</SettingBox>
19+
<LogoutBox>로그아웃</LogoutBox>
20+
</ModalContent>
21+
</Modal>
22+
);
23+
};
24+
25+
const Modal = styled.div`
26+
position: fixed;
27+
top: 0;
28+
left: 0;
29+
${flex.CENTER};
30+
width: 100%;
31+
height: 100%;
32+
background-color: rgba(0, 0, 0, 0.5);
33+
`;
34+
35+
const ModalContent = styled.div`
36+
background-color: ${theme.white};
37+
padding: 1.5%;
38+
border-radius: 3%;
39+
`;
40+
41+
const SettingBox = styled.div`
42+
${flex.VERTICAL}
43+
`;
44+
45+
const SettingText = styled.p`
46+
${flex.CENTER};
47+
${font.H4};
48+
`;
49+
50+
const ExitButton = styled.div`
51+
margin-left: 17rem;
52+
`;
53+
54+
const LogoutBox = styled.div`
55+
${flex.CENTER};
56+
margin-top: 7%;
57+
padding: 2%;
58+
border-radius: 5%;
59+
background-color: ${theme.btn_background};
60+
color: ${theme.black};
61+
${font.H4};
62+
cursor: pointer;
63+
64+
&:hover {
65+
background-color: ${theme.content};
66+
}
67+
`;
68+
69+
export default SettingModal;

‎src/components/common/Header/index.tsx

+9-1
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,22 @@ import React from "react";
22
import styled from "styled-components";
33
import { theme, flex } from "@/styles";
44
import { Logo, Setting } from "@/assets/icons";
5+
import { useModal } from "@/@modal/hooks";
56
import Navigation from "./Navigation";
7+
import SettingModal from "./@setting/layouts/setting";
68

79
const Header = () => {
10+
const { openModal } = useModal();
11+
12+
const handleOpenSettingModalClick = () => {
13+
openModal({ component: <SettingModal /> });
14+
};
15+
816
return (
917
<Layout>
1018
<Logo width={42} />
1119
<Navigation />
12-
<Setting />
20+
<Setting onClick={handleOpenSettingModalClick} />
1321
</Layout>
1422
);
1523
};

‎src/hooks/useGtag.ts

-40
Original file line numberDiff line numberDiff line change
@@ -1,40 +0,0 @@
1-
import { useRouter } from "next/router";
2-
import { useEffect } from "react";
3-
4-
export const GA_TRACKING_ID = "G-J8DK7F6M37";
5-
6-
export const pageview = (url: URL) => {
7-
window.gtag("config", GA_TRACKING_ID, {
8-
page_path: url,
9-
});
10-
};
11-
12-
export const event = (
13-
action: Gtag.EventNames,
14-
{ event_category, event_label, value }: Gtag.EventParams,
15-
) => {
16-
window.gtag("event", action, {
17-
event_category,
18-
event_label,
19-
value,
20-
});
21-
};
22-
23-
export const useGtag = () => {
24-
const router = useRouter();
25-
26-
useEffect(() => {
27-
if (process.env.NODE_ENV === "development") return;
28-
29-
const handleRouteChange = (url: URL) => {
30-
pageview(url);
31-
};
32-
33-
router.events.on("routeChangeComplete", handleRouteChange);
34-
router.events.on("hashChangeComplete", handleRouteChange);
35-
return () => {
36-
router.events.off("routeChangeComplete", handleRouteChange);
37-
router.events.off("hashChangeComplete", handleRouteChange);
38-
};
39-
}, [router.events]);
40-
};

‎src/styles/theme.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const theme = {
88
green: "#3CAD4E",
99

1010
background: "#F9FAFF",
11-
11+
btn_background: "#f1f3f5;",
1212
primary_red: "#E54F5A",
1313
primary_blue: "#73AEE3",
1414
primary_yellow: "#FEBC56",

‎yarn.lock

+13-24
Original file line numberDiff line numberDiff line change
@@ -1168,12 +1168,15 @@
11681168
resolved "https://registry.yarnpkg.com/@open-draft/until/-/until-1.0.3.tgz#db9cc719191a62e7d9200f6e7bab21c5b848adca"
11691169
integrity sha512-Aq58f5HiWdyDlFffbbSjAlv596h/cOnt2DO1w3DOC7OJ5EHs0hd/nycJfiu9RJbT6Yk6F1knnRRXNSpxoIVZ9Q==
11701170

1171-
"@playwright/test@^1.29.1":
1172-
version "1.40.1"
1173-
resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.40.1.tgz#9e66322d97b1d74b9f8718bacab15080f24cde65"
1174-
integrity sha512-EaaawMTOeEItCRvfmkI9v6rBkF1svM8wjl/YPRrg2N2Wmp+4qJYkWtJsbew1szfKKDm6fPLy4YAanBhIlf9dWw==
1171+
"@playwright/test@1.34.3":
1172+
version "1.34.3"
1173+
resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.34.3.tgz#d9f1ac3f1a09633b5ca5351c50c308bf802bde53"
1174+
integrity sha512-zPLef6w9P6T/iT6XDYG3mvGOqOyb6eHaV9XtkunYs0+OzxBtrPAAaHotc0X+PJ00WPPnLfFBTl7mf45Mn8DBmw==
11751175
dependencies:
1176-
playwright "1.40.1"
1176+
"@types/node" "*"
1177+
playwright-core "1.34.3"
1178+
optionalDependencies:
1179+
fsevents "2.3.2"
11771180

11781181
"@pnpm/config.env-replace@^1.1.0":
11791182
version "1.1.0"
@@ -1831,12 +1834,7 @@
18311834
integrity sha512-MOkzsEp1Jk5bXuAsHsUi6BVv0zCO+7/2PTiZMXWDSsMXvNU6w/PLMQT2vHn8hy2i0JqojPz1Sz6rsFjHtsU0lA==
18321835
dependencies:
18331836
graphql "*"
1834-
1835-
"@types/gtag.js@^0.0.18":
1836-
version "0.0.18"
1837-
resolved "https://registry.yarnpkg.com/@types/gtag.js/-/gtag.js-0.0.18.tgz#d6bc7cb1acc64ff4f4e4be918d401c53fe9ccf20"
1838-
integrity sha512-GJxnIvuXuVhKaHfsOdzGipoOoXq72y3mdcncc9h6i6E7nlz89zBEj2wrLM7bqO5Xk9Lm2B94MwdQsSwRlaPSWw==
1839-
1837+
18401838
"@types/hast@^2.0.0":
18411839
version "2.3.8"
18421840
resolved "https://registry.yarnpkg.com/@types/hast/-/hast-2.3.8.tgz#4ac5caf38b262b7bd5ca3202dda71f0271635660"
@@ -8355,19 +8353,10 @@ pkg-dir@^7.0.0:
83558353
dependencies:
83568354
find-up "^6.3.0"
83578355

8358-
[email protected]:
8359-
version "1.40.1"
8360-
resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.40.1.tgz#442d15e86866a87d90d07af528e0afabe4c75c05"
8361-
integrity sha512-+hkOycxPiV534c4HhpfX6yrlawqVUzITRKwHAmYfmsVreltEl6fAZJ3DPfLMOODw0H3s1Itd6MDCWmP1fl/QvQ==
8362-
8363-
[email protected]:
8364-
version "1.40.1"
8365-
resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.40.1.tgz#a11bf8dca15be5a194851dbbf3df235b9f53d7ae"
8366-
integrity sha512-2eHI7IioIpQ0bS1Ovg/HszsN/XKNwEG1kbzSDDmADpclKc7CyqkHw7Mg2JCz/bbCxg25QUPcjksoMW7JcIFQmw==
8367-
dependencies:
8368-
playwright-core "1.40.1"
8369-
optionalDependencies:
8370-
fsevents "2.3.2"
8356+
[email protected]:
8357+
version "1.34.3"
8358+
resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.34.3.tgz#bc906ea1b26bb66116ce329436ee59ba2e78fe9f"
8359+
integrity sha512-2pWd6G7OHKemc5x1r1rp8aQcpvDh7goMBZlJv6Co5vCNLVcQJdhxRL09SGaY6HcyHH9aT4tiynZabMofVasBYw==
83718360

83728361
postcss-selector-parser@^6.0.10:
83738362
version "6.0.13"

0 commit comments

Comments
 (0)