diff --git a/package-lock.json b/package-lock.json
index 204f9941..1ade4357 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2069,6 +2069,7 @@
"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.11",
"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.11.tgz",
@@ -2421,6 +2422,7 @@
"node": ">=12"
}
},
+
"node_modules/@esbuild/win32-x64": {
"version": "0.19.11",
"resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.11.tgz",
@@ -3244,6 +3246,7 @@
}
}
},
+
"node_modules/@rollup/rollup-android-arm-eabi": {
"version": "4.9.3",
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.9.3.tgz",
@@ -3400,6 +3403,7 @@
"win32"
]
},
+
"node_modules/@rollup/rollup-win32-x64-msvc": {
"version": "4.9.3",
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.9.3.tgz",
@@ -3726,6 +3730,7 @@
}
}
},
+
"node_modules/@swc/core-darwin-arm64": {
"version": "1.3.102",
"resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.3.102.tgz",
@@ -3870,6 +3875,7 @@
"node": ">=10"
}
},
+
"node_modules/@swc/core-win32-x64-msvc": {
"version": "1.3.102",
"resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.3.102.tgz",
@@ -5903,6 +5909,17 @@
"url": "https://github.com/motdotla/dotenv?sponsor=1"
}
},
+ "node_modules/dotenv": {
+ "version": "16.3.1",
+ "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.3.1.tgz",
+ "integrity": "sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==",
+ "engines": {
+ "node": ">=12"
+ },
+ "funding": {
+ "url": "https://github.com/motdotla/dotenv?sponsor=1"
+ }
+ },
"node_modules/electron-to-chromium": {
"version": "1.4.622",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.622.tgz",
@@ -6714,20 +6731,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 9b2a45b7..dfd6cf1e 100644
--- a/public/mockServiceWorker.js
+++ b/public/mockServiceWorker.js
@@ -8,85 +8,85 @@
* - 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
// Bypass navigation requests.
if (request.mode === "navigate") {
@@ -103,7 +103,7 @@ self.addEventListener("fetch", function (event) {
// 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
}
// Generate unique request ID.
@@ -112,20 +112,20 @@ self.addEventListener("fetch", function (event) {
});
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,
@@ -137,11 +137,11 @@ async function handleRequest(event, requestId) {
},
},
[responseClone.body],
- );
- })();
+ )
+ })()
}
- return response;
+ return response
}
// Resolve the main client for the given event.
@@ -149,15 +149,15 @@ async function handleRequest(event, requestId) {
// 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) => {
@@ -172,26 +172,26 @@ async function resolveMainClient(event) {
}
async function getResponse(event, client, requestId) {
- const { request } = event;
+ const { request } = event
// 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())
// 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).
@@ -199,7 +199,7 @@ async function getResponse(event, client, requestId) {
// 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()
}
// Bypass requests with the explicit bypass header.
@@ -214,7 +214,7 @@ async function getResponse(event, client, requestId) {
const clientMessage = await sendToClient(
client,
{
- type: "REQUEST",
+ type: 'REQUEST',
payload: {
id: requestId,
url: request.url,
@@ -233,38 +233,38 @@ 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) {
@@ -273,15 +273,15 @@ async function respondWithMock(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/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/CreatVoteTitleModal.module.scss b/src/components/Vote/CreatVoteTitleModal/CreatVoteTitleModal.module.scss
new file mode 100644
index 00000000..8227371e
--- /dev/null
+++ b/src/components/Vote/CreatVoteTitleModal/CreatVoteTitleModal.module.scss
@@ -0,0 +1,6 @@
+@use "@/sass" as *;
+
+.container {
+ display: flex;
+ margin-top: 48px;
+}
diff --git a/src/components/Vote/CreatVoteTitleModal/CreatVoteTitleModal.tsx b/src/components/Vote/CreatVoteTitleModal/CreatVoteTitleModal.tsx
new file mode 100644
index 00000000..8d9ac0c1
--- /dev/null
+++ b/src/components/Vote/CreatVoteTitleModal/CreatVoteTitleModal.tsx
@@ -0,0 +1,104 @@
+import {
+ Button,
+ FormControl,
+ FormLabel,
+ Icon,
+ Input,
+ Modal,
+ ModalBody,
+ ModalCloseButton,
+ ModalContent,
+ ModalFooter,
+ ModalHeader,
+ ModalOverlay,
+ 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);
+
+ return (
+
+
+
+
+
+
+
+ 투표 제목을 정해주세요
+
+
+
+
+
+ setInputCount(e.target.value.length)}
+ maxLength={15}
+ borderColor="neutral.800"
+ focusBorderColor="primary.300"
+ variant="flushed"
+ placeholder=" 숙소 정하자, 카페 정하자"
+ fontSize="subTitle"
+ mt="5%"
+ />
+
+ {inputCount}/15자
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default 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..47cc2a24
--- /dev/null
+++ b/src/components/Vote/VoteCandidateItem/VoteCandidateItem.tsx
@@ -0,0 +1,26 @@
+import { Avatar } from "@chakra-ui/react";
+
+import styles from "./VoteCandidateItem.module.scss";
+
+const VoteCandidateItem = () => {
+ 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..d4076471
--- /dev/null
+++ b/src/components/Vote/VoteDetailsField/VoteDetailsField.tsx
@@ -0,0 +1,35 @@
+import { Icon } from "@chakra-ui/react";
+import { GoDotFill } from "react-icons/go";
+
+import styles from "./VoteDetailsField.module.scss";
+
+import VoteCandidateItem from "../VoteCandidateItem/VoteCandidateItem";
+
+// import VoteDetailsFieldZero from "../VoteDetailsFieldZero/VoteDetailsFieldZero";
+
+const VoteDetailsField = () => {
+ // if(CandidateList.length===0) {
+ // //지도 색 neutral300
+ // return
+ // }
+
+ return (
+
+
+
+
+ 진행 중
+
+
+ + 후보 추가(1/15)
+
+
+
+
+
+
+
+
+
+
+ 투표 후보가 없습니다.
+
+
+ 하단 버튼을 눌러 후보를 추가해보세요!
+
+
+
+
+
+
+
{voteTitle}
+
+
+
+
+
+
+
+
+
+ {/* 나중에 여행스페이스 메인에 옮겨야함 */}
+ {/* */}
+
+
+ );
+};
+
+export default VoteDetail;
diff --git a/src/routes/MainRouter/MainRouter.tsx b/src/routes/MainRouter/MainRouter.tsx
index 39b39781..43cc9187 100644
--- a/src/routes/MainRouter/MainRouter.tsx
+++ b/src/routes/MainRouter/MainRouter.tsx
@@ -3,6 +3,7 @@ import { Route, Routes } from "react-router-dom";
import Detail from "@/pages/Detail/Detail";
import Home from "@/pages/Home/Home";
import Dashboard from "@/routes/Dashboard/Dashboard";
+import VoteDetail from "../../pages/VoteDetail/VoteDetail";
function MainRouter() {
return (
@@ -13,6 +14,7 @@ function MainRouter() {
} />
} />
+ } />
} />
);
diff --git a/src/sass/abstracts/_variables.scss b/src/sass/abstracts/_variables.scss
index c474b2c7..d656cacf 100644
--- a/src/sass/abstracts/_variables.scss
+++ b/src/sass/abstracts/_variables.scss
@@ -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
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`,