feat: 소비 기록 입력 시 휴식 시간 생략 외 2건

apps/web/package.json

@@ -15,14 +15,14 @@
     "remove": "serverless remove"
   },
   "dependencies": {
-    "@reduxjs/toolkit": "^1.9.5",
+    "@reduxjs/toolkit": "^2.11.2",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "file-saver": "^2.0.5",
     "lucide-react": "^0.562.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-redux": "^8.0.7",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-redux": "^9.2.0",
     "react-router-dom": "^6.15.0",
     "recharts": "^2.5.0",
     "xlsx": "^0.18.5"
@@ -31,8 +31,8 @@
     "@my-commit/eslint-config": "workspace:*",
     "@types/file-saver": "^2.0.7",
     "@types/node": "^20.1.1",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^4.0.0",
     "autoprefixer": "^10.4.15",
     "daisyui": "^3.5.1",

apps/web/src/Routes.tsx

@@ -1,16 +1,23 @@
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 
-import { DailySummaryPage } from './pages/DailySummaryPage';
-import { LogWriterPage } from './pages/LogWriterPage';
-
 const router = createBrowserRouter([
   {
     path: '/',
-    element: <LogWriterPage />,
+    lazy: async () => {
+      const module = await import('./pages/LogWriterPage');
+      return {
+        Component: module.LogWriterPage,
+      };
+    },
   },
   {
     path: '/summary',
-    element: <DailySummaryPage />,
+    lazy: async () => {
+      const module = await import('./pages/DailySummaryPage');
+      return {
+        Component: module.DailySummaryPage,
+      };
+    },
   },
 ]);
 

apps/web/src/components/charts/AvailableRestTimeChart/points.tsx

@@ -1,3 +1,4 @@
+import type { ReactElement } from 'react';
 import { Label, ReferenceDot } from 'recharts';
 
 import { minutesToTimeString } from '../../../utils/DateUtil';
@@ -7,7 +8,7 @@ export const getPoints = (data: ChartDataPoint[]) => {
   const { highPoint, lowPoint } = findHighLowPoints(data);
   const currentPointConfig = getCurrentPointConfig(data, highPoint, lowPoint);
 
-  const points: JSX.Element[] = [];
+  const points: ReactElement[] = [];
 
   if (highPoint) {
     const color = highPoint.need >= 0 ? 'red' : 'green';

apps/web/src/components/dialogs/RestTimeInputDialog.tsx

@@ -7,12 +7,14 @@ interface RestTimeInputDialogProps {
   isOpen: boolean;
   onClose: () => void;
   onSubmit: (minutes: number) => void;
+  onSkip: () => void;
 }
 
 export const RestTimeInputDialog: React.FC<RestTimeInputDialogProps> = ({
   isOpen,
   onClose,
   onSubmit,
+  onSkip,
 }) => {
   const [minutesInput, setMinutesInput] = useState('');
   const [error, setError] = useState('');
@@ -75,6 +77,11 @@ export const RestTimeInputDialog: React.FC<RestTimeInputDialogProps> = ({
     }
   };
 
+  const handleSkip = () => {
+    onSkip();
+    onClose();
+  };
+
   if (!isOpen) return null;
 
   return (
@@ -85,6 +92,8 @@ export const RestTimeInputDialog: React.FC<RestTimeInputDialogProps> = ({
           원하는 휴식 시간을 분 단위로 입력하세요.
           <br />
           종료 1분 전과 종료 시각에 알림을 받을 수 있습니다.
+          <br />
+          알림이 필요 없다면 바로 소비 기록만 등록할 수 있습니다.
         </p>
 
         <div className="form-control">
@@ -116,6 +125,13 @@ export const RestTimeInputDialog: React.FC<RestTimeInputDialogProps> = ({
           <button type="button" className="btn btn-ghost" onClick={onClose}>
             취소 (ESC)
           </button>
+          <button
+            type="button"
+            className="btn btn-outline"
+            onClick={handleSkip}
+          >
+            알람 없이 등록
+          </button>
           <button
             type="button"
             className="btn btn-primary"

apps/web/src/components/texts/ProductiveToggle.tsx

@@ -5,7 +5,7 @@ interface ProductiveToggleProps {
   isProductive: boolean;
   setIsProductive: (value: boolean) => void;
   onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-  checkboxRef: React.RefObject<HTMLInputElement>;
+  checkboxRef: React.RefObject<HTMLInputElement | null>;
 }
 
 export const ProductiveToggle = ({

apps/web/src/components/texts/TextLogContainer.tsx

@@ -149,33 +149,47 @@ export const TextLogContainer = () => {
     setIsProductive(true);
   }, []);
 
-  const handleRestTimeSubmit = (minutes: number) => {
-    if (!pendingRestLog) return;
+  const appendPendingConsumptionLog = useCallback(
+    (minutes: number | null) => {
+      if (!pendingRestLog) return;
 
-    const { timeStr, content } = pendingRestLog;
+      const { timeStr, content } = pendingRestLog;
 
-    // 휴식 로그 추가
-    const newLogItem = createLogItem(timeStr, false, content);
-    const updatedRawLog = addLogEntry(
-      rawLogs,
-      newLogItem,
-      timeInput.trim() !== '',
-    );
+      // 소비 로그 추가
+      const newLogItem = createLogItem(timeStr, false, content);
+      const updatedRawLog = addLogEntry(
+        rawLogsRef.current,
+        newLogItem,
+        timeInput.trim() !== '',
+      );
 
-    setRawLogs(updatedRawLog);
+      setRawLogs(updatedRawLog);
 
-    // 알림 설정
-    dispatch(
-      setRestNotification({
-        targetTime: timeStr,
-        durationMinutes: minutes,
-      }),
-    );
+      if (minutes && minutes > 0) {
+        dispatch(
+          setRestNotification({
+            targetTime: timeStr,
+            durationMinutes: minutes,
+          }),
+        );
+      } else {
+        dispatch(clearRestNotification());
+      }
 
-    // 상태 초기화
-    resetInputs();
-    setPendingRestLog(null);
-    textareaRef.current?.focus();
+      // 상태 초기화
+      resetInputs();
+      setPendingRestLog(null);
+      textareaRef.current?.focus();
+    },
+    [dispatch, pendingRestLog, resetInputs, setRawLogs, timeInput],
+  );
+
+  const handleRestTimeSubmit = (minutes: number) => {
+    appendPendingConsumptionLog(minutes);
+  };
+
+  const handleRestTimeSkip = () => {
+    appendPendingConsumptionLog(null);
   };
 
   const handleRestDialogClose = () => {
@@ -334,6 +348,7 @@ export const TextLogContainer = () => {
         isOpen={isRestDialogOpen}
         onClose={handleRestDialogClose}
         onSubmit={handleRestTimeSubmit}
+        onSkip={handleRestTimeSkip}
       />
     </div>
   );

apps/web/src/pages/LogWriterPage.tsx

@@ -1,5 +1,5 @@
 import { Bell, Timer } from 'lucide-react';
-import { useEffect, useState } from 'react';
+import { lazy, Suspense, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { AuthHeader } from '../components/auth/AuthHeader';
@@ -8,7 +8,6 @@ import { DataManagementButton } from '../components/dataManagement/DataManagemen
 import { DayNavigator } from '../components/days/DayNavigator';
 import { TextLogContainer } from '../components/texts/TextLogContainer';
 import { Area_AvailableRestTimeChart } from '../features/AvailableRestTimeChartArea';
-import { DataManagementDialog } from '../features/dataManagement/DataManagementDialog';
 import { Area_ProductivePaceChart } from '../features/ProductivePaceChartArea';
 import {
   useRemainingTime,
@@ -19,6 +18,12 @@ import { ThemeSelector } from '../features/theme/ThemeSelector';
 import { RootState } from '../store';
 import { triggerCurrentDateFetch } from '../store/logs';
 
+const DataManagementDialog = lazy(() =>
+  import('../features/dataManagement/DataManagementDialog').then((module) => ({
+    default: module.DataManagementDialog,
+  })),
+);
+
 export const LogWriterPage = () => {
   // 휴식 알림 시스템 활성화
   useRestNotification();
@@ -93,10 +98,22 @@ export const LogWriterPage = () => {
         isOpen={isSoundSettingsOpen}
         onClose={() => setIsSoundSettingsOpen(false)}
       />
-      <DataManagementDialog
-        isOpen={isDataManagementOpen}
-        onClose={() => setIsDataManagementOpen(false)}
-      />
+      {isDataManagementOpen && (
+        <Suspense
+          fallback={
+            <div className="modal modal-open modal-bottom sm:modal-middle">
+              <div className="modal-box flex h-40 w-full max-w-2xl items-center justify-center">
+                <span className="loading loading-spinner loading-md" />
+              </div>
+            </div>
+          }
+        >
+          <DataManagementDialog
+            isOpen={isDataManagementOpen}
+            onClose={() => setIsDataManagementOpen(false)}
+          />
+        </Suspense>
+      )}
       <ConflictDialog />
     </div>
   );