fix: 클라이언트 최초 렌더 시 hydration 에러 처리

src/features/flight-session/model/useFlightSession.ts

@@ -41,23 +41,33 @@ const formatHHMMSS = (totalSeconds: number) => {
 
 export function useFlightSession() {
   const router = useRouter();
-  const [voyage] = useState<Voyage | null>(() => getVoyageFromStore());
+  const [voyage, setVoyage] = useState<Voyage | null>(null);
-  const [timeLeft, setTimeLeft] = useState<number>(() =>
+  const [timeLeft, setTimeLeft] = useState<number>(0);
-    getInitialTimerSeconds(getVoyageFromStore()),
-  );
   const [isPaused, setIsPaused] = useState(false);
-  const endTimeRef = useRef<number>(getEndTime(getVoyageFromStore()));
+  const [isSessionReady, setIsSessionReady] = useState(false);
+  const endTimeRef = useRef<number>(0);
   const pausedElapsedMsRef = useRef<number>(0);
   const pausedAtMsRef = useRef<number | null>(null);
 
   useEffect(() => {
+    const storedVoyage = getVoyageFromStore();
+    if (storedVoyage) {
+      setVoyage(storedVoyage);
+      setTimeLeft(getInitialTimerSeconds(storedVoyage));
+      endTimeRef.current = getEndTime(storedVoyage);
+    }
+    setIsSessionReady(true);
+  }, []);
+
+  useEffect(() => {
+    if (!isSessionReady) return;
     if (voyage) return;
 
     router.replace('/');
-  }, [voyage, router]);
+  }, [isSessionReady, voyage, router]);
 
   useEffect(() => {
-    if (!voyage || isPaused) return;
+    if (!isSessionReady || !voyage || isPaused) return;
 
     const interval = setInterval(() => {
       if (voyage.durationMinutes === 0) {
@@ -78,7 +88,7 @@ export function useFlightSession() {
     }, 1000);
 
     return () => clearInterval(interval);
-  }, [voyage, isPaused]);
+  }, [isSessionReady, voyage, isPaused]);
 
   const handlePauseToggle = () => {
     if (voyage?.durationMinutes === 0) {