fix: 서버 실제 연동 이후 오류 수정 (#63)

* fix: 실제연동시 발생하는 문제 해결

* fix: 빌드 에러 ㅜㅅ정

package.json

@@ -47,6 +47,7 @@
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.54.2",
     "react-router": "^7.1.1",
+    "react-virtuoso": "^4.12.3",
     "remove": "^0.1.5",
     "vaul": "^1.1.2",
     "zod": "^3.24.1",

packages/http/createResponse.ts

@@ -12,12 +12,22 @@ export const createResponse = async <T>(
   response: KyResponse<T>,
 ): Promise<ApiSuccessResponse<T>> => {
   const data = await response.json();
-  const parsed = apiSchema.parse(data);
-  return {
-    success: true,
-    data: parsed.data,
-    code: parsed.code,
-    message: parsed.message,
-    response: response,
-  };
+  try {
+    const parsed = apiSchema.parse(data);
+    return {
+      success: true,
+      data: parsed.data,
+      code: parsed.code,
+      message: parsed.message,
+      response: response,
+    };
+  } catch (_e) {
+    return {
+      success: true,
+      data: data,
+      code: 0,
+      message: "",
+      response: response,
+    } as ApiSuccessResponse<T>;
+  }
 };

packages/http/index.ts

@@ -3,7 +3,7 @@ import { createHttp } from "./createHttp";
 import { isHttpError } from "./error";
 import type { ApiSuccessResponse } from "./type";
 
-const http = createHttp({ prefixUrl: env.VITE_API_URL });
+const http = createHttp({ prefixUrl: env.VITE_API_URL, retry: { limit: 0 } });
 
 export { createHttp, isHttpError, http };
 

packages/mocks/handlers/booksSearch/mockGetbooksSearchHandler.ts

@@ -11,9 +11,8 @@ export const mockGetBooksSearchHandler = [
     const maxResults = Number(url.searchParams.get("maxResults")) ?? 10;
     const sortType = url.searchParams.get("sortType") as GetBooksSearchSortType;
     const startPage = Number(url.searchParams.get("startPage")) ?? 1;
-    const userId = url.searchParams.get("userId") ?? "";
     return HttpResponse.json(
-      mockCreateGetBooksSearchResponse({ query, maxResults, sortType, startPage, userId }),
+      mockCreateGetBooksSearchResponse({ query, maxResults, sortType, startPage }),
     );
   }),
 ];

packages/providers/index.tsx

@@ -15,7 +15,10 @@ export const Providers = ({ children }: PropsWithChildren) => {
             throwOnError: true,
             staleTime: 1000 * 60 * 5,
             gcTime: 1000 * 60 * 10,
-            retry: 1,
+            retry: 0,
+          },
+          mutations: {
+            retry: 0,
           },
         },
       }),

src/entities/record/api/getBooksSearch.ts

