From 5f5d8f5967cfa59c615d2dba9bdd79cbd48e0568 Mon Sep 17 00:00:00 2001 From: lybell-art Date: Mon, 19 Aug 2024 12:25:35 +0900 Subject: [PATCH 01/13] =?UTF-8?q?[perf]=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20la?= =?UTF-8?q?zy=20loading=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mainPage/features/detailInformation/DetailItem.jsx | 1 + src/mainPage/features/fcfs/cardGame/Card.jsx | 2 ++ src/mainPage/features/fcfs/description/DateEventPrize.jsx | 2 +- src/mainPage/features/interactions/description/GiftDetail.jsx | 2 +- .../features/interactions/description/InteractionSlide.jsx | 2 ++ src/mainPage/features/simpleInformation/contentSection.jsx | 2 +- 6 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/mainPage/features/detailInformation/DetailItem.jsx b/src/mainPage/features/detailInformation/DetailItem.jsx index 5a76d766..6fe3ce48 100644 --- a/src/mainPage/features/detailInformation/DetailItem.jsx +++ b/src/mainPage/features/detailInformation/DetailItem.jsx @@ -7,6 +7,7 @@ function DetailItem({ img, title, description }) { className="absolute w-full h-full -z-10 top-0 left-0 object-cover" width="1920" height="1080" + loading="lazy" />

diff --git a/src/mainPage/features/fcfs/cardGame/Card.jsx b/src/mainPage/features/fcfs/cardGame/Card.jsx index 66ce5529..b9d76087 100644 --- a/src/mainPage/features/fcfs/cardGame/Card.jsx +++ b/src/mainPage/features/fcfs/cardGame/Card.jsx @@ -46,6 +46,7 @@ function Card({ index, locked, isFlipped, setFlipped, setGlobalLock, getCardAnsw srcSet={`${hidden1x} 1x, ${hidden2x} 2x`} alt="hidden" draggable="false" + loading="lazy" /> {isCorrect

diff --git a/src/mainPage/features/fcfs/description/DateEventPrize.jsx b/src/mainPage/features/fcfs/description/DateEventPrize.jsx index 81ee0bc9..26136528 100644 --- a/src/mainPage/features/fcfs/description/DateEventPrize.jsx +++ b/src/mainPage/features/fcfs/description/DateEventPrize.jsx @@ -14,7 +14,7 @@ function DateEventPrize({ date, title, capacity, image }) { return (
- {title} + {title}

{contentList.map((content, index) => (

- 경품 + 경품
diff --git a/src/mainPage/features/interactions/description/InteractionSlide.jsx b/src/mainPage/features/interactions/description/InteractionSlide.jsx index 9f011ef8..0e8b1450 100644 --- a/src/mainPage/features/interactions/description/InteractionSlide.jsx +++ b/src/mainPage/features/interactions/description/InteractionSlide.jsx @@ -60,11 +60,13 @@ export default function InteractionSlide({ interactionDesc, index, isCurrent, sl inactiveImage activeImage
diff --git a/src/mainPage/features/simpleInformation/contentSection.jsx b/src/mainPage/features/simpleInformation/contentSection.jsx index 7625ba15..436cc385 100644 --- a/src/mainPage/features/simpleInformation/contentSection.jsx +++ b/src/mainPage/features/simpleInformation/contentSection.jsx @@ -45,7 +45,7 @@ export default function ContentSection({ content }) { onAnimationEnd={() => setIsHighlighted(true)} className={`${isVisible ? style.fadeIn : "opacity-0"} z-0 flex flex-col font-bold`} > - {content.title} + {content.title} {content.title} From 956bfcb2066c43325d0ac2c75ebe468ca4b2275c Mon Sep 17 00:00:00 2001 From: lybell-art Date: Mon, 19 Aug 2024 14:19:09 +0900 Subject: [PATCH 02/13] =?UTF-8?q?[fix]=20=EA=B8=B0=EB=8C=80=ED=8F=89=20inf?= =?UTF-8?q?o=EA=B0=80=20401=EC=9D=BC=20=EB=95=8C=20=EA=B8=B0=EB=8C=80?= =?UTF-8?q?=ED=8F=89=20=EB=93=B1=EB=A1=9D=20=EB=B2=84=ED=8A=BC=EC=9D=B4=20?= =?UTF-8?q?=EB=9C=A8=EA=B8=B4=20=ED=95=98=EB=8F=84=EB=A1=9D=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mainPage/features/comment/commentForm/index.jsx | 4 ++++ src/mainPage/features/comment/mock.js | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/mainPage/features/comment/commentForm/index.jsx b/src/mainPage/features/comment/commentForm/index.jsx index d0e65bc9..1fd45844 100644 --- a/src/mainPage/features/comment/commentForm/index.jsx +++ b/src/mainPage/features/comment/commentForm/index.jsx @@ -32,6 +32,10 @@ function CommentForm() { setButtonFetchState(submitted ? "disabled" : "enabled"); }) .catch((e) => { + if(e.status === 401) { + setButtonFetchState("enabled"); + return; + } console.error(e); setButtonFetchState("error"); }) diff --git a/src/mainPage/features/comment/mock.js b/src/mainPage/features/comment/mock.js index 982645bd..13cde409 100644 --- a/src/mainPage/features/comment/mock.js +++ b/src/mainPage/features/comment/mock.js @@ -18,7 +18,7 @@ const handlers = [ http.get("/api/v1/comment/info", ({ request }) => { const token = request.headers.get("authorization"); - if (token === null) return HttpResponse.json({ submitted: false }); + if (token === null) return HttpResponse.json({ submitted: false }, {status: 401}); return HttpResponse.json({ submitted: false }); }), http.get("/api/v1/comment/:eventFrameId", () => { From 605fda618d2df491b1de33a35d4fb01abbf02357 Mon Sep 17 00:00:00 2001 From: lybell-art Date: Mon, 19 Aug 2024 14:25:20 +0900 Subject: [PATCH 03/13] =?UTF-8?q?[fix]=20=EB=A1=9C=EA=B7=B8=EC=9D=B8?= =?UTF-8?q?=ED=95=9C=20=EC=82=AC=EC=9A=A9=EC=9E=90=EA=B0=80=20=EC=B6=94?= =?UTF-8?q?=EC=B2=A8=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EC=B0=B8=EC=97=AC?= =?UTF-8?q?=EB=A5=BC=20=EC=95=88=ED=96=88=EC=9D=84=20=EB=95=8C=20=EB=9C=A8?= =?UTF-8?q?=EB=8A=94=20404=EC=97=90=20=EB=8C=80=EC=9D=91=ED=95=98=EB=8F=84?= =?UTF-8?q?=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mainPage/features/comment/commentForm/index.jsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/mainPage/features/comment/commentForm/index.jsx b/src/mainPage/features/comment/commentForm/index.jsx index 1fd45844..34e33fce 100644 --- a/src/mainPage/features/comment/commentForm/index.jsx +++ b/src/mainPage/features/comment/commentForm/index.jsx @@ -13,6 +13,7 @@ import openModal from "@common/modal/openModal.js"; const submitCommentErrorHandle = { 400: "negative", 401: "unauthorized", + 404: "no_participated", 409: "하루에 1번만 기대평을 등록할 수 있습니다.", offline: "offline", }; @@ -74,6 +75,7 @@ function CommentForm() { case submitCommentErrorHandle[400]: return openModal(negativeModal); case submitCommentErrorHandle[401]: + case submitCommentErrorHandle[404]: return openModal(noUserModal); case submitCommentErrorHandle["offline"]: return openModal(noServerModal); From b61df20f35e4b487fbe7a3ec18ae0482bc040c45 Mon Sep 17 00:00:00 2001 From: lybell-art Date: Mon, 19 Aug 2024 14:34:31 +0900 Subject: [PATCH 04/13] =?UTF-8?q?[feat]=20jwt=20=ED=86=A0=ED=81=B0=20?= =?UTF-8?q?=EC=9D=B8=EC=8B=9D=ED=95=B4=EC=84=9C=20=EC=82=AC=EC=9A=A9?= =?UTF-8?q?=EC=9E=90=20=EC=9D=B4=EB=A6=84=20=ED=91=9C=EC=8B=9C=ED=95=98?= =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 10 ++++++++++ package.json | 1 + src/mainPage/shared/auth/mock.js | 6 ++++-- src/mainPage/shared/auth/store.js | 9 ++++++++- 4 files changed, 23 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 656e1867..c55b902b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "awesome-orange-project", "version": "0.5.0", "dependencies": { + "jwt-decode": "^4.0.0", "react": "^18.3.1", "react-dom": "^18.3.1", "react-lottie-player": "^2.1.0", @@ -4602,6 +4603,15 @@ "node": ">=4.0" } }, + "node_modules/jwt-decode": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz", + "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==", + "license": "MIT", + "engines": { + "node": ">=18" + } + }, "node_modules/keyv": { "version": "4.5.4", "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz", diff --git a/package.json b/package.json index 7ffc8ff7..47cb9cf8 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "preview-admin": "vite preview --outDir dist/admin" }, "dependencies": { + "jwt-decode": "^4.0.0", "react": "^18.3.1", "react-dom": "^18.3.1", "react-lottie-player": "^2.1.0", diff --git a/src/mainPage/shared/auth/mock.js b/src/mainPage/shared/auth/mock.js index b29f9233..437c7c73 100644 --- a/src/mainPage/shared/auth/mock.js +++ b/src/mainPage/shared/auth/mock.js @@ -4,6 +4,8 @@ function isValidInput(name, phoneNumber) { return name.length >= 2 && phoneNumber.length < 12 && phoneNumber.startsWith("01"); } +const token = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJ0ZWFtLW9yYW5nZSIsImlhdCI6MTcyNDA0NDc5MCwiZXhwIjoxNzI0MDQ4MzkwLCJzdWIiOiJldmVudFVzZXIiLCJ1c2VyTmFtZSI6Iuq5gOyCoeu6qSIsInVzZXJJZCI6ImtpbXBpcHB5YXAiLCJyb2xlIjoiZXZlbnRfdXNlciJ9.m5m_PkwmYz5Mt-kjn28435bQtwgph3WO-2J42X82lCg"; + const handlers = [ http.post("/api/v1/event-user/send-auth", async ({ request }) => { const { name, phoneNumber } = await request.json(); @@ -22,7 +24,7 @@ const handlers = [ return HttpResponse.json({ error: "응답 내용이 잘못됨" }, { status: 400 }); if (+authCode < 500000 === false) return HttpResponse.json({ error: "인증번호 일치 안 함" }, { status: 401 }); - return HttpResponse.json({ token: "test_token" }); + return HttpResponse.json({ token }); }), http.post("/api/v1/event-user/login", async ({ request }) => { @@ -32,7 +34,7 @@ const handlers = [ return HttpResponse.json({ error: "응답 내용이 잘못됨" }, { status: 400 }); if (name !== "오렌지" || phoneNumber !== "01019991999") return HttpResponse.json({ error: "사용자 없음" }, { status: 404 }); - return HttpResponse.json({ token: "test_token" }); + return HttpResponse.json({ token }); }), ]; diff --git a/src/mainPage/shared/auth/store.js b/src/mainPage/shared/auth/store.js index 1887f9f7..9f8b676b 100644 --- a/src/mainPage/shared/auth/store.js +++ b/src/mainPage/shared/auth/store.js @@ -1,4 +1,5 @@ import { create } from "zustand"; +import { jwtDecode } from "jwt-decode"; import tokenSaver from "@common/dataFetch/tokenSaver.js"; import { SERVICE_TOKEN_ID } from "@common/constants.js"; @@ -9,7 +10,13 @@ const userStore = create(() => ({ function parseTokenToUserName(token) { if (token === null) return ""; - return "사용자"; + try { + const { userName } = jwtDecode(token); + return userName; + } + catch { + return "사용자"; + } } export function login(token) { From 5424b579ae6311f3a2fcb09e854ad6e4bbd8a5df Mon Sep 17 00:00:00 2001 From: lybell-art Date: Mon, 19 Aug 2024 15:04:08 +0900 Subject: [PATCH 05/13] =?UTF-8?q?[modify]=20=EB=A9=94=EC=9D=B8=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=97=90=EC=84=9C=20hydration=20error?= =?UTF-8?q?=EB=A5=BC=20=EC=9C=84=ED=95=B4=20=EB=82=98=EC=A4=91=EC=97=90=20?= =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=EC=83=81=ED=83=9C=20=ED=8C=90?= =?UTF-8?q?=EB=B3=84=ED=95=98=EB=8A=94=EA=B1=B0=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- build.js | 3 +- src/mainPage/App.jsx | 4 +-- src/mainPage/shared/auth/store.js | 55 +++++++++++++++++++++++++------ 3 files changed, 49 insertions(+), 13 deletions(-) diff --git a/build.js b/build.js index 57d04ea4..17792699 100644 --- a/build.js +++ b/build.js @@ -86,8 +86,9 @@ async function injectSSGToHtml(mode) { await mkdir(dir, { recursive: true }); await writeFile(absolutePath, html); console.log(`pre-rendered : ${path}`); - } catch { + } catch(e) { console.log(`pre-rendered failed : ${path}`); + console.error(e); } } ); await Promise.allSettled(promises); diff --git a/src/mainPage/App.jsx b/src/mainPage/App.jsx index fd7e1720..b6bee566 100644 --- a/src/mainPage/App.jsx +++ b/src/mainPage/App.jsx @@ -11,14 +11,14 @@ import QnA from "./features/qna"; import Footer from "./features/footer"; import Modal from "@common/modal/modal.jsx"; -import { initLoginState, logout } from "@main/auth/store.js"; +import { logout } from "@main/auth/store.js"; import useLogoutMiddleware from "@common/dataFetch/initLogoutMiddleware"; function App() { useEffect(() => { window.scrollTo(0, 0); history.scrollRestoration = "manual"; - initLoginState(); + //initLoginState(); }, []); useLogoutMiddleware(logout); diff --git a/src/mainPage/shared/auth/store.js b/src/mainPage/shared/auth/store.js index 9f8b676b..5b32dc3c 100644 --- a/src/mainPage/shared/auth/store.js +++ b/src/mainPage/shared/auth/store.js @@ -1,12 +1,48 @@ -import { create } from "zustand"; +import { useSyncExternalStore } from "react"; import { jwtDecode } from "jwt-decode"; import tokenSaver from "@common/dataFetch/tokenSaver.js"; import { SERVICE_TOKEN_ID } from "@common/constants.js"; -const userStore = create(() => ({ +const defaultUserState = { isLogin: false, userName: "", -})); +} + +class UserStore +{ + state; + observers = new Set(); + constructor() + { + this.state = createUserStore(); + } + getState(getter) + { + return getter(this.state); + } + subscribe(callback) + { + this.observers.add(callback); + return ()=>this.observers.delete(callback); + } + setState(mutateFunc) + { + const oldState = this.state; + const newState = typeof mutateFunc === "function" ? mutateFunc(oldState) : mutateFunc; + if(oldState === newState) return; + observers.forEach( callback=>callback() ); + } +} + +function createUserStore() +{ + if(typeof window === "undefined") return defaultUserState; + tokenSaver.init(SERVICE_TOKEN_ID); + const token = tokenSaver.get(SERVICE_TOKEN_ID); + const userName = parseTokenToUserName(token); + if (token === null) return { isLogin: false, userName: "" }; + else return { isLogin: true, userName }; +} function parseTokenToUserName(token) { if (token === null) return ""; @@ -19,6 +55,8 @@ function parseTokenToUserName(token) { } } +const userStore = new UserStore(); + export function login(token) { tokenSaver.set(token); const userName = parseTokenToUserName(token); @@ -30,12 +68,9 @@ export function logout() { userStore.setState(() => ({ isLogin: false, userName: "" })); } -export function initLoginState() { - tokenSaver.init(SERVICE_TOKEN_ID); - const token = tokenSaver.get(SERVICE_TOKEN_ID); - const userName = parseTokenToUserName(token); - if (token === null) userStore.setState(() => ({ isLogin: false, userName: "" })); - else userStore.setState(() => ({ isLogin: true, userName })); +function useUserStore(func, defaultValue=defaultUserState) +{ + return useSyncExternalStore(userStore.subscribe.bind(userStore), ()=>userStore.getState(func), ()=>func(defaultValue)); } -export default userStore; +export default useUserStore; From e4eee1df37f3b4118a57a06e2432ed9bdada0fb9 Mon Sep 17 00:00:00 2001 From: lybell-art Date: Mon, 19 Aug 2024 15:07:17 +0900 Subject: [PATCH 06/13] =?UTF-8?q?[build]=20=ED=94=84=EB=A6=AC=EB=B7=B0=20?= =?UTF-8?q?=EC=84=9C=EB=B2=84=20=EB=B0=B1=EC=97=94=EB=93=9C=20=EC=84=9C?= =?UTF-8?q?=EB=B2=84=EB=A1=9C=20=ED=94=84=EB=A1=9D=EC=8B=B1=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80,=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=EA=B4=80=EB=A0=A8=20?= =?UTF-8?q?=EC=8B=A0=ED=83=9D=EC=8A=A4=EC=98=A4=EB=A5=98=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mainPage/shared/auth/store.js | 2 +- vite.config.js | 8 ++++++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/mainPage/shared/auth/store.js b/src/mainPage/shared/auth/store.js index 5b32dc3c..6c72a80f 100644 --- a/src/mainPage/shared/auth/store.js +++ b/src/mainPage/shared/auth/store.js @@ -30,7 +30,7 @@ class UserStore const oldState = this.state; const newState = typeof mutateFunc === "function" ? mutateFunc(oldState) : mutateFunc; if(oldState === newState) return; - observers.forEach( callback=>callback() ); + this.observers.forEach( callback=>callback() ); } } diff --git a/vite.config.js b/vite.config.js index 34fa7ca0..e4e4e440 100644 --- a/vite.config.js +++ b/vite.config.js @@ -26,4 +26,12 @@ export default defineConfig({ { find: "@admin", replacement: resolve(__dirname, "src/adminPage/shared") }, ], }, + preview: { + proxy: { + "/api": { + target: 'http://softeerorange.store', + changeOrigin: true, + } + } + } }); From 8e271169af78d6c5beac2b1a652ad9898db0f1af Mon Sep 17 00:00:00 2001 From: lybell-art Date: Mon, 19 Aug 2024 15:27:46 +0900 Subject: [PATCH 07/13] =?UTF-8?q?[fix]=20=EC=9E=90=EC=9E=98=ED=95=9C=20?= =?UTF-8?q?=EC=8B=A4=EC=A0=9C=EC=9D=B4=EB=B2=A4=ED=8A=B8=EA=B4=80=EB=A0=A8?= =?UTF-8?q?=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mainPage/features/fcfs/mock.js | 4 ++-- src/mainPage/shared/auth/store.js | 1 + src/mainPage/shared/realtimeEvent/store.js | 4 ++-- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/mainPage/features/fcfs/mock.js b/src/mainPage/features/fcfs/mock.js index 71d24333..a6cadeb2 100644 --- a/src/mainPage/features/fcfs/mock.js +++ b/src/mainPage/features/fcfs/mock.js @@ -16,11 +16,11 @@ const handlers = [ }), http.get("/api/v1/event/fcfs/:eventFrameId/participated", async ({ request }) => { const token = request.headers.get("authorization"); - if (token === null) return HttpResponse.json({ answerResult: false, winner: false }); + if (token === null) return HttpResponse.json(false); //await delay(10000); - return HttpResponse.json({ answerResult: false, winner: false }); + return HttpResponse.json(false); }), http.post("/api/v1/event/fcfs/:eventFrameId", async ({ request }) => { const { eventAnswer } = await request.json(); diff --git a/src/mainPage/shared/auth/store.js b/src/mainPage/shared/auth/store.js index 6c72a80f..bb018e13 100644 --- a/src/mainPage/shared/auth/store.js +++ b/src/mainPage/shared/auth/store.js @@ -30,6 +30,7 @@ class UserStore const oldState = this.state; const newState = typeof mutateFunc === "function" ? mutateFunc(oldState) : mutateFunc; if(oldState === newState) return; + this.state = newState; this.observers.forEach( callback=>callback() ); } } diff --git a/src/mainPage/shared/realtimeEvent/store.js b/src/mainPage/shared/realtimeEvent/store.js index 8fd9bbad..3373178c 100644 --- a/src/mainPage/shared/realtimeEvent/store.js +++ b/src/mainPage/shared/realtimeEvent/store.js @@ -75,9 +75,9 @@ const fcfsStore = create((set) => ({ getPariticipatedData: (isLogin) => { const promiseFn = async function () { const participated = await getFcfsParticipated(); - set({ isParticipated: participated.answerResult }); + set({ isParticipated: participated }); }; - return getQuerySuspense(`fcfs-participated-data-${isLogin}`, promiseFn, [set]); + return getQuerySuspense(`fcfs-participated-data@${isLogin}`, promiseFn, [set]); }, setEventStatus: (eventStatus) => set({ eventStatus }), handleCountdown: () => From e254db067c6dd3fca4b4a9b3e456d4e946eb308c Mon Sep 17 00:00:00 2001 From: lybell-art Date: Mon, 19 Aug 2024 15:28:54 +0900 Subject: [PATCH 08/13] =?UTF-8?q?[fix]=20=EB=A6=AC=EC=85=8B=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=EC=97=90=20aria-label=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mainPage/shared/components/ResetButton.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/mainPage/shared/components/ResetButton.jsx b/src/mainPage/shared/components/ResetButton.jsx index 9185caef..bb44e9ba 100644 --- a/src/mainPage/shared/components/ResetButton.jsx +++ b/src/mainPage/shared/components/ResetButton.jsx @@ -3,7 +3,7 @@ import RefreshIcon from "./refresh.svg?react"; export default function ResetButton({ onClick }) { return ( - ); From 1f5b62ce3c262762c00eb9a406a2f3c82165785f Mon Sep 17 00:00:00 2001 From: lybell-art Date: Mon, 19 Aug 2024 17:07:22 +0900 Subject: [PATCH 09/13] =?UTF-8?q?[feat]=20=ED=96=84=EB=B2=84=EA=B1=B0=20?= =?UTF-8?q?=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../features/header/Hamburger/Button.jsx | 17 ++++++ .../header/Hamburger/style.module.css | 52 +++++++++++++++++++ src/mainPage/features/header/index.jsx | 15 ++++++ 3 files changed, 84 insertions(+) create mode 100644 src/mainPage/features/header/Hamburger/Button.jsx create mode 100644 src/mainPage/features/header/Hamburger/style.module.css diff --git a/src/mainPage/features/header/Hamburger/Button.jsx b/src/mainPage/features/header/Hamburger/Button.jsx new file mode 100644 index 00000000..38acc590 --- /dev/null +++ b/src/mainPage/features/header/Hamburger/Button.jsx @@ -0,0 +1,17 @@ +import { useState } from "react"; +import style from "./style.module.css"; + +function HamburgerButton({children}) +{ + const [opened, setOpened] = useState(false); + return <> + +
{opened && children}
+ +} + +export default HamburgerButton; \ No newline at end of file diff --git a/src/mainPage/features/header/Hamburger/style.module.css b/src/mainPage/features/header/Hamburger/style.module.css new file mode 100644 index 00000000..a44cfec6 --- /dev/null +++ b/src/mainPage/features/header/Hamburger/style.module.css @@ -0,0 +1,52 @@ +.hamburger { + display: flex; + justify-content: center; + align-items: center; + position: relative; + width: 24px; + height: 20px; +} + +.hamburger > div, .hamburger > div::before, .hamburger > div::after{ + width: 100%; + height: 2px; + box-sizing: border-box; + background-color: currentColor; + transition: all 0.3s; +} + +.hamburger > div{ + position: absolute; + border-color: #24adaf; +} + +.hamburger > div::before +{ + content: ""; + display: block; + position: absolute; + top:0; + left:0; + transform: translateY(-10px); +} + +.hamburger > div::after{ + content: ""; + display: block; + position: absolute; + top:0; + left:0; + transform: translateY(10px); +} + +.hamburger[data-opened="true"] > div { + transform: rotate(135deg); +} + +.hamburger[data-opened="true"] > div::before { + transform: translateY(0px) rotate(180deg); +} + +.hamburger[data-opened="true"] > div::after { + transform: translateY(-0px) rotate(-270deg); +} \ No newline at end of file diff --git a/src/mainPage/features/header/index.jsx b/src/mainPage/features/header/index.jsx index 1743c76f..f47ea29e 100644 --- a/src/mainPage/features/header/index.jsx +++ b/src/mainPage/features/header/index.jsx @@ -1,6 +1,7 @@ import scrollTo from "@main/scroll/scrollTo"; import { useSectionStore } from "@main/scroll/store"; import AuthButtonSection from "./AuthButtonSection.jsx"; +import HamburgerButton from "./Hamburger/Button.jsx"; import style from "./index.module.css"; @@ -52,6 +53,20 @@ export default function Header() {
+ +
    + {scrollSectionList.map((scrollSection, index) => ( +
  • onClickScrollSection(index + 1)} + className={`flex justify-center items-center w-20 lg:w-24 cursor-pointer ${currentSection - 1 === index ? "text-black" : "text-neutral-300"}`} + > + {scrollSection} +
    • + ))} +
+ + ); } From a0c71b121f5fefbb9c0fc115bad80991b507551c Mon Sep 17 00:00:00 2001 From: lybell-art Date: Mon, 19 Aug 2024 17:20:29 +0900 Subject: [PATCH 10/13] =?UTF-8?q?[feat]=20=ED=96=84=EB=B2=84=EA=B1=B0=20?= =?UTF-8?q?=EB=A9=94=EB=89=B4=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../features/header/Hamburger/Button.jsx | 4 ++- src/mainPage/features/header/index.jsx | 26 ++++++++++--------- 2 files changed, 17 insertions(+), 13 deletions(-) diff --git a/src/mainPage/features/header/Hamburger/Button.jsx b/src/mainPage/features/header/Hamburger/Button.jsx index 38acc590..e353734b 100644 --- a/src/mainPage/features/header/Hamburger/Button.jsx +++ b/src/mainPage/features/header/Hamburger/Button.jsx @@ -10,7 +10,9 @@ function HamburgerButton({children})
-
{opened && children}
+
+
{opened && children}
+
} diff --git a/src/mainPage/features/header/index.jsx b/src/mainPage/features/header/index.jsx index f47ea29e..20f4750c 100644 --- a/src/mainPage/features/header/index.jsx +++ b/src/mainPage/features/header/index.jsx @@ -54,18 +54,20 @@ export default function Header() {
-
    - {scrollSectionList.map((scrollSection, index) => ( -
  • onClickScrollSection(index + 1)} - className={`flex justify-center items-center w-20 lg:w-24 cursor-pointer ${currentSection - 1 === index ? "text-black" : "text-neutral-300"}`} - > - {scrollSection} -
    • - ))} -
- +
+
    + {scrollSectionList.map((scrollSection, index) => ( +
  • onClickScrollSection(index + 1)} + className={`flex justify-center items-center w-20 lg:w-24 cursor-pointer ${currentSection - 1 === index ? "text-black" : "text-neutral-300"}`} + > + {scrollSection} +
    • + ))} +
+ +
); From fef556ee584b7222121d70ffcd199c0e7590be5e Mon Sep 17 00:00:00 2001 From: lybell-art Date: Mon, 19 Aug 2024 18:04:04 +0900 Subject: [PATCH 11/13] =?UTF-8?q?[modify]=20=EC=84=A0=EC=B0=A9=EC=88=9C=20?= =?UTF-8?q?=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EB=93=B1=EB=A1=9D=EC=8B=9C=20?= =?UTF-8?q?=EB=8F=99=EC=9D=BC=ED=95=9C=20=EB=82=A0=EC=A7=9C=EC=97=90=20?= =?UTF-8?q?=EB=8B=A4=EB=A5=B8=20=EC=8B=9C=EA=B0=84=EC=9D=84=20=EC=95=88?= =?UTF-8?q?=EB=B1=89=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../eventEdit/businessLogic/FcfsData.js | 19 +++++++++++++++++-- .../features/header/Hamburger/Button.jsx | 4 ++-- 2 files changed, 19 insertions(+), 4 deletions(-) diff --git a/src/adminPage/features/eventEdit/businessLogic/FcfsData.js b/src/adminPage/features/eventEdit/businessLogic/FcfsData.js index 49afbea3..c8cc2cfd 100644 --- a/src/adminPage/features/eventEdit/businessLogic/FcfsData.js +++ b/src/adminPage/features/eventEdit/businessLogic/FcfsData.js @@ -94,6 +94,16 @@ function verifyItems(map, { startTime, endTime, prevSnapshot = new Map() }) { return result; } +function hasDuplicatedDate(newDate, map) +{ + if(newDate === undefined) return true; + if(newDate === null) return false; + const dateSet = new Set([...map.values()].map( ({date})=>date?.valueOf() ?? null )); + + if(dateSet.has(newDate.valueOf())) return true; + return false; +} + function getDefaultFcfsArray( startTime, endTime, @@ -194,12 +204,17 @@ class FcfsData { modify(key, data, { startTime, endTime }) { const newData = new FcfsData(this.map); const oldItem = newData.map.get(key); + const verified = verifyItem( - { ...oldItem, ...data }, + {...oldItem, ...data}, { startTime, endTime, prevSnapshot: oldItem }, ); if (verified === null) newData.map.delete(key); - else newData.map.set(key, verified); + else { + if(hasDuplicatedDate(verified.date, this.map)) verified.date = oldItem.date; + + newData.map.set(key, verified); + } return newData; } modifyAll(data, { startTime, endTime }) { diff --git a/src/mainPage/features/header/Hamburger/Button.jsx b/src/mainPage/features/header/Hamburger/Button.jsx index e353734b..f18ed448 100644 --- a/src/mainPage/features/header/Hamburger/Button.jsx +++ b/src/mainPage/features/header/Hamburger/Button.jsx @@ -5,12 +5,12 @@ function HamburgerButton({children}) { const [opened, setOpened] = useState(false); return <> - -
+
{opened && children}
From 6a6716b93fdd4737a0d72d31dc538215575c6c4e Mon Sep 17 00:00:00 2001 From: lybell-art Date: Mon, 19 Aug 2024 18:48:09 +0900 Subject: [PATCH 12/13] =?UTF-8?q?[feat]=20=EC=B6=94=EC=B2=A8=20=EC=9D=B4?= =?UTF-8?q?=EB=B2=A4=ED=8A=B8=20zustand=20=EC=8A=A4=ED=86=A0=EC=96=B4=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mainPage/shared/drawEvent/store.js | 58 ++++++++++++++++++++++ src/mainPage/shared/realtimeEvent/store.js | 4 +- 2 files changed, 60 insertions(+), 2 deletions(-) create mode 100644 src/mainPage/shared/drawEvent/store.js diff --git a/src/mainPage/shared/drawEvent/store.js b/src/mainPage/shared/drawEvent/store.js new file mode 100644 index 00000000..3886b1f2 --- /dev/null +++ b/src/mainPage/shared/drawEvent/store.js @@ -0,0 +1,58 @@ +import { create } from "zustand"; +import { fetchServer, HTTPError, ServerCloseError } from "@common/dataFetch/fetchServer.js"; +import { getQuery, getQuerySuspense } from "@common/dataFetch/getQuery.js"; +import { getServerPresiseTime } from "@common/utils.js"; +import { EVENT_DRAW_ID, EVENT_START_DATE } from "@common/constants.js"; + +function getJoinDataEvent() +{ + return fetchServer(`/api/v1/event/draw/${EVENT_DRAW_ID}/participation`) + .then(({ dates }) => { + let newJoinedList = [false, false, false, false, false]; + dates.forEach((date) => { + const day = getDayDifference(EVENT_START_DATE, new Date(date)); + newJoinedList[day] = true; + }); + return newJoinedList; + }) + .catch(() => [false, false, false, false, false]); +} + +const drawEventStore = create( (set, get)=>({ + joinStatus : [false, false, false, false, false], + openBaseDate : new Date("9999-12-31"), + currentJoined: false, + getJoinData: ()=>{ + async function promiseFn() { + try { + const [serverTime, joinStatus] = Promise.all([ + getQuery("server-time", getServerPresiseTime), + getJoinDataEvent() + ]); + const currentDay = getDayDifference(EVENT_START_DATE, serverTime); + let currentJoined = false; + if(currentDay >= 0 && currentDay < joinStatus.length) { + currentJoined = joinStatus[currentDay]; + } + set({joinStatus, openBaseDate: serverTime, currentJoined }); + return joinStatus; + } + catch { + set({joinStatus: [false, false, false, false, false], openBaseDate: new Date("9999-12-31")}); + return [false, false, false, false, false]; + } + } + return getQuerySuspense("draw-info-data", promiseFn, [set]); + }, + setCurrentJoin: (value)=>{ + set({currentJoined: value}); + }, + getJoinStatus: (index)=>{ + return get().joinStatus[index]; + }, + getOpenStatus: (index)=>{ + return get().openBaseDate >= EVENT_START_DATE.getTime() + index * DAY_MILLISEC; + } +}) ); + +export default drawEventStore; \ No newline at end of file diff --git a/src/mainPage/shared/realtimeEvent/store.js b/src/mainPage/shared/realtimeEvent/store.js index 3373178c..f78dd4dd 100644 --- a/src/mainPage/shared/realtimeEvent/store.js +++ b/src/mainPage/shared/realtimeEvent/store.js @@ -1,7 +1,7 @@ import { create } from "zustand"; import * as Status from "./constants.js"; import { fetchServer, HTTPError, ServerCloseError } from "@common/dataFetch/fetchServer.js"; -import { getQuerySuspense } from "@common/dataFetch/getQuery.js"; +import { getQuery, getQuerySuspense } from "@common/dataFetch/getQuery.js"; import { getServerPresiseTime } from "@common/utils.js"; import { EVENT_FCFS_ID } from "@common/constants.js"; @@ -55,7 +55,7 @@ const fcfsStore = create((set) => ({ const promiseFn = async function () { // get server time and event info const [serverTime, eventInfo] = await Promise.all([ - getServerPresiseTime(), + getQuery("server-time", getServerPresiseTime), getFcfsEventInfo(), ]); const currentServerTime = serverTime; From 45fe21c2424a9737970fc6c9a785925c7a342cd8 Mon Sep 17 00:00:00 2001 From: lybell-art Date: Mon, 19 Aug 2024 19:24:50 +0900 Subject: [PATCH 13/13] =?UTF-8?q?[chore]=20=EB=A6=B0=ED=8A=B8=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20=EB=B0=8F=20=ED=94=84=EB=A6=AC=ED=8B=B0=EC=96=B4=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../eventEdit/businessLogic/FcfsData.js | 15 ++- .../features/comment/commentForm/index.jsx | 2 +- src/mainPage/features/comment/mock.js | 2 +- .../features/header/Hamburger/Button.jsx | 33 +++--- .../header/Hamburger/style.module.css | 69 ++++++------ .../interactions/description/GiftDetail.jsx | 2 +- .../simpleInformation/contentSection.jsx | 9 +- src/mainPage/shared/auth/mock.js | 3 +- src/mainPage/shared/auth/store.js | 40 +++---- .../shared/components/ResetButton.jsx | 8 +- src/mainPage/shared/drawEvent/store.js | 106 +++++++++--------- 11 files changed, 153 insertions(+), 136 deletions(-) diff --git a/src/adminPage/features/eventEdit/businessLogic/FcfsData.js b/src/adminPage/features/eventEdit/businessLogic/FcfsData.js index c8cc2cfd..e5c961c0 100644 --- a/src/adminPage/features/eventEdit/businessLogic/FcfsData.js +++ b/src/adminPage/features/eventEdit/businessLogic/FcfsData.js @@ -94,13 +94,12 @@ function verifyItems(map, { startTime, endTime, prevSnapshot = new Map() }) { return result; } -function hasDuplicatedDate(newDate, map) -{ - if(newDate === undefined) return true; - if(newDate === null) return false; - const dateSet = new Set([...map.values()].map( ({date})=>date?.valueOf() ?? null )); +function hasDuplicatedDate(newDate, map) { + if (newDate === undefined) return true; + if (newDate === null) return false; + const dateSet = new Set([...map.values()].map(({ date }) => date?.valueOf() ?? null)); - if(dateSet.has(newDate.valueOf())) return true; + if (dateSet.has(newDate.valueOf())) return true; return false; } @@ -206,12 +205,12 @@ class FcfsData { const oldItem = newData.map.get(key); const verified = verifyItem( - {...oldItem, ...data}, + { ...oldItem, ...data }, { startTime, endTime, prevSnapshot: oldItem }, ); if (verified === null) newData.map.delete(key); else { - if(hasDuplicatedDate(verified.date, this.map)) verified.date = oldItem.date; + if (hasDuplicatedDate(verified.date, this.map)) verified.date = oldItem.date; newData.map.set(key, verified); } diff --git a/src/mainPage/features/comment/commentForm/index.jsx b/src/mainPage/features/comment/commentForm/index.jsx index 34e33fce..3c203df8 100644 --- a/src/mainPage/features/comment/commentForm/index.jsx +++ b/src/mainPage/features/comment/commentForm/index.jsx @@ -33,7 +33,7 @@ function CommentForm() { setButtonFetchState(submitted ? "disabled" : "enabled"); }) .catch((e) => { - if(e.status === 401) { + if (e.status === 401) { setButtonFetchState("enabled"); return; } diff --git a/src/mainPage/features/comment/mock.js b/src/mainPage/features/comment/mock.js index 13cde409..c48122b8 100644 --- a/src/mainPage/features/comment/mock.js +++ b/src/mainPage/features/comment/mock.js @@ -18,7 +18,7 @@ const handlers = [ http.get("/api/v1/comment/info", ({ request }) => { const token = request.headers.get("authorization"); - if (token === null) return HttpResponse.json({ submitted: false }, {status: 401}); + if (token === null) return HttpResponse.json({ submitted: false }, { status: 401 }); return HttpResponse.json({ submitted: false }); }), http.get("/api/v1/comment/:eventFrameId", () => { diff --git a/src/mainPage/features/header/Hamburger/Button.jsx b/src/mainPage/features/header/Hamburger/Button.jsx index f18ed448..c5fc3b3d 100644 --- a/src/mainPage/features/header/Hamburger/Button.jsx +++ b/src/mainPage/features/header/Hamburger/Button.jsx @@ -1,19 +1,24 @@ import { useState } from "react"; import style from "./style.module.css"; -function HamburgerButton({children}) -{ - const [opened, setOpened] = useState(false); - return <> - -
-
{opened && children}
-
- +function HamburgerButton({ children }) { + const [opened, setOpened] = useState(false); + return ( + <> + +
+
{opened && children}
+
+ + ); } -export default HamburgerButton; \ No newline at end of file +export default HamburgerButton; diff --git a/src/mainPage/features/header/Hamburger/style.module.css b/src/mainPage/features/header/Hamburger/style.module.css index a44cfec6..e1d99294 100644 --- a/src/mainPage/features/header/Hamburger/style.module.css +++ b/src/mainPage/features/header/Hamburger/style.module.css @@ -1,52 +1,53 @@ .hamburger { - display: flex; - justify-content: center; - align-items: center; - position: relative; - width: 24px; - height: 20px; + display: flex; + justify-content: center; + align-items: center; + position: relative; + width: 24px; + height: 20px; } -.hamburger > div, .hamburger > div::before, .hamburger > div::after{ - width: 100%; - height: 2px; - box-sizing: border-box; - background-color: currentColor; - transition: all 0.3s; +.hamburger > div, +.hamburger > div::before, +.hamburger > div::after { + width: 100%; + height: 2px; + box-sizing: border-box; + background-color: currentColor; + transition: all 0.3s; } -.hamburger > div{ - position: absolute; - border-color: #24adaf; +.hamburger > div { + position: absolute; + border-color: #24adaf; } -.hamburger > div::before -{ - content: ""; - display: block; - position: absolute; - top:0; - left:0; - transform: translateY(-10px); +.hamburger > div::before { + content: ""; + display: block; + position: absolute; + top: 0; + left: 0; + transform: translateY(-10px); } -.hamburger > div::after{ - content: ""; - display: block; - position: absolute; - top:0; - left:0; - transform: translateY(10px); +.hamburger > div::after { + content: ""; + display: block; + position: absolute; + top: 0; + left: 0; + transform: translateY(10px); } .hamburger[data-opened="true"] > div { - transform: rotate(135deg); + transform: rotate(135deg); } .hamburger[data-opened="true"] > div::before { - transform: translateY(0px) rotate(180deg); + transform: translateY(0px) rotate(180deg); } .hamburger[data-opened="true"] > div::after { - transform: translateY(-0px) rotate(-270deg); -} \ No newline at end of file + transform: translateY(-0px) rotate(-270deg); +} diff --git a/src/mainPage/features/interactions/description/GiftDetail.jsx b/src/mainPage/features/interactions/description/GiftDetail.jsx index d408dd56..a2ba4190 100644 --- a/src/mainPage/features/interactions/description/GiftDetail.jsx +++ b/src/mainPage/features/interactions/description/GiftDetail.jsx @@ -5,7 +5,7 @@ export default function GiftDetail({ contentList }) {
{contentList.map((content, index) => (
- 경품 + 경품
diff --git a/src/mainPage/features/simpleInformation/contentSection.jsx b/src/mainPage/features/simpleInformation/contentSection.jsx index 436cc385..748d9560 100644 --- a/src/mainPage/features/simpleInformation/contentSection.jsx +++ b/src/mainPage/features/simpleInformation/contentSection.jsx @@ -45,7 +45,14 @@ export default function ContentSection({ content }) { onAnimationEnd={() => setIsHighlighted(true)} className={`${isVisible ? style.fadeIn : "opacity-0"} z-0 flex flex-col font-bold`} > - {content.title} + {content.title} {content.title} diff --git a/src/mainPage/shared/auth/mock.js b/src/mainPage/shared/auth/mock.js index 437c7c73..bb670130 100644 --- a/src/mainPage/shared/auth/mock.js +++ b/src/mainPage/shared/auth/mock.js @@ -4,7 +4,8 @@ function isValidInput(name, phoneNumber) { return name.length >= 2 && phoneNumber.length < 12 && phoneNumber.startsWith("01"); } -const token = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJ0ZWFtLW9yYW5nZSIsImlhdCI6MTcyNDA0NDc5MCwiZXhwIjoxNzI0MDQ4MzkwLCJzdWIiOiJldmVudFVzZXIiLCJ1c2VyTmFtZSI6Iuq5gOyCoeu6qSIsInVzZXJJZCI6ImtpbXBpcHB5YXAiLCJyb2xlIjoiZXZlbnRfdXNlciJ9.m5m_PkwmYz5Mt-kjn28435bQtwgph3WO-2J42X82lCg"; +const token = + "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJ0ZWFtLW9yYW5nZSIsImlhdCI6MTcyNDA0NDc5MCwiZXhwIjoxNzI0MDQ4MzkwLCJzdWIiOiJldmVudFVzZXIiLCJ1c2VyTmFtZSI6Iuq5gOyCoeu6qSIsInVzZXJJZCI6ImtpbXBpcHB5YXAiLCJyb2xlIjoiZXZlbnRfdXNlciJ9.m5m_PkwmYz5Mt-kjn28435bQtwgph3WO-2J42X82lCg"; const handlers = [ http.post("/api/v1/event-user/send-auth", async ({ request }) => { diff --git a/src/mainPage/shared/auth/store.js b/src/mainPage/shared/auth/store.js index bb018e13..be118ac2 100644 --- a/src/mainPage/shared/auth/store.js +++ b/src/mainPage/shared/auth/store.js @@ -6,38 +6,32 @@ import { SERVICE_TOKEN_ID } from "@common/constants.js"; const defaultUserState = { isLogin: false, userName: "", -} +}; -class UserStore -{ +class UserStore { state; observers = new Set(); - constructor() - { + constructor() { this.state = createUserStore(); } - getState(getter) - { + getState(getter) { return getter(this.state); } - subscribe(callback) - { + subscribe(callback) { this.observers.add(callback); - return ()=>this.observers.delete(callback); + return () => this.observers.delete(callback); } - setState(mutateFunc) - { + setState(mutateFunc) { const oldState = this.state; const newState = typeof mutateFunc === "function" ? mutateFunc(oldState) : mutateFunc; - if(oldState === newState) return; + if (oldState === newState) return; this.state = newState; - this.observers.forEach( callback=>callback() ); + this.observers.forEach((callback) => callback()); } } -function createUserStore() -{ - if(typeof window === "undefined") return defaultUserState; +function createUserStore() { + if (typeof window === "undefined") return defaultUserState; tokenSaver.init(SERVICE_TOKEN_ID); const token = tokenSaver.get(SERVICE_TOKEN_ID); const userName = parseTokenToUserName(token); @@ -50,8 +44,7 @@ function parseTokenToUserName(token) { try { const { userName } = jwtDecode(token); return userName; - } - catch { + } catch { return "사용자"; } } @@ -69,9 +62,12 @@ export function logout() { userStore.setState(() => ({ isLogin: false, userName: "" })); } -function useUserStore(func, defaultValue=defaultUserState) -{ - return useSyncExternalStore(userStore.subscribe.bind(userStore), ()=>userStore.getState(func), ()=>func(defaultValue)); +function useUserStore(func, defaultValue = defaultUserState) { + return useSyncExternalStore( + userStore.subscribe.bind(userStore), + () => userStore.getState(func), + () => func(defaultValue), + ); } export default useUserStore; diff --git a/src/mainPage/shared/components/ResetButton.jsx b/src/mainPage/shared/components/ResetButton.jsx index bb44e9ba..d7ef84e4 100644 --- a/src/mainPage/shared/components/ResetButton.jsx +++ b/src/mainPage/shared/components/ResetButton.jsx @@ -3,7 +3,13 @@ import RefreshIcon from "./refresh.svg?react"; export default function ResetButton({ onClick }) { return ( - ); diff --git a/src/mainPage/shared/drawEvent/store.js b/src/mainPage/shared/drawEvent/store.js index 3886b1f2..c6276159 100644 --- a/src/mainPage/shared/drawEvent/store.js +++ b/src/mainPage/shared/drawEvent/store.js @@ -1,58 +1,60 @@ import { create } from "zustand"; -import { fetchServer, HTTPError, ServerCloseError } from "@common/dataFetch/fetchServer.js"; +import { fetchServer } from "@common/dataFetch/fetchServer.js"; import { getQuery, getQuerySuspense } from "@common/dataFetch/getQuery.js"; -import { getServerPresiseTime } from "@common/utils.js"; -import { EVENT_DRAW_ID, EVENT_START_DATE } from "@common/constants.js"; +import { getServerPresiseTime, getDayDifference } from "@common/utils.js"; +import { EVENT_DRAW_ID, EVENT_START_DATE, DAY_MILLISEC } from "@common/constants.js"; -function getJoinDataEvent() -{ - return fetchServer(`/api/v1/event/draw/${EVENT_DRAW_ID}/participation`) - .then(({ dates }) => { - let newJoinedList = [false, false, false, false, false]; - dates.forEach((date) => { - const day = getDayDifference(EVENT_START_DATE, new Date(date)); - newJoinedList[day] = true; - }); - return newJoinedList; - }) - .catch(() => [false, false, false, false, false]); +function getJoinDataEvent() { + return fetchServer(`/api/v1/event/draw/${EVENT_DRAW_ID}/participation`) + .then(({ dates }) => { + let newJoinedList = [false, false, false, false, false]; + dates.forEach((date) => { + const day = getDayDifference(EVENT_START_DATE, new Date(date)); + newJoinedList[day] = true; + }); + return newJoinedList; + }) + .catch(() => [false, false, false, false, false]); } -const drawEventStore = create( (set, get)=>({ - joinStatus : [false, false, false, false, false], - openBaseDate : new Date("9999-12-31"), - currentJoined: false, - getJoinData: ()=>{ - async function promiseFn() { - try { - const [serverTime, joinStatus] = Promise.all([ - getQuery("server-time", getServerPresiseTime), - getJoinDataEvent() - ]); - const currentDay = getDayDifference(EVENT_START_DATE, serverTime); - let currentJoined = false; - if(currentDay >= 0 && currentDay < joinStatus.length) { - currentJoined = joinStatus[currentDay]; - } - set({joinStatus, openBaseDate: serverTime, currentJoined }); - return joinStatus; - } - catch { - set({joinStatus: [false, false, false, false, false], openBaseDate: new Date("9999-12-31")}); - return [false, false, false, false, false]; - } - } - return getQuerySuspense("draw-info-data", promiseFn, [set]); - }, - setCurrentJoin: (value)=>{ - set({currentJoined: value}); - }, - getJoinStatus: (index)=>{ - return get().joinStatus[index]; - }, - getOpenStatus: (index)=>{ - return get().openBaseDate >= EVENT_START_DATE.getTime() + index * DAY_MILLISEC; - } -}) ); +const drawEventStore = create((set, get) => ({ + joinStatus: [false, false, false, false, false], + openBaseDate: new Date("9999-12-31"), + currentJoined: false, + getJoinData: (logined) => { + async function promiseFn() { + try { + const [serverTime, joinStatus] = Promise.all([ + getQuery("server-time", getServerPresiseTime), + getJoinDataEvent(), + ]); + const currentDay = getDayDifference(EVENT_START_DATE, serverTime); + let currentJoined = false; + if (currentDay >= 0 && currentDay < joinStatus.length) { + currentJoined = joinStatus[currentDay]; + } + set({ joinStatus, openBaseDate: serverTime, currentJoined }); + return joinStatus; + } catch { + set({ + joinStatus: [false, false, false, false, false], + openBaseDate: new Date("9999-12-31"), + currentJoined: false, + }); + return [false, false, false, false, false]; + } + } + return getQuerySuspense(`draw-info-data@${logined}`, promiseFn, [set]); + }, + setCurrentJoin: (value) => { + set({ currentJoined: value }); + }, + getJoinStatus: (index) => { + return get().joinStatus[index]; + }, + getOpenStatus: (index) => { + return get().openBaseDate >= EVENT_START_DATE.getTime() + index * DAY_MILLISEC; + }, +})); -export default drawEventStore; \ No newline at end of file +export default drawEventStore;