From f290afa4f06498d36d5917c8aff806aa5fb93a2d Mon Sep 17 00:00:00 2001
From: Seongbin Kim <seongbin9786@gmail.com>
Date: Mon, 13 Jul 2026 19:19:59 +0900
Subject: [PATCH] =?UTF-8?q?feat(web):=20=EC=BA=84=20=EB=B2=A4=ED=86=A0=20?=
 =?UTF-8?q?=EC=9E=91=EC=97=85=20=EC=8A=A4=ED=8A=9C=EB=94=94=EC=98=A4=20?=
 =?UTF-8?q?=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/package.json                         |   1 +
 apps/web/src/App.css                          | 117 +++++++
 .../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 |  25 +-
 .../src/components/texts/TextLogContainer.tsx | 209 +++++++++----
 apps/web/src/components/texts/TimeSummary.tsx |  37 +--
 apps/web/src/components/ui/badge.tsx          |  16 +
 apps/web/src/components/ui/button.tsx         |  41 +++
 apps/web/src/components/ui/card.tsx           |  46 +++
 apps/web/src/components/ui/input.tsx          |  23 ++
 .../features/AvailableRestTimeChartArea.tsx   |   9 +-
 .../src/features/ProductivePaceChartArea.tsx  |  41 ++-
 apps/web/src/lib/utils.ts                     |   4 +
 apps/web/src/pages/LogWriterPage.tsx          | 296 +++++++++++++++---
 pnpm-lock.yaml                                |   8 +
 20 files changed, 851 insertions(+), 215 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..9061a56
--- /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": "stone",
+    "cssVariables": false
+  },
+  "aliases": {
+    "components": "./src/components",
+    "utils": "./src/lib/utils",
+    "ui": "./src/components/ui"
+  }
+}
diff --git a/apps/web/package.json b/apps/web/package.json
index 3ebed56..16ec7af 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -23,6 +23,7 @@
     "react-redux": "^9.2.0",
     "react-router-dom": "^6.15.0",
     "recharts": "^2.5.0",
