feat: no server mode (#73, #minor)

young-do · web-flow · commit dfbc211f7e2d · 2025-09-15T22:08:18.000+09:00
* offline mode 를 위해 dexie 추가

서버측 로직을 db.ts에 stats 제외하고 추가

* stats 제외하고 indexed db 바라보도록 교체

* 카테고리 관련 로직 놓친거 추가

* 인덱싱 필드 최소화

* off 리스너 해제 원활하지 않아 아예 제거

* stats 계산도 indexed db 통해서

* 더이상 local cache 전략 제거

* 툴팁에선 분 표시시 소수점 단위 표시되지 않도록

* ui 타이틀 수정

* 불필요한 패키지 삭제

* 기록 ux 변경
diff --git a/package.json b/package.json
@@ -70,13 +70,12 @@
     "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
     "@rive-app/react-canvas": "^4.13.3",
-    "@tanstack/query-sync-storage-persister": "^5.51.9",
     "@tanstack/react-query": "^5.51.4",
     "@tanstack/react-query-devtools": "^5.51.4",
-    "@tanstack/react-query-persist-client": "^5.51.9",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
+    "dexie": "^4.2.0",
     "electron-squirrel-startup": "^1.0.1",
     "embla-carousel-autoplay": "^8.2.0",
     "embla-carousel-react": "^8.1.6",
diff --git a/src/preload/preload.ts b/src/preload/preload.ts
@@ -23,13 +23,13 @@ const electronAPI: IElectronAPI = {
   endPomodoro: (reason) => ipcRenderer.invoke('end-pomodoro', reason),
 
   onTickPomodoro: (callback) => ipcRenderer.on('tick-pomodoro', callback),
-  offTickPomodoro: (callback) => ipcRenderer.off('tick-pomodoro', callback),
+  offTickPomodoro: () => ipcRenderer.removeAllListeners('tick-pomodoro'),
 
   onEndPomodoro: (callback) => ipcRenderer.on('end-pomodoro', callback),
-  offEndPomodoro: (callback) => ipcRenderer.off('end-pomodoro', callback),
+  offEndPomodoro: () => ipcRenderer.removeAllListeners('end-pomodoro'),
 
   onOnceExceedGoalTime: (callback) => ipcRenderer.on('once-exceed-goal-time', callback),
-  offOnceExceedGoalTime: (callback) => ipcRenderer.off('once-exceed-goal-time', callback),
+  offOnceExceedGoalTime: () => ipcRenderer.removeAllListeners('once-exceed-goal-time'),
 };
 
 contextBridge.exposeInMainWorld('electronAPI', electronAPI);
diff --git a/src/renderer/app/provider.tsx b/src/renderer/app/provider.tsx
@@ -1,39 +1,24 @@
 import { PropsWithChildren } from 'react';
 
-import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister';
-import { QueryClient } from '@tanstack/react-query';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
 
 import { Toaster } from '@/shared/ui';
 
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
-      // 디바이스와 서버간 데이터는 달라질 일이 거의 없을거라고 가정하여, 캐시를 무제한으로 설정
-      gcTime: Infinity,
-      staleTime: Infinity,
       retry: 0,
     },
   },
 });
 
-const persister = createSyncStoragePersister({
-  storage: window.localStorage,
-});
-
 export const Provider = ({ children }: PropsWithChildren) => {
   return (
-    <PersistQueryClientProvider
-      client={queryClient}
-      persistOptions={{ persister }}
-      onSuccess={async () => {
-        await queryClient.resumePausedMutations();
-      }}
-    >
+    <QueryClientProvider client={queryClient}>
       {children}
       <Toaster />
       <ReactQueryDevtools buttonPosition="bottom-right" initialIsOpen={false} />
-    </PersistQueryClientProvider>
+    </QueryClientProvider>
   );
 };
