From b063d9f0bfbcd9e0fc5356f0d34304c13fea4d93 Mon Sep 17 00:00:00 2001 From: lybell-art Date: Tue, 20 Aug 2024 18:40:29 +0900 Subject: [PATCH] =?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 --- src/adminPage/features/eventEdit/index.jsx | 2 +- src/common/modal/modal.jsx | 13 +-- src/common/modal/openModal.js | 13 +-- src/common/modal/useFocusTrap.js | 103 +++++++++--------- .../comment/autoScrollCarousel/index.jsx | 11 +- .../autoScrollCarousel/useAutoCarousel.js | 2 +- .../commentCarousel/CommentCarousel.jsx | 2 +- .../comment/modals/CommentNoUserModal.jsx | 16 +-- .../comment/modals/CommentSuccessModal.jsx | 6 +- .../detailInformation/DetailSwiper.jsx | 7 +- src/mainPage/features/fcfs/cardGame/Card.jsx | 8 +- .../features/fcfs/cardGame/CardGame.jsx | 4 +- .../features/fcfs/modals/FcfsInvalidModal.jsx | 2 +- .../features/fcfs/modals/FcfsLoseModal.jsx | 16 +-- .../features/fcfs/modals/FcfsWinModal.jsx | 6 +- src/mainPage/features/header/index.jsx | 9 +- src/mainPage/features/interactions/mock.js | 11 +- .../interactions/modal/InteractionModal.jsx | 11 +- .../features/interactions/modal/joinEvent.js | 31 +++--- .../features/interactions/v2l/Puzzle.jsx | 2 +- .../features/interactions/v2l/utils.js | 24 ++-- src/mainPage/shared/auth/AuthButton.jsx | 26 +++-- .../shared/auth/Logout/LogoutAlertModal.jsx | 23 ++-- .../shared/auth/Logout/LogoutConfirmModal.jsx | 40 +++---- src/mainPage/shared/auth/store.js | 8 +- .../shared/components/AlertModalContainer.jsx | 22 ++-- src/mainPage/shared/drawEvent/store.js | 15 ++- src/mainPage/shared/realtimeEvent/store.js | 2 +- 28 files changed, 235 insertions(+), 200 deletions(-) diff --git a/src/adminPage/features/eventEdit/index.jsx b/src/adminPage/features/eventEdit/index.jsx index 77a42b91..79679fd9 100644 --- a/src/adminPage/features/eventEdit/index.jsx +++ b/src/adminPage/features/eventEdit/index.jsx @@ -51,7 +51,7 @@ function EventEditor({ initialData = null } = {}) { title={`${mode === "create" ? "등록" : "수정"} 완료`} description={`이벤트가 성공적으로 ${mode === "create" ? "등록" : "수정"}되었습니다!`} />, - ).then( ()=>navigate(mode === "create" ? "/events" : `/events/${state.eventId}`) ); + ).then(() => navigate(mode === "create" ? "/events" : `/events/${state.eventId}`)); }, onError: (e) => { openModal(); diff --git a/src/common/modal/modal.jsx b/src/common/modal/modal.jsx index e89c775c..bfc37a42 100644 --- a/src/common/modal/modal.jsx +++ b/src/common/modal/modal.jsx @@ -31,17 +31,16 @@ function Modal({ layer }) { }, [child]); useEffect(() => { - if(child === null) return; + if (child === null) return; - function escHatch(e) - { - if(e.key !== "Escape") return; + function escHatch(e) { + if (e.key !== "Escape") return; close(); e.preventDefault(); } - document.addEventListener( "keydown", escHatch ); - return ()=>document.removeEventListener( "keydown", escHatch ); - }, [child]); + document.addEventListener("keydown", escHatch); + return () => document.removeEventListener("keydown", escHatch); + }, [child, close]); const focusTrapRef = useFocusTrap(child !== null); diff --git a/src/common/modal/openModal.js b/src/common/modal/openModal.js index ed4fbef7..351cfaee 100644 --- a/src/common/modal/openModal.js +++ b/src/common/modal/openModal.js @@ -1,15 +1,14 @@ import { modalStore } from "./store.js"; export default function openModal(component, layer = "alert") { - modalStore.changeModal(component, layer); - return new Promise( (resolve)=>{ - function observe() - { - if(modalStore.getSnapshot(layer) !== component) { + modalStore.changeModal(component, layer); + return new Promise((resolve) => { + function observe() { + if (modalStore.getSnapshot(layer) !== component) { resolve(); clear(); } } - const clear = modalStore.subscribe( observe ); - } ); + const clear = modalStore.subscribe(observe); + }); } diff --git a/src/common/modal/useFocusTrap.js b/src/common/modal/useFocusTrap.js index b61b7f45..3bb9c615 100644 --- a/src/common/modal/useFocusTrap.js +++ b/src/common/modal/useFocusTrap.js @@ -1,67 +1,64 @@ import { useEffect, useRef } from "react"; -function getEndPointChild(element) -{ - const focusableElements = [...element.querySelectorAll( - "a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]" -)].filter( elem=>elem.tabIndex >= 0 ); - if(focusableElements.length === 0) return [null, null]; - return [focusableElements[0], focusableElements[focusableElements.length - 1]]; +function getEndPointChild(element) { + const focusableElements = [ + ...element.querySelectorAll( + "a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]", + ), + ].filter((elem) => elem.tabIndex >= 0); + if (focusableElements.length === 0) return [null, null]; + return [focusableElements[0], focusableElements[focusableElements.length - 1]]; } -function useFocusTrap(active) -{ - const prevRef = useRef(null); - const ref = useRef(null); - const endPointChild = useRef([null, null]); - useEffect( ()=>{ - if(!active || ref.current === null) return; +function useFocusTrap(active) { + const prevRef = useRef(null); + const ref = useRef(null); + const endPointChild = useRef([null, null]); + useEffect(() => { + if (!active || ref.current === null) return; - function renewEndPointChild() - { - if(ref.current === null) return; - endPointChild.current = getEndPointChild(ref.current); - } + function renewEndPointChild() { + if (ref.current === null) return; + endPointChild.current = getEndPointChild(ref.current); + } - function handleTabKey(e) { - if(e.key !== "Tab") return; + function handleTabKey(e) { + if (e.key !== "Tab") return; - const [first, last] = endPointChild.current; + const [first, last] = endPointChild.current; - if(document.activeElement === prevRef.current) { - if(e.shiftKey) last?.focus(); - else first?.focus(); - e.preventDefault(); - return; - } + if (document.activeElement === prevRef.current) { + if (e.shiftKey) last?.focus(); + else first?.focus(); + e.preventDefault(); + return; + } - if(first === null || last === null) return; - if(document.activeElement === last && !e.shiftKey) { - first.focus(); - e.preventDefault(); - } - else if(document.activeElement === first && e.shiftKey) { - last.focus(); - e.preventDefault(); - } - } + if (first === null || last === null) return; + if (document.activeElement === last && !e.shiftKey) { + first.focus(); + e.preventDefault(); + } else if (document.activeElement === first && e.shiftKey) { + last.focus(); + e.preventDefault(); + } + } - renewEndPointChild(); - prevRef.current = document.activeElement; - document.addEventListener("keydown", handleTabKey); - const config = { subtree: true, childList: true, attributeFilter: ["disabled", "tabindex"] }; - const observer = new MutationObserver( renewEndPointChild ); - observer.observe(ref.current, config); + renewEndPointChild(); + prevRef.current = document.activeElement; + document.addEventListener("keydown", handleTabKey); + const config = { subtree: true, childList: true, attributeFilter: ["disabled", "tabindex"] }; + const observer = new MutationObserver(renewEndPointChild); + observer.observe(ref.current, config); - return ()=>{ - document.removeEventListener("keydown", handleTabKey); - observer.disconnect(); - prevRef.current.focus(); - } + return () => { + document.removeEventListener("keydown", handleTabKey); + observer.disconnect(); + prevRef.current.focus(); + }; + }, [active]); - }, [active] ); - - return ref; + return ref; } -export default useFocusTrap; \ No newline at end of file +export default useFocusTrap; diff --git a/src/mainPage/features/comment/autoScrollCarousel/index.jsx b/src/mainPage/features/comment/autoScrollCarousel/index.jsx index de91b2a1..82bc89cf 100644 --- a/src/mainPage/features/comment/autoScrollCarousel/index.jsx +++ b/src/mainPage/features/comment/autoScrollCarousel/index.jsx @@ -3,7 +3,8 @@ import useAutoCarousel from "./useAutoCarousel.js"; function AutoScrollCarousel({ speed = 1, gap = 0, children }) { const { position, ref, eventListener } = useAutoCarousel(speed, gap); - const flexStyle = "min-w-full flex [&>div]:flex-shrink-0 gap-[var(--gap,0)] justify-around items-center absolute"; + const flexStyle = + "min-w-full flex [&>div]:flex-shrink-0 gap-[var(--gap,0)] justify-around items-center absolute"; return (
- +
{children}
- +
); diff --git a/src/mainPage/features/comment/autoScrollCarousel/useAutoCarousel.js b/src/mainPage/features/comment/autoScrollCarousel/useAutoCarousel.js index 2ebd80d9..88516fa5 100644 --- a/src/mainPage/features/comment/autoScrollCarousel/useAutoCarousel.js +++ b/src/mainPage/features/comment/autoScrollCarousel/useAutoCarousel.js @@ -38,7 +38,7 @@ function useAutoCarousel(speed = 1, gap = 0) { // 타임스탬프 저장 timestamp.current = time; }, - [isHovered, speed], + [isHovered, speed, gap], ); useEffect(() => { diff --git a/src/mainPage/features/comment/commentCarousel/CommentCarousel.jsx b/src/mainPage/features/comment/commentCarousel/CommentCarousel.jsx index e607e98c..354037e7 100644 --- a/src/mainPage/features/comment/commentCarousel/CommentCarousel.jsx +++ b/src/mainPage/features/comment/commentCarousel/CommentCarousel.jsx @@ -15,7 +15,7 @@ function mask(string) { function CommentCarousel() { const { comments } = useQuery("comment-data", () => fetchServer(`/api/v1/comment/${EVENT_ID}`)); - if(comments.length === 0) return ; + if (comments.length === 0) return ; return (
diff --git a/src/mainPage/features/comment/modals/CommentNoUserModal.jsx b/src/mainPage/features/comment/modals/CommentNoUserModal.jsx index e9ac16ef..cab0e907 100644 --- a/src/mainPage/features/comment/modals/CommentNoUserModal.jsx +++ b/src/mainPage/features/comment/modals/CommentNoUserModal.jsx @@ -17,13 +17,15 @@ function CommentNoUserModal() { } + image={ + 추첨 이벤트 참여 바랍니다 + } >
+
  • +
    • ))} diff --git a/src/mainPage/features/fcfs/cardGame/Card.jsx b/src/mainPage/features/fcfs/cardGame/Card.jsx index 0e4d1cc3..fec81c0d 100644 --- a/src/mainPage/features/fcfs/cardGame/Card.jsx +++ b/src/mainPage/features/fcfs/cardGame/Card.jsx @@ -52,7 +52,13 @@ function Card({ index, locked, isFlipped, setFlipped, setGlobalLock, getCardAnsw className={`${cardFaceBaseStyle} ${style.back}`} src={answer1x} srcSet={`${answer1x} 1x, ${answer2x} 2x`} - alt={isFlipped ? (isCorrect ? "축하합니다, 당첨입니다!" : `${index}번 카드는 정답이 아니네요! 다른 카드를 뒤집으세요.`) : ""} + alt={ + isFlipped + ? isCorrect + ? "축하합니다, 당첨입니다!" + : `${index}번 카드는 정답이 아니네요! 다른 카드를 뒤집으세요.` + : "" + } draggable="false" loading="lazy" /> diff --git a/src/mainPage/features/fcfs/cardGame/CardGame.jsx b/src/mainPage/features/fcfs/cardGame/CardGame.jsx index 6ce062e0..f7b0c1f6 100644 --- a/src/mainPage/features/fcfs/cardGame/CardGame.jsx +++ b/src/mainPage/features/fcfs/cardGame/CardGame.jsx @@ -71,7 +71,9 @@ function CardGame({ offline }) { break; case submitCardgameErrorHandle[401]: return new Promise((resolve, reject) => { - openModal( resolve(getCardAnswerOnline(index))} />).then( reject ); + openModal( resolve(getCardAnswerOnline(index))} />).then( + reject, + ); }); case submitCardgameErrorHandle["offline"]: setOfflineMode(true); diff --git a/src/mainPage/features/fcfs/modals/FcfsInvalidModal.jsx b/src/mainPage/features/fcfs/modals/FcfsInvalidModal.jsx index c490130d..09eb637f 100644 --- a/src/mainPage/features/fcfs/modals/FcfsInvalidModal.jsx +++ b/src/mainPage/features/fcfs/modals/FcfsInvalidModal.jsx @@ -7,7 +7,7 @@ function FcfsInvalidModal() { const close = useContext(ModalCloseContext); return ( - diff --git a/src/mainPage/features/fcfs/modals/FcfsLoseModal.jsx b/src/mainPage/features/fcfs/modals/FcfsLoseModal.jsx index c9cd6895..ae9f7a45 100644 --- a/src/mainPage/features/fcfs/modals/FcfsLoseModal.jsx +++ b/src/mainPage/features/fcfs/modals/FcfsLoseModal.jsx @@ -19,13 +19,15 @@ function FcfsLoseModal() { } + image={ + 선착순 이벤트 당첨 실패 + } >
    + - )) + )); return (
    - { - setIsAnswerUp(false); - closeButtonRef.current.focus(); - }} /> + { + setIsAnswerUp(false); + closeButtonRef.current.focus(); + }} + />
    ); } diff --git a/src/mainPage/features/interactions/modal/joinEvent.js b/src/mainPage/features/interactions/modal/joinEvent.js index b99139e6..ad7ed372 100644 --- a/src/mainPage/features/interactions/modal/joinEvent.js +++ b/src/mainPage/features/interactions/modal/joinEvent.js @@ -8,25 +8,28 @@ import { EVENT_DRAW_ID } from "@common/constants.js"; const joinEventErrorHandler = { 409: "이미 참여했습니다.", 404: "이벤트가 존재하지 않습니다.", - offline: "오프라인 폴백 모드로 전환합니다." -} + offline: "오프라인 폴백 모드로 전환합니다.", +}; export default function joinEvent(index) { const isLogin = isLogined(); - const { isTodayEvent, getJoinStatus, setCurrentJoin, readjustJoinStatus, setFallbackMode } = drawEventStore.getState(); + const { isTodayEvent, getJoinStatus, setCurrentJoin, readjustJoinStatus, setFallbackMode } = + drawEventStore.getState(); const todayEvent = isTodayEvent(index); - if (!isLogin || !todayEvent || getJoinStatus(index) ) return; + if (!isLogin || !todayEvent || getJoinStatus(index)) return; - mutate( - "draw-info-data", - ()=>fetchServer(`/api/v1/event/draw/${EVENT_DRAW_ID}/participation`, { method: "post" }) - .catch(handleError(joinEventErrorHandler)), + mutate( + "draw-info-data", + () => + fetchServer(`/api/v1/event/draw/${EVENT_DRAW_ID}/participation`, { method: "post" }).catch( + handleError(joinEventErrorHandler), + ), { - onSuccess: ()=>setCurrentJoin(true), - onError: (e)=>{ - switch(e.message) { - case joinEventErrorHandler[409]: + onSuccess: () => setCurrentJoin(true), + onError: (e) => { + switch (e.message) { + case joinEventErrorHandler[409]: readjustJoinStatus(); break; case joinEventErrorHandler[404]: @@ -36,7 +39,7 @@ export default function joinEvent(index) { default: alert("이벤트 참여에 실패했습니다."); } - } - } + }, + }, ); } diff --git a/src/mainPage/features/interactions/v2l/Puzzle.jsx b/src/mainPage/features/interactions/v2l/Puzzle.jsx index 68d2c1ab..2421e470 100644 --- a/src/mainPage/features/interactions/v2l/Puzzle.jsx +++ b/src/mainPage/features/interactions/v2l/Puzzle.jsx @@ -73,7 +73,7 @@ function Puzzle({ interactCallback, $ref }) { return newBoard; }); }; - const label = `퍼즐 조각 (${i%3}, ${Math.floor(i/3)}). ${shape.getLabel()}`; + const label = `퍼즐 조각 (${i % 3}, ${Math.floor(i / 3)}). ${shape.getLabel()}`; return ( store.isLogin); const userName = useAuthStore((store) => store.userName); - const setCurrentJoin = useDrawEventStore((store)=>store.setCurrentJoin); + const setCurrentJoin = useDrawEventStore((store) => store.setCurrentJoin); const welcomeModal = ; const authModal = ( isFreshMember && openModal(welcomeModal)} /> ); - const logoutModal = setCurrentJoin(false)} />; + const logoutModal = setCurrentJoin(false)} />; if (isLogin) - return ; + return ( + + ); return ( -
    - + return ( + +
    + +
    +     + ); } -export default LogoutAlertModal; \ No newline at end of file +export default LogoutAlertModal; diff --git a/src/mainPage/shared/auth/Logout/LogoutConfirmModal.jsx b/src/mainPage/shared/auth/Logout/LogoutConfirmModal.jsx index 738cfc06..a5de5b2c 100644 --- a/src/mainPage/shared/auth/Logout/LogoutConfirmModal.jsx +++ b/src/mainPage/shared/auth/Logout/LogoutConfirmModal.jsx @@ -7,26 +7,26 @@ import Button from "@common/components/Button.jsx"; import { logout } from "@main/auth/store.js"; import LogoutAlertModal from "./LogoutAlertModal.jsx"; -function LogoutConfirmModal({onLogout}) -{ - const close = useContext(ModalCloseContext); - function clickLogout() - { - logout(); - onLogout?.(); - openModal(); - } +function LogoutConfirmModal({ onLogout }) { + const close = useContext(ModalCloseContext); + function clickLogout() { + logout(); + onLogout?.(); + openModal(); + } - return -
    - - -
    -     + return ( + +
    + + +
    +     + ); } -export default LogoutConfirmModal; \ No newline at end of file +export default LogoutConfirmModal; diff --git a/src/mainPage/shared/auth/store.js b/src/mainPage/shared/auth/store.js index 02f6fc45..04d6ff24 100644 --- a/src/mainPage/shared/auth/store.js +++ b/src/mainPage/shared/auth/store.js @@ -34,7 +34,7 @@ function createUserStore() { if (typeof window === "undefined") return defaultUserState; tokenSaver.init(SERVICE_TOKEN_ID); const token = tokenSaver.get(SERVICE_TOKEN_ID); - const {userName, userId} = parseTokenAndGetData(token); + const { userName, userId } = parseTokenAndGetData(token); if (token === null) return { isLogin: false, userName: "", userId: "" }; else return { isLogin: true, userName, userId }; } @@ -43,9 +43,9 @@ function parseTokenAndGetData(token) { if (token === null) return ""; try { const { userName, userId } = jwtDecode(token); - return {userName, userId}; + return { userName, userId }; } catch { - return {userName: "사용자", userId: "1nvalidU5er"}; + return { userName: "사용자", userId: "1nvalidU5er" }; } } @@ -53,7 +53,7 @@ const userStore = new UserStore(); export function login(token) { tokenSaver.set(token); - const {userName, userId} = parseTokenAndGetData(token); + const { userName, userId } = parseTokenAndGetData(token); userStore.setState(() => ({ isLogin: true, userName, userId })); } diff --git a/src/mainPage/shared/components/AlertModalContainer.jsx b/src/mainPage/shared/components/AlertModalContainer.jsx index 67d41364..c009d92d 100644 --- a/src/mainPage/shared/components/AlertModalContainer.jsx +++ b/src/mainPage/shared/components/AlertModalContainer.jsx @@ -1,18 +1,24 @@ -function AlertModalContainer({title, description, image, children}) -{ - const containerStyle = "w-[calc(100%-1rem)] max-w-[31.25rem] h-[calc(100svh-2rem)] p-10 shadow bg-white relative flex flex-col justify-between items-center" - return
    +function AlertModalContainer({ title, description, image, children }) { + const containerStyle = + "w-[calc(100%-1rem)] max-w-[31.25rem] h-[calc(100svh-2rem)] p-10 shadow bg-white relative flex flex-col justify-between items-center"; + return ( +

    {title}

    {description}

    - {image &&
    - {image} -
    } + {image && ( +
    + {image} +
    + )} {children}
    + ); } -export default AlertModalContainer; \ No newline at end of file +export default AlertModalContainer; diff --git a/src/mainPage/shared/drawEvent/store.js b/src/mainPage/shared/drawEvent/store.js index ea0849a0..1f60d271 100644 --- a/src/mainPage/shared/drawEvent/store.js +++ b/src/mainPage/shared/drawEvent/store.js @@ -27,15 +27,14 @@ const drawEventStore = create((set, get) => ({ getQuery("server-time", getServerPresiseTime), getJoinDataEvent(), ]); - const currentDay = getDayDifference(EVENT_START_DATE, serverTime); return { joinStatus, openBaseDate: serverTime, fallbackMode: false }; - } catch(e) { + } catch (e) { return { joinStatus: [false, false, false, false, false], openBaseDate: new Date("9999-12-31"), currentJoined: false, fallbackMode: true, - } + }; } } async function setter() { @@ -43,19 +42,19 @@ const drawEventStore = create((set, get) => ({ set(newState); return newState; } - return getQuerySuspense( "__zustand__draw-event-store-getData", setter, [userId, set] ); + return getQuerySuspense("__zustand__draw-event-store-getData", setter, [userId, set]); }, setCurrentJoin: (value) => { set({ currentJoined: value }); }, readjustJoinStatus: (index) => { - set(({joinStatus})=>{ + set(({ joinStatus }) => { const newJoinStatus = [...joinStatus]; - newJoinStatus[index] = true - return {joinStatus: newJoinStatus}; + newJoinStatus[index] = true; + return { joinStatus: newJoinStatus }; }); }, - setFallbackMode: () =>{ + setFallbackMode: () => { set({ joinStatus: [false, false, false, false, false], openBaseDate: new Date("9999-12-31"), diff --git a/src/mainPage/shared/realtimeEvent/store.js b/src/mainPage/shared/realtimeEvent/store.js index efbe1384..f2aa8741 100644 --- a/src/mainPage/shared/realtimeEvent/store.js +++ b/src/mainPage/shared/realtimeEvent/store.js @@ -74,7 +74,7 @@ const fcfsStore = create((set) => ({ const newState = await getQuery("fcfs-info-data", promiseFn); set(newState); return newState; - } + }; return getQuerySuspense("fcfs-info-data", setter, [set]); }, getPariticipatedData: (userId) => {