Update after demo: 추가 최적화 및 기타 수정

api/service.ts

@@ -1,4 +1,4 @@
-import { Api, HttpClient } from "./generated/motimo/Api";
+import { Api, HttpClient, HttpResponse } from "./generated/motimo/Api";
 import useAuthStore from "../stores/useAuthStore";
 import useToastStore from "@/stores/useToastStore";
 
@@ -18,10 +18,12 @@ const httpClient = new HttpClient({
     }
 
     const isGuest = useAuthStore.getState().isGuest;
-    if (isGuest) {
+    // 게스트거나 토큰 만료의 경우
+    if (isGuest || !token) {
       return { format: "json" };
     }
 
+    // 임의의 경우를 위해 남겨둠.
     return {};
   },
 });
@@ -33,19 +35,23 @@ const showToast = (content: string, createdAt: Date) => {
 
 // Debouncer 감싸도 될 것 같은데?
 const debounceer = <T, E>(apiRequest: typeof httpClient.request<T, E>) => {
-  const timeLimit = 1000;
-  let timer: number;
+  const timeLimit = 300;
+  const timerDictionary: { [apiFullUrl: string]: number } = {};
   let rejectTimer: (reason?: any) => void;
   return (
     requestParams: Parameters<typeof httpClient.request<T, E>>[0],
   ): ReturnType<typeof httpClient.request<T>> => {
+    const apiFullUrl = `${requestParams.path}?${requestParams.query}`;
+    const timer = timerDictionary[apiFullUrl];
+
     if (timer) {
       clearTimeout(timer);
       rejectTimer("debouncing");
     }
     const apiRes: Promise<T> = new Promise((resolve, reject) => {
       rejectTimer = reject;
-      timer = Number(
+      timerDictionary[apiFullUrl] = Number(
+        // timer = Number(
         setTimeout(async () => {
           try {
             const res = apiRequest(requestParams);
@@ -57,10 +63,41 @@ const debounceer = <T, E>(apiRequest: typeof httpClient.request<T, E>) => {
         }, timeLimit),
       );
     });
+
+    // 토큰 재발급 처리
+    tokenHandler(apiRes);
+
     return apiRes;
   };
 };
+// 토큰 처리
+const tokenHandler = async <T, E>(
+  apiRes: ReturnType<typeof httpClient.request<T, E>>,
+) => {
+  return apiRes.catch(async (e) => {
+    if (e.status === 401) {
+      const token = useAuthStore.getState().refreshToken;
+
+      if (!token) {
+        api.authController.logout();
+        throw new Error("no refresh token");
+      }
+      const tokenRes = await api.authController.reissue({
+        refreshToken: token,
+      });
 
+      if (!tokenRes?.accessToken || !tokenRes?.refreshToken) {
+        throw new Error("token reissue error");
+      }
+
+      useAuthStore.setState((states) => ({
+        ...states,
+        accessToken: tokenRes.accessToken,
+        refreshToken: tokenRes.refreshToken,
+      }));
+    }
+  });
+};
 httpClient.request = debounceer(httpClient.request);
 
 // API 클라이언트 인스턴스 생성

api/useApiQuery.ts

@@ -6,6 +6,7 @@ import {
   ApiMethodReturnType,
   ApiMethodParams,
 } from "./service";
+import useAuthStore from "@/stores/useAuthStore";
 
 // SWR Key 타입
 type SWRKey = readonly unknown[];
@@ -27,7 +28,11 @@ export function useApiQuery<
 
   return useSWR<ApiMethodReturnType<TApiGroup, TMethod>>(
     // params가 null이면 요청하지 않음 (조건부 fetching)
-    params === null ? null : key,
+    params === null
+      ? null
+      : useAuthStore.getState().isGuest
+        ? `${key}, guest`
+        : key,
     params === null
       ? null
       : () => {
@@ -51,7 +56,8 @@ export function useApiQuery<
               ? methodFunction(...params)
               : methodFunction();
           } catch (error) {
-            const errorMessage = error instanceof Error ? error.message : String(error);
+            const errorMessage =
+              error instanceof Error ? error.message : String(error);
             throw new Error(
               `Failed to call ${String(apiGroup)}.${String(method)}: ${errorMessage}`,
             );

app/layout.tsx

@@ -3,7 +3,6 @@ import type { Metadata } from "next";
 import localFont from "next/font/local";
 import "./globals.css";
 import ModalRenderer from "./_components/ModalRenderer";
-import { MSWComponent } from "@/components/_mocks/MSWComponent";
 import ToastRenderer from "./_components/ToastRenderer";
 import BottomSheetRenderer from "./_components/BottomSheetRenderer";
 import GuestModeHandler from "./_components/GuestModeHandler";

app/onboarding/_components/LoginScreen.tsx

@@ -10,6 +10,7 @@ import {
 } from "@/lib/constants";
 import MotimoLogoBlack from "@/components/shared/public/MOTIMO_LOGO_BLACK.svg";
 import useAuthStore from "@/stores/useAuthStore";
+import { DB_NAME } from "@/mocks/guestMode/db";
 
 interface LoginScreenProps {
   onNext: () => void;
@@ -29,6 +30,7 @@ export default function LoginScreen({ onNext }: LoginScreenProps) {
     clearOauthData,
     setIsGuest,
     reset,
+    setHasCompletedOnboarding,
   } = useAuthStore();
 
   // OAuth 콜백 처리 (URL 파라미터 방식)
@@ -171,12 +173,18 @@ export default function LoginScreen({ onNext }: LoginScreenProps) {
     window.location.href = `${OAUTH_ENDPOINTS.KAKAO_AUTHORIZE}?redirect_uri=${redirect_uri}&state=${state}`;
   };
 
-  const handleBrowse = () => {
+  const handleBrowse = async () => {
     // TODO: Handle browse without login
     reset();
+
+    // 게스트모드 로그인 기록 확인
+    const dbs = await indexedDB.databases();
+    const hasGuestDB = dbs.find((db) => db.name === DB_NAME);
+    if (hasGuestDB) setHasCompletedOnboarding(true);
+
     login();
     setIsGuest(true);
-    onNext();
+    // onNext();
   };
 
   return (

app/onboarding/page.tsx

@@ -64,8 +64,9 @@ export default function OnboardingPage() {
   useEffect(() => {
     if (!hasHydrated) return;
 
-    // 이미 온보딩을 완료했으면 redirect (게스트가 아닌 경우만)
-    if (hasCompletedOnboarding && isLoggedIn && !isGuest) {
+    // 이미 온보딩을 완료했으면 redirect (게스트도 포함)
+    if (hasCompletedOnboarding && isLoggedIn) {
+      // if (hasCompletedOnboarding && isLoggedIn && !isGuest) {
       router.replace("/");
       return;
     }

components/_mocks/MSWComponent.tsx

@@ -4,10 +4,10 @@ import { useEffect, useRef } from "react";
 
 export const MSWComponent = () => {
   const hasInitialized = useRef(false);
-  
+
   useEffect(() => {
     if (hasInitialized.current) return;
-    
+
     const init = async () => {
       const { initMsw } = await import("../../mocks/index");
       await initMsw();
@@ -21,3 +21,5 @@ export const MSWComponent = () => {
 
   return null;
 };
+
+// export default MSWComponent;

components/details/ListCard/ListCard.tsx

@@ -14,6 +14,7 @@ import { TodoResultRqEmotionEnum } from "@/api/generated/motimo/Api";
 import { subGoalApi, todoApi } from "@/api/service";
 import { postTodoResult } from "@/lib/fetching/postTodoResult";
 import {
+  makeSubgoalInfiniteOptimisticData,
   useObservingExist,
   // useObservingInfiniteOffset,
   useSubGoalTodosAllInfinite,
@@ -27,6 +28,7 @@ import { date2StringWithSpliter } from "@/utils/date2String";
 
 import useBottomSheet from "@/hooks/useBottomSheet";
 import useGoalWithSubGoalTodo from "@/hooks/queries/useGoalWithSubGoalTodo";
+import { AnimatePresence, motion } from "motion/react";
 interface ListCardProps {
   subGoalInfo: {
     name?: string;
@@ -54,14 +56,14 @@ const ListCard = ({
   // 이 안에서도 subGoal에대한 todod들 가져오는 fetch있어야 함.
 
   const observingRef = useRef<HTMLDivElement | null>(null);
-
   const {
     data: fetchedTodoItemsInfo,
     mutate,
     isLoading,
     isReachedLast,
     size,
     setSize,
+    isValidating,
   } = useSubGoalTodosAllInfinite(subGoalInfo.id ?? "");
 
   const existObserver = useObservingExist(
@@ -152,7 +154,9 @@ const ListCard = ({
 
   return (
     <>
-      <main className="w-full flex-1 p-4  inline-flex flex-col justify-start items-center gap-5 overflow-hidden">
+      <main
+        className={`w-full flex-1 p-4  inline-flex flex-col justify-start items-center gap-5 overflow-hidden ${isLoading ? "opacity-50" : ""}`}
+      >
         {/* <section className="flex items-center gap-2 w-full justify-between">
           <button
             onClick={() => onLeft()}
@@ -289,32 +293,61 @@ const ListCard = ({
           </div>
         </section>
 
-        <section className="flex-1 w-full h-full gap-2 flex flex-col">
-          {(!checkedMore ? todoItemsInfo.slice(0, 5) : todoItemsInfo).map(
-            (todoInfo) => {
-              return (
-                <TodoItem
-                  onChecked={async () => {
-                    onTodoCheck && onTodoCheck(todoInfo.id);
-                    // const res = await todoApi.toggleTodoCompletion(todoInfo.id);
-                    // if (res) mutate();
-                  }}
-                  title={todoInfo.title}
-                  checked={todoInfo.checked}
-                  key={todoInfo.id}
-                  onReportedClick={async () => {
-                    // 일단 모달을 띄워야 함.
-                    // postTodoResult(todoInfo.id);
-                    setOpenBottomSheet(true);
-                    setTodoIdForResult(todoInfo.id);
-                  }}
-                  reported={todoInfo.reported}
-                  targetDate={todoInfo.targetDate}
-                />
-              );
-            },
-          )}
-          {!checkedMore && todoItemsInfo.length > 0 && (
+        <section
+          className={`flex-1 w-full h-full gap-2 flex flex-col transition-opacity duration-300 ${isValidating ? "opacity-50" : ""}`}
+        >
+          <AnimatePresence>
+            {(!checkedMore ? todoItemsInfo.slice(0, 5) : todoItemsInfo).map(
+              (todoInfo) => {
+                const optimisticDataCallback =
+                  makeSubgoalInfiniteOptimisticData(todoInfo.id);
+
+                return (
+                  <motion.div
+                    key={todoInfo.id}
+                    layout
+                    transition={{ duration: 0.3 }}
+                    initial={{ opacity: 0, scale: 0.8 }} // 나타날 때 시작 상태
+                    animate={{ opacity: 1, scale: 1 }} // 나타날 때 최종 상태
+                    exit={{ opacity: 0, scale: 0.8 }} // 사라질 때 최종 상태
+                  >
+                    <TodoItem
+                      onChecked={async () => {
+                        await mutate(
+                          optimisticDataCallback,
+                          // undefined,
+
+                          {
+                            // optimisticData: optimisticDataCallback,
+                            populateCache: false,
+                            revalidate: false,
+                            rollbackOnError: true,
+                          },
+                        );
+
+                        onTodoCheck && onTodoCheck(todoInfo.id);
+
+                        // const res = await todoApi.toggleTodoCompletion(todoInfo.id);
+                        // if (res) mutate();
+                      }}
+                      title={todoInfo.title}
+                      checked={todoInfo.checked}
+                      key={todoInfo.id}
+                      onReportedClick={async () => {
+                        // 일단 모달을 띄워야 함.
+                        // postTodoResult(todoInfo.id);
+                        setOpenBottomSheet(true);
+                        setTodoIdForResult(todoInfo.id);
+                      }}
+                      reported={todoInfo.reported}
+                      targetDate={todoInfo.targetDate}
+                    />
+                  </motion.div>
+                );
+              },
+            )}
+          </AnimatePresence>
+          {!checkedMore && todoItemsInfo.length > 5 && (
             <button
               type="button"
               className="w-full h-8 px-2 py-1 flex justify-center items-center"

components/shared/Checkbox/Checkbox.tsx

@@ -9,15 +9,20 @@ const Checkbox = ({ ...props }: CheckboxProps) => {
       <input
         className={`
           shrink-0
-         ${`appearance-none w-4 h-4 relative bg-background-alternative rounded outline-[1.50px] outline-offset-[-1.50px]  outline-Color-gray-20 overflow-hidden 
+         ${`appearance-none w-4 h-4 relative rounded overflow-hidden 
           hover:outline-Color-gray-40
-            checked:bg-center
-         checked:bg-background-strong 
-         checked:outline-0
-         checked:bg-[url("data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M3.58325%207.27735L6.08343%209.77734L11.0833%204.77734%22%20stroke%3D%22white%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E")]
-          checked:hover:bg-Color-primary-70
+
 
             ${props.className ?? ""}`}
+               ${
+                 props.checked
+                   ? `bg-center
+         bg-background-strong 
+         bg-[url("data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M3.58325%207.27735L6.08343%209.77734L11.0833%204.77734%22%20stroke%3D%22white%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E")]
+         outline-0
+          hover:bg-Color-primary-70`
+                   : `bg-background-alternative outline-[1.50px] outline-offset-[-1.50px]  outline-Color-gray-20`
+               }
             `}
         type="checkbox"
         {...props}