From a2c443fff15ebc9c585e2403bf97cfdaa71aadcb Mon Sep 17 00:00:00 2001
From: Seongbin Kim <seongbin9786@gmail.com>
Date: Mon, 13 Jul 2026 19:16:03 +0900
Subject: [PATCH] =?UTF-8?q?feat(web):=20=ED=9D=91=EB=B0=B1=20=ED=8F=AC?=
 =?UTF-8?q?=EC=BB=A4=EC=8A=A4=20=EC=9B=8C=ED=81=AC=EC=8A=A4=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=8A=A4=20=EC=8B=9C=EC=95=88=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/components.json                      |  17 ++
 apps/web/src/App.css                          |  80 ++++++
 .../charts/AvailableRestTimeChart/chart.tsx   |  57 +++-
 .../charts/AvailableRestTimeChart/points.tsx  |  10 +-
 .../web/src/components/charts/DayRatioBar.tsx |   6 +-
 .../components/charts/ProductivePaceChart.tsx |  66 +++--
 apps/web/src/components/days/DayNavigator.tsx |  37 ++-
 .../src/components/texts/ProductiveToggle.tsx |  18 +-
 .../src/components/texts/TextLogContainer.tsx | 206 +++++++++-----
 apps/web/src/components/texts/TimeSummary.tsx |  37 +--
 apps/web/src/components/ui/badge.tsx          |  16 ++
 apps/web/src/components/ui/button.tsx         |  42 +++
 apps/web/src/components/ui/card.tsx           |  43 +++
 apps/web/src/components/ui/input.tsx          |  23 ++
 .../features/AvailableRestTimeChartArea.tsx   |   9 +-
 .../src/features/ProductivePaceChartArea.tsx  |  41 ++-
 apps/web/src/lib/utils.ts                     |   3 +
 apps/web/src/pages/LogWriterPage.tsx          | 269 ++++++++++++++----
 18 files changed, 770 insertions(+), 210 deletions(-)
 create mode 100644 apps/web/components.json
 create mode 100644 apps/web/src/components/ui/badge.tsx
 create mode 100644 apps/web/src/components/ui/button.tsx
 create mode 100644 apps/web/src/components/ui/card.tsx
 create mode 100644 apps/web/src/components/ui/input.tsx
 create mode 100644 apps/web/src/lib/utils.ts