+    "tailwind-merge": "^3.5.0",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {
diff --git a/apps/web/src/App.css b/apps/web/src/App.css
index 8363bb1..9d47b7c 100644
--- a/apps/web/src/App.css
+++ b/apps/web/src/App.css
@@ -2,6 +2,123 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+  html,
+  body,
+  #root {
+    min-height: 100%;
+  }
+
+  body {
+    margin: 0;
+    background: #edf0e6;
+  }
+
+  ::selection {
+    background: #b9c8a3;
+    color: #28362c;
+  }
+}
+
+.calm-shell {
+  font-family: 'Avenir Next', 'Trebuchet MS', sans-serif;
+}
+
+.calm-shell .font-serif {
+  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, serif;
+}
+
+.calm-orb {
+  position: absolute;
+  border-radius: 9999px;
+  filter: blur(2px);
+  pointer-events: none;
+}
+
+.calm-orb-one {
+  top: 70px;
+  right: -160px;
+  width: 430px;
+  height: 430px;
+  background: rgb(244 168 143 / 22%);
+}
+
+.calm-orb-two {
+  bottom: 120px;
+  left: -180px;
+  width: 470px;
+  height: 470px;
+  background: rgb(185 200 163 / 33%);
+}
+
+.calm-shell section > *,
+.calm-shell main > * {
+  animation: calm-arrive 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.calm-shell section > *:nth-child(2),
+.calm-shell main > *:nth-child(2) {
+  animation-delay: 70ms;
+}
+
+.calm-shell main > *:nth-child(3) {
+  animation-delay: 120ms;
+}
+
+.calm-shell main > *:nth-child(4) {
+  animation-delay: 170ms;
+}
+
+.calm-shell header .btn-circle,
+.calm-shell header .btn-sm {
+  min-height: 2.5rem;
+  height: 2.5rem;
+  border: 0;
+  border-radius: 9999px;
+  background: transparent;
+  color: #28362c;
+}
+
+.calm-shell header .btn-circle {
+  width: 2.5rem;
+}
+
+.calm-shell header .dropdown-content {
+  border: 1px solid rgb(40 54 44 / 15%);
+  border-radius: 1.5rem;
+  background: #fffdf6;
+  color: #28362c;
+}
+
+.calm-log-editor {
+  background-image: repeating-linear-gradient(
+    to bottom,
+    transparent 0,
+    transparent 27px,
+    rgb(40 54 44 / 7%) 27px,
+    rgb(40 54 44 / 7%) 28px
+  );
+  background-position-y: 16px;
+}
+
+@keyframes calm-arrive {
+  from {
+    opacity: 0;
+    transform: translateY(10px) scale(0.995);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .calm-shell section > *,
+  .calm-shell 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..905e2ed 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 rounded-3xl border border-dashed border-[#28362c]/15 bg-white/35 px-8 text-center text-xs text-[#28362c]/35">
+        기록을 두 개 이상 남기면 오늘의 시간 온도가 보여요
+      </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: 26,
+          right: 18,
+          left: -12,
+          bottom: 8,
         }}
       >
-        <CartesianGrid strokeDasharray="3 3" />
+        <CartesianGrid
+          stroke="#dfe3d7"
+          strokeDasharray="3 6"
+          vertical={false}
+        />
         <XAxis
           dataKey="offset"
           type="number"
-          tick={{ fontSize: 16 }}
+          axisLine={false}
+          tickLine={false}
+          tick={{ fontSize: 10, fill: '#75806f' }}
           tickFormatter={minutesToTimeString}
           domain={[minXAxisDomain, maxXAxisDomain]}
         />
         <YAxis
-          tick={{ fontSize: 16 }}
+          axisLine={false}
+          tickLine={false}
+          tick={{ fontSize: 10, fill: '#75806f' }}
           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 rgba(40,54,44,.12)',
+            borderRadius: 18,
+            boxShadow: '0 14px 35px rgba(40,54,44,.10)',
+            fontSize: 11,
+          }}
         />
+        <ReferenceLine y={0} stroke="#8b9684" strokeDasharray="3 5" />
         <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="#f4a88f"
+              stopOpacity={0.78}
+            />
+            <stop
+              offset={gradientOffset}
+              stopColor="#b9c8a3"
+              stopOpacity={0.72}
+            />
           </linearGradient>
         </defs>
         <Area
           type="monotone"
           dataKey="need"
           unit="min"
-          stroke="#000"
+          stroke="#52624e"
+          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..b808567 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 ? '#d87f62' : '#718466';
     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 ? '#d87f62' : '#718466';
     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: '#d87f62',
       position: 'top',
     };
   }
 
   const shouldShow =
     !isNearPoint(currPoint, highPoint) && !isNearPoint(currPoint, lowPoint);
-  const color = currPoint.need >= 0 ? 'red' : 'green';
+  const color = currPoint.need >= 0 ? '#d87f62' : '#718466';
   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..f705203 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 rounded-full bg-[#e4e7dc]" />
     );
   }
 
