refactor: progress bar 애니메이션 적용 / 여행 동행 및 취소 캐싱 설정 추가

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 (
     <div className="caption-1-sb flex items-center gap-2.5 text-primary-normal">
       <div className="relative h-[6px] w-full overflow-hidden rounded-[10px] bg-slate-200">
         <div
-          className="absolute bottom-0 left-0 top-0 rounded-full bg-primary-normal"
-          style={{ width: `${progressRate}%` }}
+          className="absolute bottom-0 left-0 top-0 rounded-full bg-primary-normal transition-all duration-500"
+          style={{
+            width: `${animatedProgress}%`,
+            transitionTimingFunction: 'cubic-bezier(.01,.98,1,1)',
+          }}
         />
       </div>
-      <span>{progressRate}%</span>
+      <span>{displayedPercent}%</span>
     </div>
   );
 };
+
 export default ProgressBar;

src/components/travel/detail/buttons/TravelButtons.tsx

@@ -52,6 +52,9 @@ const TravelButtons = ({
           },
           icon: ParticipantIcon,
           confirmText: '확인',
+          onConfirm: () => {
+            router.refresh();
+          },
         });
       },
     });

src/queries/travel/useCreateTravel.ts

@@ -66,7 +66,7 @@ const useCreateTravel = () => {
               try {
                 await clearIndexedDB();
               } finally {
-                router.push('/');
+                router.push('/travel');
               }
             },
           },

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),
   });
 };

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': {