);
diff --git a/apps/web/src/features/ProductivePaceChartArea.tsx b/apps/web/src/features/ProductivePaceChartArea.tsx
index 711fc2d..b7bcc14 100644
--- a/apps/web/src/features/ProductivePaceChartArea.tsx
+++ b/apps/web/src/features/ProductivePaceChartArea.tsx
@@ -2,6 +2,7 @@ import { ChangeEvent, useState } from 'react';
import { DayRatioBar } from '../components/charts/DayRatioBar';
import { ProductivePaceChart } from '../components/charts/ProductivePaceChart';
+import { Input } from '../components/ui/input';
import { DEFAULT_PACE_IN_MIN } from '../policies/userConfig';
import { avgPaceOf, Log } from '../utils/PaceUtil';
import { loadFromStorage, saveToStorage } from '../utils/StorageUtil';
@@ -28,25 +29,35 @@ export const Area_ProductivePaceChart = ({
};
return (
-
-
);
};
diff --git a/apps/web/src/lib/utils.ts b/apps/web/src/lib/utils.ts
new file mode 100644
index 0000000..06a3ff7
--- /dev/null
+++ b/apps/web/src/lib/utils.ts
@@ -0,0 +1,4 @@
+import { ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));
diff --git a/apps/web/src/pages/LogWriterPage.tsx b/apps/web/src/pages/LogWriterPage.tsx
index 4c27e6a..e4f37fb 100644
--- a/apps/web/src/pages/LogWriterPage.tsx
+++ b/apps/web/src/pages/LogWriterPage.tsx
@@ -1,12 +1,27 @@
-import { Bell, Timer } from 'lucide-react';
+import {
+ Bell,
+ Coffee,
+ Database,
+ Leaf,
+ Sparkles,
+ Timer,
+ TrendingUp,
+} from 'lucide-react';
import { lazy, Suspense, useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { AuthHeader } from '../components/auth/AuthHeader';
import { ConflictDialog } from '../components/common/ConflictDialog';
-import { DataManagementButton } from '../components/dataManagement/DataManagementButton';
import { DayNavigator } from '../components/days/DayNavigator';
import { TextLogContainer } from '../components/texts/TextLogContainer';
+import { Badge } from '../components/ui/badge';
+import { Button } from '../components/ui/button';
+import {
+ Card,
+ CardContent,
+ CardHeader,
+ CardTitle,
+} from '../components/ui/card';
import { Area_AvailableRestTimeChart } from '../features/AvailableRestTimeChartArea';
import { Area_ProductivePaceChart } from '../features/ProductivePaceChartArea';
import {
@@ -17,6 +32,7 @@ import { SoundSettingsDialog } from '../features/soundSettings';
import { ThemeSelector } from '../features/theme/ThemeSelector';
import { RootState } from '../store';
import { triggerCurrentDateFetch } from '../store/logs';
+import { minutesToTimeString } from '../utils/DateUtil';
const DataManagementDialog = lazy(() =>
import('../features/dataManagement/DataManagementDialog').then((module) => ({
@@ -24,74 +40,254 @@ const DataManagementDialog = lazy(() =>
})),
);
+const MiniMetric = ({
+ label,
+ value,
+ tone,
+}: {
+ label: string;
+ value: string;
+ tone: 'sage' | 'peach' | 'cream';
+}) => {
+ const toneClass = {
+ sage: 'bg-[#dce6ce]',
+ peach: 'bg-[#f8d2c4]',
+ cream: 'bg-[#fffaf0]',
+ }[tone];
+
+ return (
+
+
+ {label}
+
+
+ {value}
+
+
+ );
+};
+
export const LogWriterPage = () => {
- // 휴식 알림 시스템 활성화
useRestNotification();
const dispatch = useDispatch();
-
const [isSoundSettingsOpen, setIsSoundSettingsOpen] = useState(false);
const [isDataManagementOpen, setIsDataManagementOpen] = useState(false);
- // 바로 다음 컴포넌트이니 직접 주입, redux 의존성 낮추기 위함.
- const logsForCharts = useSelector(
- (state: RootState) => state.logs.logsForCharts,
+ const { currentDate, logsForCharts } = useSelector(
+ (state: RootState) => state.logs,
);
-
- const { currentDate } = useSelector((state: RootState) => state.logs);
const currentNotification = useSelector(
(state: RootState) => state.restNotification.currentNotification,
);
const isAuthenticated = useSelector(
(state: RootState) => state.auth.isAuthenticated,
);
+ const { remainingTime, isOvertime } = useRemainingTime(currentNotification);
- // 로그인 상태에서 현재 날짜를 서버와 즉시 동기화
useEffect(() => {
- if (isAuthenticated) {
- dispatch(triggerCurrentDateFetch());
- }
+ if (isAuthenticated) dispatch(triggerCurrentDateFetch());
}, [dispatch, isAuthenticated]);
- // 잔여 시간 계산
- const { remainingTime, isOvertime } = useRemainingTime(currentNotification);
+ const latest = logsForCharts.at(-1);
+ const productive = latest?.productive ?? 0;
+ const wasted = latest?.wasted ?? 0;
+ const total = productive + wasted;
+ const balance = productive - wasted;
+ const productiveRatio = total ? Math.round((productive / total) * 100) : 0;
+ const averagePace = logsForCharts.length
+ ? Math.round(
+ logsForCharts.reduce((sum, log) => sum + log.pace, 0) /
+ logsForCharts.length,
+ )
+ : 0;
return (
-
-
-
-
- [기록지] ({currentDate})
-
- {currentNotification && (
-
-
- 잔여 휴식 시간: {remainingTime}
+
+
+
+
+
+
+
+
+
+
+
+
+ my.commit
+
+
+ calm work studio
+
- )}
-
-
-
-
-
setIsDataManagementOpen(true)} />
-
-
-
-
-
-
hello
-
-
+
{currentDate}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 오늘의 스튜디오
+
+
+ 서두르지 말고,
+
+ 지금의 리듬을 남겨요.
+
+
+ 생산과 휴식을 빠르게 기록하고, 하루의 균형은 한눈에만
+ 확인하세요. 기록은 가볍게, 흐름은 오래 유지하도록.
+
+
+ / 입력 시작
+ ⌥1 생산 기록
+ ⌥2 휴식 기록
+ ⌘P 모든 명령
+
+
+
+
+
+
+
+ 오늘의 균형
+
+
+
+
+
+ {productiveRatio}
+
+ %
+
+
+
생산 시간 비율
+
+
+
+ {balance >= 0 ? '확보' : '초과'}{' '}
+
+ {minutesToTimeString(Math.abs(balance))}
+
+
+ {currentNotification ? (
+
+
+ {isOvertime ? '휴식 초과' : '휴식 잔여'} {remainingTime}
+
+ ) : (
+
진행 중인 휴식 없음
+ )}
+
+
+
+
+
+
+
+
지금 기록
+
+ 무엇을 하고 있나요?
+
+
+ 입력 후에도 포커스가 유지돼 연속 기록 가능
+
+
+
+ 시간의 온도
+
+
+ 생산과 소비가 만든 오늘의 여유
+
+
+ 목표와 실제 리듬 비교
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+