From 59489ed85427ba2a93fc9aa2aa16a139fbc12b18 Mon Sep 17 00:00:00 2001 From: dooohun <74540646+dooohun@users.noreply.github.com> Date: Wed, 4 Dec 2024 21:01:29 +0900 Subject: [PATCH] =?UTF-8?q?[FE]=20-=20=EC=97=90=EB=9F=AC=20=EB=B0=94?= =?UTF-8?q?=EC=9A=B4=EB=8D=94=EB=A6=AC,=20=ED=94=84=EB=A1=9C=EA=B7=B8?= =?UTF-8?q?=EB=A0=88=EC=8A=A4=EB=B0=94=20=EC=B6=94=EA=B0=80=20(#165)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 에러 바운더리 설치 및 추가 * feat: 프로그래스바 UI 추가 * fix: 에러 바운더리에 잘못 입력한 값 삭제 * style: 퀴즈 세션 페이지 스타일 변경 --- .pnp.cjs | 24 ++++++++++ ...undary-npm-4.1.2-7591172537-0737e5259b.zip | Bin 0 -> 37429 bytes packages/client/package.json | 1 + .../src/pages/quiz-session/index.lazy.tsx | 35 +++++++-------- .../src/pages/quiz-session/ui/ProgressBar.tsx | 42 ++++++++++++------ .../src/pages/quiz-session/ui/QuizHeader.tsx | 16 +++---- .../src/shared/boundary/AsyncBoundary.tsx | 7 ++- yarn.lock | 12 +++++ 8 files changed, 96 insertions(+), 41 deletions(-) create mode 100644 .yarn/cache/react-error-boundary-npm-4.1.2-7591172537-0737e5259b.zip diff --git a/.pnp.cjs b/.pnp.cjs index eb78e062..5bf37711 100755 --- a/.pnp.cjs +++ b/.pnp.cjs @@ -6842,6 +6842,7 @@ const RAW_RUNTIME_STATE = ["qrcode.react", "virtual:658502eb4296e93abedc18b6aa9b26978f434f08d98e21ebb0e725354b8bb54b62db9c4a1893e460c694ff7500ff5cbafa4457b0dfd26b5838868666c861e990#npm:4.1.0"],\ ["react", "npm:18.3.1"],\ ["react-dom", "virtual:658502eb4296e93abedc18b6aa9b26978f434f08d98e21ebb0e725354b8bb54b62db9c4a1893e460c694ff7500ff5cbafa4457b0dfd26b5838868666c861e990#npm:18.3.1"],\ + ["react-error-boundary", "virtual:658502eb4296e93abedc18b6aa9b26978f434f08d98e21ebb0e725354b8bb54b62db9c4a1893e460c694ff7500ff5cbafa4457b0dfd26b5838868666c861e990#npm:4.1.2"],\ ["react-router-dom", "virtual:658502eb4296e93abedc18b6aa9b26978f434f08d98e21ebb0e725354b8bb54b62db9c4a1893e460c694ff7500ff5cbafa4457b0dfd26b5838868666c861e990#npm:6.27.0"],\ ["recharts", "virtual:658502eb4296e93abedc18b6aa9b26978f434f08d98e21ebb0e725354b8bb54b62db9c4a1893e460c694ff7500ff5cbafa4457b0dfd26b5838868666c861e990#npm:2.13.3"],\ ["socket.io-client", "npm:4.8.1"],\ @@ -12324,6 +12325,29 @@ const RAW_RUNTIME_STATE = "linkType": "HARD"\ }]\ ]],\ + ["react-error-boundary", [\ + ["npm:4.1.2", {\ + "packageLocation": "./.yarn/cache/react-error-boundary-npm-4.1.2-7591172537-0737e5259b.zip/node_modules/react-error-boundary/",\ + "packageDependencies": [\ + ["react-error-boundary", "npm:4.1.2"]\ + ],\ + "linkType": "SOFT"\ + }],\ + ["virtual:658502eb4296e93abedc18b6aa9b26978f434f08d98e21ebb0e725354b8bb54b62db9c4a1893e460c694ff7500ff5cbafa4457b0dfd26b5838868666c861e990#npm:4.1.2", {\ + "packageLocation": "./.yarn/__virtual__/react-error-boundary-virtual-0d90b1d24e/0/cache/react-error-boundary-npm-4.1.2-7591172537-0737e5259b.zip/node_modules/react-error-boundary/",\ + "packageDependencies": [\ + ["react-error-boundary", "virtual:658502eb4296e93abedc18b6aa9b26978f434f08d98e21ebb0e725354b8bb54b62db9c4a1893e460c694ff7500ff5cbafa4457b0dfd26b5838868666c861e990#npm:4.1.2"],\ + ["@babel/runtime", "npm:7.26.0"],\ + ["@types/react", "npm:18.3.12"],\ + ["react", "npm:18.3.1"]\ + ],\ + "packagePeers": [\ + "@types/react",\ + "react"\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ ["react-is", [\ ["npm:16.13.1", {\ "packageLocation": "./.yarn/cache/react-is-npm-16.13.1-a9b9382b4f-33977da7a5.zip/node_modules/react-is/",\ diff --git a/.yarn/cache/react-error-boundary-npm-4.1.2-7591172537-0737e5259b.zip b/.yarn/cache/react-error-boundary-npm-4.1.2-7591172537-0737e5259b.zip new file mode 100644 index 0000000000000000000000000000000000000000..155e82dd31c0e308ed18b8352ca575b3f1729bd5 GIT binary patch literal 37429 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 literal 0 HcmV?d00001 diff --git a/packages/client/package.json b/packages/client/package.json index 82da9a74..2c70fc82 100644 --- a/packages/client/package.json +++ b/packages/client/package.json @@ -20,6 +20,7 @@ "qrcode.react": "^4.1.0", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-error-boundary": "^4.1.2", "react-router-dom": "^6.27.0", "recharts": "^2.13.3", "socket.io-client": "^4.8.1" diff --git a/packages/client/src/pages/quiz-session/index.lazy.tsx b/packages/client/src/pages/quiz-session/index.lazy.tsx index 12f7f03e..de18c25e 100644 --- a/packages/client/src/pages/quiz-session/index.lazy.tsx +++ b/packages/client/src/pages/quiz-session/index.lazy.tsx @@ -21,9 +21,6 @@ export default function QuizSessionLazyPage() { quizOrder: parseInt(id as string), }); - console.log(quiz.currentQuizData.timeLimit); - console.log(quiz.currentQuizData.position); - useEffect(() => { const prevCurrentOrder = localStorage.getItem('currentOrder'); if (prevCurrentOrder !== null && parseInt(prevCurrentOrder) !== quiz.currentQuizData.position) { @@ -45,21 +42,23 @@ export default function QuizSessionLazyPage() { return ( <> {!isQuizEnd && ( -
- - +
+
+ + +
)} {isQuizEnd && ( diff --git a/packages/client/src/pages/quiz-session/ui/ProgressBar.tsx b/packages/client/src/pages/quiz-session/ui/ProgressBar.tsx index 51df29ef..7f57a800 100644 --- a/packages/client/src/pages/quiz-session/ui/ProgressBar.tsx +++ b/packages/client/src/pages/quiz-session/ui/ProgressBar.tsx @@ -1,3 +1,5 @@ +import { useEffect, useRef } from 'react'; + interface ProgressBarProps { /** 전체 시간 설정 */ time: number; @@ -10,7 +12,7 @@ interface ProgressBarProps { /** 애니메이션 종료 시 콜백 함수 */ handleAnimationEnd?: () => void; /** 현재 진행 시간 */ - currentTime?: number; + remainingTime: number; } const progressBarColors = { @@ -22,27 +24,42 @@ const progressBarColors = { }; const progressBarShapes = { - rounded: 'rounded-r-base', + rounded: 'rounded-base', square: 'rounded-none', }; const ProgressBar = ({ - time = 5, + time, type = 'success', barShape = 'rounded', pauseOnHover, handleAnimationEnd, - currentTime = 0, + remainingTime, }: ProgressBarProps) => { const progressBarColor = progressBarColors[type]; const progressBarShape = progressBarShapes[barShape]; + const progressBarRef = useRef(null); + + useEffect(() => { + const startTime = Date.now(); + const endTime = startTime + remainingTime * 1000; + + const updateWidth = () => { + const now = Date.now(); + const remaining = Math.max(endTime - now, 0); + const progress = (remaining / (time * 1000)) * 100; + + if (progressBarRef.current) { + progressBarRef.current.style.width = `${progress}%`; + } + + if (remaining > 0) { + requestAnimationFrame(updateWidth); + } + }; - // 현재 시간에 따른 진행률 계산 - const progress = Math.min(Math.max((currentTime / time) * 100, 0), 100); - // 남은 시간 비율 계산 - const remainingTimeRatio = 1 - currentTime / time; - // 애니메이션 지속 시간 계산 (초 단위) - const animationDuration = time * remainingTimeRatio; + updateWidth(); + }, [remainingTime, time]); return (
@@ -51,10 +68,7 @@ const ProgressBar = ({ className={`h-[6px] ${progressBarColor} ${progressBarShape} ${ pauseOnHover && 'group-hover:[animation-play-state:paused]' }`} - style={{ - width: `${progress}%`, - animation: `progress ${animationDuration}s linear forwards`, - }} + ref={progressBarRef} />
diff --git a/packages/client/src/pages/quiz-session/ui/QuizHeader.tsx b/packages/client/src/pages/quiz-session/ui/QuizHeader.tsx index 7a9fd6b9..426eb8f0 100644 --- a/packages/client/src/pages/quiz-session/ui/QuizHeader.tsx +++ b/packages/client/src/pages/quiz-session/ui/QuizHeader.tsx @@ -13,7 +13,7 @@ import HamsterImage from '@/shared/assets/characters/햄스터.png'; import { Calendar, Clock, Users } from 'lucide-react'; import { useQueryClient } from '@tanstack/react-query'; -// import ProgressBar from './ProgressBar'; +import ProgressBar from './ProgressBar'; interface QuizHeaderProps { startTime: number; @@ -72,7 +72,7 @@ export default function QuizHeader({
-
+
{`${characterNames[character]}character`}

{nickname}

-
-
+
+
{remainingTime}초 남음
- {/* */} + />
diff --git a/packages/client/src/shared/boundary/AsyncBoundary.tsx b/packages/client/src/shared/boundary/AsyncBoundary.tsx index c6ad2318..5da6bb03 100644 --- a/packages/client/src/shared/boundary/AsyncBoundary.tsx +++ b/packages/client/src/shared/boundary/AsyncBoundary.tsx @@ -1,6 +1,11 @@ import { Suspense } from 'react'; import QuizLoading from '@/pages/quiz-session/ui/QuizLoading'; +import { ErrorBoundary } from 'react-error-boundary'; export default function AsyncBoundary({ children }: { children: React.ReactNode }) { - return }>{children}; + return ( + 안녕하세요?
}> + }>{children} + + ); } diff --git a/yarn.lock b/yarn.lock index c01b918c..3c558c58 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4553,6 +4553,7 @@ __metadata: qrcode.react: "npm:^4.1.0" react: "npm:^18.3.1" react-dom: "npm:^18.3.1" + react-error-boundary: "npm:^4.1.2" react-router-dom: "npm:^6.27.0" recharts: "npm:^2.13.3" socket.io-client: "npm:^4.8.1" @@ -9212,6 +9213,17 @@ __metadata: languageName: node linkType: hard +"react-error-boundary@npm:^4.1.2": + version: 4.1.2 + resolution: "react-error-boundary@npm:4.1.2" + dependencies: + "@babel/runtime": "npm:^7.12.5" + peerDependencies: + react: ">=16.13.1" + checksum: 10c0/0737e5259bed40ce14eb0823b3c7b152171921f2179e604f48f3913490cdc594d6c22d43d7abb4ffb1512c832850228db07aa69d3b941db324953a5e393cb399 + languageName: node + linkType: hard + "react-is@npm:^16.13.1": version: 16.13.1 resolution: "react-is@npm:16.13.1"