@@ -16,7 +16,6 @@ export interface GetBooksSearchRequest {
   sortType: GetBooksSearchSortType;
   startPage: number;
   maxResults: number;
-  userId: string;
 }
 
 export interface GetBooksSearchResponse {

src/entities/user/api/getTestUser.ts

@@ -1,6 +1,6 @@
 import { http } from "@repo/http";
 import { queryOptions } from "@tanstack/react-query";
-import { useTestUserStore } from "../model/useTestUserStore";
+import { getUserId } from "../model/useTestUserStore";
 
 export interface ExternalGetTestUserResponse {
   createdAt: string;
@@ -37,7 +37,7 @@ export const getTestUser = async (userId: string) => {
 };
 
 export const useTestUserQueryOptions = () => {
-  const userId = useTestUserStore((state) => state.userId);
+  const userId = getUserId();
   return queryOptions({
     queryKey: ["testUser", userId],
     queryFn: async () => {

src/entities/user/model/useTestUserStore.tsx

@@ -1,8 +1,5 @@
-import { create } from "zustand";
-import { createJSONStorage, persist } from "zustand/middleware";
-
 function generateRandomId(length = 8): string {
-  const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  const characters = "0123456789";
   let result = "";
   for (let i = 0; i < length; i++) {
     const randomIndex = Math.floor(Math.random() * characters.length);
@@ -11,20 +8,14 @@ function generateRandomId(length = 8): string {
   return result;
 }
 
-const name = "@mercury_test_user_id";
-
-interface TestUserState {
-  userId: string;
-}
+const name = "@mercury_test_user_id_W";
 
-export const useTestUserStore = create<TestUserState>()(
-  persist(
-    () => ({
-      userId: generateRandomId(),
-    }),
-    {
-      name,
-      storage: createJSONStorage(() => localStorage),
-    },
-  ),
-);
+export const getUserId = () => {
+  const userId = window.localStorage.getItem(name);
+  const randomId = generateRandomId();
+  if (userId === null) {
+    window.localStorage.setItem(name, randomId);
+  }
+  const reUserId = window.localStorage.getItem(name);
+  return reUserId as string;
+};

src/features/bookRecordRead/BookRecordList.tsx

@@ -4,6 +4,7 @@ import { useSuspenseQuery } from "@tanstack/react-query";
 import { format } from "date-fns";
 import { getRecordsQueryOptions } from "~/entities/record/api/getRecords";
 import type { BookRecord } from "~/entities/record/model/record.model";
+import { useTestUserQueryOptions } from "~/entities/user/api/getTestUser";
 import { FirstUserRecordFallback } from "~/features/bookRecordRead/components/FirstUserRecordFallback";
 import { RecordedBookItem } from "~/features/bookRecordRead/components/RecordedBookItem";
 import { SearchResultEmptyFallback } from "~/features/bookRecordRead/components/SearchResultEmptyFallback";
@@ -20,7 +21,8 @@ export const BookRecordList = wrap
     ),
   })
   .on(() => {
-    const userId = "mock userid";
+    const { data: user } = useSuspenseQuery(useTestUserQueryOptions());
+    const userId = user.userId;
     const search = useBookRecordStore((store) => store.search);
     const sortType = useBookRecordStore((store) => store.sortType);
     const recordsResponse = useSuspenseQuery(getRecordsQueryOptions({ userId, sortType }));

src/features/bookRecordRead/model/bookRecord.model.ts

@@ -1,11 +1,11 @@
 export const BOOK_RECORD_SORT_TYPES = {
   CREATED_AT: {
     label: "생성일 순",
-    value: "CREATED_AT",
+    value: "CREATED",
   },
   UPDATED_AT: {
     label: "업데이트 순",
-    value: "UPDATED_AT",
+    value: "UPDATED",
   },
 } as const;
 

src/main.tsx

@@ -3,7 +3,6 @@ import "../packages/design-system/iosTimePicker.css";
 import { Analytics, MercuryPostHogProvider } from "@repo/analytics";
 import { SafeArea, SafeAreaEffector } from "@repo/bridge-web/SafeArea.tsx";
 import { MobileLayout } from "@repo/design-system/MobileLayout.tsx";
-import { worker } from "@repo/mocks/browser";
 import { Providers } from "@repo/providers";
 import { MAX_WIDTH } from "@repo/token/index.ts";
 import { StrictMode } from "react";
@@ -53,5 +52,5 @@ createRoot(document.getElementById("root")!).render(
 );
 
 if (process.env.NODE_ENV === "development") {
-  worker.start({ quiet: true, onUnhandledRequest: "bypass" });
+  // worker.start({ quiet: true, onUnhandledRequest: "bypass" });
 }

src/pages/OnBoardingPage.tsx

@@ -7,12 +7,15 @@ import { CenterStack } from "@repo/ui/CenterStack";
 import { Flex } from "@repo/ui/Flex";
 import { Spacing } from "@repo/ui/Spacing";
 import { Stack } from "@repo/ui/Stack";
+import { useSuspenseQuery } from "@tanstack/react-query";
 import { Link } from "react-router";
+import { useTestUserQueryOptions } from "~/entities/user/api/getTestUser";
 import { AppleButton } from "~/shared/ui/AppleButton";
 import { GoogleButton } from "~/shared/ui/GoogleButton";
 import { KakaoButton } from "~/shared/ui/KakaoButton";
 
 export default function OnBoardingPage() {
+  const { data: user } = useSuspenseQuery(useTestUserQueryOptions());
   return (
     <CenterStack className=" min-h-screen w-full bg-navy h-full gap-y-[100px]">
       <MercuryImageSection />