From 8653207cd1eadf751f4c58f4edafd17fa2fac159 Mon Sep 17 00:00:00 2001 From: SKY-PEY Date: Wed, 3 Jan 2024 22:31:05 +0900 Subject: [PATCH 1/8] Feat: add voteTitleModal markup --- package-lock.json | 4 +- src/components/vote/CreatVoteTitleModal.tsx | 92 +++++++++++++++++++++ src/pages/VoteDetail/VoteDetail.tsx | 12 +++ src/routes/MainRouter/MainRouter.tsx | 2 + vite.config.ts | 3 +- 5 files changed, 110 insertions(+), 3 deletions(-) create mode 100644 src/components/vote/CreatVoteTitleModal.tsx create mode 100644 src/pages/VoteDetail/VoteDetail.tsx diff --git a/package-lock.json b/package-lock.json index 6479bd3f..721f6dd0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,11 +1,11 @@ { - "name": "tripboat-fe", + "name": "tripvote-fe", "version": "0.0.0", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "tripboat-fe", + "name": "tripvote-fe", "version": "0.0.0", "dependencies": { "@chakra-ui/react": "^2.8.2", diff --git a/src/components/vote/CreatVoteTitleModal.tsx b/src/components/vote/CreatVoteTitleModal.tsx new file mode 100644 index 00000000..a1112596 --- /dev/null +++ b/src/components/vote/CreatVoteTitleModal.tsx @@ -0,0 +1,92 @@ +import { useState, useRef } from "react"; +import { + Box, + Button, + Modal, + ModalOverlay, + ModalContent, + ModalHeader, + ModalFooter, + ModalBody, + ModalCloseButton, + useDisclosure, + Input, + FormControl, + FormLabel, +} from "@chakra-ui/react"; + +const CreatVoteTitleModal = () => { + const { isOpen, onOpen, onClose } = useDisclosure(); + const [inputCount, setInputCount] = useState(0); + + return ( + <> + + + + + + + 투표 제목을 정해주세요 + + + + + + setInputCount(e.target.value.length)} + maxLength={15} + borderColor={"23272F"} + focusBorderColor="blue.300" + variant="flushed" + placeholder=" 숙소 정하자, 카페 정하자" + /> + + {inputCount}/15자 + + + + + + + + + + + ); +}; + +export default CreatVoteTitleModal; diff --git a/src/pages/VoteDetail/VoteDetail.tsx b/src/pages/VoteDetail/VoteDetail.tsx new file mode 100644 index 00000000..d965bd1a --- /dev/null +++ b/src/pages/VoteDetail/VoteDetail.tsx @@ -0,0 +1,12 @@ +import CreatVoteTitleModal from "@components/vote/CreatVoteTitleModal"; + +const VoteDetail = () => { + return ( +
+ VoteDetail + +
+ ); +}; + +export default VoteDetail; diff --git a/src/routes/MainRouter/MainRouter.tsx b/src/routes/MainRouter/MainRouter.tsx index c86eed2a..8656ce06 100644 --- a/src/routes/MainRouter/MainRouter.tsx +++ b/src/routes/MainRouter/MainRouter.tsx @@ -3,12 +3,14 @@ import { Route, Routes } from "react-router-dom"; import styles from "./MainRouter.module.scss"; import Home from "../../pages/Home/Home"; +import VoteDetail from "../../pages/VoteDetail/VoteDetail"; function MainRouter() { return (
} /> + } />
); diff --git a/vite.config.ts b/vite.config.ts index a818665d..7909c9da 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -7,7 +7,7 @@ export default defineConfig({ resolve: { alias: [ { find: "@", replacement: "./src" }, - { find: "@components", replacement: "src/components" }, + { find: "@components", replacement: "/src/components" }, { find: "@assets", replacement: "src/assets" }, { find: "@hooks", replacement: "src/hooks" }, { find: "@pages", replacement: "src/pages" }, @@ -20,5 +20,6 @@ export default defineConfig({ watch: { usePolling: true, }, + // host: "192.168.200.117", }, }); From 8390a999e09fd9cc43d605df35d8ae9caaa3816b Mon Sep 17 00:00:00 2001 From: SKY-PEY Date: Wed, 3 Jan 2024 22:44:05 +0900 Subject: [PATCH 2/8] Style: remove comment --- vite.config.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/vite.config.ts b/vite.config.ts index 7909c9da..b4fc214d 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -20,6 +20,5 @@ export default defineConfig({ watch: { usePolling: true, }, - // host: "192.168.200.117", }, }); From 937d8c9b579093921455509a421d28d67acdeee3 Mon Sep 17 00:00:00 2001 From: SKY-PEY Date: Wed, 3 Jan 2024 23:48:35 +0900 Subject: [PATCH 3/8] Fix: fix import error and modify position in GNB scss --- .../GlobalNavigationBar/GlobalNavigationBar.module.scss | 2 +- src/pages/VoteDetail/VoteDetail.tsx | 2 +- vite.config.ts | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/GlobalNavigationBar/GlobalNavigationBar.module.scss b/src/components/GlobalNavigationBar/GlobalNavigationBar.module.scss index f80aa439..ff8c58cf 100644 --- a/src/components/GlobalNavigationBar/GlobalNavigationBar.module.scss +++ b/src/components/GlobalNavigationBar/GlobalNavigationBar.module.scss @@ -1,7 +1,7 @@ @use "@/sass"; .container { - position: absolute; + position: fixed; bottom: 0; width: 100%; diff --git a/src/pages/VoteDetail/VoteDetail.tsx b/src/pages/VoteDetail/VoteDetail.tsx index d965bd1a..3896f9c7 100644 --- a/src/pages/VoteDetail/VoteDetail.tsx +++ b/src/pages/VoteDetail/VoteDetail.tsx @@ -1,4 +1,4 @@ -import CreatVoteTitleModal from "@components/vote/CreatVoteTitleModal"; +import CreatVoteTitleModal from "@/components/vote/CreatVoteTitleModal"; const VoteDetail = () => { return ( diff --git a/vite.config.ts b/vite.config.ts index 414e0928..a20a0e79 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -6,8 +6,8 @@ export default defineConfig({ plugins: [react()], resolve: { alias: [ - { find: "@", replacement: "./src" }, - { find: "@components", replacement: "/src/components" }, + { find: "@", replacement: "/src" }, + { find: "@components", replacement: "src/components" }, { find: "@assets", replacement: "src/assets" }, { find: "@hooks", replacement: "src/hooks" }, { find: "@pages", replacement: "src/pages" }, From 6059d2745f204c8711ee967875aa341a0fdd5d09 Mon Sep 17 00:00:00 2001 From: SKY-PEY Date: Thu, 4 Jan 2024 15:44:11 +0900 Subject: [PATCH 4/8] Feat: add voteHeader --- .../vote/CreatVoteTitleModal.module.scss | 7 ++++ src/components/vote/CreatVoteTitleModal.tsx | 41 +++++++++++-------- .../vote/VoteDetailsHeader.module.scss | 29 +++++++++++++ src/components/vote/VoteDetailsHeader.tsx | 24 +++++++++++ src/pages/VoteDetail/VoteDetail.module.scss | 12 ++++++ src/pages/VoteDetail/VoteDetail.tsx | 8 +++- 6 files changed, 101 insertions(+), 20 deletions(-) create mode 100644 src/components/vote/CreatVoteTitleModal.module.scss create mode 100644 src/components/vote/VoteDetailsHeader.module.scss create mode 100644 src/components/vote/VoteDetailsHeader.tsx create mode 100644 src/pages/VoteDetail/VoteDetail.module.scss diff --git a/src/components/vote/CreatVoteTitleModal.module.scss b/src/components/vote/CreatVoteTitleModal.module.scss new file mode 100644 index 00000000..64717ccb --- /dev/null +++ b/src/components/vote/CreatVoteTitleModal.module.scss @@ -0,0 +1,7 @@ +@use "@/sass" as *; + +.container { + display: flex; + background-color: aqua; + margin-top: 48px; +} diff --git a/src/components/vote/CreatVoteTitleModal.tsx b/src/components/vote/CreatVoteTitleModal.tsx index a1112596..85a66ee3 100644 --- a/src/components/vote/CreatVoteTitleModal.tsx +++ b/src/components/vote/CreatVoteTitleModal.tsx @@ -1,42 +1,45 @@ -import { useState, useRef } from "react"; import { Box, Button, + FormControl, + FormLabel, + Input, Modal, - ModalOverlay, - ModalContent, - ModalHeader, - ModalFooter, ModalBody, ModalCloseButton, + ModalContent, + ModalFooter, + ModalHeader, + ModalOverlay, useDisclosure, - Input, - FormControl, - FormLabel, } from "@chakra-ui/react"; +import { useRef, useState } from "react"; + +import styles from "./CreatVoteTitleModal.module.scss"; const CreatVoteTitleModal = () => { const { isOpen, onOpen, onClose } = useDisclosure(); const [inputCount, setInputCount] = useState(0); return ( - <> +
- + 투표 제목을 정해주세요 @@ -46,15 +49,15 @@ const CreatVoteTitleModal = () => { setInputCount(e.target.value.length)} maxLength={15} - borderColor={"23272F"} - focusBorderColor="blue.300" + borderColor="#23272F" + focusBorderColor="#2388FF" variant="flushed" placeholder=" 숙소 정하자, 카페 정하자" /> @@ -70,11 +73,13 @@ const CreatVoteTitleModal = () => { mx="5%" mb="3%" w="100%" - h="50px" + h="3.125rem" + colorScheme="blue" isDisabled={inputCount === 0} _disabled={{ bg: "#E3E5E5", color: "#979C9E", + pointerEvents: "none", }} borderRadius="30px" bg="#2388FF" @@ -85,7 +90,7 @@ const CreatVoteTitleModal = () => { - +
); }; diff --git a/src/components/vote/VoteDetailsHeader.module.scss b/src/components/vote/VoteDetailsHeader.module.scss new file mode 100644 index 00000000..3fe45ebe --- /dev/null +++ b/src/components/vote/VoteDetailsHeader.module.scss @@ -0,0 +1,29 @@ +@use "@/sass"; + +.container { + position: fixed; + height: 3rem; + width: 31.25rem; + min-width: 22.5rem; + + display: flex; + justify-content: space-between; + align-items: center; + // background-color: palevioletred; + border-bottom: 2px solid black; + + padding: 0 16px; + // margin-bottom: 3rem; +} + +.iconBox { + display: flex; + gap: 16px; + align-items: center; + font-weight: bold; + font-size: 20px; + + & > p { + font-size: 14px; + } +} diff --git a/src/components/vote/VoteDetailsHeader.tsx b/src/components/vote/VoteDetailsHeader.tsx new file mode 100644 index 00000000..d7d6caf7 --- /dev/null +++ b/src/components/vote/VoteDetailsHeader.tsx @@ -0,0 +1,24 @@ +import { BsThreeDots } from "react-icons/bs"; +import { FaRegMap } from "react-icons/fa"; +import { MdOutlineArrowBackIosNew } from "react-icons/md"; + +import styles from "./VoteDetailsHeader.module.scss"; + +const VoteDetailsHeader = () => { + const voteTitle = "카페 어디로 갈래?"; + + return ( +
+
+ +

{voteTitle}

+
+
+ + +
+
+ ); +}; + +export default VoteDetailsHeader; diff --git a/src/pages/VoteDetail/VoteDetail.module.scss b/src/pages/VoteDetail/VoteDetail.module.scss new file mode 100644 index 00000000..49fbb680 --- /dev/null +++ b/src/pages/VoteDetail/VoteDetail.module.scss @@ -0,0 +1,12 @@ +@use "@/sass"; + +.container { + height: 100vh; + width: 100%; + // background-color: aquamarine; + // padding-top: 3rem; + + display: flex; + flex-direction: column; + align-items: center; +} diff --git a/src/pages/VoteDetail/VoteDetail.tsx b/src/pages/VoteDetail/VoteDetail.tsx index 3896f9c7..0266525e 100644 --- a/src/pages/VoteDetail/VoteDetail.tsx +++ b/src/pages/VoteDetail/VoteDetail.tsx @@ -1,9 +1,13 @@ +import styles from "./VoteDetail.module.scss"; + import CreatVoteTitleModal from "@/components/vote/CreatVoteTitleModal"; +import VoteDetailsHeader from "@/components/vote/VoteDetailsHeader"; const VoteDetail = () => { return ( -
- VoteDetail +
+ +
); From 817ad04947b5730b9f63eda6837ee54dbe1659d9 Mon Sep 17 00:00:00 2001 From: SKY-PEY Date: Thu, 4 Jan 2024 18:14:33 +0900 Subject: [PATCH 5/8] Design: add voteField and chakra custom theme --- package-lock.json | 686 +----------------- public/mockServiceWorker.js | 221 +++--- .../vote/CreatVoteTitleModal.module.scss | 1 - src/components/vote/CreatVoteTitleModal.tsx | 27 +- src/components/vote/VoteDetailsField.tsx | 12 + src/main.tsx | 3 +- src/pages/VoteDetail/VoteDetail.module.scss | 2 - src/sass/abstracts/_variables.scss | 6 +- src/sass/chakraCustomTheme.tsx | 121 +++ 9 files changed, 292 insertions(+), 787 deletions(-) create mode 100644 src/components/vote/VoteDetailsField.tsx create mode 100644 src/sass/chakraCustomTheme.tsx diff --git a/package-lock.json b/package-lock.json index 81a8d042..b4ab9687 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2084,358 +2084,6 @@ "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz", "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==" }, - "node_modules/@esbuild/aix-ppc64": { - "version": "0.19.10", - "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.10.tgz", - "integrity": "sha512-Q+mk96KJ+FZ30h9fsJl+67IjNJm3x2eX+GBWGmocAKgzp27cowCOOqSdscX80s0SpdFXZnIv/+1xD1EctFx96Q==", - "cpu": [ - "ppc64" - ], - "dev": true, - "optional": true, - "os": [ - "aix" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/android-arm": { - "version": "0.19.10", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.10.tgz", - "integrity": "sha512-7W0bK7qfkw1fc2viBfrtAEkDKHatYfHzr/jKAHNr9BvkYDXPcC6bodtm8AyLJNNuqClLNaeTLuwURt4PRT9d7w==", - "cpu": [ - "arm" - ], - "dev": true, - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/android-arm64": { - "version": "0.19.10", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.10.tgz", - "integrity": "sha512-1X4CClKhDgC3by7k8aOWZeBXQX8dHT5QAMCAQDArCLaYfkppoARvh0fit3X2Qs+MXDngKcHv6XXyQCpY0hkK1Q==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/android-x64": { - "version": "0.19.10", - "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.10.tgz", - "integrity": "sha512-O/nO/g+/7NlitUxETkUv/IvADKuZXyH4BHf/g/7laqKC4i/7whLpB0gvpPc2zpF0q9Q6FXS3TS75QHac9MvVWw==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/darwin-arm64": { - "version": "0.19.10", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.10.tgz", - "integrity": "sha512-YSRRs2zOpwypck+6GL3wGXx2gNP7DXzetmo5pHXLrY/VIMsS59yKfjPizQ4lLt5vEI80M41gjm2BxrGZ5U+VMA==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/darwin-x64": { - "version": "0.19.10", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.10.tgz", - "integrity": "sha512-alfGtT+IEICKtNE54hbvPg13xGBe4GkVxyGWtzr+yHO7HIiRJppPDhOKq3zstTcVf8msXb/t4eavW3jCDpMSmA==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/freebsd-arm64": { - "version": "0.19.10", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.10.tgz", - "integrity": "sha512-dMtk1wc7FSH8CCkE854GyGuNKCewlh+7heYP/sclpOG6Cectzk14qdUIY5CrKDbkA/OczXq9WesqnPl09mj5dg==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "freebsd" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/freebsd-x64": { - "version": "0.19.10", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.10.tgz", - "integrity": "sha512-G5UPPspryHu1T3uX8WiOEUa6q6OlQh6gNl4CO4Iw5PS+Kg5bVggVFehzXBJY6X6RSOMS8iXDv2330VzaObm4Ag==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "freebsd" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-arm": { - "version": "0.19.10", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.10.tgz", - "integrity": "sha512-j6gUW5aAaPgD416Hk9FHxn27On28H4eVI9rJ4az7oCGTFW48+LcgNDBN+9f8rKZz7EEowo889CPKyeaD0iw9Kg==", - "cpu": [ - "arm" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-arm64": { - "version": "0.19.10", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.10.tgz", - "integrity": "sha512-QxaouHWZ+2KWEj7cGJmvTIHVALfhpGxo3WLmlYfJ+dA5fJB6lDEIg+oe/0//FuyVHuS3l79/wyBxbHr0NgtxJQ==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-ia32": { - "version": "0.19.10", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.10.tgz", - "integrity": "sha512-4ub1YwXxYjj9h1UIZs2hYbnTZBtenPw5NfXCRgEkGb0b6OJ2gpkMvDqRDYIDRjRdWSe/TBiZltm3Y3Q8SN1xNg==", - "cpu": [ - "ia32" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-loong64": { - "version": "0.19.10", - "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.10.tgz", - "integrity": "sha512-lo3I9k+mbEKoxtoIbM0yC/MZ1i2wM0cIeOejlVdZ3D86LAcFXFRdeuZmh91QJvUTW51bOK5W2BznGNIl4+mDaA==", - "cpu": [ - "loong64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-mips64el": { - "version": "0.19.10", - "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.10.tgz", - "integrity": "sha512-J4gH3zhHNbdZN0Bcr1QUGVNkHTdpijgx5VMxeetSk6ntdt+vR1DqGmHxQYHRmNb77tP6GVvD+K0NyO4xjd7y4A==", - "cpu": [ - "mips64el" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-ppc64": { - "version": "0.19.10", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.10.tgz", - "integrity": "sha512-tgT/7u+QhV6ge8wFMzaklOY7KqiyitgT1AUHMApau32ZlvTB/+efeCtMk4eXS+uEymYK249JsoiklZN64xt6oQ==", - "cpu": [ - "ppc64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-riscv64": { - "version": "0.19.10", - "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.10.tgz", - "integrity": "sha512-0f/spw0PfBMZBNqtKe5FLzBDGo0SKZKvMl5PHYQr3+eiSscfJ96XEknCe+JoOayybWUFQbcJTrk946i3j9uYZA==", - "cpu": [ - "riscv64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-s390x": { - "version": "0.19.10", - "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.10.tgz", - "integrity": "sha512-pZFe0OeskMHzHa9U38g+z8Yx5FNCLFtUnJtQMpwhS+r4S566aK2ci3t4NCP4tjt6d5j5uo4h7tExZMjeKoehAA==", - "cpu": [ - "s390x" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-x64": { - "version": "0.19.10", - "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.10.tgz", - "integrity": "sha512-SpYNEqg/6pZYoc+1zLCjVOYvxfZVZj6w0KROZ3Fje/QrM3nfvT2llI+wmKSrWuX6wmZeTapbarvuNNK/qepSgA==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/netbsd-x64": { - "version": "0.19.10", - "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.10.tgz", - "integrity": "sha512-ACbZ0vXy9zksNArWlk2c38NdKg25+L9pr/mVaj9SUq6lHZu/35nx2xnQVRGLrC1KKQqJKRIB0q8GspiHI3J80Q==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "netbsd" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/openbsd-x64": { - "version": "0.19.10", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.10.tgz", - "integrity": "sha512-PxcgvjdSjtgPMiPQrM3pwSaG4kGphP+bLSb+cihuP0LYdZv1epbAIecHVl5sD3npkfYBZ0ZnOjR878I7MdJDFg==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "openbsd" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/sunos-x64": { - "version": "0.19.10", - "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.10.tgz", - "integrity": "sha512-ZkIOtrRL8SEJjr+VHjmW0znkPs+oJXhlJbNwfI37rvgeMtk3sxOQevXPXjmAPZPigVTncvFqLMd+uV0IBSEzqA==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "sunos" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/win32-arm64": { - "version": "0.19.10", - "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.10.tgz", - "integrity": "sha512-+Sa4oTDbpBfGpl3Hn3XiUe4f8TU2JF7aX8cOfqFYMMjXp6ma6NJDztl5FDG8Ezx0OjwGikIHw+iA54YLDNNVfw==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/win32-ia32": { - "version": "0.19.10", - "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.10.tgz", - "integrity": "sha512-EOGVLK1oWMBXgfttJdPHDTiivYSjX6jDNaATeNOaCOFEVcfMjtbx7WVQwPSE1eIfCp/CaSF2nSrDtzc4I9f8TQ==", - "cpu": [ - "ia32" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=12" - } - }, "node_modules/@esbuild/win32-x64": { "version": "0.19.10", "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.10.tgz", @@ -3147,162 +2795,6 @@ } } }, - "node_modules/@rollup/rollup-android-arm-eabi": { - "version": "4.9.1", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.9.1.tgz", - "integrity": "sha512-6vMdBZqtq1dVQ4CWdhFwhKZL6E4L1dV6jUjuBvsavvNJSppzi6dLBbuV+3+IyUREaj9ZFvQefnQm28v4OCXlig==", - "cpu": [ - "arm" - ], - "dev": true, - "optional": true, - "os": [ - "android" - ] - }, - "node_modules/@rollup/rollup-android-arm64": { - "version": "4.9.1", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.9.1.tgz", - "integrity": "sha512-Jto9Fl3YQ9OLsTDWtLFPtaIMSL2kwGyGoVCmPC8Gxvym9TCZm4Sie+cVeblPO66YZsYH8MhBKDMGZ2NDxuk/XQ==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "android" - ] - }, - "node_modules/@rollup/rollup-darwin-arm64": { - "version": "4.9.1", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.9.1.tgz", - "integrity": "sha512-LtYcLNM+bhsaKAIGwVkh5IOWhaZhjTfNOkGzGqdHvhiCUVuJDalvDxEdSnhFzAn+g23wgsycmZk1vbnaibZwwA==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "darwin" - ] - }, - "node_modules/@rollup/rollup-darwin-x64": { - "version": "4.9.1", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.9.1.tgz", - "integrity": "sha512-KyP/byeXu9V+etKO6Lw3E4tW4QdcnzDG/ake031mg42lob5tN+5qfr+lkcT/SGZaH2PdW4Z1NX9GHEkZ8xV7og==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "darwin" - ] - }, - "node_modules/@rollup/rollup-linux-arm-gnueabihf": { - "version": "4.9.1", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.9.1.tgz", - "integrity": "sha512-Yqz/Doumf3QTKplwGNrCHe/B2p9xqDghBZSlAY0/hU6ikuDVQuOUIpDP/YcmoT+447tsZTmirmjgG3znvSCR0Q==", - "cpu": [ - "arm" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@rollup/rollup-linux-arm64-gnu": { - "version": "4.9.1", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.9.1.tgz", - "integrity": "sha512-u3XkZVvxcvlAOlQJ3UsD1rFvLWqu4Ef/Ggl40WAVCuogf4S1nJPHh5RTgqYFpCOvuGJ7H5yGHabjFKEZGExk5Q==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@rollup/rollup-linux-arm64-musl": { - "version": "4.9.1", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.9.1.tgz", - "integrity": "sha512-0XSYN/rfWShW+i+qjZ0phc6vZ7UWI8XWNz4E/l+6edFt+FxoEghrJHjX1EY/kcUGCnZzYYRCl31SNdfOi450Aw==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@rollup/rollup-linux-riscv64-gnu": { - "version": "4.9.1", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.9.1.tgz", - "integrity": "sha512-LmYIO65oZVfFt9t6cpYkbC4d5lKHLYv5B4CSHRpnANq0VZUQXGcCPXHzbCXCz4RQnx7jvlYB1ISVNCE/omz5cw==", - "cpu": [ - "riscv64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@rollup/rollup-linux-x64-gnu": { - "version": "4.9.1", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.9.1.tgz", - "integrity": "sha512-kr8rEPQ6ns/Lmr/hiw8sEVj9aa07gh1/tQF2Y5HrNCCEPiCBGnBUt9tVusrcBBiJfIt1yNaXN6r1CCmpbFEDpg==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@rollup/rollup-linux-x64-musl": { - "version": "4.9.1", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.9.1.tgz", - "integrity": "sha512-t4QSR7gN+OEZLG0MiCgPqMWZGwmeHhsM4AkegJ0Kiy6TnJ9vZ8dEIwHw1LcZKhbHxTY32hp9eVCMdR3/I8MGRw==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@rollup/rollup-win32-arm64-msvc": { - "version": "4.9.1", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.9.1.tgz", - "integrity": "sha512-7XI4ZCBN34cb+BH557FJPmh0kmNz2c25SCQeT9OiFWEgf8+dL6ZwJ8f9RnUIit+j01u07Yvrsuu1rZGxJCc51g==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ] - }, - "node_modules/@rollup/rollup-win32-ia32-msvc": { - "version": "4.9.1", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.9.1.tgz", - "integrity": "sha512-yE5c2j1lSWOH5jp+Q0qNL3Mdhr8WuqCNVjc6BxbVfS5cAS6zRmdiw7ktb8GNpDCEUJphILY6KACoFoRtKoqNQg==", - "cpu": [ - "ia32" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ] - }, "node_modules/@rollup/rollup-win32-x64-msvc": { "version": "4.9.1", "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.9.1.tgz", @@ -3629,150 +3121,6 @@ } } }, - "node_modules/@swc/core-darwin-arm64": { - "version": "1.3.101", - "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.3.101.tgz", - "integrity": "sha512-mNFK+uHNPRXSnfTOG34zJOeMl2waM4hF4a2NY7dkMXrPqw9CoJn4MwTXJcyMiSz1/BnNjjTCHF3Yhj0jPxmkzQ==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">=10" - } - }, - "node_modules/@swc/core-darwin-x64": { - "version": "1.3.101", - "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.3.101.tgz", - "integrity": "sha512-B085j8XOx73Fg15KsHvzYWG262bRweGr3JooO1aW5ec5pYbz5Ew9VS5JKYS03w2UBSxf2maWdbPz2UFAxg0whw==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">=10" - } - }, - "node_modules/@swc/core-linux-arm-gnueabihf": { - "version": "1.3.101", - "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.3.101.tgz", - "integrity": "sha512-9xLKRb6zSzRGPqdz52Hy5GuB1lSjmLqa0lST6MTFads3apmx4Vgs8Y5NuGhx/h2I8QM4jXdLbpqQlifpzTlSSw==", - "cpu": [ - "arm" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=10" - } - }, - "node_modules/@swc/core-linux-arm64-gnu": { - "version": "1.3.101", - "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.3.101.tgz", - "integrity": "sha512-oE+r1lo7g/vs96Weh2R5l971dt+ZLuhaUX+n3BfDdPxNHfObXgKMjO7E+QS5RbGjv/AwiPCxQmbdCp/xN5ICJA==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=10" - } - }, - "node_modules/@swc/core-linux-arm64-musl": { - "version": "1.3.101", - "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.3.101.tgz", - "integrity": "sha512-OGjYG3H4BMOTnJWJyBIovCez6KiHF30zMIu4+lGJTCrxRI2fAjGLml3PEXj8tC3FMcud7U2WUn6TdG0/te2k6g==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=10" - } - }, - "node_modules/@swc/core-linux-x64-gnu": { - "version": "1.3.101", - "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.3.101.tgz", - "integrity": "sha512-/kBMcoF12PRO/lwa8Z7w4YyiKDcXQEiLvM+S3G9EvkoKYGgkkz4Q6PSNhF5rwg/E3+Hq5/9D2R+6nrkF287ihg==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=10" - } - }, - "node_modules/@swc/core-linux-x64-musl": { - "version": "1.3.101", - "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.3.101.tgz", - "integrity": "sha512-kDN8lm4Eew0u1p+h1l3JzoeGgZPQ05qDE0czngnjmfpsH2sOZxVj1hdiCwS5lArpy7ktaLu5JdRnx70MkUzhXw==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=10" - } - }, - "node_modules/@swc/core-win32-arm64-msvc": { - "version": "1.3.101", - "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.3.101.tgz", - "integrity": "sha512-9Wn8TTLWwJKw63K/S+jjrZb9yoJfJwCE2RV5vPCCWmlMf3U1AXj5XuWOLUX+Rp2sGKau7wZKsvywhheWm+qndQ==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=10" - } - }, - "node_modules/@swc/core-win32-ia32-msvc": { - "version": "1.3.101", - "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.3.101.tgz", - "integrity": "sha512-onO5KvICRVlu2xmr4//V2je9O2XgS1SGKpbX206KmmjcJhXN5EYLSxW9qgg+kgV5mip+sKTHTAu7IkzkAtElYA==", - "cpu": [ - "ia32" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=10" - } - }, "node_modules/@swc/core-win32-x64-msvc": { "version": "1.3.101", "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.3.101.tgz", @@ -4179,6 +3527,8 @@ "version": "0.4.1", "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz", "integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==", + "dev": true + }, "node_modules/@types/estree": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", @@ -5725,6 +5075,16 @@ "node": ">=12" } }, + "node_modules/dot-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz", + "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==", + "dev": true, + "dependencies": { + "no-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "node_modules/dotenv": { "version": "16.3.1", "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.3.1.tgz", @@ -5734,14 +5094,6 @@ }, "funding": { "url": "https://github.com/motdotla/dotenv?sponsor=1" - "node_modules/dot-case": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz", - "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==", - "dev": true, - "dependencies": { - "no-case": "^3.0.4", - "tslib": "^2.0.3" } }, "node_modules/electron-to-chromium": { @@ -6501,20 +5853,6 @@ "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==", "dev": true }, - "node_modules/fsevents": { - "version": "2.3.3", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", - "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", - "dev": true, - "hasInstallScript": true, - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": "^8.16.0 || ^10.6.0 || >=11.0.0" - } - }, "node_modules/function-bind": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", diff --git a/public/mockServiceWorker.js b/public/mockServiceWorker.js index 279a39a5..e369128e 100644 --- a/public/mockServiceWorker.js +++ b/public/mockServiceWorker.js @@ -8,113 +8,124 @@ * - Please do NOT serve this file on production. */ -const INTEGRITY_CHECKSUM = "c5f7f8e188b673ea4e677df7ea3c5a39"; -const IS_MOCKED_RESPONSE = Symbol("isMockedResponse"); -const activeClientIds = new Set(); +const INTEGRITY_CHECKSUM = 'c5f7f8e188b673ea4e677df7ea3c5a39' +const IS_MOCKED_RESPONSE = Symbol('isMockedResponse') +const activeClientIds = new Set() -self.addEventListener("install", function () { - self.skipWaiting(); -}); +self.addEventListener('install', function () { + self.skipWaiting() +}) -self.addEventListener("activate", function (event) { - event.waitUntil(self.clients.claim()); -}); +self.addEventListener('activate', function (event) { + event.waitUntil(self.clients.claim()) +}) -self.addEventListener("message", async function (event) { - const clientId = event.source.id; +self.addEventListener('message', async function (event) { + const clientId = event.source.id if (!clientId || !self.clients) { - return; + return } - const client = await self.clients.get(clientId); + const client = await self.clients.get(clientId) if (!client) { - return; + return } const allClients = await self.clients.matchAll({ - type: "window", - }); + type: 'window', + }) switch (event.data) { - case "KEEPALIVE_REQUEST": { + case 'KEEPALIVE_REQUEST': { sendToClient(client, { - type: "KEEPALIVE_RESPONSE", - }); - break; + type: 'KEEPALIVE_RESPONSE', + }) + break } - case "INTEGRITY_CHECK_REQUEST": { + case 'INTEGRITY_CHECK_REQUEST': { sendToClient(client, { - type: "INTEGRITY_CHECK_RESPONSE", + type: 'INTEGRITY_CHECK_RESPONSE', payload: INTEGRITY_CHECKSUM, - }); - break; + }) + break } - case "MOCK_ACTIVATE": { - activeClientIds.add(clientId); + case 'MOCK_ACTIVATE': { + activeClientIds.add(clientId) sendToClient(client, { - type: "MOCKING_ENABLED", + type: 'MOCKING_ENABLED', payload: true, - }); - break; + }) + break } - case "MOCK_DEACTIVATE": { - activeClientIds.delete(clientId); - break; + case 'MOCK_DEACTIVATE': { + activeClientIds.delete(clientId) + break } - case "CLIENT_CLOSED": { - activeClientIds.delete(clientId); + case 'CLIENT_CLOSED': { + activeClientIds.delete(clientId) const remainingClients = allClients.filter((client) => { - return client.id !== clientId; - }); + return client.id !== clientId + }) + // Unregister itself when there are no more clients if (remainingClients.length === 0) { - self.registration.unregister(); + self.registration.unregister() } - break; + break } } -}); +}) -self.addEventListener("fetch", function (event) { - const { request } = event; +self.addEventListener('fetch', function (event) { + const { request } = event - if (request.mode === "navigate") { - return; + // Bypass navigation requests. + if (request.mode === 'navigate') { + return } - if (request.cache === "only-if-cached" && request.mode !== "same-origin") { - return; + // Opening the DevTools triggers the "only-if-cached" request + // that cannot be handled by the worker. Bypass such requests. + if (request.cache === 'only-if-cached' && request.mode !== 'same-origin') { + return } + // Bypass all requests when there are no active clients. + // Prevents the self-unregistered worked from handling requests + // after it's been deleted (still remains active until the next reload). if (activeClientIds.size === 0) { - return; + return } - const requestId = crypto.randomUUID(); - event.respondWith(handleRequest(event, requestId)); -}); + // Generate unique request ID. + const requestId = crypto.randomUUID() + event.respondWith(handleRequest(event, requestId)) +}) async function handleRequest(event, requestId) { - const client = await resolveMainClient(event); - const response = await getResponse(event, client, requestId); + const client = await resolveMainClient(event) + const response = await getResponse(event, client, requestId) + // Send back the response clone for the "response:*" life-cycle events. + // Ensure MSW is active and ready to handle the message, otherwise + // this message will pend indefinitely. if (client && activeClientIds.has(client.id)) { - (async function () { - const responseClone = response.clone(); + ;(async function () { + const responseClone = response.clone() sendToClient( client, { - type: "RESPONSE", + type: 'RESPONSE', payload: { requestId, isMockedResponse: IS_MOCKED_RESPONSE in response, @@ -126,64 +137,84 @@ async function handleRequest(event, requestId) { }, }, [responseClone.body], - ); - })(); + ) + })() } - return response; + return response } +// Resolve the main client for the given event. +// Client that issues a request doesn't necessarily equal the client +// that registered the worker. It's with the latter the worker should +// communicate with during the response resolving phase. async function resolveMainClient(event) { - const client = await self.clients.get(event.clientId); + const client = await self.clients.get(event.clientId) - if (client?.frameType === "top-level") { - return client; + if (client?.frameType === 'top-level') { + return client } const allClients = await self.clients.matchAll({ - type: "window", - }); + type: 'window', + }) return allClients .filter((client) => { - return client.visibilityState === "visible"; + // Get only those clients that are currently visible. + return client.visibilityState === 'visible' }) .find((client) => { - return activeClientIds.has(client.id); - }); + // Find the client ID that's recorded in the + // set of clients that have registered the worker. + return activeClientIds.has(client.id) + }) } async function getResponse(event, client, requestId) { - const { request } = event; + const { request } = event - const requestClone = request.clone(); + // Clone the request because it might've been already used + // (i.e. its body has been read and sent to the client). + const requestClone = request.clone() function passthrough() { - const headers = Object.fromEntries(requestClone.headers.entries()); + const headers = Object.fromEntries(requestClone.headers.entries()) - delete headers["x-msw-intention"]; + // Remove internal MSW request header so the passthrough request + // complies with any potential CORS preflight checks on the server. + // Some servers forbid unknown request headers. + delete headers['x-msw-intention'] - return fetch(requestClone, { headers }); + return fetch(requestClone, { headers }) } + // Bypass mocking when the client is not active. if (!client) { - return passthrough(); + return passthrough() } + // Bypass initial page load requests (i.e. static assets). + // The absence of the immediate/parent client in the map of the active clients + // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet + // and is not ready to handle requests. if (!activeClientIds.has(client.id)) { - return passthrough(); + return passthrough() } - const mswIntention = request.headers.get("x-msw-intention"); - if (["bypass", "passthrough"].includes(mswIntention)) { - return passthrough(); + // Bypass requests with the explicit bypass header. + // Such requests can be issued by "ctx.fetch()". + const mswIntention = request.headers.get('x-msw-intention') + if (['bypass', 'passthrough'].includes(mswIntention)) { + return passthrough() } - const requestBuffer = await request.arrayBuffer(); + // Notify the client that a request has been intercepted. + const requestBuffer = await request.arrayBuffer() const clientMessage = await sendToClient( client, { - type: "REQUEST", + type: 'REQUEST', payload: { id: requestId, url: request.url, @@ -202,51 +233,55 @@ async function getResponse(event, client, requestId) { }, }, [requestBuffer], - ); + ) switch (clientMessage.type) { - case "MOCK_RESPONSE": { - return respondWithMock(clientMessage.data); + case 'MOCK_RESPONSE': { + return respondWithMock(clientMessage.data) } - case "MOCK_NOT_FOUND": { - return passthrough(); + case 'MOCK_NOT_FOUND': { + return passthrough() } } - return passthrough(); + return passthrough() } function sendToClient(client, message, transferrables = []) { return new Promise((resolve, reject) => { - const channel = new MessageChannel(); + const channel = new MessageChannel() channel.port1.onmessage = (event) => { if (event.data && event.data.error) { - return reject(event.data.error); + return reject(event.data.error) } - resolve(event.data); - }; + resolve(event.data) + } client.postMessage( message, [channel.port2].concat(transferrables.filter(Boolean)), - ); - }); + ) + }) } async function respondWithMock(response) { + // Setting response status code to 0 is a no-op. + // However, when responding with a "Response.error()", the produced Response + // instance will have status code set to 0. Since it's not possible to create + // a Response instance with status code 0, handle that use-case separately. if (response.status === 0) { - return Response.error(); + return Response.error() } - const mockedResponse = new Response(response.body, response); + const mockedResponse = new Response(response.body, response) Reflect.defineProperty(mockedResponse, IS_MOCKED_RESPONSE, { value: true, enumerable: true, - }); + }) - return mockedResponse; + return mockedResponse } diff --git a/src/components/vote/CreatVoteTitleModal.module.scss b/src/components/vote/CreatVoteTitleModal.module.scss index 64717ccb..8227371e 100644 --- a/src/components/vote/CreatVoteTitleModal.module.scss +++ b/src/components/vote/CreatVoteTitleModal.module.scss @@ -2,6 +2,5 @@ .container { display: flex; - background-color: aqua; margin-top: 48px; } diff --git a/src/components/vote/CreatVoteTitleModal.tsx b/src/components/vote/CreatVoteTitleModal.tsx index 85a66ee3..c10da2c7 100644 --- a/src/components/vote/CreatVoteTitleModal.tsx +++ b/src/components/vote/CreatVoteTitleModal.tsx @@ -1,5 +1,4 @@ import { - Box, Button, FormControl, FormLabel, @@ -13,7 +12,7 @@ import { ModalOverlay, useDisclosure, } from "@chakra-ui/react"; -import { useRef, useState } from "react"; +import { useState } from "react"; import styles from "./CreatVoteTitleModal.module.scss"; @@ -24,14 +23,16 @@ const CreatVoteTitleModal = () => { return (
@@ -39,7 +40,7 @@ const CreatVoteTitleModal = () => { - + 투표 제목을 정해주세요 @@ -49,15 +50,15 @@ const CreatVoteTitleModal = () => { setInputCount(e.target.value.length)} maxLength={15} - borderColor="#23272F" - focusBorderColor="#2388FF" + borderColor="neutral.800" + focusBorderColor="primary.300" variant="flushed" placeholder=" 숙소 정하자, 카페 정하자" /> @@ -77,13 +78,13 @@ const CreatVoteTitleModal = () => { colorScheme="blue" isDisabled={inputCount === 0} _disabled={{ - bg: "#E3E5E5", - color: "#979C9E", + bg: "neutral.200", + color: "neutral.400", pointerEvents: "none", }} borderRadius="30px" - bg="#2388FF" - color="#fff" + bg="primary.300" + color="neutral.0" > 완료 diff --git a/src/components/vote/VoteDetailsField.tsx b/src/components/vote/VoteDetailsField.tsx new file mode 100644 index 00000000..1e12ffaf --- /dev/null +++ b/src/components/vote/VoteDetailsField.tsx @@ -0,0 +1,12 @@ +import React from "react"; + +const VoteDetailsField = () => { + return ( +
+

투표 후보가 없습니다.

+

하단 버튼을 눌러 후보를 추가해보세요.

+
+ ); +}; + +export default VoteDetailsField; diff --git a/src/main.tsx b/src/main.tsx index d6ba4c78..8ede4594 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -6,6 +6,7 @@ import { RecoilRoot } from "recoil"; import "./sass/index.scss"; import App from "./App.tsx"; +import { customTheme } from "./sass/chakraCustomTheme.tsx"; async function enableMocking() { if (import.meta.env.MODE !== "development") { @@ -20,7 +21,7 @@ enableMocking().then(() => { ReactDOM.createRoot(document.getElementById("root")!).render( - + diff --git a/src/pages/VoteDetail/VoteDetail.module.scss b/src/pages/VoteDetail/VoteDetail.module.scss index 49fbb680..50821960 100644 --- a/src/pages/VoteDetail/VoteDetail.module.scss +++ b/src/pages/VoteDetail/VoteDetail.module.scss @@ -3,8 +3,6 @@ .container { height: 100vh; width: 100%; - // background-color: aquamarine; - // padding-top: 3rem; display: flex; flex-direction: column; diff --git a/src/sass/abstracts/_variables.scss b/src/sass/abstracts/_variables.scss index e987a5cc..ba08f88a 100644 --- a/src/sass/abstracts/_variables.scss +++ b/src/sass/abstracts/_variables.scss @@ -62,7 +62,7 @@ $typography-font-size-map: ( // 14px "captionLarge": 1.3rem, // 13px - "captionMidium": 1.2rem, + "captionMedium": 1.2rem, // 12px "captionSmall": 1.2rem, // 12px @@ -79,7 +79,7 @@ $typography-font-weight-map: ( "button": bold, "tabLabel": medium, "captionLarge": medium, - "captionMidium": bold, + "captionMedium": bold, "captionSmall": medium, ); @@ -104,7 +104,7 @@ $typography-line-height-map: ( // 22px "captionLarge": 2.2rem, // 22px - "captionMidium": 2rem, + "captionMedium": 2rem, // 20px "captionSmall": 2rem, // 20px diff --git a/src/sass/chakraCustomTheme.tsx b/src/sass/chakraCustomTheme.tsx new file mode 100644 index 00000000..22f31d7d --- /dev/null +++ b/src/sass/chakraCustomTheme.tsx @@ -0,0 +1,121 @@ +import { extendTheme } from "@chakra-ui/react"; + +export const customTheme = extendTheme({ + colors: { + primary: { + 100: "#d4e8ff", + 200: "#62aaff", + 300: "#0088ff", + 400: "#0172d8", + }, + secondary: { + 100: "#ffe2ed", + 300: "#ff85b1", + 400: "#e23774", + }, + success: { + 100: "#71d07b", + 300: "#19c43e", + 400: "#04724d", + }, + danger: { + 100: "#fef1f2", + 300: "#e02d3c", + 400: "#ba2532", + }, + neutral: { + 0: "#fff", + 100: "#f2f4f5", + 200: "#e3e5e5", + 300: "#cdcfd0", + 400: "#979c9e", + 700: "#3f444d", + 800: "#23272f", + 900: "#1d2433", + 1000: "#0a0d1", + }, + etc: { + 0: "#fed600", + }, + }, + + shadows: { + shadow: { + 100: "0px 0px 8px 0px rgba(20, 20, 20, 0.08), 0px 0px 1px 0px rgba(20, 20, 20, 0.04)", + 200: "0px 1px 8px 2px rgba(20, 20, 20, 0.1), 0px 0px 1px 0px rgba(20, 20, 20, 0.04)", + 300: "0px 1px 24px 8px rgba(20, 20, 20, 0.08)", + }, + }, + + //$typography-font-size-map + fontSizes: { + headline: "2.2rem", + // 22px + titleLarge: "2rem", + // 20px" + titleMedium: "1.8rem", + // 18px + titleSmall: "1.6rem", + // 16px + subTitle: "1.6rem", + // 16px + bodyLarge: "1.6rem", + // 16px + bodySmall: "1.4rem", + // 14px + button: "1.4rem", + // 14px + tabLabel: "1.4rem", + // 14px + captionLarge: "1.3rem", + // 13px + captionMedium: "1.2rem", + // 12px + captionSmall: "1.2rem", + // 12px + }, + + //$typography-font-weight-map + fontWeights: { + headline: "bold", + titleLarge: "bold", + titleMedium: "bold", + titleSmall: "bold", + subTitle: "medium", + bodyLarge: "normal", + bodySmall: "normal", + button: "bold", + tabLabel: "medium", + captionLarge: "medium", + captionMedium: "bold", + captionSmall: "medium", + }, + + //$typography-line-height-map + lineHeights: { + headline: "3rem", + // 30px + titleLarge: "2.8rem", + // 28px + titleMedium: "2.6rem", + // 26px + titleSmall: "2.4rem", + // 24px + subTitle: "2.4rem", + // 24px + bodyLarge: "2.4rem", + // 24px + bodySmall: "2.2rem", + // 22px + button: "2.2rem", + // 22px + tabLabel: "2.2rem", + // 22px + captionLarge: "2.2rem", + // 22px + captionMedium: "2rem", + // 20px + captionSmall: "2rem", + // 20px + }, +}); From 3350770d9b3418b9f66bfaa0fb4980802385725c Mon Sep 17 00:00:00 2001 From: SKY-PEY Date: Fri, 5 Jan 2024 16:04:50 +0900 Subject: [PATCH 6/8] Design: modifying css --- src/components/vote/VoteDetailsField.module.scss | 5 +++++ src/components/vote/VoteDetailsField.tsx | 4 ++-- src/components/vote/VoteDetailsHeader.module.scss | 10 ++++------ src/main.tsx | 1 - src/pages/VoteDetail/VoteDetail.module.scss | 2 ++ src/pages/VoteDetail/VoteDetail.tsx | 7 ++++--- 6 files changed, 17 insertions(+), 12 deletions(-) create mode 100644 src/components/vote/VoteDetailsField.module.scss diff --git a/src/components/vote/VoteDetailsField.module.scss b/src/components/vote/VoteDetailsField.module.scss new file mode 100644 index 00000000..47d1a02f --- /dev/null +++ b/src/components/vote/VoteDetailsField.module.scss @@ -0,0 +1,5 @@ +@use "@/sass"; + +.container { + display: flex; +} diff --git a/src/components/vote/VoteDetailsField.tsx b/src/components/vote/VoteDetailsField.tsx index 1e12ffaf..5e877d06 100644 --- a/src/components/vote/VoteDetailsField.tsx +++ b/src/components/vote/VoteDetailsField.tsx @@ -1,8 +1,8 @@ -import React from "react"; +import styles from "./VoteDetailsField.module.scss"; const VoteDetailsField = () => { return ( -
+

투표 후보가 없습니다.

하단 버튼을 눌러 후보를 추가해보세요.

diff --git a/src/components/vote/VoteDetailsHeader.module.scss b/src/components/vote/VoteDetailsHeader.module.scss index 3fe45ebe..6413ff34 100644 --- a/src/components/vote/VoteDetailsHeader.module.scss +++ b/src/components/vote/VoteDetailsHeader.module.scss @@ -1,19 +1,17 @@ @use "@/sass"; .container { - position: fixed; height: 3rem; - width: 31.25rem; - min-width: 22.5rem; + width: 500px; + min-width: 360px; display: flex; justify-content: space-between; align-items: center; - // background-color: palevioletred; border-bottom: 2px solid black; - padding: 0 16px; - // margin-bottom: 3rem; + + z-index: 999; } .iconBox { diff --git a/src/main.tsx b/src/main.tsx index 4fd98cc8..408e0573 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -7,7 +7,6 @@ import "./sass/index.scss"; import { customTheme } from "./sass/chakraCustomTheme.tsx"; import App from "./App.tsx"; -import { customTheme } from "./sass/chakraCustomTheme.tsx"; async function enableMocking() { if (import.meta.env.MODE !== "development") { diff --git a/src/pages/VoteDetail/VoteDetail.module.scss b/src/pages/VoteDetail/VoteDetail.module.scss index 50821960..d4d42b39 100644 --- a/src/pages/VoteDetail/VoteDetail.module.scss +++ b/src/pages/VoteDetail/VoteDetail.module.scss @@ -4,6 +4,8 @@ height: 100vh; width: 100%; + background-color: aqua; + display: flex; flex-direction: column; align-items: center; diff --git a/src/pages/VoteDetail/VoteDetail.tsx b/src/pages/VoteDetail/VoteDetail.tsx index 0266525e..eb8c7bb8 100644 --- a/src/pages/VoteDetail/VoteDetail.tsx +++ b/src/pages/VoteDetail/VoteDetail.tsx @@ -1,13 +1,14 @@ import styles from "./VoteDetail.module.scss"; -import CreatVoteTitleModal from "@/components/vote/CreatVoteTitleModal"; -import VoteDetailsHeader from "@/components/vote/VoteDetailsHeader"; +import CreatVoteTitleModal from "@/components/Vote/CreatVoteTitleModal"; +import VoteDetailsField from "@/components/Vote/VoteDetailsField"; +import VoteDetailsHeader from "@/components/Vote/VoteDetailsHeader"; const VoteDetail = () => { return (
- +
); From d08a4280cb28cca8323cc8ddbd620ecdca03c045 Mon Sep 17 00:00:00 2001 From: SKY-PEY Date: Sat, 6 Jan 2024 03:54:13 +0900 Subject: [PATCH 7/8] Design: markup the voteDetail page and add a buttonTheme in chakra --- src/assets/ic_vote.svg | 4 + .../CreatVoteTitleModal.module.scss | 0 .../CreatVoteTitleModal.tsx | 62 +++++++------- .../VoteCandidateItem.module.scss | 80 +++++++++++++++++++ .../VoteCandidateItem/VoteCandidateItem.tsx | 25 ++++++ .../VoteDetailsBottomButton.module.scss | 6 ++ .../VoteDetailsBottomButton.tsx | 13 +++ .../VoteDetailsField.module.scss | 32 ++++++++ .../VoteDetailsField/VoteDetailsField.tsx | 34 ++++++++ .../VoteDetailsFieldZero.module.scss | 20 +++++ .../VoteDetailsFieldZero.tsx | 18 +++++ .../VoteDetailsHeader.module.scss | 36 +++++++++ .../VoteDetailsHeader}/VoteDetailsHeader.tsx | 8 +- .../vote/VoteDetailsField.module.scss | 5 -- src/components/vote/VoteDetailsField.tsx | 12 --- .../vote/VoteDetailsHeader.module.scss | 27 ------- src/pages/VoteDetail/VoteDetail.module.scss | 5 +- src/pages/VoteDetail/VoteDetail.tsx | 12 ++- src/sass/chakraCustomTheme.tsx | 48 +++++++++++ 19 files changed, 366 insertions(+), 81 deletions(-) create mode 100644 src/assets/ic_vote.svg rename src/components/{vote => Vote/CreatVoteTitleModal}/CreatVoteTitleModal.module.scss (100%) rename src/components/{vote => Vote/CreatVoteTitleModal}/CreatVoteTitleModal.tsx (61%) create mode 100644 src/components/Vote/VoteCandidateItem/VoteCandidateItem.module.scss create mode 100644 src/components/Vote/VoteCandidateItem/VoteCandidateItem.tsx create mode 100644 src/components/Vote/VoteDetailsBottomButton/VoteDetailsBottomButton.module.scss create mode 100644 src/components/Vote/VoteDetailsBottomButton/VoteDetailsBottomButton.tsx create mode 100644 src/components/Vote/VoteDetailsField/VoteDetailsField.module.scss create mode 100644 src/components/Vote/VoteDetailsField/VoteDetailsField.tsx create mode 100644 src/components/Vote/VoteDetailsFieldZero/VoteDetailsFieldZero.module.scss create mode 100644 src/components/Vote/VoteDetailsFieldZero/VoteDetailsFieldZero.tsx create mode 100644 src/components/Vote/VoteDetailsHeader/VoteDetailsHeader.module.scss rename src/components/{vote => Vote/VoteDetailsHeader}/VoteDetailsHeader.tsx (77%) delete mode 100644 src/components/vote/VoteDetailsField.module.scss delete mode 100644 src/components/vote/VoteDetailsField.tsx delete mode 100644 src/components/vote/VoteDetailsHeader.module.scss diff --git a/src/assets/ic_vote.svg b/src/assets/ic_vote.svg new file mode 100644 index 00000000..853e0563 --- /dev/null +++ b/src/assets/ic_vote.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/vote/CreatVoteTitleModal.module.scss b/src/components/Vote/CreatVoteTitleModal/CreatVoteTitleModal.module.scss similarity index 100% rename from src/components/vote/CreatVoteTitleModal.module.scss rename to src/components/Vote/CreatVoteTitleModal/CreatVoteTitleModal.module.scss diff --git a/src/components/vote/CreatVoteTitleModal.tsx b/src/components/Vote/CreatVoteTitleModal/CreatVoteTitleModal.tsx similarity index 61% rename from src/components/vote/CreatVoteTitleModal.tsx rename to src/components/Vote/CreatVoteTitleModal/CreatVoteTitleModal.tsx index c10da2c7..8d9ac0c1 100644 --- a/src/components/vote/CreatVoteTitleModal.tsx +++ b/src/components/Vote/CreatVoteTitleModal/CreatVoteTitleModal.tsx @@ -2,6 +2,7 @@ import { Button, FormControl, FormLabel, + Icon, Input, Modal, ModalBody, @@ -13,9 +14,12 @@ import { useDisclosure, } from "@chakra-ui/react"; import { useState } from "react"; +import { LiaVoteYeaSolid } from "react-icons/lia"; import styles from "./CreatVoteTitleModal.module.scss"; +// import VoteIcon from "@/assets/ic_vote.svg"; + const CreatVoteTitleModal = () => { const { isOpen, onOpen, onClose } = useDisclosure(); const [inputCount, setInputCount] = useState(0); @@ -23,30 +27,39 @@ const CreatVoteTitleModal = () => { return (
- + - - + + 투표 제목을 정해주세요 - - + + setInputCount(e.target.value.length)} maxLength={15} @@ -54,12 +67,15 @@ const CreatVoteTitleModal = () => { focusBorderColor="primary.300" variant="flushed" placeholder=" 숙소 정하자, 카페 정하자" + fontSize="subTitle" + mt="5%" /> {inputCount}/15자 @@ -71,20 +87,10 @@ const CreatVoteTitleModal = () => { diff --git a/src/components/Vote/VoteCandidateItem/VoteCandidateItem.module.scss b/src/components/Vote/VoteCandidateItem/VoteCandidateItem.module.scss new file mode 100644 index 00000000..e8bdbddb --- /dev/null +++ b/src/components/Vote/VoteCandidateItem/VoteCandidateItem.module.scss @@ -0,0 +1,80 @@ +@use "@/sass" as *; + +.container { + width: 100%; //335? + height: 14.4rem; + padding: 15px 20px; + + border-radius: 16px; + border: 2px solid $neutral200; + box-shadow: $shadow100; + + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.main { + width: 100%; + + display: flex; + justify-content: space-between; + + &__contextBox { + display: flex; + flex-direction: column; + gap: 5px; + + &__name { + @include typography(titleMedium); + color: $neutral900; + } + &__category { + @include typography(captionSmall); + color: $neutral400; + } + &__addDay { + @include typography(captionSmall); + color: $neutral800; + } + } + &__voteBox { + @include typography(bodySmall); + color: $neutral800; + + width: 5.8rem; + height: 8rem; + + padding: 10px; + + border-radius: 10px; + border: 2px solid $neutral200; + + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + gap: 4px; + + &__star { + font-size: 2.4rem; + } + } +} + +.comment { + display: flex; + align-items: center; + gap: 6px; + + &__text { + height: 2.2rem; + @include typography(bodySmall); + color: $neutral900; + background-color: $neutral100; + + padding: 0 17px; + border-radius: 7px; + } +} diff --git a/src/components/Vote/VoteCandidateItem/VoteCandidateItem.tsx b/src/components/Vote/VoteCandidateItem/VoteCandidateItem.tsx new file mode 100644 index 00000000..fec7e370 --- /dev/null +++ b/src/components/Vote/VoteCandidateItem/VoteCandidateItem.tsx @@ -0,0 +1,25 @@ +import { Avatar } from "@chakra-ui/react"; +import styles from "./VoteCandidateItem.module.scss"; + +const VoteCandidateItem = () => { + return ( +
+
+
+
대전 성심당 {">"}
+
카페
+
+ 일정에 추가
+
+
+
☆
투표
+
+
+
+ +
여기 갈래?
+
+
+ ); +}; + +export default VoteCandidateItem; diff --git a/src/components/Vote/VoteDetailsBottomButton/VoteDetailsBottomButton.module.scss b/src/components/Vote/VoteDetailsBottomButton/VoteDetailsBottomButton.module.scss new file mode 100644 index 00000000..f6afe520 --- /dev/null +++ b/src/components/Vote/VoteDetailsBottomButton/VoteDetailsBottomButton.module.scss @@ -0,0 +1,6 @@ +@use "@/sass" as *; + +// .bottomButton { +// @include vote-common-button !important; +// @include typography(button) !important; +// } diff --git a/src/components/Vote/VoteDetailsBottomButton/VoteDetailsBottomButton.tsx b/src/components/Vote/VoteDetailsBottomButton/VoteDetailsBottomButton.tsx new file mode 100644 index 00000000..879b0c50 --- /dev/null +++ b/src/components/Vote/VoteDetailsBottomButton/VoteDetailsBottomButton.tsx @@ -0,0 +1,13 @@ +import { Button } from "@chakra-ui/react"; + +import styles from "./VoteDetailsBottomButton.module.scss"; + +const VoteDetailsBottomButton = () => { + return ( +
+ +
+ ); +}; + +export default VoteDetailsBottomButton; diff --git a/src/components/Vote/VoteDetailsField/VoteDetailsField.module.scss b/src/components/Vote/VoteDetailsField/VoteDetailsField.module.scss new file mode 100644 index 00000000..fa7c3a1f --- /dev/null +++ b/src/components/Vote/VoteDetailsField/VoteDetailsField.module.scss @@ -0,0 +1,32 @@ +@use "@/sass" as *; + +.container { + width: 100%; + padding: 20px; + + display: flex; + flex-direction: column; + flex-grow: 1; + + &__stateBar { + margin-bottom: 15px; + display: flex; + justify-content: space-between; + align-items: center; + + &__state { + @include typography(captionSmall); + color: $primary200; + //color:$neutral400; + } + &__addCandidate { + @include typography(button); + color: $neutral900; + } + } + &__candidateList { + display: flex; + flex-direction: column; + gap: 16px; + } +} diff --git a/src/components/Vote/VoteDetailsField/VoteDetailsField.tsx b/src/components/Vote/VoteDetailsField/VoteDetailsField.tsx new file mode 100644 index 00000000..3754015b --- /dev/null +++ b/src/components/Vote/VoteDetailsField/VoteDetailsField.tsx @@ -0,0 +1,34 @@ +import { Icon } from "@chakra-ui/react"; +import VoteCandidateItem from "../VoteCandidateItem/VoteCandidateItem"; +import styles from "./VoteDetailsField.module.scss"; + +import { GoDotFill } from "react-icons/go"; + +// import VoteDetailsFieldZero from "../VoteDetailsFieldZero/VoteDetailsFieldZero"; + +const VoteDetailsField = () => { + // if(CandidateList.length===0) { + // //지도 색 neutral300 + // return + // } + + return ( +
+
+
+ + 진행 중 +
+
+ + 후보 추가(1/15) +
+
+
+ + + +
+
+ ); +}; +export default VoteDetailsField; diff --git a/src/components/Vote/VoteDetailsFieldZero/VoteDetailsFieldZero.module.scss b/src/components/Vote/VoteDetailsFieldZero/VoteDetailsFieldZero.module.scss new file mode 100644 index 00000000..3cc2caba --- /dev/null +++ b/src/components/Vote/VoteDetailsFieldZero/VoteDetailsFieldZero.module.scss @@ -0,0 +1,20 @@ +@use "@/sass" as *; + +.container { + display: flex; + flex-direction: column; + flex-grow: 1; + + &__zeroTextBox { + text-align: center; + margin-top: 25vh; + &__title { + @include typography(titleSmall); + color: $neutral400; + } + &__text { + @include typography(captionSmall); + color: $neutral300; + } + } +} diff --git a/src/components/Vote/VoteDetailsFieldZero/VoteDetailsFieldZero.tsx b/src/components/Vote/VoteDetailsFieldZero/VoteDetailsFieldZero.tsx new file mode 100644 index 00000000..9f1d2d40 --- /dev/null +++ b/src/components/Vote/VoteDetailsFieldZero/VoteDetailsFieldZero.tsx @@ -0,0 +1,18 @@ +import styles from "./VoteDetailsFieldZero.module.scss"; + +const VoteDetailsFieldZero = () => { + return ( +
+
+

+ 투표 후보가 없습니다. +

+

+ 하단 버튼을 눌러 후보를 추가해보세요! +

+
+
+ ); +}; + +export default VoteDetailsFieldZero; diff --git a/src/components/Vote/VoteDetailsHeader/VoteDetailsHeader.module.scss b/src/components/Vote/VoteDetailsHeader/VoteDetailsHeader.module.scss new file mode 100644 index 00000000..58776061 --- /dev/null +++ b/src/components/Vote/VoteDetailsHeader/VoteDetailsHeader.module.scss @@ -0,0 +1,36 @@ +@use "@/sass" as *; + +.container { + height: 4rem; + width: 45rem; + min-width: 36rem; + position: fixed; + top: 0; + left: 50%; + transform: translateX(-50%); + + padding: 0 16px; + + background-color: $neutral0; + + display: flex; + justify-content: space-between; + align-items: center; + + font-size: 2.4rem; + + z-index: 100; +} + +.title { + @include typography(tabLabel); + height: 2.2rem; + margin-left: 40px; +} + +.iconBox { + display: flex; + justify-content: space-between; + align-items: center; + gap: 16px; +} diff --git a/src/components/vote/VoteDetailsHeader.tsx b/src/components/Vote/VoteDetailsHeader/VoteDetailsHeader.tsx similarity index 77% rename from src/components/vote/VoteDetailsHeader.tsx rename to src/components/Vote/VoteDetailsHeader/VoteDetailsHeader.tsx index d7d6caf7..0eecd11b 100644 --- a/src/components/vote/VoteDetailsHeader.tsx +++ b/src/components/Vote/VoteDetailsHeader/VoteDetailsHeader.tsx @@ -7,12 +7,16 @@ import styles from "./VoteDetailsHeader.module.scss"; const VoteDetailsHeader = () => { const voteTitle = "카페 어디로 갈래?"; + //상태에 따른 아이콘 disabled + // 또는 없애기 + return (
-
+
-

{voteTitle}

+

{voteTitle}

+
diff --git a/src/components/vote/VoteDetailsField.module.scss b/src/components/vote/VoteDetailsField.module.scss deleted file mode 100644 index 47d1a02f..00000000 --- a/src/components/vote/VoteDetailsField.module.scss +++ /dev/null @@ -1,5 +0,0 @@ -@use "@/sass"; - -.container { - display: flex; -} diff --git a/src/components/vote/VoteDetailsField.tsx b/src/components/vote/VoteDetailsField.tsx deleted file mode 100644 index 5e877d06..00000000 --- a/src/components/vote/VoteDetailsField.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import styles from "./VoteDetailsField.module.scss"; - -const VoteDetailsField = () => { - return ( -
-

투표 후보가 없습니다.

-

하단 버튼을 눌러 후보를 추가해보세요.

-
- ); -}; - -export default VoteDetailsField; diff --git a/src/components/vote/VoteDetailsHeader.module.scss b/src/components/vote/VoteDetailsHeader.module.scss deleted file mode 100644 index 6413ff34..00000000 --- a/src/components/vote/VoteDetailsHeader.module.scss +++ /dev/null @@ -1,27 +0,0 @@ -@use "@/sass"; - -.container { - height: 3rem; - width: 500px; - min-width: 360px; - - display: flex; - justify-content: space-between; - align-items: center; - border-bottom: 2px solid black; - padding: 0 16px; - - z-index: 999; -} - -.iconBox { - display: flex; - gap: 16px; - align-items: center; - font-weight: bold; - font-size: 20px; - - & > p { - font-size: 14px; - } -} diff --git a/src/pages/VoteDetail/VoteDetail.module.scss b/src/pages/VoteDetail/VoteDetail.module.scss index d4d42b39..e1ddeb1b 100644 --- a/src/pages/VoteDetail/VoteDetail.module.scss +++ b/src/pages/VoteDetail/VoteDetail.module.scss @@ -1,10 +1,9 @@ -@use "@/sass"; +@use "@/sass" as *; .container { height: 100vh; width: 100%; - - background-color: aqua; + margin-top: 4rem; display: flex; flex-direction: column; diff --git a/src/pages/VoteDetail/VoteDetail.tsx b/src/pages/VoteDetail/VoteDetail.tsx index eb8c7bb8..78c5bbf6 100644 --- a/src/pages/VoteDetail/VoteDetail.tsx +++ b/src/pages/VoteDetail/VoteDetail.tsx @@ -1,15 +1,19 @@ import styles from "./VoteDetail.module.scss"; -import CreatVoteTitleModal from "@/components/Vote/CreatVoteTitleModal"; -import VoteDetailsField from "@/components/Vote/VoteDetailsField"; -import VoteDetailsHeader from "@/components/Vote/VoteDetailsHeader"; +// import CreatVoteTitleModal from "@/components/Vote/CreatVoteTitleModal/CreatVoteTitleModal"; +import VoteDetailsBottomButton from "@/components/Vote/VoteDetailsBottomButton/VoteDetailsBottomButton"; +import VoteDetailsField from "@/components/Vote/VoteDetailsField/VoteDetailsField"; +import VoteDetailsHeader from "@/components/Vote/VoteDetailsHeader/VoteDetailsHeader"; const VoteDetail = () => { return (
- + + {/* 나중에 여행스페이스 메인에 옮겨야함 */} + {/* */} +
); }; diff --git a/src/sass/chakraCustomTheme.tsx b/src/sass/chakraCustomTheme.tsx index 14c408a1..7fa49a11 100644 --- a/src/sass/chakraCustomTheme.tsx +++ b/src/sass/chakraCustomTheme.tsx @@ -1,6 +1,54 @@ import { extendTheme } from "@chakra-ui/react"; export const customTheme = extendTheme({ + components: { + Button: { + baseStyle: { + _disabled: { + backgroundColor: "neutral.200", + color: "neutral.400", + PointerEvent: "none", + }, + }, + //ex) Button 컴포넌트 내부에 variant="CTAButton" + variants: { + blueButton: { + backgroundColor: "primary.300", + borderRadius: "16px", + + color: "neutral.0", + fontSize: "button", + fontWeight: "button", + lineHeight: "button", + + _hover: { + backgroundColor: "primary.400", + }, + }, + CTAButton: { + position: "fixed", + bottom: "2.4rem", + left: "50%", + transform: "translateX(-50%)", + width: "32.7rem", + height: "4.6rem", + + backgroundColor: "primary.300", + borderRadius: "16px", + + color: "neutral.0", + fontSize: "button", + fontWeight: "button", + lineHeight: "button", + + _hover: { + backgroundColor: "primary.400", + }, + }, + }, + }, + }, + fonts: { heading: `'suit', sans-serif`, body: `'suit', sans-serif`, From 57e839d470e5cc44ea2609db4cf8a0bab4f74ea7 Mon Sep 17 00:00:00 2001 From: SKY-PEY Date: Sat, 6 Jan 2024 21:41:18 +0900 Subject: [PATCH 8/8] Conf: comment unused imports --- src/components/Vote/VoteCandidateItem/VoteCandidateItem.tsx | 1 + .../Vote/VoteDetailsBottomButton/VoteDetailsBottomButton.tsx | 2 +- src/components/Vote/VoteDetailsField/VoteDetailsField.tsx | 5 +++-- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/Vote/VoteCandidateItem/VoteCandidateItem.tsx b/src/components/Vote/VoteCandidateItem/VoteCandidateItem.tsx index fec7e370..47cc2a24 100644 --- a/src/components/Vote/VoteCandidateItem/VoteCandidateItem.tsx +++ b/src/components/Vote/VoteCandidateItem/VoteCandidateItem.tsx @@ -1,4 +1,5 @@ import { Avatar } from "@chakra-ui/react"; + import styles from "./VoteCandidateItem.module.scss"; const VoteCandidateItem = () => { diff --git a/src/components/Vote/VoteDetailsBottomButton/VoteDetailsBottomButton.tsx b/src/components/Vote/VoteDetailsBottomButton/VoteDetailsBottomButton.tsx index 879b0c50..e3aba6bf 100644 --- a/src/components/Vote/VoteDetailsBottomButton/VoteDetailsBottomButton.tsx +++ b/src/components/Vote/VoteDetailsBottomButton/VoteDetailsBottomButton.tsx @@ -1,6 +1,6 @@ import { Button } from "@chakra-ui/react"; -import styles from "./VoteDetailsBottomButton.module.scss"; +//import styles from "./VoteDetailsBottomButton.module.scss"; const VoteDetailsBottomButton = () => { return ( diff --git a/src/components/Vote/VoteDetailsField/VoteDetailsField.tsx b/src/components/Vote/VoteDetailsField/VoteDetailsField.tsx index 3754015b..d4076471 100644 --- a/src/components/Vote/VoteDetailsField/VoteDetailsField.tsx +++ b/src/components/Vote/VoteDetailsField/VoteDetailsField.tsx @@ -1,8 +1,9 @@ import { Icon } from "@chakra-ui/react"; -import VoteCandidateItem from "../VoteCandidateItem/VoteCandidateItem"; +import { GoDotFill } from "react-icons/go"; + import styles from "./VoteDetailsField.module.scss"; -import { GoDotFill } from "react-icons/go"; +import VoteCandidateItem from "../VoteCandidateItem/VoteCandidateItem"; // import VoteDetailsFieldZero from "../VoteDetailsFieldZero/VoteDetailsFieldZero";