@@ -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 rounded-full bg-[#e4e7dc]"
       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-[#849978]' : 'bg-[#e69a80]'
           }`}
           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..951860f 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 rounded-3xl border border-dashed border-[#28362c]/15 bg-white/35 px-8 text-center text-xs text-[#28362c]/35">
+        기록을 두 개 이상 남기면 오늘의 페이스가 보여요
+      </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: 20,
+          right: 18,
+          left: -12,
+          bottom: 8,
         }}
       >
-        <CartesianGrid strokeDasharray="3 3" />
+        <CartesianGrid
+          stroke="#e4e7dc"
+          strokeDasharray="3 6"
+          vertical={false}
+        />
         <XAxis
           dataKey="offset"
           type="number"
-          tick={{ fontSize: 16 }}
+          axisLine={false}
+          tickLine={false}
+          tick={{ fontSize: 10, fill: '#75806f' }}
           tickFormatter={minutesToTimeString}
           domain={[8 * 60, 27 * 60]}
         />
         <YAxis
           domain={[0, 60]}
           allowDataOverflow={true}
-          tick={{ fontSize: 16 }}
+          axisLine={false}
+          tickLine={false}
+          tick={{ fontSize: 10, fill: '#75806f' }}
         />
-        <Tooltip labelFormatter={minutesToTimeString} />
-        <ReferenceLine
-          y={targetPace}
-          stroke="red"
-          label={{ value: `목표: ${targetPace}min/h`, fontSize: 16 }}
+        <Tooltip
+          labelFormatter={minutesToTimeString}
+          contentStyle={{
+            border: '1px solid rgba(40,54,44,.12)',
+            borderRadius: 18,
+            boxShadow: '0 14px 35px rgba(40,54,44,.10)',
+            fontSize: 11,
+          }}
         />
         <ReferenceLine
-          y={totalAvg}
-          stroke="blue"
+          y={targetPace}
+          stroke="#d87f62"
+          strokeDasharray="4 5"
           label={{
-            value: `[미지원] 전체 평균(${totalAvg}min/h)`,
-            fontSize: 16,
+            value: `목표 ${targetPace}`,
+            fontSize: 10,
+            fill: '#b7674d',
           }}
         />
         <ReferenceLine
           y={todayAvg}
-          stroke="green"
-          label={{ value: `오늘 평균(${todayAvg}min/h)`, fontSize: 16 }}
+          stroke="#718466"
+          label={{ value: `오늘 ${todayAvg}`, fontSize: 10, fill: '#718466' }}
         />
         <Area
           type="monotone"
           dataKey={(o) => o.pace}
           unit="min/h"
-          stroke="darkgreen"
-          fill="green"
+          stroke="#667a5d"
+          strokeWidth={1.5}
+          fill="#cbd8ba"
         />
       </AreaChart>
     </ResponsiveContainer>
diff --git a/apps/web/src/components/days/DayNavigator.tsx b/apps/web/src/components/days/DayNavigator.tsx
index ecb1d13..60a197f 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 items-center rounded-full bg-[#edf0e6] p-1">
+      <Button
+        variant="ghost"
+        size="sm"
+        className="h-8 w-8 px-0"
+        onClick={handleYesterdayButton}
+        aria-label="이전 날짜"
+      >
+        {PREV_DAY_BUTTON_TEXT}
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        className="bg-white/80"
         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="h-8 w-8 px-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..043af4c 100644
--- a/apps/web/src/components/texts/ProductiveToggle.tsx
+++ b/apps/web/src/components/texts/ProductiveToggle.tsx
@@ -5,31 +5,40 @@ interface ProductiveToggleProps {
   isProductive: boolean;
   setIsProductive: (value: boolean) => void;
   onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-  checkboxRef: React.RefObject<HTMLInputElement | null>;
 }
 
 export const ProductiveToggle = ({
   isProductive,
   setIsProductive,
   onKeyDown,
-  checkboxRef,
 }: ProductiveToggleProps) => (
-  <label className="relative inline-flex cursor-pointer items-center">
+  <label className="relative grid h-12 cursor-pointer grid-cols-2 rounded-2xl bg-[#e8eadf] p-1 text-xs font-semibold text-[#28362c]">
     <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}
-      ref={checkboxRef}
     />
     <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 rounded-xl transition-all peer-focus-visible:ring-2 peer-focus-visible:ring-[#28362c]',
+        isProductive
+          ? 'bg-[#354437] text-[#fffdf6] shadow-sm'
+          : 'text-[#28362c]/45',
       )}
     >
-      {isProductive ? '+' : '-'}
+      + 생산
+    </span>
+    <span
+      className={clsx(
+        'flex items-center justify-center rounded-xl transition-all',
+        isProductive
+          ? 'text-[#28362c]/45'
+          : 'bg-[#f4a88f] text-[#40261e] shadow-sm',
+      )}
+    >
+      − 소비
     </span>
   </label>
 );
diff --git a/apps/web/src/components/texts/TextLogContainer.tsx b/apps/web/src/components/texts/TextLogContainer.tsx
index b6c0122..f1feb1d 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,12 +28,25 @@ 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();
 
+type ActivityPreset = {
+  content: string;
+  isProductive: boolean;
+};
+
+const ACTIVITY_PRESETS: ActivityPreset[] = [
+  { content: '집중', isProductive: true },
+  { content: '회의', isProductive: true },
+  { content: '정리', isProductive: true },
+  { content: '휴식', isProductive: false },
+];
+
 export const TextLogContainer = () => {
-  const checkboxRef = useRef<HTMLInputElement>(null); // NOTE: +/- 여부를 스페이스바로 쉽게 토글하고, 탭으로 곧장 quick input으로 이동 가능하므로, checkbox에 focus 둠.
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const timeInputRef = useRef<HTMLInputElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -140,7 +154,7 @@ export const TextLogContainer = () => {
     dispatch(clearRestNotification());
 
     resetInputs();
-    textareaRef.current?.focus();
+    inputRef.current?.focus();
   };
 
   const resetInputs = useCallback(() => {
@@ -179,7 +193,7 @@ export const TextLogContainer = () => {
       // 상태 초기화
       resetInputs();
       setPendingRestLog(null);
-      textareaRef.current?.focus();
+      inputRef.current?.focus();
     },
     [dispatch, pendingRestLog, resetInputs, setRawLogs, timeInput],
   );
@@ -218,7 +232,7 @@ export const TextLogContainer = () => {
 
   useEffect(() => {
     synchronizeInput();
-    checkboxRef.current?.focus();
+    inputRef.current?.focus();
   }, [synchronizeInput]);
 
   // handleDateChange를 하지 말고, 여기서 return을 해서 cleanup을 하도록 하면 prevDate 만들 필요 없음.
@@ -228,7 +242,7 @@ export const TextLogContainer = () => {
       const localData = loadFromStorage(currentDate);
       dispatch(hydrateRawLog(localData.content));
     });
-    checkboxRef.current?.focus();
+    inputRef.current?.focus();
   }, [currentDate, dispatch]);
 
   const handleQuickAppend = useCallback(
@@ -249,7 +263,7 @@ export const TextLogContainer = () => {
       resetInputs();
       // 커맨드 팔레트가 닫힌 후 포커스 이동
       setTimeout(() => {
-        textareaRef.current?.focus();
+        inputRef.current?.focus();
       }, 100);
     },
     [currentTimeConsideringMaxTime, dispatch, resetInputs, setRawLogs],
@@ -274,75 +288,138 @@ export const TextLogContainer = () => {
     };
   }, [handleQuickAppend]);
 
+  useEffect(() => {
+    const handleWorkspaceShortcut = (event: KeyboardEvent) => {
+      if (
+        event.defaultPrevented ||
+        event.isComposing ||
+        document.querySelector('.modal-open')
+      ) {
+        return;
+      }
+
+      const target = event.target as HTMLElement | null;
+      const isEditing =
+        target?.tagName === 'INPUT' ||
+        target?.tagName === 'TEXTAREA' ||
+        target?.isContentEditable;
+
+      const hasCommandModifier =
+        event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
+
+      if (event.key === '/' && !isEditing && !hasCommandModifier) {
+        event.preventDefault();
+        inputRef.current?.focus();
+        return;
+      }
+
+      const isAltOnly =
+        event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey;
+      if (!isAltOnly) return;
+
+      if (event.code === 'Digit1') {
+        event.preventDefault();
+        handleQuickAppend(true, '집중');
+      }
+
+      if (event.code === 'Digit2') {
+        event.preventDefault();
+        handleQuickAppend(false, '휴식');
+      }
+    };
+
+    window.addEventListener('keydown', handleWorkspaceShortcut);
+    return () => window.removeEventListener('keydown', handleWorkspaceShortcut);
+  }, [handleQuickAppend]);
+
+  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-3">
         <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-[108px_1fr] gap-2">
+          <label className="relative">
+            <Clock3
+              size={14}
+              className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-[#28362c]/40"
+            />
+            <Input
+              ref={timeInputRef}
+              className={clsx(
+                'pl-9 font-mono text-xs',
+                isTimeInputShaking && 'shake-animation',
+              )}
+              placeholder={currentTimeConsideringMaxTime}
+              value={timeInput}
+              onChange={handleTimeInputChange}
+              onKeyDown={handleEnterOnTextInput}
+              aria-label="기록 시각"
+            />
+          </label>
+          <Input
+            ref={inputRef}
+            className={clsx(
+              'text-sm',
+              isQuickInputShaking && 'shake-animation',
+            )}
+            placeholder="작업, 생각, 휴식을 적어보세요"
+            value={quickInput}
+            onChange={handleQuickInputChange}
+            onKeyDown={handleEnterOnTextInput}
+            aria-label="활동 내용"
+          />
+        </div>
+
+        <div className="flex items-center justify-between gap-3">
+          <div className="flex flex-wrap gap-1.5">
+            {ACTIVITY_PRESETS.map(({ content, isProductive }) => (
+              <Button
+                key={content}
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={() => applyPreset(isProductive, content)}
+              >
+                {isProductive ? <Plus size={11} /> : <Minus size={11} />}
+                {content}
+              </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 border-t border-[#28362c]/10 pt-4">
+        <div className="mb-2 flex items-center justify-between px-1">
+          <label
+            htmlFor="calm-log-editor"
+            className="text-[10px] font-semibold uppercase tracking-[0.14em] text-[#28362c]/45"
+          >
+            오늘의 타임라인
+          </label>
+          <span className="text-[10px] text-[#28362c]/35">직접 편집 가능</span>
+        </div>
+        <textarea
+          id="calm-log-editor"
+          className="calm-log-editor min-h-[300px] flex-1 resize-none rounded-3xl border border-[#28362c]/10 bg-[#f7f6ee] px-5 py-4 font-mono text-xs leading-7 text-[#28362c]/75 outline-none focus:border-[#28362c]/25 focus:ring-4 focus:ring-[#b9c8a3]/25"
+          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..914768d 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 rounded-2xl bg-white/55 p-3">
+      <span className="flex flex-col">
+        <span className="text-[9px] font-semibold uppercase tracking-[0.1em] text-[#28362c]/40">
+          {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-[#28362c]/10 pl-3">
+        <span className="text-[9px] font-semibold uppercase tracking-[0.1em] text-[#718466]">
+          생산 · {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-[#28362c]/10 pl-3">
+        <span className="text-[9px] font-semibold uppercase tracking-[0.1em] text-[#b7674d]">
+          소비 · {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..b58f563
--- /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 rounded-full bg-[#e4ead7] px-3 py-1.5 text-[11px] font-semibold text-[#35402f]',
+      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..eb43f4b
--- /dev/null
+++ b/apps/web/src/components/ui/button.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+
+import { cn } from '../../lib/utils';
+
+type ButtonVariant = 'default' | 'secondary' | 'outline' | 'ghost';
+type ButtonSize = 'default' | 'sm' | 'icon';
+
+const variants: Record<ButtonVariant, string> = {
+  default: 'bg-[#28362c] text-[#fffdf6] hover:bg-[#1f2a22]',
+  secondary: 'bg-[#f4a88f] text-[#40261e] hover:bg-[#ee9577]',
+  outline:
+    'border border-[#28362c]/20 bg-white/55 text-[#28362c] hover:bg-white',
+  ghost: 'bg-transparent text-[#28362c] hover:bg-[#28362c]/5',
+};
+
+const sizes: Record<ButtonSize, string> = {
+  default: 'h-11 px-5',
+  sm: 'h-8 px-3 text-xs',
+  icon: 'h-10 w-10',
+};
+
+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 rounded-full text-sm font-semibold transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#28362c] focus-visible:ring-offset-2 active:scale-[0.98] 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..16f705e
--- /dev/null
+++ b/apps/web/src/components/ui/card.tsx
@@ -0,0 +1,46 @@
+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(
+      'rounded-[2rem] border border-[#28362c]/10 bg-[#fffdf6] shadow-[0_18px_50px_rgba(53,61,46,0.07)]',
+      className,
+    )}
+    {...props}
+  />
+));
+Card.displayName = 'Card';
+
+export const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('p-6 pb-3', className)} {...props} />
+));
+CardHeader.displayName = 'CardHeader';
+
+export const CardTitle = React.forwardRef<
+  HTMLHeadingElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn('text-base font-semibold tracking-[-0.02em]', className)}
+    {...props}
+  />
+));
+CardTitle.displayName = 'CardTitle';
+
+export const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('p-6 pt-2', 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..6cfa1de
--- /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-12 w-full rounded-2xl border border-[#28362c]/15 bg-white/80 px-4 text-sm text-[#28362c] outline-none placeholder:text-[#28362c]/35 focus:border-[#28362c]/40 focus:ring-4 focus:ring-[#b9c8a3]/25 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..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 (
-    <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-3">
+        <div>
+          <div className="mb-2 flex justify-between text-[9px] font-semibold uppercase tracking-[0.12em] text-[#28362c]/40">
+            <span>소비</span>
+            <span>생산</span>
+          </div>
+          <DayRatioBar logs={logsForCharts} />
+        </div>
+        <label className="flex items-center gap-2">
+          <span className="text-[9px] font-semibold uppercase tracking-[0.12em] text-[#28362c]/40">
+            목표
+          </span>
+          <Input
+            className="h-8 w-16 rounded-xl 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..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 (
+    <div className={`rounded-3xl p-5 ${toneClass}`}>
+      <span className="text-[11px] font-semibold text-[#28362c]/55">
+        {label}
+      </span>
+      <strong className="mt-3 block text-2xl font-semibold tracking-[-0.04em]">
+        {value}
+      </strong>
+    </div>
+  );
+};
+
 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 (
-    <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'}`}
-            >
-              <Timer size={16} />
-              잔여 휴식 시간: {remainingTime}
+    <div className="calm-shell relative min-h-screen overflow-hidden bg-[#edf0e6] text-[#28362c]">
+      <div className="calm-orb calm-orb-one" />
+      <div className="calm-orb calm-orb-two" />
+
+      <div className="relative z-10 mx-auto max-w-[1540px] px-6 py-6 xl:px-10">
+        <header className="flex items-center justify-between rounded-full border border-[#28362c]/10 bg-[#fffdf6]/90 px-4 py-3 shadow-[0_12px_35px_rgba(53,61,46,0.06)] backdrop-blur-xl">
+          <div className="flex items-center gap-3">
+            <span className="flex h-10 w-10 items-center justify-center rounded-full bg-[#28362c] text-[#fffdf6]">
+              <Leaf size={17} />
+            </span>
+            <div>
+              <div className="font-serif text-lg font-semibold tracking-[-0.03em]">
+                my.commit
+              </div>
+              <div className="text-[10px] font-semibold uppercase tracking-[0.16em] text-[#28362c]/45">
+                calm work studio
+              </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} />
+            <Badge className="ml-3 hidden xl:inline-flex">{currentDate}</Badge>
+          </div>
+
+          <div className="flex items-center gap-1">
+            <DayNavigator />
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => setIsSoundSettingsOpen(true)}
+              title="알림음 설정"
+              aria-label="알림음 설정"
+            >
+              <Bell size={17} />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => setIsDataManagementOpen(true)}
+              title="데이터 관리"
+              aria-label="데이터 관리"
+            >
+              <Database size={17} />
+            </Button>
+            <ThemeSelector />
+            <AuthHeader />
+          </div>
+        </header>
+
+        <section className="mt-5 grid grid-cols-12 gap-4">
+          <Card className="col-span-8 overflow-hidden bg-[#fff3e8]">
+            <CardContent className="flex h-full min-h-72 items-end justify-between p-8 xl:p-10">
+              <div className="max-w-2xl">
+                <Badge className="bg-[#f4a88f] text-[#40261e]">
+                  <Sparkles className="mr-1.5" size={12} /> 오늘의 스튜디오
+                </Badge>
+                <h1 className="mt-7 font-serif text-5xl leading-[0.96] tracking-[-0.055em] xl:text-6xl">
+                  서두르지 말고,
+                  <br />
+                  지금의 리듬을 남겨요.
+                </h1>
+                <p className="mt-5 max-w-lg text-sm leading-6 text-[#28362c]/60">
+                  생산과 휴식을 빠르게 기록하고, 하루의 균형은 한눈에만
+                  확인하세요. 기록은 가볍게, 흐름은 오래 유지하도록.
+                </p>
+              </div>
+              <div className="mb-1 grid gap-2 text-right text-[11px] font-semibold text-[#28362c]/50">
+                <span>/ 입력 시작</span>
+                <span>⌥1 생산 기록</span>
+                <span>⌥2 휴식 기록</span>
+                <span>⌘P 모든 명령</span>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card className="col-span-4 overflow-hidden border-0 bg-[#2f4034] text-[#f8f4e8]">
+            <CardContent className="flex h-full min-h-72 flex-col justify-between p-8">
+              <div className="flex items-center justify-between">
+                <Badge className="bg-white/10 text-white/75">오늘의 균형</Badge>
+                <TrendingUp size={19} className="text-[#bfd2a8]" />
+              </div>
+              <div className="flex items-end justify-between">
+                <div>
+                  <div className="text-6xl font-semibold tracking-[-0.075em]">
+                    {productiveRatio}
+                    <span className="ml-1 text-xl font-normal text-white/45">
+                      %
+                    </span>
+                  </div>
+                  <p className="mt-2 text-xs text-white/45">생산 시간 비율</p>
+                </div>
+                <div className="text-right text-xs leading-6 text-white/60">
+                  <div>
+                    {balance >= 0 ? '확보' : '초과'}{' '}
+                    <strong className="text-white">
+                      {minutesToTimeString(Math.abs(balance))}
+                    </strong>
+                  </div>
+                  {currentNotification ? (
+                    <div className={isOvertime ? 'text-[#f4a88f]' : ''}>
+                      <Timer className="mr-1 inline" size={12} />
+                      {isOvertime ? '휴식 초과' : '휴식 잔여'} {remainingTime}
+                    </div>
+                  ) : (
+                    <div className="text-white/35">진행 중인 휴식 없음</div>
+                  )}
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </section>
+
+        <main className="mt-4 grid min-h-[790px] grid-cols-12 gap-4">
+          <Card className="col-span-5 row-span-2 overflow-hidden bg-[#fffdf6]/95">
+            <CardHeader className="flex items-start justify-between border-b border-[#28362c]/10 p-7 pb-5">
+              <div>
+                <Badge className="mb-3">지금 기록</Badge>
+                <CardTitle className="font-serif text-2xl">
+                  무엇을 하고 있나요?
+                </CardTitle>
+                <p className="mt-1 text-xs text-[#28362c]/50">
+                  입력 후에도 포커스가 유지돼 연속 기록 가능
+                </p>
+              </div>
+              <span className="rounded-full bg-[#f8d2c4] p-3 text-[#6d3c2d]">
+                <Coffee size={17} />
+              </span>
+            </CardHeader>
+            <CardContent className="h-[calc(100%_-_121px)] p-7 pt-5">
+              <TextLogContainer />
+            </CardContent>
+          </Card>
+
+          <Card className="col-span-7 min-h-0 overflow-hidden bg-[#f7f8f1]/95">
+            <CardHeader className="flex items-center justify-between px-7 pt-6">
+              <div>
+                <CardTitle className="font-serif text-xl">
+                  시간의 온도
+                </CardTitle>
+                <p className="mt-1 text-xs text-[#28362c]/50">
+                  생산과 소비가 만든 오늘의 여유
+                </p>
+              </div>
+              <Badge className="bg-[#f8d2c4] text-[#6d3c2d]">
+                live balance
+              </Badge>
+            </CardHeader>
+            <CardContent className="h-[315px] px-6 pb-6 pt-3">
+              <Area_AvailableRestTimeChart logsForCharts={logsForCharts} />
+            </CardContent>
+          </Card>
+
+          <Card className="col-span-4 min-h-0 overflow-hidden bg-[#fffdf6]/95">
+            <CardHeader className="px-6 pt-6">
+              <CardTitle className="font-serif text-xl">
+                오늘의 페이스
+              </CardTitle>
+              <p className="mt-1 text-xs text-[#28362c]/50">
+                목표와 실제 리듬 비교
+              </p>
+            </CardHeader>
+            <CardContent className="h-[315px] px-5 pb-6 pt-2">
+              <Area_ProductivePaceChart logsForCharts={logsForCharts} />
+            </CardContent>
+          </Card>
+
+          <div className="col-span-3 grid grid-rows-3 gap-3">
+            <MiniMetric
+              label="생산 시간"
+              value={minutesToTimeString(productive)}
+              tone="sage"
+            />
+            <MiniMetric
+              label="소비 시간"
+              value={minutesToTimeString(wasted)}
+              tone="peach"
+            />
+            <MiniMetric
+              label="평균 페이스"
+              value={`${averagePace}분 / 시간`}
+              tone="cream"
+            />
+          </div>
+        </main>
+
+        <footer className="mt-4 flex justify-between px-4 py-3 text-[10px] font-semibold uppercase tracking-[0.14em] text-[#28362c]/35">
+          <span>Calm bento · proposal 05 / 05</span>
+          <span>Make the rhythm visible</span>
+        </footer>
       </div>
 
       <SoundSettingsDialog
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7f8b9e6..c7bec13 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -97,6 +97,9 @@ importers:
       recharts:
         specifier: ^2.5.0
         version: 2.15.4(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      tailwind-merge:
+        specifier: ^3.5.0
+        version: 3.5.0
       xlsx:
         specifier: ^0.18.5
         version: 0.18.5
@@ -3762,6 +3765,9 @@ packages:
     resolution: {integrity: sha512-MeQTA1r0litLUf0Rp/iisCaL8761lKAZHaimlbGK4j0HysC4PLfqygQj9srcs0m2RdtDYnF8UuYyKpbjHYp7Jw==}
     engines: {node: ^14.18.0 || >=16.0.0}
 
+  tailwind-merge@3.5.0:
+    resolution: {integrity: sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A==}
+
   tailwindcss@3.4.19:
     resolution: {integrity: sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==}
     engines: {node: '>=14.0.0'}
@@ -8105,6 +8111,8 @@ snapshots:
     dependencies:
       '@pkgr/core': 0.2.9
 
+  tailwind-merge@3.5.0: {}
+
   tailwindcss@3.4.19(tsx@4.21.0)(yaml@1.10.2):
     dependencies:
       '@alloc/quick-lru': 5.2.0