diff --git a/src/renderer/entities/stats/types.ts b/src/renderer/entities/stats/types.ts
@@ -1,7 +1,7 @@
 import { Category } from '../category';
 
 export type Stats = {
-  data: string;
+  date: string;
   totalFocusTime: string;
   focusTimes: Array<{
     no: number;
diff --git a/src/renderer/features/cat/hooks/use-cats.ts b/src/renderer/features/cat/hooks/use-cats.ts
@@ -2,15 +2,13 @@ import { useQuery } from '@tanstack/react-query';
 
 import { Cat } from '@/entities/cat';
 import { QUERY_KEY } from '@/shared/constants';
-import { useAuthClient } from '@/shared/hooks';
+import * as db from '@/shared/utils/db';
 
 export const useCats = () => {
-  const authClient = useAuthClient();
-  return useQuery({
+  return useQuery<Cat[]>({
     queryKey: QUERY_KEY.CATS,
     queryFn: async () => {
-      return await authClient?.get<Cat[]>('/api/v1/cats');
+      return await db.getCats();
     },
-    enabled: !!authClient,
   });
 };
diff --git a/src/renderer/features/cat/hooks/use-rename-selected-cat.ts b/src/renderer/features/cat/hooks/use-rename-selected-cat.ts
@@ -3,16 +3,15 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { Cat } from '@/entities/cat';
 import { User } from '@/entities/user';
 import { MUTATION_KEY, QUERY_KEY } from '@/shared/constants';
-import { useAuthClient } from '@/shared/hooks';
+import * as db from '@/shared/utils/db';
 
 export const useRenameSelectedCat = () => {
   const queryClient = useQueryClient();
-  const authClient = useAuthClient();
 
   return useMutation({
     mutationKey: MUTATION_KEY.RENAME_SELECTED_CAT,
     mutationFn: async (catName: Cat['name']) => {
-      return await authClient?.put('/api/v1/cats', { name: catName });
+      return await db.renameCat(catName);
     },
     onMutate: (catName) => {
       // cancel current queries
diff --git a/src/renderer/features/cat/hooks/use-select-cat.ts b/src/renderer/features/cat/hooks/use-select-cat.ts
@@ -3,16 +3,15 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { Cat } from '@/entities/cat';
 import { User } from '@/entities/user';
 import { MUTATION_KEY, QUERY_KEY } from '@/shared/constants';
-import { useAuthClient } from '@/shared/hooks';
+import * as db from '@/shared/utils/db';
 
 export const useSelectCat = () => {
   const queryClient = useQueryClient();
-  const authClient = useAuthClient();
 
   return useMutation({
     mutationKey: MUTATION_KEY.SELECT_CAT,
     mutationFn: async (catNo: Cat['no']) => {
-      return await authClient?.put<unknown>('/api/v1/users/cats', { catNo });
+      return await db.selectCat(catNo);
     },
     onMutate: (catNo) => {
       // cancel current queries
diff --git a/src/renderer/features/category/hooks/use-categories.ts b/src/renderer/features/category/hooks/use-categories.ts
@@ -1,17 +1,14 @@
 import { useQuery } from '@tanstack/react-query';
 
-import { Category } from '@/entities/category';
 import { QUERY_KEY } from '@/shared/constants';
-import { useAuthClient } from '@/shared/hooks';
+import * as db from '@/shared/utils/db';
 
 export const useCategories = () => {
-  const authClient = useAuthClient();
   const query = useQuery({
     queryKey: QUERY_KEY.CATEGORIES,
     queryFn: async () => {
-      return await authClient?.get<Category[]>('/api/v1/categories');
+      return await db.getCategories();
     },
-    enabled: !!authClient,
   });
   const sortedData = query.data?.sort((a, b) => a.position - b.position);
   const currentCategory = query.data?.find((category) => category.isSelected) ?? sortedData?.[0];
diff --git a/src/renderer/features/category/hooks/use-category.ts b/src/renderer/features/category/hooks/use-category.ts
@@ -2,15 +2,14 @@ import { useQuery } from '@tanstack/react-query';
 
 import { Category } from '@/entities/category';
 import { QUERY_KEY } from '@/shared/constants';
-import { useAuthClient } from '@/shared/hooks';
+import * as db from '@/shared/utils/db';
 
 export const useCategory = (no?: number) => {
-  const authClient = useAuthClient();
-  return useQuery({
+  return useQuery<Category>({
     queryKey: [...QUERY_KEY.CATEGORIES, no],
     queryFn: async () => {
-      return await authClient?.get<Category>(`/api/v1/categories/${no}`);
+      return await db.getCategory(no!);
     },
-    enabled: !!authClient && no != null,
+    enabled: no != null,
   });
 };
diff --git a/src/renderer/features/category/hooks/use-create-category.ts b/src/renderer/features/category/hooks/use-create-category.ts
@@ -2,7 +2,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import { Category, CategoryIconType } from '@/entities/category';
 import { MUTATION_KEY, QUERY_KEY } from '@/shared/constants';
-import { useAuthClient } from '@/shared/hooks';
+import * as db from '@/shared/utils/db';
 
 type CreateCategoryBody = {
   title: string;
@@ -14,11 +14,10 @@ type CreateCategoryParams = {
 
 export const useCreateCategory = () => {
   const queryClient = useQueryClient();
-  const authClient = useAuthClient();
   return useMutation({
     mutationKey: MUTATION_KEY.CREATE_CATEGORY,
     mutationFn: async ({ body }: CreateCategoryParams) => {
-      return await authClient?.post<unknown, CreateCategoryBody>('/api/v1/categories', body);
+      return await db.createCategory(body);
     },
     onMutate: ({ body }) => {
       queryClient.cancelQueries({ queryKey: QUERY_KEY.CATEGORIES });
diff --git a/src/renderer/features/category/hooks/use-delete-categories.ts b/src/renderer/features/category/hooks/use-delete-categories.ts
@@ -2,7 +2,7 @@ import { useQueryClient, useMutation } from '@tanstack/react-query';
 
 import { Category } from '@/entities/category';
 import { MUTATION_KEY, QUERY_KEY } from '@/shared/constants';
-import { useAuthClient } from '@/shared/hooks';
+import * as db from '@/shared/utils/db';
 
 type DeleteCategoriesParams = {
   body: {
@@ -12,11 +12,10 @@ type DeleteCategoriesParams = {
 
 export const useDeleteCategories = () => {
   const queryClient = useQueryClient();
-  const authClient = useAuthClient();
   return useMutation({
     mutationKey: MUTATION_KEY.DELETE_CATEGORY,
     mutationFn: async ({ body }: DeleteCategoriesParams) => {
-      return await authClient?.delete<unknown>('api/v1/categories', body);
+      return await db.deleteCategories(body.no);
     },
     onMutate: ({ body }) => {
       queryClient.cancelQueries({ queryKey: QUERY_KEY.CATEGORIES });
diff --git a/src/renderer/features/category/hooks/use-select-category.ts b/src/renderer/features/category/hooks/use-select-category.ts
@@ -2,22 +2,19 @@ import { useQueryClient, useMutation } from '@tanstack/react-query';
 
 import { Category } from '@/entities/category';
 import { MUTATION_KEY, QUERY_KEY } from '@/shared/constants';
-import { useAuthClient } from '@/shared/hooks';
+import * as db from '@/shared/utils/db';
 
 type SelectCategoryParams = {
   no: number;
 };
 
 export const useSelectCategory = () => {
   const queryClient = useQueryClient();
-  const authClient = useAuthClient();
+
   return useMutation({
     mutationKey: MUTATION_KEY.SELECT_CATEGORY,
     mutationFn: async ({ no }: SelectCategoryParams) => {
-      return await authClient?.patch<unknown, undefined>(
-        `/api/v1/categories/select/${no}`,
-        undefined,
-      );
+      return await db.selectCategory(no);
     },
     onMutate: ({ no }) => {
       queryClient.cancelQueries({ queryKey: QUERY_KEY.CATEGORIES });
diff --git a/src/renderer/features/category/hooks/use-update-category.ts b/src/renderer/features/category/hooks/use-update-category.ts
@@ -2,7 +2,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import { Category } from '@/entities/category';
 import { MUTATION_KEY, QUERY_KEY } from '@/shared/constants';
-import { useAuthClient } from '@/shared/hooks';
+import * as db from '@/shared/utils/db';
 
 type UpdateCategoryBody = Partial<Pick<Category, 'title' | 'iconType' | 'focusTime' | 'restTime'>>;
 
@@ -13,14 +13,11 @@ type UpdateCategoryParams = {
 
 export const useUpdateCategory = () => {
   const queryClient = useQueryClient();
-  const authClient = useAuthClient();
+
   return useMutation({
     mutationKey: MUTATION_KEY.UPDATE_CATEGORY,
     mutationFn: async ({ no, body }: UpdateCategoryParams) => {
-      return await authClient?.patch<Category[], UpdateCategoryBody>(
-        `/api/v1/categories/${no}`,
-        body,
-      );
+      return await db.updateCategory(no, body);
     },
     onMutate: ({ no, body }) => {
       queryClient.cancelQueries({ queryKey: QUERY_KEY.CATEGORIES });
diff --git a/src/renderer/features/pomodoro/hooks/use-add-pomodoro.ts b/src/renderer/features/pomodoro/hooks/use-add-pomodoro.ts
@@ -1,15 +1,14 @@
 import { useMutation } from '@tanstack/react-query';
 import { Pomodoro } from 'shared/type';
 
-import { useAuthClient } from '@/shared/hooks';
+import * as db from '@/shared/utils/db';
 
 type AddPomodoroBody = Pomodoro[];
 
 export const useAddPomodoro = () => {
-  const authClient = useAuthClient();
   return useMutation({
     mutationFn: async ({ body }: { body: AddPomodoroBody }) => {
-      return await authClient?.post<void, AddPomodoroBody>('/api/v2/focus-times', body);
+      return await db.addPomodoro(body);
     },
   });
 };
diff --git a/src/renderer/features/stats/hooks/use-stats.ts b/src/renderer/features/stats/hooks/use-stats.ts
@@ -2,21 +2,18 @@ import { useQuery } from '@tanstack/react-query';
 
 import { Stats } from '@/entities/stats';
 import { QUERY_KEY } from '@/shared/constants';
-import { useAuthClient } from '@/shared/hooks';
+import * as db from '@/shared/utils/db';
 
 /**
  * @param date ISO 8601 형식, KST 기준 (예: '2025-10-01')
  */
 export const useStats = (date: string) => {
-  const authClient = useAuthClient();
   const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-  const queryString = new URLSearchParams({ timezone }).toString();
-  return useQuery({
+  return useQuery<Stats>({
     queryKey: [...QUERY_KEY.STATS, date, timezone],
     queryFn: async () => {
-      return await authClient?.get<Stats>(`/api/v1/statistics/${date}?${queryString}`);
+      return await db.getStatsByDate(new Date(date));
     },
-    enabled: !!authClient && !!date,
     staleTime: 0,
     gcTime: 0,
   });
diff --git a/src/renderer/features/stats/ui/stats-chart.tsx b/src/renderer/features/stats/ui/stats-chart.tsx
@@ -195,7 +195,7 @@ export const StatsChart = ({ dataFromServer }: StatsChartProps) => {
               if (realPayload.time === 0) return null;
               let content = '';
               if (tickUnit === 'minute') {
-                content = `${realPayload.time}분`;
+                content = `${Math.floor(realPayload.time)}분`;
               } else {
                 const hour = Math.floor(realPayload.time);
                 const minute = Math.round((realPayload.time - hour) * 60);
diff --git a/src/renderer/features/stats/ui/stats-time-log.tsx b/src/renderer/features/stats/ui/stats-time-log.tsx
@@ -1,22 +1,32 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import { format } from 'date-fns';
 
 import { Stats } from '@/entities/stats';
 import { Icon } from '@/shared/ui';
-import { getCategoryIconName, isoDurationToString } from '@/shared/utils';
+import { cn, getCategoryIconName, isoDurationToString } from '@/shared/utils';
 
 export type StatsTimeLogProps = {
   logs: Stats['focusTimes'];
 };
 
+const MIN_LOG_ITEM = 3;
+
 export const StatsTimeLog = ({ logs }: StatsTimeLogProps) => {
-  const [renderedLog, setRenderedLog] = useState(logs.slice(0, 3));
-  const isShowMoreButton = logs.length > renderedLog.length;
+  const sortedLogs = useMemo(
+    () =>
+      logs.toSorted((a, b) => new Date(b.startedAt).getTime() - new Date(a.startedAt).getTime()),
+    [],
+  );
+  const [renderedLog, setRenderedLog] = useState(sortedLogs.slice(0, MIN_LOG_ITEM));
+  const isShowButton = sortedLogs.length > MIN_LOG_ITEM;
+  const isExpanded = isShowButton && renderedLog.length === sortedLogs.length;
 
   const showMore = () => {
-    const nextLogs = logs.slice(renderedLog.length, renderedLog.length + 3);
-    setRenderedLog((prev) => [...prev, ...nextLogs]);
+    setRenderedLog(sortedLogs);
+  };
+  const foldLog = () => {
+    setRenderedLog(sortedLogs.slice(0, MIN_LOG_ITEM));
   };
 
   return (
@@ -53,13 +63,17 @@ export const StatsTimeLog = ({ logs }: StatsTimeLogProps) => {
         );
       })}
 
-      {isShowMoreButton && (
+      {isShowButton && (
         <button
           className="mx-auto flex items-center gap-2 px-4 py-2 text-text-tertiary"
-          onClick={showMore}
+          onClick={isExpanded ? foldLog : showMore}
         >
-          <span className="body-sb">더 보기</span>
-          <Icon name="chevronRight" size="sm" className="rotate-90" />
+          <span className="body-sb">{isExpanded ? '접기' : '더 보기'}</span>
+          <Icon
+            name="chevronRight"
+            size="sm"
+            className={cn(isExpanded ? '-rotate-90' : 'rotate-90')}
+          />
         </button>
       )}
     </div>
diff --git a/src/renderer/features/user/hooks/use-user.ts b/src/renderer/features/user/hooks/use-user.ts
diff --git a/src/renderer/pages/stats.tsx b/src/renderer/pages/stats.tsx
diff --git a/src/renderer/shared/utils/db.ts b/src/renderer/shared/utils/db.ts
diff --git a/src/renderer/shared/utils/error.ts b/src/renderer/shared/utils/error.ts
diff --git a/src/renderer/shared/utils/object.ts b/src/renderer/shared/utils/object.ts
diff --git a/yarn.lock b/yarn.lock
