From 15484077902ce550c3bda141c64cc03051bf7d21 Mon Sep 17 00:00:00 2001 From: namgungjongmin Date: Mon, 6 Jan 2025 02:36:41 +0900 Subject: [PATCH 1/3] =?UTF-8?q?refactor:=20progress=20bar=20=EC=95=A0?= =?UTF-8?q?=EB=8B=88=EB=A9=94=EC=9D=B4=EC=85=98=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/progressbar/ProgressBar.tsx | 36 +++++++++++++++++-- tailwind.config.ts | 3 ++ 2 files changed, 36 insertions(+), 3 deletions(-) diff --git a/src/components/common/progressbar/ProgressBar.tsx b/src/components/common/progressbar/ProgressBar.tsx index 4569e94d..f252388f 100644 --- a/src/components/common/progressbar/ProgressBar.tsx +++ b/src/components/common/progressbar/ProgressBar.tsx @@ -1,14 +1,44 @@ +'use client'; + +import React, { useState, useEffect } from 'react'; + const ProgressBar = ({ progressRate }: { progressRate: number }) => { + const [animatedProgress, setAnimatedProgress] = useState(0); + const [displayedPercent, setDisplayedPercent] = useState(0); + + useEffect(() => { + let start = 0; + const end = progressRate; + const duration = 500; // 애니메이션 지속 시간 (밀리초) + const increment = end / (duration / 5); // 10ms마다 증가할 값 + + const progressInterval = setInterval(() => { + start += increment; + if (start >= end) { + start = end; + clearInterval(progressInterval); + } + setAnimatedProgress(start); + setDisplayedPercent(Math.round(start)); + }, 10); + + return () => clearInterval(progressInterval); + }, [progressRate]); + return (
- {progressRate}% + {displayedPercent}%
); }; + export default ProgressBar; diff --git a/tailwind.config.ts b/tailwind.config.ts index d115c582..907ee52e 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -58,6 +58,9 @@ export default { boxShadow: { custom: '0px 0px 5px 0px rgba(0, 0, 0, 0.16)', }, + transitionTimingFunction: { + progressBar: 'cubic-bezier(.01,.98,1,1)', + }, keyframes: { 'fade-in': { From d32ab7ba00048469837a67d234fb98ed15e45199 Mon Sep 17 00:00:00 2001 From: namgungjongmin Date: Mon, 6 Jan 2025 02:55:49 +0900 Subject: [PATCH 2/3] =?UTF-8?q?refactor:=20=EC=97=AC=ED=96=89=20=EB=8F=99?= =?UTF-8?q?=ED=96=89/=EC=B7=A8=EC=86=8C=20=EC=BA=90=EC=8B=B1=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../travel/detail/buttons/TravelButtons.tsx | 3 +++ src/queries/travel/useTravelParticipation.ts | 17 +++++++++++++---- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/src/components/travel/detail/buttons/TravelButtons.tsx b/src/components/travel/detail/buttons/TravelButtons.tsx index 99e99e09..c9fa8e16 100644 --- a/src/components/travel/detail/buttons/TravelButtons.tsx +++ b/src/components/travel/detail/buttons/TravelButtons.tsx @@ -52,6 +52,9 @@ const TravelButtons = ({ }, icon: ParticipantIcon, confirmText: '확인', + onConfirm: () => { + router.refresh(); + }, }); }, }); diff --git a/src/queries/travel/useTravelParticipation.ts b/src/queries/travel/useTravelParticipation.ts index 0197037c..a76c6d7b 100644 --- a/src/queries/travel/useTravelParticipation.ts +++ b/src/queries/travel/useTravelParticipation.ts @@ -1,4 +1,4 @@ -import { useMutation } from '@tanstack/react-query'; +import { useMutation, useQueryClient } from '@tanstack/react-query'; import { deleteTravelParticipation, postTravelParticipation, @@ -10,26 +10,35 @@ import { useRouter } from 'next/navigation'; import { useQueryErrorHandler } from '../common/errorHandler'; export const useTravelParticipation = () => { + const queryClient = useQueryClient(); const handleError = useQueryErrorHandler(); return useMutation({ mutationFn: postTravelParticipation, + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: ['travels'] }); + queryClient.invalidateQueries({ queryKey: ['upcommingTravel'] }); + }, onError: (error: QueryError) => handleError(error), }); }; export const useTravelParticipationCancel = () => { + const queryClient = useQueryClient(); const { showModal } = useModal(); const handleError = useQueryErrorHandler(); const router = useRouter(); return useMutation({ mutationFn: deleteTravelParticipation, - onSuccess: () => + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: ['travels'] }); + queryClient.invalidateQueries({ queryKey: ['upcommingTravel'] }); showModal('동행이 취소되었습니다.', '아쉬워요! 다른 여행을 찾아볼까요?', { icon: CheckRedIcon, confirmText: '확인', type: 'error', - onConfirm: () => router.push('/travel'), - }), + onConfirm: () => router.refresh(), + }); + }, onError: (error: QueryError) => handleError(error), }); }; From bcf0e3ae3b11b7177dba049a237d711c4ef1c170 Mon Sep 17 00:00:00 2001 From: namgungjongmin Date: Mon, 6 Jan 2025 02:59:41 +0900 Subject: [PATCH 3/3] =?UTF-8?q?refactor:=20=EC=97=AC=ED=96=89=EB=A7=8C?= =?UTF-8?q?=EB=93=A4=EA=B8=B0=20=EB=9D=BC=EC=9A=B0=ED=8C=85=20=EC=A3=BC?= =?UTF-8?q?=EC=86=8C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/queries/travel/useCreateTravel.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/queries/travel/useCreateTravel.ts b/src/queries/travel/useCreateTravel.ts index acdd2b21..4000dd67 100644 --- a/src/queries/travel/useCreateTravel.ts +++ b/src/queries/travel/useCreateTravel.ts @@ -66,7 +66,7 @@ const useCreateTravel = () => { try { await clearIndexedDB(); } finally { - router.push('/'); + router.push('/travel'); } }, },