diff --git a/apps/web/components.json b/apps/web/components.json
new file mode 100644
index 0000000..f9a8534
--- /dev/null
+++ b/apps/web/components.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/App.css",
+    "baseColor": "neutral",
+    "cssVariables": false
+  },
+  "aliases": {
+    "components": "./src/components",
+    "utils": "./src/lib/utils",
+    "ui": "./src/components/ui"
+  }
+}
diff --git a/apps/web/src/App.css b/apps/web/src/App.css
index 8363bb1..2e17660 100644
--- a/apps/web/src/App.css
+++ b/apps/web/src/App.css
@@ -2,6 +2,86 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+  html,
+  body,
+  #root {
+    min-height: 100%;
+  }
+
+  body {
+    margin: 0;
+  }
+
+  ::selection {
+    background: #0a0a0a;
+    color: #fff;
+  }
+}
+
+.monochrome-shell {
+  font-family: 'Avenir Next', 'Century Gothic', sans-serif;
+}
+
+.monochrome-shell > div > section,
+.monochrome-shell > div > main {
+  animation: focus-rise 420ms ease-out both;
+}
+
+.monochrome-shell > div > section:nth-of-type(2) {
+  animation-delay: 80ms;
+}
+
+.monochrome-shell > div > main {
+  animation-delay: 140ms;
+}
+
+.monochrome-shell header .dropdown > .btn,
+.monochrome-shell header .btn-circle {
+  min-height: 2.25rem;
+  height: 2.25rem;
+  width: 2.25rem;
+  border-radius: 0;
+  background: transparent;
+  color: #0a0a0a;
+}
+
+.monochrome-shell header .dropdown-content {
+  border: 1px solid #171717;
+  border-radius: 0;
+  background: #fff;
+  color: #171717;
+}
+
+.monochrome-log-editor {
+  background-image: repeating-linear-gradient(
+    to bottom,
+    transparent 0,
+    transparent 27px,
+    rgb(0 0 0 / 7%) 27px,
+    rgb(0 0 0 / 7%) 28px
+  );
+  background-position-y: 15px;
+}
+
+@keyframes focus-rise {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .monochrome-shell > div > section,
+  .monochrome-shell > div > main {
+    animation: none;
+  }
+}
+
 @keyframes shake {
   0% {
     transform: translateX(0);
diff --git a/apps/web/src/components/charts/AvailableRestTimeChart/chart.tsx b/apps/web/src/components/charts/AvailableRestTimeChart/chart.tsx
index bf4e2dd..8d8915e 100644
--- a/apps/web/src/components/charts/AvailableRestTimeChart/chart.tsx
+++ b/apps/web/src/components/charts/AvailableRestTimeChart/chart.tsx
@@ -2,6 +2,7 @@ import {
   Area,
   AreaChart,
   CartesianGrid,
+  ReferenceLine,
   ResponsiveContainer,
   Tooltip,
   XAxis,
@@ -31,46 +32,78 @@ export const AvailableRestTimeChart = ({
 
   const gradientId = 'availableRestTimeSplitColor';
 
+  if (data.length < 2) {
+    return (
+      <div className="flex h-full min-h-44 items-center justify-center border border-dashed border-neutral-300 font-mono text-[10px] uppercase tracking-[0.14em] text-neutral-400">
+        기록을 두 개 이상 추가하면 시간 잔고가 표시됩니다
+      </div>
+    );
+  }
+
   return (
-    <ResponsiveContainer className="min-h-0">
+    <ResponsiveContainer className="min-h-0" width="100%" height="100%">
       <AreaChart
         data={data}
         margin={{
-          top: 30,
-          right: 30,
-          left: 0,
-          bottom: 30,
+          top: 24,
+          right: 16,
+          left: -12,
+          bottom: 8,
         }}
       >
-        <CartesianGrid strokeDasharray="3 3" />
+        <CartesianGrid
+          stroke="#deded9"
+          strokeDasharray="2 5"
+          vertical={false}
+        />
         <XAxis
           dataKey="offset"
           type="number"
-          tick={{ fontSize: 16 }}
+          axisLine={false}
+          tickLine={false}
+          tick={{ fontSize: 10, fill: '#737373' }}
           tickFormatter={minutesToTimeString}
           domain={[minXAxisDomain, maxXAxisDomain]}
         />
         <YAxis
-          tick={{ fontSize: 16 }}
+          axisLine={false}
+          tickLine={false}
+          tick={{ fontSize: 10, fill: '#737373' }}
           domain={yAxisConfig.domain}
           ticks={yAxisConfig.ticks}
           tickFormatter={(value) => `${value}`}
         />
         <Tooltip
           labelFormatter={minutesToTimeString}
-          formatter={(value: number | string) => [`${value}분`, '초과 휴식']}
+          formatter={(value: number | string) => [`${value}분`, '소비 − 생산']}
+          contentStyle={{
+            border: '1px solid #171717',
+            borderRadius: 0,
+            boxShadow: 'none',
+            fontSize: 11,
+          }}
         />
+        <ReferenceLine y={0} stroke="#171717" strokeDasharray="3 3" />
         <defs>
           <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
-            <stop offset={gradientOffset} stopColor="red" stopOpacity={1} />
-            <stop offset={gradientOffset} stopColor="green" stopOpacity={1} />
+            <stop
+              offset={gradientOffset}
+              stopColor="#a3a3a3"
+              stopOpacity={0.55}
+            />
+            <stop
+              offset={gradientOffset}
+              stopColor="#171717"
+              stopOpacity={0.18}
+            />
           </linearGradient>
         </defs>
         <Area
           type="monotone"
           dataKey="need"
           unit="min"
-          stroke="#000"
+          stroke="#171717"
+          strokeWidth={1.5}
           fill={`url(#${gradientId})`}
         />
         {getPoints(data)}
diff --git a/apps/web/src/components/charts/AvailableRestTimeChart/points.tsx b/apps/web/src/components/charts/AvailableRestTimeChart/points.tsx
index 0016284..05290f2 100644
--- a/apps/web/src/components/charts/AvailableRestTimeChart/points.tsx
+++ b/apps/web/src/components/charts/AvailableRestTimeChart/points.tsx
@@ -11,7 +11,7 @@ export const getPoints = (data: ChartDataPoint[]) => {
   const points: ReactElement[] = [];
 
   if (highPoint) {
-    const color = highPoint.need >= 0 ? 'red' : 'green';
+    const color = highPoint.need >= 0 ? '#171717' : '#737373';
     points.push(
       <ReferenceDot
         key="high"
@@ -34,7 +34,7 @@ export const getPoints = (data: ChartDataPoint[]) => {
   }
 
   if (lowPoint) {
-    const color = lowPoint.need >= 0 ? 'red' : 'green';
+    const color = lowPoint.need >= 0 ? '#171717' : '#737373';
     points.push(
       <ReferenceDot
         key="low"
@@ -117,7 +117,7 @@ function isNearPoint(
 type CurrentPointConfig = {
   point: ChartDataPoint | null;
   shouldShow: boolean;
-  color: 'red' | 'green';
+  color: string;
   position: 'top' | 'bottom';
 };
 
@@ -131,14 +131,14 @@ function getCurrentPointConfig(
     return {
       point: null,
       shouldShow: false,
-      color: 'red',
+      color: '#171717',
       position: 'top',
     };
   }
 
   const shouldShow =
     !isNearPoint(currPoint, highPoint) && !isNearPoint(currPoint, lowPoint);
-  const color = currPoint.need >= 0 ? 'red' : 'green';
+  const color = currPoint.need >= 0 ? '#171717' : '#737373';
   const position = currPoint.need >= 0 ? 'top' : 'bottom';
 
   return { point: currPoint, shouldShow, color, position };
diff --git a/apps/web/src/components/charts/DayRatioBar.tsx b/apps/web/src/components/charts/DayRatioBar.tsx
index 4812d71..807f43d 100644
--- a/apps/web/src/components/charts/DayRatioBar.tsx
+++ b/apps/web/src/components/charts/DayRatioBar.tsx
@@ -8,7 +8,7 @@ export const DayRatioBar = ({ logs }: { logs: Log[] }) => {
 
   if (isEmpty || totalDuration <= 0) {
     return (
-      <div className="flex h-3 w-full min-w-0 overflow-hidden rounded-full bg-gray-200" />
+      <div className="flex h-2 w-full min-w-0 overflow-hidden bg-neutral-200" />
     );
   }
 
@@ -36,14 +36,14 @@ export const DayRatioBar = ({ logs }: { logs: Log[] }) => {
 
   return (
     <div
-      className="isolate flex h-3 w-full min-w-0 transform-gpu flex-nowrap overflow-hidden rounded-full bg-gray-100"
+      className="isolate flex h-2 w-full min-w-0 transform-gpu flex-nowrap overflow-hidden bg-neutral-100"
       style={{ WebkitMaskImage: '-webkit-radial-gradient(white, black)' }}
     >
       {blocks.map((block, idx) => (
         <div
           key={idx}
           className={`transition-all duration-500 ease-in-out ${
-            block.type === 'productive' ? 'bg-green-500' : 'bg-red-500'
+            block.type === 'productive' ? 'bg-neutral-900' : 'bg-neutral-300'
           }`}
           style={{ width: `${(block.duration / totalDuration) * 100}%` }}
           title={`${block.type === 'productive' ? '생산' : '소비'}: ${block.duration}분`}
diff --git a/apps/web/src/components/charts/ProductivePaceChart.tsx b/apps/web/src/components/charts/ProductivePaceChart.tsx
index 9f54992..295e67d 100644
--- a/apps/web/src/components/charts/ProductivePaceChart.tsx
+++ b/apps/web/src/components/charts/ProductivePaceChart.tsx
@@ -14,66 +14,86 @@ import { Log } from '../../utils/PaceUtil';
 
 interface ProductivePaceChartProps {
   data: Log[];
-  totalAvg: number;
   todayAvg: number;
   targetPace: number;
 }
 
 export const ProductivePaceChart = ({
   data,
-  totalAvg,
   todayAvg,
   targetPace,
 }: ProductivePaceChartProps) => {
+  if (data.length < 2) {
+    return (
+      <div className="flex h-full min-h-44 items-center justify-center border border-dashed border-neutral-300 font-mono text-[10px] uppercase tracking-[0.14em] text-neutral-400">
+        기록을 두 개 이상 추가하면 페이스가 표시됩니다
+      </div>
+    );
+  }
+
   return (
-    <ResponsiveContainer className="min-h-0">
+    <ResponsiveContainer className="min-h-0" width="100%" height="100%">
       <AreaChart
         data={data}
         margin={{
-          top: 10,
-          right: 30,
-          left: 0,
-          bottom: 0,
+          top: 18,
+          right: 18,
+          left: -12,
+          bottom: 8,
         }}
       >
-        <CartesianGrid strokeDasharray="3 3" />
+        <CartesianGrid
+          stroke="#deded9"
+          strokeDasharray="2 5"
+          vertical={false}
+        />
         <XAxis
           dataKey="offset"
           type="number"
-          tick={{ fontSize: 16 }}
+          axisLine={false}
+          tickLine={false}
+          tick={{ fontSize: 10, fill: '#737373' }}
           tickFormatter={minutesToTimeString}
           domain={[8 * 60, 27 * 60]}
         />
         <YAxis
           domain={[0, 60]}
           allowDataOverflow={true}
-          tick={{ fontSize: 16 }}
+          axisLine={false}
+          tickLine={false}
+          tick={{ fontSize: 10, fill: '#737373' }}
         />
-        <Tooltip labelFormatter={minutesToTimeString} />
-        <ReferenceLine
-          y={targetPace}
-          stroke="red"
-          label={{ value: `목표: ${targetPace}min/h`, fontSize: 16 }}
+        <Tooltip
+          labelFormatter={minutesToTimeString}
+          contentStyle={{
+            border: '1px solid #171717',
+            borderRadius: 0,
+            boxShadow: 'none',
+            fontSize: 11,
+          }}
         />
         <ReferenceLine
-          y={totalAvg}
-          stroke="blue"
+          y={targetPace}
+          stroke="#171717"
+          strokeDasharray="4 4"
           label={{
-            value: `[미지원] 전체 평균(${totalAvg}min/h)`,
-            fontSize: 16,
+            value: `목표 ${targetPace}`,
+            fontSize: 10,
+            fill: '#171717',
           }}
         />
         <ReferenceLine
           y={todayAvg}
-          stroke="green"
-          label={{ value: `오늘 평균(${todayAvg}min/h)`, fontSize: 16 }}
+          stroke="#737373"
+          label={{ value: `오늘 ${todayAvg}`, fontSize: 10, fill: '#737373' }}
         />
         <Area
           type="monotone"
           dataKey={(o) => o.pace}
           unit="min/h"
-          stroke="darkgreen"
-          fill="green"
+          stroke="#171717"
+          strokeWidth={1.5}
+          fill="#d4d4d4"
         />
       </AreaChart>
     </ResponsiveContainer>
diff --git a/apps/web/src/components/days/DayNavigator.tsx b/apps/web/src/components/days/DayNavigator.tsx
index ecb1d13..23bcc39 100644
--- a/apps/web/src/components/days/DayNavigator.tsx
+++ b/apps/web/src/components/days/DayNavigator.tsx
@@ -1,6 +1,7 @@
 import { useDispatch } from 'react-redux';
 
 import { goToNextDate, goToPrevDate, goToToday } from '../../store/logs';
+import { Button } from '../ui/button';
 
 const PREV_DAY_BUTTON_TEXT = '←';
 const TODAY_BUTTON_TEXT = '오늘';
@@ -13,19 +14,33 @@ export const DayNavigator = () => {
   const handleTomorrowButton = () => dispatch(goToNextDate());
 
   return (
-    <div className="flex gap-1">
-      <button className="btn btn-xs sm:btn-sm" onClick={handleYesterdayButton}>
-        <span className="sm:text-lg">{PREV_DAY_BUTTON_TEXT}</span>
-      </button>
-      <button
-        className="btn btn-primary btn-xs sm:btn-sm"
+    <div className="mr-2 flex border border-black">
+      <Button
+        variant="ghost"
+        size="sm"
+        className="border-0 border-r border-black"
+        onClick={handleYesterdayButton}
+        aria-label="이전 날짜"
+      >
+        {PREV_DAY_BUTTON_TEXT}
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        className="border-0 border-r border-black"
         onClick={handleTodayButton}
       >
-        <span className="sm:text-lg">{TODAY_BUTTON_TEXT}</span>
-      </button>
-      <button className="btn btn-xs sm:btn-sm" onClick={handleTomorrowButton}>
-        <span className="sm:text-lg">{NEXT_DAY_BUTTON_TEXT}</span>
-      </button>
+        {TODAY_BUTTON_TEXT}
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        className="border-0"
+        onClick={handleTomorrowButton}
+        aria-label="다음 날짜"
+      >
+        {NEXT_DAY_BUTTON_TEXT}
+      </Button>
     </div>
   );
 };
diff --git a/apps/web/src/components/texts/ProductiveToggle.tsx b/apps/web/src/components/texts/ProductiveToggle.tsx
index b1c9016..72cbf89 100644
--- a/apps/web/src/components/texts/ProductiveToggle.tsx
+++ b/apps/web/src/components/texts/ProductiveToggle.tsx
@@ -14,10 +14,10 @@ export const ProductiveToggle = ({
   onKeyDown,
   checkboxRef,
 }: ProductiveToggleProps) => (
-  <label className="relative inline-flex cursor-pointer items-center">
+  <label className="relative grid h-11 cursor-pointer grid-cols-2 border border-black bg-white p-1 text-xs font-semibold">
     <input
       type="checkbox"
-      className={clsx('toggle toggle-sm', isProductive && 'toggle-success')}
+      className="peer sr-only"
       checked={isProductive}
       onChange={(e) => setIsProductive(e.target.checked)}
       onKeyDown={onKeyDown}
@@ -25,11 +25,19 @@ export const ProductiveToggle = ({
     />
     <span
       className={clsx(
-        'pointer-events-none absolute flex h-4 w-4 items-center justify-center text-[10px] font-bold text-white transition-all',
-        isProductive ? 'left-3.5' : 'left-0.5',
+        'flex items-center justify-center transition-colors peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-4',
+        isProductive ? 'bg-black text-white' : 'text-neutral-500',
       )}
     >
-      {isProductive ? '+' : '-'}
+      + 생산
+    </span>
+    <span
+      className={clsx(
+        'flex items-center justify-center transition-colors',
+        isProductive ? 'text-neutral-500' : 'bg-black text-white',
+      )}
+    >
+      − 소비
     </span>
   </label>
 );
diff --git a/apps/web/src/components/texts/TextLogContainer.tsx b/apps/web/src/components/texts/TextLogContainer.tsx
index b6c0122..0fd0943 100644
--- a/apps/web/src/components/texts/TextLogContainer.tsx
+++ b/apps/web/src/components/texts/TextLogContainer.tsx
@@ -1,4 +1,5 @@
 import clsx from 'clsx';
+import { Clock3, CornerDownLeft, Minus, Plus } from 'lucide-react';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
@@ -27,9 +28,17 @@ import {
   parseTimeInput,
 } from '../../utils/timeUtils';
 import { RestTimeInputDialog } from '../dialogs/RestTimeInputDialog';
+import { Button } from '../ui/button';
+import { Input } from '../ui/input';
 import { ProductiveToggle } from './ProductiveToggle';
 
 const storageListener = new StorageListener();
+const LOG_PRESETS = [
+  { productive: true, label: '집중' },
+  { productive: true, label: '회의' },
+  { productive: true, label: '리뷰' },
+  { productive: false, label: '휴식' },
+] as const;
 
 export const TextLogContainer = () => {
   const checkboxRef = useRef<HTMLInputElement>(null); // NOTE: +/- 여부를 스페이스바로 쉽게 토글하고, 탭으로 곧장 quick input으로 이동 가능하므로, checkbox에 focus 둠.
@@ -140,7 +149,7 @@ export const TextLogContainer = () => {
     dispatch(clearRestNotification());
 
     resetInputs();
-    textareaRef.current?.focus();
+    inputRef.current?.focus();
   };
 
   const resetInputs = useCallback(() => {
@@ -179,7 +188,7 @@ export const TextLogContainer = () => {
       // 상태 초기화
       resetInputs();
       setPendingRestLog(null);
-      textareaRef.current?.focus();
+      inputRef.current?.focus();
     },
     [dispatch, pendingRestLog, resetInputs, setRawLogs, timeInput],
   );
@@ -218,7 +227,7 @@ export const TextLogContainer = () => {
 
   useEffect(() => {
     synchronizeInput();
-    checkboxRef.current?.focus();
+    inputRef.current?.focus();
   }, [synchronizeInput]);
 
   // handleDateChange를 하지 말고, 여기서 return을 해서 cleanup을 하도록 하면 prevDate 만들 필요 없음.
@@ -228,7 +237,7 @@ export const TextLogContainer = () => {
       const localData = loadFromStorage(currentDate);
       dispatch(hydrateRawLog(localData.content));
     });
-    checkboxRef.current?.focus();
+    inputRef.current?.focus();
   }, [currentDate, dispatch]);
 
   const handleQuickAppend = useCallback(
@@ -247,9 +256,9 @@ export const TextLogContainer = () => {
       setRawLogs(updatedRawLog);
       dispatch(clearRestNotification());
       resetInputs();
-      // 커맨드 팔레트가 닫힌 후 포커스 이동
+      // 커맨드 팔레트가 닫힌 후 다음 기록을 바로 입력할 수 있게 이동
       setTimeout(() => {
-        textareaRef.current?.focus();
+        inputRef.current?.focus();
       }, 100);
     },
     [currentTimeConsideringMaxTime, dispatch, resetInputs, setRawLogs],
@@ -274,75 +283,142 @@ export const TextLogContainer = () => {
     };
   }, [handleQuickAppend]);
 
+  useEffect(() => {
+    const handleWorkspaceShortcut = (event: KeyboardEvent) => {
+      if (event.isComposing || isRestDialogOpen) return;
+
+      const target = event.target as HTMLElement | null;
+      const isEditing =
+        target?.tagName === 'INPUT' ||
+        target?.tagName === 'TEXTAREA' ||
+        target?.isContentEditable;
+
+      if (event.key === '/' && !isEditing) {
+        event.preventDefault();
+        inputRef.current?.focus();
+        return;
+      }
+
+      if (!event.altKey) return;
+
+      if (event.key === '1') {
+        event.preventDefault();
+        handleQuickAppend(true, '생산');
+      }
+
+      if (event.key === '2') {
+        event.preventDefault();
+        handleQuickAppend(false, '소비');
+      }
+    };
+
+    window.addEventListener('keydown', handleWorkspaceShortcut);
+    return () => window.removeEventListener('keydown', handleWorkspaceShortcut);
+  }, [handleQuickAppend, isRestDialogOpen]);
+
+  const applyPreset = (productive: boolean, content: string) => {
+    setIsProductive(productive);
+    setQuickInput(content);
+    inputRef.current?.focus();
+  };
+
   return (
-    <div className="flex flex-col gap-4">
-      <div className="flex items-center gap-2">
+    <div className="flex h-full min-h-0 flex-col gap-5">
+      <div className="space-y-4 border-b border-black/20 pb-5">
+        <div className="flex items-center justify-between">
+          <span className="font-mono text-[10px] uppercase tracking-[0.16em] text-neutral-500">
+            기록 유형
+          </span>
+          <span className="font-mono text-[10px] text-neutral-400">
+            SPACE 전환 · ENTER 등록
+          </span>
+        </div>
+
         <ProductiveToggle
           isProductive={isProductive}
           setIsProductive={setIsProductive}
           onKeyDown={handleEnterOnCheckbox}
           checkboxRef={checkboxRef}
         />
-        <input
-          ref={timeInputRef}
-          type="text"
-          className={clsx(
-            'input input-bordered w-20 text-xs',
-            isTimeInputShaking ? 'shake-animation' : '',
-          )}
-          placeholder={currentTimeConsideringMaxTime}
-          value={timeInput}
-          onChange={handleTimeInputChange}
-          onKeyDown={handleEnterOnTextInput}
-        />
-        <input
-          ref={inputRef}
-          type="text"
-          className={clsx(
-            'input input-bordered flex-1 text-xs',
-            isQuickInputShaking ? 'shake-animation' : '',
-          )}
-          placeholder="Enter 키를 눌러 활동 내역 추가"
-          value={quickInput}
-          onChange={handleQuickInputChange}
-          onKeyDown={handleEnterOnTextInput}
-        />
-        <button
-          type="button"
-          className="btn btn-primary btn-sm"
-          onClick={appendLog}
-        >
-          추가
-        </button>
-
-        {/* 간단 입력 영역 */}
-        <div className="flex items-center gap-1 border-l border-base-300 pl-2">
-          <span className="text-xs text-base-content/60">간단 입력</span>
-          <button
-            type="button"
-            className="btn btn-success btn-outline btn-xs"
-            onClick={() => handleQuickAppend(true, '생산')}
-            title="생산 기록 추가"
-          >
-            +
-          </button>
-          <button
-            type="button"
-            className="btn btn-warning btn-outline btn-xs"
-            onClick={() => handleQuickAppend(false, '소비')}
-            title="소비 기록 추가"
-          >
-            −
-          </button>
+
+        <div className="grid grid-cols-[112px_1fr] gap-2">
+          <label className="relative">
+            <Clock3
+              size={14}
+              className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-neutral-500"
+            />
+            <Input
+              ref={timeInputRef}
+              className={clsx(
+                'pl-9 font-mono text-xs',
+                isTimeInputShaking && 'shake-animation',
+              )}
+              aria-label="기록 시각"
+              placeholder={currentTimeConsideringMaxTime}
+              value={timeInput}
+              onChange={handleTimeInputChange}
+              onKeyDown={handleEnterOnTextInput}
+            />
+          </label>
+          <Input
+            ref={inputRef}
+            className={clsx(
+              'text-sm',
+              isQuickInputShaking && 'shake-animation',
+            )}
+            aria-label="활동 내용"
+            placeholder="지금 무엇을 하고 있나요?"
+            value={quickInput}
+            onChange={handleQuickInputChange}
+            onKeyDown={handleEnterOnTextInput}
+          />
+        </div>
+
+        <div className="flex items-center justify-between gap-3">
+          <div className="flex flex-wrap gap-1.5">
+            {LOG_PRESETS.map((preset) => (
+              <Button
+                key={preset.label}
+                type="button"
+                variant="ghost"
+                size="sm"
+                className="border border-neutral-300 font-normal"
+                onClick={() => applyPreset(preset.productive, preset.label)}
+              >
+                {preset.productive ? <Plus size={12} /> : <Minus size={12} />}
+                {preset.label}
+              </Button>
+            ))}
+          </div>
+          <Button type="button" onClick={appendLog}>
+            기록
+            <CornerDownLeft size={14} />
+          </Button>
         </div>
       </div>
 
-      <textarea
-        className="textarea textarea-bordered textarea-lg mb-2 aspect-square flex-1 text-xs"
-        value={rawLogs}
-        ref={textareaRef}
-        onChange={handleChange}
-      />
+      <div className="flex min-h-0 flex-1 flex-col">
+        <div className="mb-2 flex items-center justify-between">
+          <label
+            htmlFor="raw-log-editor"
+            className="font-mono text-[10px] uppercase tracking-[0.16em] text-neutral-500"
+          >
+            Raw timeline
+          </label>
+          <span className="font-mono text-[10px] text-neutral-400">
+            직접 편집 가능
+          </span>
+        </div>
+        <textarea
+          id="raw-log-editor"
+          className="monochrome-log-editor min-h-[260px] flex-1 resize-none border border-black bg-[#f8f8f5] p-4 font-mono text-xs leading-7 outline-none transition-shadow focus:ring-2 focus:ring-black focus:ring-offset-2"
+          value={rawLogs}
+          ref={textareaRef}
+          onChange={handleChange}
+          placeholder={'09:00 + 오늘의 첫 활동\n10:30 - 잠깐의 휴식'}
+          spellCheck={false}
+        />
+      </div>
 
       <RestTimeInputDialog
         isOpen={isRestDialogOpen}
diff --git a/apps/web/src/components/texts/TimeSummary.tsx b/apps/web/src/components/texts/TimeSummary.tsx
index 4e25444..17e0162 100644
--- a/apps/web/src/components/texts/TimeSummary.tsx
+++ b/apps/web/src/components/texts/TimeSummary.tsx
@@ -23,30 +23,31 @@ export const TimeSummary = ({ logs }: TimeSummaryProps) => {
 
   const isProductiveSurplus = difference >= 0;
   const label = isProductiveSurplus ? '확보 시간' : '초과 시간';
-  const colorClass = isProductiveSurplus ? 'text-green-600' : 'text-red-600';
-
   return (
-    <div className="flex gap-1 text-lg">
-      <span>
-        {label}: [
-        <span className={`font-bold ${colorClass}`}>
-          {minutesToTimeString(Math.abs(difference))}
+    <div className="grid grid-cols-3 gap-2 border-b border-black/10 pb-3">
+      <span className="flex flex-col">
+        <span className="font-mono text-[9px] uppercase tracking-[0.12em] text-neutral-500">
+          {label}
         </span>
-        ]
+        <strong className="mt-1 text-sm font-semibold">
+          {minutesToTimeString(Math.abs(difference))}
+        </strong>
       </span>
-      <span>
-        생산{' '}
-        <span className="font-bold text-green-600">
+      <span className="flex flex-col border-l border-black/10 pl-3">
+        <span className="font-mono text-[9px] uppercase tracking-[0.12em] text-neutral-500">
+          생산 · {productiveRatio}%
+        </span>
+        <strong className="mt-1 text-sm font-semibold">
           {minutesToTimeString(productive)}
-        </span>{' '}
-        ({productiveRatio}%)
+        </strong>
       </span>
-      <span>
-        소비{' '}
-        <span className="font-bold text-red-600">
+      <span className="flex flex-col border-l border-black/10 pl-3">
+        <span className="font-mono text-[9px] uppercase tracking-[0.12em] text-neutral-500">
+          소비 · {wastedRatio}%
+        </span>
+        <strong className="mt-1 text-sm font-semibold">
           {minutesToTimeString(wasted)}
-        </span>{' '}
-        ({wastedRatio}%)
+        </strong>
       </span>
     </div>
   );
diff --git a/apps/web/src/components/ui/badge.tsx b/apps/web/src/components/ui/badge.tsx
new file mode 100644
index 0000000..f64306a
--- /dev/null
+++ b/apps/web/src/components/ui/badge.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { cn } from '../../lib/utils';
+
+export const Badge = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => (
+  <span
+    className={cn(
+      'inline-flex items-center border border-black px-2 py-1 font-mono text-[10px] font-semibold uppercase tracking-[0.14em]',
+      className,
+    )}
+    {...props}
+  />
+);
diff --git a/apps/web/src/components/ui/button.tsx b/apps/web/src/components/ui/button.tsx
new file mode 100644
index 0000000..74636a3
--- /dev/null
+++ b/apps/web/src/components/ui/button.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { cn } from '../../lib/utils';
+
+type ButtonVariant = 'default' | 'outline' | 'ghost' | 'inverse';
+type ButtonSize = 'default' | 'sm' | 'icon';
+
+const variants: Record<ButtonVariant, string> = {
+  default: 'border-black bg-black text-white hover:bg-neutral-800',
+  outline:
+    'border-black bg-transparent text-black hover:bg-black hover:text-white',
+  ghost: 'border-transparent bg-transparent text-black hover:bg-black/5',
+  inverse: 'border-white bg-white text-black hover:bg-neutral-200',
+};
+
+const sizes: Record<ButtonSize, string> = {
+  default: 'h-10 px-4',
+  sm: 'h-8 px-3 text-xs',
+  icon: 'h-9 w-9',
+};
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant = 'default', size = 'default', ...props }, ref) => (
+    <button
+      ref={ref}
+      className={cn(
+        'inline-flex shrink-0 items-center justify-center gap-2 border text-sm font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+        variants[variant],
+        sizes[size],
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+
+Button.displayName = 'Button';
diff --git a/apps/web/src/components/ui/card.tsx b/apps/web/src/components/ui/card.tsx
new file mode 100644
index 0000000..8df6249
--- /dev/null
+++ b/apps/web/src/components/ui/card.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+
+import { cn } from '../../lib/utils';
+
+export const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('border border-black/20 bg-white', className)}
+    {...props}
+  />
+));
+Card.displayName = 'Card';
+
+export const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('p-5', className)} {...props} />
+));
+CardHeader.displayName = 'CardHeader';
+
+export const CardTitle = React.forwardRef<
+  HTMLHeadingElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn('text-sm font-semibold tracking-tight', className)}
+    {...props}
+  />
+));
+CardTitle.displayName = 'CardTitle';
+
+export const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('p-5 pt-0', className)} {...props} />
+));
+CardContent.displayName = 'CardContent';
diff --git a/apps/web/src/components/ui/input.tsx b/apps/web/src/components/ui/input.tsx
new file mode 100644
index 0000000..5830a20
--- /dev/null
+++ b/apps/web/src/components/ui/input.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { cn } from '../../lib/utils';
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  className?: string;
+  type?: React.HTMLInputTypeAttribute;
+}
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type = 'text', ...props }, ref) => (
+    <input
+      ref={ref}
+      type={type}
+      className={cn(
+        'flex h-11 w-full border border-black bg-white px-3 text-sm outline-none placeholder:text-neutral-400 focus:ring-2 focus:ring-black focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Input.displayName = 'Input';
diff --git a/apps/web/src/features/AvailableRestTimeChartArea.tsx b/apps/web/src/features/AvailableRestTimeChartArea.tsx
index 7d4141b..8e3e092 100644
--- a/apps/web/src/features/AvailableRestTimeChartArea.tsx
+++ b/apps/web/src/features/AvailableRestTimeChartArea.tsx
@@ -10,11 +10,12 @@ export const Area_AvailableRestTimeChart = ({
 }: {
   logsForCharts: Log[];
 }) => (
-  <div className="flex flex-col gap-2">
-    <div className="h-10">
-      <h1 className="text-sm font-bold">[초과 휴식 시간]</h1>
+  <div className="flex h-full min-h-0 flex-col gap-3">
+    <div>
       <TimeSummary logs={logsForCharts} />
     </div>
-    <AvailableRestTimeChart logs={logsForCharts} />
+    <div className="min-h-0 flex-1">
+      <AvailableRestTimeChart logs={logsForCharts} />
+    </div>
   </div>
 );
diff --git a/apps/web/src/features/ProductivePaceChartArea.tsx b/apps/web/src/features/ProductivePaceChartArea.tsx
index 711fc2d..1e9dab6 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 (
-    <div className="flex flex-col gap-2">
-      <div>
-        <h1 className="text-sm font-bold">[생산 페이스]</h1>
-        <DayRatioBar logs={logsForCharts} />
-        <div className="mt-1 flex items-center gap-2">
-          <span className="text-xs">목표 페이스 설정: </span>
-          <input
-            className="input input-bordered input-xs"
+    <div className="flex h-full min-h-0 flex-col gap-3">
+      <div className="grid grid-cols-[1fr_auto] items-end gap-5">
+        <div>
+          <div className="mb-2 flex justify-between font-mono text-[10px] uppercase tracking-[0.12em] text-neutral-500">
+            <span>소비</span>
+            <span>생산</span>
+          </div>
+          <DayRatioBar logs={logsForCharts} />
+        </div>
+        <label className="flex items-center gap-2">
+          <span className="whitespace-nowrap font-mono text-[10px] uppercase tracking-[0.12em] text-neutral-500">
+            목표
+          </span>
+          <Input
+            className="h-8 w-16 px-2 font-mono text-xs"
             value={targetPace}
             onChange={updateTargetPace}
+            inputMode="numeric"
+            aria-label="목표 생산 페이스"
           />
-        </div>
+        </label>
+      </div>
+      <div className="min-h-0 flex-1">
+        <ProductivePaceChart
+          data={logsForCharts}
+          targetPace={targetPace}
+          todayAvg={logsForCharts.length ? avgPaceOf(logsForCharts) : 0}
+        />
       </div>
-      <ProductivePaceChart
-        data={logsForCharts}
-        totalAvg={0}
-        targetPace={targetPace}
-        todayAvg={avgPaceOf(logsForCharts)}
-      />
     </div>
   );
 };
diff --git a/apps/web/src/lib/utils.ts b/apps/web/src/lib/utils.ts
new file mode 100644
index 0000000..b6a600e
--- /dev/null
+++ b/apps/web/src/lib/utils.ts
@@ -0,0 +1,3 @@
+import { ClassValue, clsx } from 'clsx';
+
+export const cn = (...inputs: ClassValue[]) => clsx(inputs);
diff --git a/apps/web/src/pages/LogWriterPage.tsx b/apps/web/src/pages/LogWriterPage.tsx
index 4c27e6a..303910e 100644
--- a/apps/web/src/pages/LogWriterPage.tsx
+++ b/apps/web/src/pages/LogWriterPage.tsx
@@ -1,12 +1,26 @@
-import { Bell, Timer } from 'lucide-react';
+import {
+  Bell,
+  Command,
+  Database,
+  Focus,
+  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 +31,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 +39,230 @@ const DataManagementDialog = lazy(() =>
   })),
 );
 
+const Metric = ({
+  eyebrow,
+  value,
+  detail,
+}: {
+  eyebrow: string;
+  value: string;
+  detail: string;
+}) => (
+  <Card className="min-h-32">
+    <CardContent className="flex h-full flex-col justify-between p-4">
+      <span className="font-mono text-[10px] uppercase tracking-[0.18em] text-neutral-500">
+        {eyebrow}
+      </span>
+      <strong className="mt-5 text-3xl font-medium tracking-[-0.05em]">
+        {value}
+      </strong>
+      <span className="mt-1 text-xs text-neutral-500">{detail}</span>
+    </CardContent>
+  </Card>
+);
+
 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 averagePace = logsForCharts.length
+    ? Math.round(
+        logsForCharts.reduce((sum, log) => sum + log.pace, 0) /
+          logsForCharts.length,
+      )
+    : 0;
+  const metrics = {
+    productive,
+    wasted,
+    balance,
+    averagePace,
+    ratio: total ? Math.round((productive / total) * 100) : 0,
+    entries: Math.max(logsForCharts.length - 1, 0),
+  };
 
   return (
-    <div className="mx-auto flex h-screen min-w-[400px] max-w-screen-xl flex-col p-4">
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <h1 className="text-xs font-bold sm:text-sm">
-            [기록지] ({currentDate})
-          </h1>
-          {currentNotification && (
-            <div
-              className={`badge badge-lg gap-2 ${isOvertime ? 'badge-error animate-pulse' : 'badge-success'}`}
+    <div className="monochrome-shell min-h-screen bg-[#f3f3ef] text-black">
+      <div className="mx-auto max-w-[1600px] px-6 py-5 xl:px-10">
+        <header className="min-h-16 flex items-center justify-between border-y border-black py-3">
+          <div className="flex items-center gap-5">
+            <div className="text-lg font-black tracking-[-0.06em]">
+              MY<span className="mx-1 font-light">/</span>COMMIT
+            </div>
+            <Badge>{currentDate}</Badge>
+            <Badge className="hidden border-neutral-300 text-neutral-500 xl:inline-flex">
+              desktop focus edition
+            </Badge>
+          </div>
+
+          <div className="flex items-center gap-1">
+            <DayNavigator />
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => setIsSoundSettingsOpen(true)}
+              title="알림음 설정"
+              aria-label="알림음 설정"
             >
-              <Timer size={16} />
-              잔여 휴식 시간: {remainingTime}
+              <Bell size={16} />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => setIsDataManagementOpen(true)}
+              title="데이터 관리"
+              aria-label="데이터 관리"
+            >
+              <Database size={16} />
+            </Button>
+            <ThemeSelector />
+            <AuthHeader />
+          </div>
+        </header>
+
+        <section className="grid grid-cols-12 border-x border-b border-black">
+          <div className="col-span-8 flex min-h-64 flex-col justify-between border-r border-black p-7 xl:p-10">
+            <Badge className="w-fit bg-black text-white">
+              Daily control surface
+            </Badge>
+            <div>
+              <h1 className="max-w-4xl text-5xl font-medium leading-[0.9] tracking-[-0.075em] xl:text-7xl">
+                오늘의 시간을
+                <br />
+                의도대로 남기세요.
+              </h1>
+              <div className="mt-7 flex items-center gap-5 font-mono text-[11px] uppercase tracking-[0.08em] text-neutral-500">
+                <span>/ 입력 포커스</span>
+                <span>⌥1 생산</span>
+                <span>⌥2 소비</span>
+                <span>⌘P 명령</span>
+              </div>
             </div>
-          )}
-        </div>
-        <div className="flex items-center gap-2">
-          <DayNavigator />
-          <button
-            type="button"
-            className="btn btn-circle btn-ghost"
-            onClick={() => setIsSoundSettingsOpen(true)}
-            title="알림음 설정"
-          >
-            <Bell size={16} />
-          </button>
-
-          <DataManagementButton onClick={() => setIsDataManagementOpen(true)} />
-          <ThemeSelector />
-          <AuthHeader />
-        </div>
-      </div>
-      <div className="my-0 grid min-h-0 flex-1 grid-cols-1 grid-rows-4 p-4 sm:grid-cols-2 sm:grid-rows-2">
-        <TextLogContainer />
-        <div>hello</div>
-        <Area_AvailableRestTimeChart logsForCharts={logsForCharts} />
-        <Area_ProductivePaceChart logsForCharts={logsForCharts} />
+          </div>
+
+          <div className="col-span-4 flex flex-col justify-between bg-black p-7 text-white xl:p-10">
+            <div className="flex items-start justify-between">
+              <span className="font-mono text-[10px] uppercase tracking-[0.2em] text-neutral-400">
+                productive ratio
+              </span>
+              <Focus size={20} />
+            </div>
+            <div>
+              <div className="text-7xl font-light tracking-[-0.08em] xl:text-8xl">
+                {metrics.ratio}
+                <span className="ml-1 text-2xl text-neutral-400">%</span>
+              </div>
+              <div className="mt-5 flex items-center justify-between border-t border-white/25 pt-4 text-xs">
+                <span>{metrics.entries}개 구간 기록</span>
+                {currentNotification ? (
+                  <span
+                    className={isOvertime ? 'text-white' : 'text-neutral-400'}
+                  >
+                    <Timer className="mr-1 inline" size={13} />
+                    {isOvertime ? '휴식 초과' : '휴식 잔여'} {remainingTime}
+                  </span>
+                ) : (
+                  <span className="text-neutral-500">휴식 타이머 없음</span>
+                )}
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section className="mt-5 grid grid-cols-4 gap-3">
+          <Metric
+            eyebrow="productive"
+            value={minutesToTimeString(metrics.productive)}
+            detail="오늘 생산 시간"
+          />
+          <Metric
+            eyebrow="consumed"
+            value={minutesToTimeString(metrics.wasted)}
+            detail="오늘 소비 시간"
+          />
+          <Metric
+            eyebrow={metrics.balance >= 0 ? 'secured' : 'overtime'}
+            value={minutesToTimeString(Math.abs(metrics.balance))}
+            detail={metrics.balance >= 0 ? '확보한 시간' : '초과한 시간'}
+          />
+          <Metric
+            eyebrow="average pace"
+            value={`${metrics.averagePace}`}
+            detail="분 / 시간"
+          />
+        </section>
+
+        <main className="mt-3 grid min-h-[680px] grid-cols-12 gap-3">
+          <Card className="col-span-5 overflow-hidden">
+            <CardHeader className="flex-row items-center justify-between border-b border-black/20">
+              <div>
+                <CardTitle className="text-base">활동 기록</CardTitle>
+                <p className="mt-1 text-xs text-neutral-500">
+                  생각의 흐름을 끊지 않고 바로 추가
+                </p>
+              </div>
+              <Command size={18} />
+            </CardHeader>
+            <CardContent className="h-[calc(100%-81px)] p-5">
+              <TextLogContainer />
+            </CardContent>
+          </Card>
+
+          <div className="col-span-7 grid grid-rows-2 gap-3">
+            <Card className="min-h-0 overflow-hidden">
+              <CardHeader className="flex-row items-center justify-between border-b border-black/20 py-4">
+                <div>
+                  <CardTitle>시간 잔고</CardTitle>
+                  <p className="mt-1 text-xs text-neutral-500">
+                    생산 시간에서 소비 시간을 차감한 흐름
+                  </p>
+                </div>
+                <TrendingUp size={17} />
+              </CardHeader>
+              <CardContent className="h-[calc(100%-73px)] p-4">
+                <Area_AvailableRestTimeChart logsForCharts={logsForCharts} />
+              </CardContent>
+            </Card>
+
+            <Card className="min-h-0 overflow-hidden">
+              <CardHeader className="border-b border-black/20 py-4">
+                <CardTitle>생산 페이스</CardTitle>
+                <p className="mt-1 text-xs text-neutral-500">
+                  목표 대비 시간당 생산 분량
+                </p>
+              </CardHeader>
+              <CardContent className="h-[calc(100%-73px)] p-4">
+                <Area_ProductivePaceChart logsForCharts={logsForCharts} />
+              </CardContent>
+            </Card>
+          </div>
+        </main>
+
+        <footer className="mt-3 flex items-center justify-between border-t border-black py-4 font-mono text-[10px] uppercase tracking-[0.14em] text-neutral-500">
+          <span>Focus edition · proposal 03 / 05</span>
+          <span>mouse optional · keyboard ready</span>
+        </footer>
       </div>
 
       <SoundSettingsDialog