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

---
 apps/web/components.json                      |  21 +
 apps/web/src/App.css                          |  56 +++
 apps/web/src/components/auth/AuthHeader.tsx   |  12 +-
 .../charts/AvailableRestTimeChart/chart.tsx   | 175 +++++--
 .../charts/AvailableRestTimeChart/points.tsx  |  16 +-
 .../web/src/components/charts/DayRatioBar.tsx |   8 +-
 .../components/charts/ProductivePaceChart.tsx | 186 +++++--
 apps/web/src/components/days/DayNavigator.tsx |  40 +-
 .../src/components/texts/ProductiveToggle.tsx |  32 +-
 .../src/components/texts/TextLogContainer.tsx | 246 +++++++---
 apps/web/src/components/texts/TimeSummary.tsx |  26 +-
 apps/web/src/components/ui/badge.tsx          |  31 ++
 apps/web/src/components/ui/button.tsx         |  57 +++
 apps/web/src/components/ui/card.tsx           |  57 +++
 apps/web/src/components/ui/input.tsx          |  20 +
 apps/web/src/components/ui/tabs.tsx           |  79 +++
 .../features/AvailableRestTimeChartArea.tsx   |  15 +-
 .../src/features/ProductivePaceChartArea.tsx  |  53 +-
 apps/web/src/features/theme/ThemeSelector.tsx |  27 +-
 apps/web/src/hooks/useCommandPalette.ts       |   4 +
 apps/web/src/pages/LogWriterPage.tsx          | 455 ++++++++++++++++--
 apps/web/src/utils/PaceUtil.ts                |   6 +-
 apps/web/src/utils/commandEvents.ts           |  22 +
 23 files changed, 1348 insertions(+), 296 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/components/ui/tabs.tsx

diff --git a/apps/web/components.json b/apps/web/components.json
new file mode 100644
index 0000000..2eae697
--- /dev/null
+++ b/apps/web/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/App.css",
+    "baseColor": "slate",
+    "cssVariables": false,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "./src/components",
+    "utils": "./src/utils",
+    "ui": "./src/components/ui",
+    "lib": "./src/lib",
+    "hooks": "./src/hooks"
+  },
+  "iconLibrary": "lucide"
+}
diff --git a/apps/web/src/App.css b/apps/web/src/App.css
index 8363bb1..de58ce3 100644
--- a/apps/web/src/App.css
+++ b/apps/web/src/App.css
@@ -2,6 +2,29 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+  html,
+  body,
+  #root {
+    min-height: 100%;
+  }
+
+  body {
+    margin: 0;
+    background: #f3f6fa;
+    color: #0f172a;
+    font-family:
+      'IBM Plex Sans', 'Pretendard Variable', 'Pretendard', 'Aptos', sans-serif;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: geometricPrecision;
+  }
+
+  ::selection {
+    background: rgb(191 219 254 / 80%);
+    color: #172554;
+  }
+}
+
 @keyframes shake {
   0% {
     transform: translateX(0);
@@ -32,3 +55,36 @@
 .shake-animation {
   animation: shake 600ms ease-in-out;
 }
+
+.chart-empty-grid {
+  background-image:
+    linear-gradient(to right, rgb(226 232 240 / 55%) 1px, transparent 1px),
+    linear-gradient(to bottom, rgb(226 232 240 / 55%) 1px, transparent 1px);
+  background-size: 32px 32px;
+  mask-image: linear-gradient(
+    to bottom,
+    transparent,
+    black 35%,
+    black 65%,
+    transparent
+  );
+}
+
+.cockpit-scrollbar {
+  scrollbar-color: #334155 transparent;
+  scrollbar-width: thin;
+}
+
+.cockpit-scrollbar::-webkit-scrollbar {
+  width: 8px;
+}
+
+.cockpit-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.cockpit-scrollbar::-webkit-scrollbar-thumb {
+  border: 2px solid #020617;
+  border-radius: 999px;
+  background: #334155;
+}
diff --git a/apps/web/src/components/auth/AuthHeader.tsx b/apps/web/src/components/auth/AuthHeader.tsx
index 16eb428..d845b67 100644
--- a/apps/web/src/components/auth/AuthHeader.tsx
+++ b/apps/web/src/components/auth/AuthHeader.tsx
@@ -9,7 +9,7 @@ import { AuthModal } from './AuthModal';
 
 type AuthModalMode = 'login' | 'signup';
 
-export const AuthHeader = () => {
+export const AuthHeader = ({ compact = false }: { compact?: boolean }) => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
   const { isAuthenticated, username } = useSelector(
@@ -35,7 +35,8 @@ export const AuthHeader = () => {
         <button
           type="button"
           onClick={() => openModal('login')}
-          className="btn btn-ghost btn-sm gap-1.5 rounded-lg font-medium text-base-content/70 transition-colors hover:bg-base-content/10 hover:text-base-content"
+          className={`btn btn-ghost btn-sm gap-1.5 rounded-lg font-medium text-base-content/70 transition-colors hover:bg-base-content/10 hover:text-base-content ${compact ? 'btn-square' : ''}`}
+          aria-label="로그인"
         >
           <LogIn size={15} />
         </button>
@@ -50,16 +51,19 @@ export const AuthHeader = () => {
   }
 
   return (
-    <div className="dropdown dropdown-end">
+    <div
+      className={`dropdown ${compact ? 'dropdown-end dropdown-right' : 'dropdown-end'}`}
+    >
       <button
         type="button"
         tabIndex={0}
         className="btn btn-ghost btn-sm gap-2 rounded-lg font-medium text-base-content/70 transition-colors hover:bg-base-content/10 hover:text-base-content"
+        aria-label="계정 메뉴"
       >
         <div className="flex h-6 w-6 items-center justify-center rounded-full bg-primary/10 text-primary">
           <User size={14} />
         </div>
-        <span className="hidden sm:inline">{username}</span>
+        {!compact && <span className="hidden sm:inline">{username}</span>}
       </button>
       <ul
         tabIndex={0}
diff --git a/apps/web/src/components/charts/AvailableRestTimeChart/chart.tsx b/apps/web/src/components/charts/AvailableRestTimeChart/chart.tsx
index bf4e2dd..c13e9c1 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,
@@ -23,6 +24,29 @@ export const AvailableRestTimeChart = ({
   logs,
 }: AvailableRestTimeChartProps) => {
   const data = getChartDataPoints(logs);
+
+  if (data.length === 0) {
+    return (
+      <div className="relative flex h-full min-h-[260px] items-center justify-center overflow-hidden rounded-lg border border-dashed border-slate-200 bg-slate-50/60">
+        <div className="chart-empty-grid absolute inset-0 opacity-60" />
+        <div className="relative text-center">
+          <div className="mx-auto mb-3 flex h-6 w-12 items-end justify-center gap-1">
+            <span className="h-2 w-1.5 rounded-sm bg-cyan-300" />
+            <span className="h-4 w-1.5 rounded-sm bg-cyan-500" />
+            <span className="h-6 w-1.5 rounded-sm bg-blue-600" />
+            <span className="h-3 w-1.5 rounded-sm bg-orange-400" />
+          </div>
+          <p className="text-sm font-semibold text-slate-700">
+            밸런스를 계산할 기록이 없습니다
+          </p>
+          <p className="mt-1 text-xs text-slate-400">
+            생산과 소비 기록이 쌓이면 누적 차이를 시각화합니다.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
   const gradientOffset = calculateGradientOffset(data);
   const yAxisConfig = getNormalizedYAxisTicks(data);
 
@@ -32,49 +56,112 @@ export const AvailableRestTimeChart = ({
   const gradientId = 'availableRestTimeSplitColor';
 
   return (
-    <ResponsiveContainer className="min-h-0">
-      <AreaChart
-        data={data}
-        margin={{
-          top: 30,
-          right: 30,
-          left: 0,
-          bottom: 30,
-        }}
-      >
-        <CartesianGrid strokeDasharray="3 3" />
-        <XAxis
-          dataKey="offset"
-          type="number"
-          tick={{ fontSize: 16 }}
-          tickFormatter={minutesToTimeString}
-          domain={[minXAxisDomain, maxXAxisDomain]}
-        />
-        <YAxis
-          tick={{ fontSize: 16 }}
-          domain={yAxisConfig.domain}
-          ticks={yAxisConfig.ticks}
-          tickFormatter={(value) => `${value}`}
-        />
-        <Tooltip
-          labelFormatter={minutesToTimeString}
-          formatter={(value: number | string) => [`${value}분`, '초과 휴식']}
-        />
-        <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} />
-          </linearGradient>
-        </defs>
-        <Area
-          type="monotone"
-          dataKey="need"
-          unit="min"
-          stroke="#000"
-          fill={`url(#${gradientId})`}
-        />
-        {getPoints(data)}
-      </AreaChart>
-    </ResponsiveContainer>
+    <div className="relative h-full min-h-[260px]">
+      <div className="absolute right-2 top-0 z-10 flex items-center gap-4 text-[10px] font-medium text-slate-500">
+        <span className="flex items-center gap-1.5">
+          <span className="h-2 w-2 rounded-full bg-cyan-500" /> 생산 우위
+        </span>
+        <span className="flex items-center gap-1.5">
+          <span className="h-2 w-2 rounded-full bg-orange-500" /> 소비 초과
+        </span>
+        <span className="flex items-center gap-1.5">
+          <span className="h-px w-4 border-t border-dashed border-slate-500" />
+          균형선
+        </span>
+      </div>
+      <ResponsiveContainer width="100%" height="100%">
+        <AreaChart
+          data={data}
+          margin={{
+            top: 34,
+            right: 18,
+            left: -8,
+            bottom: 4,
+          }}
+        >
+          <CartesianGrid
+            vertical={false}
+            stroke="#e2e8f0"
+            strokeDasharray="3 5"
+          />
+          <XAxis
+            dataKey="offset"
+            type="number"
+            tick={{ fontSize: 10, fill: '#64748b' }}
+            tickFormatter={minutesToTimeString}
+            tickLine={false}
+            axisLine={{ stroke: '#cbd5e1' }}
+            tickMargin={10}
+            minTickGap={42}
+            domain={[minXAxisDomain, maxXAxisDomain]}
+          />
+          <YAxis
+            tick={{ fontSize: 10, fill: '#64748b' }}
+            domain={yAxisConfig.domain}
+            ticks={yAxisConfig.ticks}
+            tickFormatter={(value) => `${value}m`}
+            tickLine={false}
+            axisLine={false}
+            tickMargin={8}
+            width={42}
+          />
+          <Tooltip
+            cursor={{ stroke: '#93c5fd', strokeDasharray: '3 3' }}
+            contentStyle={{
+              border: '1px solid #dbeafe',
+              borderRadius: 10,
+              boxShadow: '0 12px 30px rgba(15, 23, 42, 0.12)',
+              fontSize: 12,
+            }}
+            labelFormatter={(label) =>
+              `시각 ${minutesToTimeString(Number(label))}`
+            }
+            formatter={(value: number | string) => {
+              const minutes = Number(value);
+              return [
+                `${Math.abs(minutes)}분`,
+                minutes > 0 ? '소비 초과' : '생산 우위',
+              ];
+            }}
+          />
+          <defs>
+            <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
+              <stop
+                offset={gradientOffset}
+                stopColor="#f97316"
+                stopOpacity={0.3}
+              />
+              <stop
+                offset={gradientOffset}
+                stopColor="#06b6d4"
+                stopOpacity={0.24}
+              />
+            </linearGradient>
+          </defs>
+          <ReferenceLine
+            y={0}
+            stroke="#64748b"
+            strokeDasharray="5 5"
+            strokeWidth={1.25}
+          />
+          <Area
+            type="monotone"
+            dataKey="need"
+            name="시간 밸런스"
+            unit="분"
+            stroke="#2563eb"
+            strokeWidth={2.5}
+            fill={`url(#${gradientId})`}
+            activeDot={{
+              r: 4,
+              fill: '#2563eb',
+              stroke: '#ffffff',
+              strokeWidth: 2,
+            }}
+          />
+          {getPoints(data)}
+        </AreaChart>
+      </ResponsiveContainer>
+    </div>
   );
 };
diff --git a/apps/web/src/components/charts/AvailableRestTimeChart/points.tsx b/apps/web/src/components/charts/AvailableRestTimeChart/points.tsx
index 0016284..ef5373e 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 ? '#f97316' : '#06b6d4';
     points.push(
       <ReferenceDot
         key="high"
@@ -26,7 +26,7 @@ export const getPoints = (data: ChartDataPoint[]) => {
           value={formatMinutesWithSign(highPoint.need)}
           position="top"
           fill={color}
-          fontSize={14}
+          fontSize={11}
           fontWeight="bold"
         />
       </ReferenceDot>,
@@ -34,7 +34,7 @@ export const getPoints = (data: ChartDataPoint[]) => {
   }
 
   if (lowPoint) {
-    const color = lowPoint.need >= 0 ? 'red' : 'green';
+    const color = lowPoint.need >= 0 ? '#f97316' : '#06b6d4';
     points.push(
       <ReferenceDot
         key="low"
@@ -49,7 +49,7 @@ export const getPoints = (data: ChartDataPoint[]) => {
           value={formatMinutesWithSign(lowPoint.need)}
           position="bottom"
           fill={color}
-          fontSize={14}
+          fontSize={11}
           fontWeight="bold"
         />
       </ReferenceDot>,
@@ -71,7 +71,7 @@ export const getPoints = (data: ChartDataPoint[]) => {
           value={formatMinutesWithSign(currentPointConfig.point.need)}
           position={currentPointConfig.position}
           fill={currentPointConfig.color}
-          fontSize={14}
+          fontSize={11}
           fontWeight="bold"
         />
       </ReferenceDot>,
@@ -117,7 +117,7 @@ function isNearPoint(
 type CurrentPointConfig = {
   point: ChartDataPoint | null;
   shouldShow: boolean;
-  color: 'red' | 'green';
+  color: '#f97316' | '#06b6d4';
   position: 'top' | 'bottom';
 };
 
@@ -131,14 +131,14 @@ function getCurrentPointConfig(
     return {
       point: null,
       shouldShow: false,
-      color: 'red',
+      color: '#f97316',
       position: 'top',
     };
   }
 
   const shouldShow =
     !isNearPoint(currPoint, highPoint) && !isNearPoint(currPoint, lowPoint);
-  const color = currPoint.need >= 0 ? 'red' : 'green';
+  const color = currPoint.need >= 0 ? '#f97316' : '#06b6d4';
   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..733ac64 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-slate-100" />
     );
   }
 
@@ -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-slate-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'
+          className={`transition-[width] duration-500 ease-in-out ${
+            block.type === 'productive' ? 'bg-cyan-500' : 'bg-orange-400'
           }`}
           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..96851f3 100644
--- a/apps/web/src/components/charts/ProductivePaceChart.tsx
+++ b/apps/web/src/components/charts/ProductivePaceChart.tsx
@@ -14,68 +14,150 @@ 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 === 0) {
+    return (
+      <div className="relative flex h-full min-h-[260px] items-center justify-center overflow-hidden rounded-lg border border-dashed border-slate-200 bg-slate-50/60">
+        <div className="chart-empty-grid absolute inset-0 opacity-60" />
+        <div className="relative text-center">
+          <div className="mx-auto mb-3 h-2 w-12 rounded-full bg-blue-100">
+            <div className="h-2 w-5 rounded-full bg-blue-500" />
+          </div>
+          <p className="text-sm font-semibold text-slate-700">
+            페이스 데이터가 아직 없습니다
+          </p>
+          <p className="mt-1 text-xs text-slate-400">
+            첫 생산 활동을 기록하면 시간대별 흐름이 나타납니다.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  const firstOffset = data[0].offset;
+  const lastOffset = data[data.length - 1].offset;
+  const domainStart = Math.max(0, Math.floor((firstOffset - 30) / 60) * 60);
+  const domainEnd = Math.max(
+    domainStart + 60,
+    Math.ceil((lastOffset + 30) / 60) * 60,
+  );
+  const paceCeiling = Math.max(
+    60,
+    targetPace + 10,
+    todayAvg + 10,
+    ...data.map((log) => log.pace + 10),
+  );
+
   return (
-    <ResponsiveContainer className="min-h-0">
-      <AreaChart
-        data={data}
-        margin={{
-          top: 10,
-          right: 30,
-          left: 0,
-          bottom: 0,
-        }}
-      >
-        <CartesianGrid strokeDasharray="3 3" />
-        <XAxis
-          dataKey="offset"
-          type="number"
-          tick={{ fontSize: 16 }}
-          tickFormatter={minutesToTimeString}
-          domain={[8 * 60, 27 * 60]}
-        />
-        <YAxis
-          domain={[0, 60]}
-          allowDataOverflow={true}
-          tick={{ fontSize: 16 }}
-        />
-        <Tooltip labelFormatter={minutesToTimeString} />
-        <ReferenceLine
-          y={targetPace}
-          stroke="red"
-          label={{ value: `목표: ${targetPace}min/h`, fontSize: 16 }}
-        />
-        <ReferenceLine
-          y={totalAvg}
-          stroke="blue"
-          label={{
-            value: `[미지원] 전체 평균(${totalAvg}min/h)`,
-            fontSize: 16,
+    <div className="relative h-full min-h-[260px]">
+      <div className="absolute right-2 top-0 z-10 flex items-center gap-4 text-[10px] font-medium text-slate-500">
+        <span className="flex items-center gap-1.5">
+          <span className="h-2 w-2 rounded-full bg-blue-600" /> 생산 페이스
+        </span>
+        <span className="flex items-center gap-1.5">
+          <span className="h-px w-4 border-t border-dashed border-cyan-500" />
+          오늘 평균 {todayAvg}
+        </span>
+        <span className="flex items-center gap-1.5">
+          <span className="h-px w-4 border-t border-dashed border-blue-700" />
+          목표 {targetPace}
+        </span>
+      </div>
+      <ResponsiveContainer width="100%" height="100%">
+        <AreaChart
+          data={data}
+          margin={{
+            top: 34,
+            right: 18,
+            left: -8,
+            bottom: 4,
           }}
-        />
-        <ReferenceLine
-          y={todayAvg}
-          stroke="green"
-          label={{ value: `오늘 평균(${todayAvg}min/h)`, fontSize: 16 }}
-        />
-        <Area
-          type="monotone"
-          dataKey={(o) => o.pace}
-          unit="min/h"
-          stroke="darkgreen"
-          fill="green"
-        />
-      </AreaChart>
-    </ResponsiveContainer>
+        >
+          <defs>
+            <linearGradient id="productivePaceFill" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stopColor="#2563eb" stopOpacity={0.28} />
+              <stop offset="92%" stopColor="#2563eb" stopOpacity={0.02} />
+            </linearGradient>
+          </defs>
+          <CartesianGrid
+            vertical={false}
+            stroke="#e2e8f0"
+            strokeDasharray="3 5"
+          />
+          <XAxis
+            dataKey="offset"
+            type="number"
+            tick={{ fontSize: 10, fill: '#64748b' }}
+            tickFormatter={minutesToTimeString}
+            tickLine={false}
+            axisLine={{ stroke: '#cbd5e1' }}
+            tickMargin={10}
+            minTickGap={42}
+            domain={[domainStart, domainEnd]}
+          />
+          <YAxis
+            domain={[0, paceCeiling]}
+            allowDataOverflow
+            tick={{ fontSize: 10, fill: '#64748b' }}
+            tickLine={false}
+            axisLine={false}
+            tickMargin={8}
+            width={42}
+            unit="m"
+          />
+          <Tooltip
+            cursor={{ stroke: '#93c5fd', strokeDasharray: '3 3' }}
+            contentStyle={{
+              border: '1px solid #dbeafe',
+              borderRadius: 10,
+              boxShadow: '0 12px 30px rgba(15, 23, 42, 0.12)',
+              fontSize: 12,
+            }}
+            labelFormatter={(label) =>
+              `시각 ${minutesToTimeString(Number(label))}`
+            }
+            formatter={(value: number | string) => [
+              `${value}분 / 시간`,
+              '생산 페이스',
+            ]}
+          />
+          <ReferenceLine
+            y={targetPace}
+            stroke="#1d4ed8"
+            strokeDasharray="6 4"
+            strokeWidth={1.5}
+          />
+          <ReferenceLine
+            y={todayAvg}
+            stroke="#06b6d4"
+            strokeDasharray="3 4"
+            strokeWidth={1.5}
+          />
+          <Area
+            type="monotone"
+            dataKey="pace"
+            name="생산 페이스"
+            unit="분/시간"
+            stroke="#2563eb"
+            strokeWidth={2.5}
+            fill="url(#productivePaceFill)"
+            activeDot={{
+              r: 4,
+              fill: '#2563eb',
+              stroke: '#ffffff',
+              strokeWidth: 2,
+            }}
+          />
+        </AreaChart>
+      </ResponsiveContainer>
+    </div>
   );
 };
diff --git a/apps/web/src/components/days/DayNavigator.tsx b/apps/web/src/components/days/DayNavigator.tsx
index ecb1d13..2839f3b 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,36 @@ 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="flex items-center gap-1">
+      <Button
+        variant="outline"
+        size="sm"
+        className="w-8 px-0 font-mono"
+        onClick={handleYesterdayButton}
+        title="이전 날짜 ([)"
+        aria-label="이전 날짜"
+      >
+        {PREV_DAY_BUTTON_TEXT}
+      </Button>
+      <Button
+        variant="secondary"
+        size="sm"
+        className="px-3"
         onClick={handleTodayButton}
+        title="오늘로 이동 (T)"
+      >
+        {TODAY_BUTTON_TEXT}
+      </Button>
+      <Button
+        variant="outline"
+        size="sm"
+        className="w-8 px-0 font-mono"
+        onClick={handleTomorrowButton}
+        title="다음 날짜 (])"
+        aria-label="다음 날짜"
       >
-        <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>
+        {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..24aa575 100644
--- a/apps/web/src/components/texts/ProductiveToggle.tsx
+++ b/apps/web/src/components/texts/ProductiveToggle.tsx
@@ -14,22 +14,36 @@ export const ProductiveToggle = ({
   onKeyDown,
   checkboxRef,
 }: ProductiveToggleProps) => (
-  <label className="relative inline-flex cursor-pointer items-center">
+  <label
+    className={clsx(
+      'relative inline-flex h-9 w-[82px] shrink-0 cursor-pointer items-center rounded-lg border p-1 transition',
+      isProductive
+        ? 'border-cyan-200 bg-cyan-50'
+        : 'border-orange-200 bg-orange-50',
+    )}
+    title="Space 키로 생산/소비 전환"
+  >
     <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}
+      aria-label={isProductive ? '생산 기록' : '소비 기록'}
     />
-    <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',
-      )}
-    >
-      {isProductive ? '+' : '-'}
+    <span className="pointer-events-none flex w-full items-center justify-center gap-1.5 text-xs font-bold">
+      <span
+        className={clsx(
+          'flex h-5 w-5 items-center justify-center rounded-md text-sm text-white',
+          isProductive ? 'bg-cyan-600' : 'bg-orange-500',
+        )}
+      >
+        {isProductive ? '+' : '−'}
+      </span>
+      <span className={isProductive ? 'text-cyan-800' : 'text-orange-800'}>
+        {isProductive ? '생산' : '소비'}
+      </span>
     </span>
   </label>
 );
diff --git a/apps/web/src/components/texts/TextLogContainer.tsx b/apps/web/src/components/texts/TextLogContainer.tsx
index b6c0122..590514d 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 { Braces, CornerDownLeft, Minus, Plus, Zap } from 'lucide-react';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
@@ -18,6 +19,7 @@ import {
   addConsumptionStartListener,
   addFocusActivityInputListener,
   addProductionStartListener,
+  isTextEntryTarget,
 } from '../../utils/commandEvents';
 import { StorageListener } from '../../utils/StorageListener';
 import { loadFromStorage } from '../../utils/StorageUtil';
@@ -27,6 +29,16 @@ import {
   parseTimeInput,
 } from '../../utils/timeUtils';
 import { RestTimeInputDialog } from '../dialogs/RestTimeInputDialog';
+import { Badge } from '../ui/badge';
+import { Button } from '../ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '../ui/card';
+import { Input } from '../ui/input';
 import { ProductiveToggle } from './ProductiveToggle';
 
 const storageListener = new StorageListener();
@@ -140,7 +152,7 @@ export const TextLogContainer = () => {
     dispatch(clearRestNotification());
 
     resetInputs();
-    textareaRef.current?.focus();
+    inputRef.current?.focus();
   };
 
   const resetInputs = useCallback(() => {
@@ -179,7 +191,7 @@ export const TextLogContainer = () => {
       // 상태 초기화
       resetInputs();
       setPendingRestLog(null);
-      textareaRef.current?.focus();
+      setTimeout(() => inputRef.current?.focus(), 100);
     },
     [dispatch, pendingRestLog, resetInputs, setRawLogs, timeInput],
   );
@@ -218,7 +230,7 @@ export const TextLogContainer = () => {
 
   useEffect(() => {
     synchronizeInput();
-    checkboxRef.current?.focus();
+    inputRef.current?.focus();
   }, [synchronizeInput]);
 
   // handleDateChange를 하지 말고, 여기서 return을 해서 cleanup을 하도록 하면 prevDate 만들 필요 없음.
@@ -228,7 +240,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 +259,9 @@ export const TextLogContainer = () => {
       setRawLogs(updatedRawLog);
       dispatch(clearRestNotification());
       resetInputs();
-      // 커맨드 팔레트가 닫힌 후 포커스 이동
+      // 커맨드 팔레트가 닫힌 후 다음 기록을 바로 입력할 수 있게 이동
       setTimeout(() => {
-        textareaRef.current?.focus();
+        inputRef.current?.focus();
       }, 100);
     },
     [currentTimeConsideringMaxTime, dispatch, resetInputs, setRawLogs],
@@ -274,75 +286,163 @@ export const TextLogContainer = () => {
     };
   }, [handleQuickAppend]);
 
+  useEffect(() => {
+    const handleKeyboardShortcut = (event: KeyboardEvent) => {
+      const hasOpenModal = document.querySelector('.modal-open') !== null;
+      if (event.isComposing || isRestDialogOpen || hasOpenModal) return;
+
+      if (
+        event.key === '/' &&
+        !event.altKey &&
+        !event.ctrlKey &&
+        !event.metaKey &&
+        !isTextEntryTarget(event.target)
+      ) {
+        event.preventDefault();
+        inputRef.current?.focus();
+        return;
+      }
+
+      if (event.altKey && event.code === 'Digit1') {
+        event.preventDefault();
+        handleQuickAppend(true, '생산');
+      }
+
+      if (event.altKey && event.code === 'Digit2') {
+        event.preventDefault();
+        handleQuickAppend(false, '소비');
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyboardShortcut);
+    return () => window.removeEventListener('keydown', handleKeyboardShortcut);
+  }, [handleQuickAppend, isRestDialogOpen]);
+
+  const rawLogLineCount = rawLogs.trim()
+    ? rawLogs.trim().split('\n').length
+    : 0;
+
   return (
-    <div className="flex flex-col gap-4">
-      <div className="flex items-center gap-2">
-        <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>
+    <Card className="flex h-full min-h-0 flex-col overflow-hidden">
+      <CardHeader className="flex-row items-start justify-between border-b border-slate-100 p-4">
+        <div>
+          <CardTitle className="flex items-center gap-2">
+            <Zap className="h-4 w-4 text-blue-600" />
+            Capture stream
+          </CardTitle>
+          <CardDescription className="mt-1">
+            빠른 기록과 원본 로그를 한곳에서 편집합니다.
+          </CardDescription>
+        </div>
+        <Badge variant="success">
+          <span className="h-1.5 w-1.5 rounded-full bg-cyan-500" />
+          Live
+        </Badge>
+      </CardHeader>
+
+      <CardContent className="flex min-h-0 flex-1 flex-col p-0">
+        <div className="border-b border-slate-200 bg-slate-50/70 p-4">
+          <div className="mb-3 flex items-center justify-between">
+            <p className="text-[10px] font-bold uppercase tracking-[0.16em] text-slate-500">
+              Quick capture
+            </p>
+            <span className="flex items-center gap-1 text-[10px] text-slate-400">
+              <kbd className="rounded border border-slate-200 bg-white px-1.5 py-0.5 font-mono text-slate-600">
+                /
+              </kbd>
+              입력 포커스
+            </span>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <ProductiveToggle
+              isProductive={isProductive}
+              setIsProductive={setIsProductive}
+              onKeyDown={handleEnterOnCheckbox}
+              checkboxRef={checkboxRef}
+            />
+            <Input
+              ref={timeInputRef}
+              className={clsx(
+                '!w-[74px] shrink-0 px-2 font-mono text-xs',
+                isTimeInputShaking && 'shake-animation border-orange-400',
+              )}
+              placeholder={currentTimeConsideringMaxTime}
+              value={timeInput}
+              onChange={handleTimeInputChange}
+              onKeyDown={handleEnterOnTextInput}
+              aria-label="기록 시각"
+            />
+            <Input
+              ref={inputRef}
+              className={clsx(
+                '!w-auto min-w-0 flex-1 text-xs',
+                isQuickInputShaking && 'shake-animation border-orange-400',
+              )}
+              placeholder="지금 무엇을 하고 있나요?"
+              value={quickInput}
+              onChange={handleQuickInputChange}
+              onKeyDown={handleEnterOnTextInput}
+              aria-label="활동 내용"
+            />
+            <Button
+              size="icon"
+              className="h-9 w-9"
+              onClick={appendLog}
+              title="기록 추가 (Enter)"
+              aria-label="기록 추가"
+            >
+              <CornerDownLeft className="h-4 w-4" />
+            </Button>
+          </div>
+
+          <div className="mt-3 grid grid-cols-2 gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              className="justify-between border-cyan-200 bg-cyan-50/70 text-cyan-800 hover:bg-cyan-100"
+              onClick={() => handleQuickAppend(true, '생산')}
+            >
+              <span className="flex items-center gap-1.5">
+                <Plus className="h-3.5 w-3.5" /> 생산 시작
+              </span>
+              <kbd className="font-mono text-[10px] text-cyan-600">⌥1</kbd>
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              className="justify-between border-orange-200 bg-orange-50/70 text-orange-800 hover:bg-orange-100"
+              onClick={() => handleQuickAppend(false, '소비')}
+            >
+              <span className="flex items-center gap-1.5">
+                <Minus className="h-3.5 w-3.5" /> 소비 시작
+              </span>
+              <kbd className="font-mono text-[10px] text-orange-600">⌥2</kbd>
+            </Button>
+          </div>
         </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 bg-slate-950">
+          <div className="flex items-center justify-between border-b border-white/10 px-4 py-2.5">
+            <div className="flex items-center gap-2 text-xs font-semibold text-slate-200">
+              <Braces className="h-3.5 w-3.5 text-cyan-400" />
+              raw.log
+            </div>
+            <span className="font-mono text-[10px] text-slate-500">
+              {rawLogLineCount} lines · {rawLogs.length} chars
+            </span>
+          </div>
+          <textarea
+            className="cockpit-scrollbar min-h-0 flex-1 resize-none bg-transparent p-4 font-mono text-[12px] leading-6 text-slate-200 outline-none placeholder:text-slate-600 focus:bg-slate-900/60"
+            value={rawLogs}
+            ref={textareaRef}
+            onChange={handleChange}
+            placeholder="[09:00] + 첫 활동을 기록해 보세요"
+            aria-label="원본 로그 편집기"
+            spellCheck={false}
+          />
+        </div>
+      </CardContent>
 
       <RestTimeInputDialog
         isOpen={isRestDialogOpen}
@@ -350,6 +450,6 @@ export const TextLogContainer = () => {
         onSubmit={handleRestTimeSubmit}
         onSkip={handleRestTimeSkip}
       />
-    </div>
+    </Card>
   );
 };
diff --git a/apps/web/src/components/texts/TimeSummary.tsx b/apps/web/src/components/texts/TimeSummary.tsx
index 4e25444..606c045 100644
--- a/apps/web/src/components/texts/TimeSummary.tsx
+++ b/apps/web/src/components/texts/TimeSummary.tsx
@@ -22,31 +22,23 @@ export const TimeSummary = ({ logs }: TimeSummaryProps) => {
   const wastedRatio = hasAnyLogs ? 100 - _ratio : 0;
 
   const isProductiveSurplus = difference >= 0;
-  const label = isProductiveSurplus ? '확보 시간' : '초과 시간';
-  const colorClass = isProductiveSurplus ? 'text-green-600' : 'text-red-600';
 
   return (
-    <div className="flex gap-1 text-lg">
+    <div className="mt-3 flex items-center gap-5 text-[11px] text-slate-500">
       <span>
-        {label}: [
-        <span className={`font-bold ${colorClass}`}>
+        현재 균형{' '}
+        <strong
+          className={isProductiveSurplus ? 'text-cyan-700' : 'text-orange-700'}
+        >
+          {isProductiveSurplus ? '+' : '−'}
           {minutesToTimeString(Math.abs(difference))}
-        </span>
-        ]
+        </strong>
       </span>
       <span>
-        생산{' '}
-        <span className="font-bold text-green-600">
-          {minutesToTimeString(productive)}
-        </span>{' '}
-        ({productiveRatio}%)
+        생산 <strong className="text-slate-800">{productiveRatio}%</strong>
       </span>
       <span>
-        소비{' '}
-        <span className="font-bold text-red-600">
-          {minutesToTimeString(wasted)}
-        </span>{' '}
-        ({wastedRatio}%)
+        소비 <strong className="text-slate-800">{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..a9e7463
--- /dev/null
+++ b/apps/web/src/components/ui/badge.tsx
@@ -0,0 +1,31 @@
+import clsx from 'clsx';
+import type { HTMLAttributes } from 'react';
+
+type BadgeVariant = 'default' | 'info' | 'success' | 'warning' | 'outline';
+
+const variantClasses: Record<BadgeVariant, string> = {
+  default: 'border-slate-200 bg-slate-100 text-slate-700',
+  info: 'border-blue-200 bg-blue-50 text-blue-700',
+  success: 'border-cyan-200 bg-cyan-50 text-cyan-800',
+  warning: 'border-orange-200 bg-orange-50 text-orange-700',
+  outline: 'border-slate-200 bg-white text-slate-500',
+};
+
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  variant?: BadgeVariant;
+}
+
+export const Badge = ({
+  className,
+  variant = 'default',
+  ...props
+}: BadgeProps) => (
+  <span
+    className={clsx(
+      'inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.08em]',
+      variantClasses[variant],
+      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..e2cbdbe
--- /dev/null
+++ b/apps/web/src/components/ui/button.tsx
@@ -0,0 +1,57 @@
+import clsx from 'clsx';
+import type { ButtonHTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+
+type ButtonVariant = 'default' | 'secondary' | 'outline' | 'ghost' | 'danger';
+type ButtonSize = 'default' | 'sm' | 'icon';
+
+const variantClasses: Record<ButtonVariant, string> = {
+  default:
+    'bg-blue-600 text-white shadow-sm hover:bg-blue-700 focus-visible:ring-blue-500',
+  secondary:
+    'bg-slate-100 text-slate-700 hover:bg-slate-200 focus-visible:ring-slate-400',
+  outline:
+    'border border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50 focus-visible:ring-blue-500',
+  ghost:
+    'text-slate-500 hover:bg-slate-100 hover:text-slate-900 focus-visible:ring-blue-500',
+  danger:
+    'bg-orange-50 text-orange-700 hover:bg-orange-100 focus-visible:ring-orange-500',
+};
+
+const sizeClasses: Record<ButtonSize, string> = {
+  default: 'h-9 px-4 py-2',
+  sm: 'h-8 rounded-md px-3 text-xs',
+  icon: 'h-9 w-9',
+};
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className,
+      type = 'button',
+      variant = 'default',
+      size = 'default',
+      ...props
+    },
+    ref,
+  ) => (
+    <button
+      ref={ref}
+      type={type}
+      className={clsx(
+        'inline-flex shrink-0 items-center justify-center gap-2 rounded-lg text-sm font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+        variantClasses[variant],
+        sizeClasses[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..3aedf0e
--- /dev/null
+++ b/apps/web/src/components/ui/card.tsx
@@ -0,0 +1,57 @@
+import clsx from 'clsx';
+import type { HTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+
+export const Card = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={clsx(
+        'rounded-xl border border-slate-200/90 bg-white shadow-[0_1px_2px_rgba(15,23,42,0.03)]',
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Card.displayName = 'Card';
+
+export const CardHeader = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={clsx('p-5', className)} {...props} />
+));
+CardHeader.displayName = 'CardHeader';
+
+export const CardTitle = forwardRef<
+  HTMLHeadingElement,
+  HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={clsx('text-sm font-semibold text-slate-950', className)}
+    {...props}
+  />
+));
+CardTitle.displayName = 'CardTitle';
+
+export const CardDescription = forwardRef<
+  HTMLParagraphElement,
+  HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={clsx('text-xs text-slate-500', className)}
+    {...props}
+  />
+));
+CardDescription.displayName = 'CardDescription';
+
+export const CardContent = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={clsx('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..84a9ea4
--- /dev/null
+++ b/apps/web/src/components/ui/input.tsx
@@ -0,0 +1,20 @@
+import clsx from 'clsx';
+import type { InputHTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+
+export const Input = forwardRef<
+  HTMLInputElement,
+  InputHTMLAttributes<HTMLInputElement>
+>(({ className, type = 'text', ...props }, ref) => (
+  <input
+    ref={ref}
+    type={type}
+    className={clsx(
+      'flex h-9 w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm outline-none transition placeholder:text-slate-400 focus:border-blue-400 focus:ring-2 focus:ring-blue-100 disabled:cursor-not-allowed disabled:opacity-50',
+      className,
+    )}
+    {...props}
+  />
+));
+
+Input.displayName = 'Input';
diff --git a/apps/web/src/components/ui/tabs.tsx b/apps/web/src/components/ui/tabs.tsx
new file mode 100644
index 0000000..8a30df2
--- /dev/null
+++ b/apps/web/src/components/ui/tabs.tsx
@@ -0,0 +1,79 @@
+import clsx from 'clsx';
+import type {
+  ButtonHTMLAttributes,
+  HTMLAttributes,
+  PropsWithChildren,
+} from 'react';
+
+export const Tabs = ({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) => (
+  <div className={clsx('flex min-h-0 flex-col', className)} {...props} />
+);
+
+export const TabsList = ({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) => (
+  <div
+    role="tablist"
+    className={clsx(
+      'inline-flex h-9 items-center rounded-lg bg-slate-100 p-1 text-slate-500',
+      className,
+    )}
+    {...props}
+  />
+);
+
+interface TabsTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  active?: boolean;
+}
+
+export const TabsTrigger = ({
+  active = false,
+  className,
+  children,
+  ...props
+}: TabsTriggerProps) => (
+  <button
+    type="button"
+    role="tab"
+    aria-selected={active}
+    className={clsx(
+      'inline-flex h-7 items-center justify-center rounded-md px-3 text-xs font-semibold transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500',
+      active
+        ? 'bg-white text-slate-950 shadow-sm'
+        : 'text-slate-500 hover:text-slate-800',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+  </button>
+);
+
+interface TabsContentProps extends PropsWithChildren<
+  HTMLAttributes<HTMLDivElement>
+> {
+  active?: boolean;
+}
+
+export const TabsContent = ({
+  active = false,
+  className,
+  children,
+  ...props
+}: TabsContentProps) => {
+  if (!active) return null;
+
+  return (
+    <div
+      role="tabpanel"
+      className={clsx('min-h-0 flex-1 outline-none', className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
diff --git a/apps/web/src/features/AvailableRestTimeChartArea.tsx b/apps/web/src/features/AvailableRestTimeChartArea.tsx
index 7d4141b..fab9858 100644
--- a/apps/web/src/features/AvailableRestTimeChartArea.tsx
+++ b/apps/web/src/features/AvailableRestTimeChartArea.tsx
@@ -10,11 +10,18 @@ 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-4">
+    <div>
+      <p className="text-[10px] font-bold uppercase tracking-[0.16em] text-blue-600">
+        Balance
+      </p>
+      <h2 className="mt-1 text-base font-semibold text-slate-950">
+        누적 시간 밸런스
+      </h2>
       <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..68d2056 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,43 @@ 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"
-            value={targetPace}
-            onChange={updateTargetPace}
-          />
+    <div className="flex h-full min-h-0 flex-col gap-4">
+      <div className="grid grid-cols-[1fr_auto] items-end gap-6">
+        <div>
+          <p className="text-[10px] font-bold uppercase tracking-[0.16em] text-blue-600">
+            Velocity
+          </p>
+          <h2 className="mt-1 text-base font-semibold text-slate-950">
+            생산 페이스 흐름
+          </h2>
+          <div className="mt-3">
+            <DayRatioBar logs={logsForCharts} />
+          </div>
         </div>
+        <label className="flex items-center gap-2 text-xs font-medium text-slate-500">
+          목표 페이스
+          <span className="relative">
+            <Input
+              type="number"
+              min={1}
+              max={120}
+              className="h-8 w-[76px] pr-7 text-right font-mono text-xs"
+              value={targetPace}
+              onChange={updateTargetPace}
+            />
+            <span className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-[10px] text-slate-400">
+              m/h
+            </span>
+          </span>
+        </label>
+      </div>
+      <div className="min-h-0 flex-1">
+        <ProductivePaceChart
+          data={logsForCharts}
+          targetPace={targetPace}
+          todayAvg={avgPaceOf(logsForCharts)}
+        />
       </div>
-      <ProductivePaceChart
-        data={logsForCharts}
-        totalAvg={0}
-        targetPace={targetPace}
-        todayAvg={avgPaceOf(logsForCharts)}
-      />
     </div>
   );
 };
diff --git a/apps/web/src/features/theme/ThemeSelector.tsx b/apps/web/src/features/theme/ThemeSelector.tsx
index 262e250..4e88c8d 100644
--- a/apps/web/src/features/theme/ThemeSelector.tsx
+++ b/apps/web/src/features/theme/ThemeSelector.tsx
@@ -7,32 +7,42 @@ import { LIGHT_THEMES, Theme } from './config';
 import { useTheme } from './useTheme';
 import { makeThemeNameReadable } from './util';
 
-export const ThemeSelector = () => {
+export const ThemeSelector = ({ compact = false }: { compact?: boolean }) => {
   const { theme, setTheme, availableThemes } = useTheme();
 
   return (
-    <div className="dropdown dropdown-end">
-      <ThemeSelectorButton theme={theme} />
+    <div
+      className={clsx(
+        'dropdown',
+        compact ? 'dropdown-end dropdown-right' : 'dropdown-end',
+      )}
+    >
+      <ThemeSelectorButton theme={theme} compact={compact} />
       <ThemeList
         availableThemes={availableThemes}
         currentTheme={theme}
         setTheme={setTheme}
+        compact={compact}
       />
     </div>
   );
 };
 interface ThemeSelectorButtonProps {
   theme: Theme;
+  compact: boolean;
 }
 
-function ThemeSelectorButton({ theme }: ThemeSelectorButtonProps) {
+function ThemeSelectorButton({ theme, compact }: ThemeSelectorButtonProps) {
   const isLightTheme = LIGHT_THEMES.includes(theme);
   const IconComponent = isLightTheme ? Sun : Moon;
 
   return (
     <button
       tabIndex={0}
-      className="btn btn-circle btn-ghost transition-transform duration-200 hover:rotate-12"
+      className={clsx(
+        'btn btn-circle btn-ghost transition-transform duration-200 hover:rotate-12',
+        compact && 'btn-sm',
+      )}
       aria-label="테마 선택"
     >
       <IconComponent size={16} />
@@ -44,17 +54,22 @@ interface ThemeListProps {
   availableThemes: readonly Theme[];
   currentTheme: Theme;
   setTheme: (theme: Theme) => void;
+  compact: boolean;
 }
 
 function ThemeList({
   availableThemes,
   currentTheme,
   setTheme,
+  compact,
 }: ThemeListProps) {
   return (
     <ul
       tabIndex={0}
-      className="menu dropdown-content rounded-box z-[1] mt-3 max-h-96 w-[400px] overflow-y-auto bg-base-200 p-2 shadow"
+      className={clsx(
+        'menu dropdown-content rounded-box z-[1] max-h-96 w-[400px] overflow-y-auto bg-base-200 p-2 shadow',
+        compact ? 'ml-3' : 'mt-3',
+      )}
     >
       {availableThemes.map((themeName) => (
         <ThemeListItem
diff --git a/apps/web/src/hooks/useCommandPalette.ts b/apps/web/src/hooks/useCommandPalette.ts
index 87cf0cf..7b67a60 100644
--- a/apps/web/src/hooks/useCommandPalette.ts
+++ b/apps/web/src/hooks/useCommandPalette.ts
@@ -1,5 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 
+import { addOpenCommandPaletteListener } from '../utils/commandEvents';
+
 /**
  * Command Palette의 열림/닫힘 상태를 관리하고
  * Cmd+P (Mac) / Ctrl+P (Windows/Linux) 단축키를 처리하는 훅
@@ -24,6 +26,8 @@ export const useCommandPalette = () => {
     return () => window.removeEventListener('keydown', handleKeyDown);
   }, [toggle]);
 
+  useEffect(() => addOpenCommandPaletteListener(open), [open]);
+
   return {
     isOpen,
     open,
diff --git a/apps/web/src/pages/LogWriterPage.tsx b/apps/web/src/pages/LogWriterPage.tsx
index 4c27e6a..90c8170 100644
--- a/apps/web/src/pages/LogWriterPage.tsx
+++ b/apps/web/src/pages/LogWriterPage.tsx
@@ -1,12 +1,45 @@
-import { Bell, Timer } from 'lucide-react';
-import { lazy, Suspense, useEffect, useState } from 'react';
+import {
+  Activity,
+  BarChart3,
+  Bell,
+  CalendarDays,
+  Clock3,
+  Command,
+  Database,
+  Gauge,
+  LayoutDashboard,
+  Percent,
+  Timer,
+} from 'lucide-react';
+import {
+  lazy,
+  type ReactNode,
+  Suspense,
+  useEffect,
+  useMemo,
+  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, type BadgeProps } from '../components/ui/badge';
+import { Button } from '../components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '../components/ui/card';
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '../components/ui/tabs';
 import { Area_AvailableRestTimeChart } from '../features/AvailableRestTimeChartArea';
 import { Area_ProductivePaceChart } from '../features/ProductivePaceChartArea';
 import {
@@ -16,7 +49,15 @@ import {
 import { SoundSettingsDialog } from '../features/soundSettings';
 import { ThemeSelector } from '../features/theme/ThemeSelector';
 import { RootState } from '../store';
-import { triggerCurrentDateFetch } from '../store/logs';
+import {
+  goToNextDate,
+  goToPrevDate,
+  goToToday,
+  triggerCurrentDateFetch,
+} from '../store/logs';
+import { isTextEntryTarget, openCommandPalette } from '../utils/commandEvents';
+import { minutesToTimeString } from '../utils/DateUtil';
+import { avgPaceOf } from '../utils/PaceUtil';
 
 const DataManagementDialog = lazy(() =>
   import('../features/dataManagement/DataManagementDialog').then((module) => ({
@@ -24,20 +65,141 @@ const DataManagementDialog = lazy(() =>
   })),
 );
 
+type ChartView = 'pace' | 'balance';
+type SyncStatus = RootState['logs']['syncStatus'];
+
+interface MetricCardProps {
+  label: string;
+  value: string;
+  detail: string;
+  icon: ReactNode;
+  accent: 'blue' | 'cyan' | 'orange' | 'graphite';
+}
+
+const metricAccentClasses: Record<MetricCardProps['accent'], string> = {
+  blue: 'border-t-blue-600 text-blue-600',
+  cyan: 'border-t-cyan-500 text-cyan-600',
+  orange: 'border-t-orange-500 text-orange-600',
+  graphite: 'border-t-slate-700 text-slate-700',
+};
+
+const MetricCard = ({
+  label,
+  value,
+  detail,
+  icon,
+  accent,
+}: MetricCardProps) => (
+  <Card
+    className={`relative overflow-hidden border-t-2 ${metricAccentClasses[accent]}`}
+  >
+    <CardContent className="flex h-full items-center justify-between p-4">
+      <div>
+        <p className="text-[10px] font-bold uppercase tracking-[0.14em] text-slate-400">
+          {label}
+        </p>
+        <p className="mt-1.5 font-mono text-[24px] font-semibold leading-none tracking-tight text-slate-950">
+          {value}
+        </p>
+        <p className="mt-2 text-[11px] text-slate-500">{detail}</p>
+      </div>
+      <div className="bg-current/10 flex h-9 w-9 items-center justify-center rounded-lg">
+        {icon}
+      </div>
+    </CardContent>
+  </Card>
+);
+
+interface RailActionProps {
+  label: string;
+  icon: ReactNode;
+  onClick?: () => void;
+  active?: boolean;
+}
+
+const RailAction = ({
+  label,
+  icon,
+  onClick,
+  active = false,
+}: RailActionProps) => (
+  <div className="flex flex-col items-center gap-1">
+    <Button
+      variant={active ? 'default' : 'ghost'}
+      size="icon"
+      className={
+        active
+          ? 'h-10 w-10 rounded-xl bg-slate-950 text-white hover:bg-slate-800'
+          : 'h-10 w-10 rounded-xl'
+      }
+      onClick={onClick}
+      title={label}
+      aria-label={label}
+      aria-current={active ? 'page' : undefined}
+    >
+      {icon}
+    </Button>
+    <span className="text-[9px] font-semibold uppercase tracking-wide text-slate-400">
+      {label}
+    </span>
+  </div>
+);
+
+const ShortcutHint = ({ keys, label }: { keys: string; label: string }) => (
+  <span className="flex items-center gap-2 whitespace-nowrap text-[11px] text-slate-500">
+    <kbd className="rounded-md border border-slate-200 bg-white px-2 py-1 font-mono text-[10px] font-semibold text-slate-700 shadow-sm">
+      {keys}
+    </kbd>
+    {label}
+  </span>
+);
+
+function getSyncLabel(
+  isAuthenticated: boolean,
+  syncStatus: SyncStatus,
+): string {
+  if (!isAuthenticated) return 'Local only';
+
+  switch (syncStatus) {
+    case 'pending':
+      return 'Save queued';
+    case 'syncing':
+      return 'Syncing';
+    case 'synced':
+      return 'Synced';
+    case 'error':
+      return 'Sync error';
+    default:
+      return 'Ready';
+  }
+}
+
+function getSyncVariant(
+  isAuthenticated: boolean,
+  syncStatus: SyncStatus,
+): BadgeProps['variant'] {
+  if (!isAuthenticated) return 'outline';
+  if (syncStatus === 'error') return 'warning';
+  if (syncStatus === 'synced') return 'success';
+  return 'info';
+}
+
+function getSyncDotClass(syncStatus: SyncStatus): string {
+  if (syncStatus === 'error') return 'bg-orange-500';
+  if (syncStatus === 'syncing') return 'motion-safe:animate-pulse bg-blue-500';
+  return 'bg-cyan-500';
+}
+
 export const LogWriterPage = () => {
-  // 휴식 알림 시스템 활성화
   useRestNotification();
   const dispatch = useDispatch();
 
   const [isSoundSettingsOpen, setIsSoundSettingsOpen] = useState(false);
   const [isDataManagementOpen, setIsDataManagementOpen] = useState(false);
+  const [chartView, setChartView] = useState<ChartView>('pace');
 
-  // 바로 다음 컴포넌트이니 직접 주입, redux 의존성 낮추기 위함.
-  const logsForCharts = useSelector(
-    (state: RootState) => state.logs.logsForCharts,
-  );
-
-  const { currentDate } = useSelector((state: RootState) => state.logs);
+  const { currentDate, logsForCharts, rawLogs, syncStatus, lastSyncedAt } =
+    useSelector((state: RootState) => state.logs);
   const currentNotification = useSelector(
     (state: RootState) => state.restNotification.currentNotification,
   );
@@ -45,54 +207,257 @@ export const LogWriterPage = () => {
     (state: RootState) => state.auth.isAuthenticated,
   );
 
-  // 로그인 상태에서 현재 날짜를 서버와 즉시 동기화
   useEffect(() => {
     if (isAuthenticated) {
       dispatch(triggerCurrentDateFetch());
     }
   }, [dispatch, isAuthenticated]);
 
-  // 잔여 시간 계산
+  useEffect(() => {
+    const handleDateShortcut = (event: KeyboardEvent) => {
+      if (
+        isTextEntryTarget(event.target) ||
+        event.altKey ||
+        event.ctrlKey ||
+        event.metaKey
+      ) {
+        return;
+      }
+
+      if (event.key === '[') {
+        event.preventDefault();
+        dispatch(goToPrevDate());
+      } else if (event.key === ']') {
+        event.preventDefault();
+        dispatch(goToNextDate());
+      } else if (event.key.toLowerCase() === 't') {
+        event.preventDefault();
+        dispatch(goToToday());
+      }
+    };
+
+    window.addEventListener('keydown', handleDateShortcut);
+    return () => window.removeEventListener('keydown', handleDateShortcut);
+  }, [dispatch]);
+
   const { remainingTime, isOvertime } = useRemainingTime(currentNotification);
 
+  const currentDateLabel = useMemo(
+    () =>
+      new Date(`${currentDate}T00:00:00`).toLocaleDateString('ko-KR', {
+        month: 'long',
+        day: 'numeric',
+        weekday: 'long',
+      }),
+    [currentDate],
+  );
+
+  const latestLog = logsForCharts[logsForCharts.length - 1];
+  const productiveMinutes = latestLog?.productive ?? 0;
+  const wastedMinutes = latestLog?.wasted ?? 0;
+  const trackedMinutes = productiveMinutes + wastedMinutes;
+  const productiveRatio = trackedMinutes
+    ? Math.round((productiveMinutes / trackedMinutes) * 100)
+    : 0;
+  const balanceMinutes = productiveMinutes - wastedMinutes;
+  const averagePace = avgPaceOf(logsForCharts);
+  const logCount = rawLogs.trim() ? rawLogs.trim().split('\n').length : 0;
+
+  const syncLabel = getSyncLabel(isAuthenticated, syncStatus);
+  const syncVariant = getSyncVariant(isAuthenticated, syncStatus);
+
+  const lastSyncLabel = lastSyncedAt
+    ? new Date(lastSyncedAt).toLocaleTimeString('ko-KR', {
+        hour: '2-digit',
+        minute: '2-digit',
+      })
+    : '아직 동기화되지 않음';
+
   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>
-          )}
+    <div className="flex h-screen min-h-[760px] min-w-[1180px] overflow-hidden bg-[#f3f6fa] text-slate-950">
+      <aside className="flex w-[78px] shrink-0 flex-col items-center border-r border-slate-200 bg-white py-4">
+        <div className="mb-8 flex h-10 w-10 items-center justify-center rounded-xl bg-blue-600 text-white shadow-[0_8px_22px_rgba(37,99,235,0.24)]">
+          <Activity className="h-5 w-5" />
         </div>
-        <div className="flex items-center gap-2">
-          <DayNavigator />
-          <button
-            type="button"
-            className="btn btn-circle btn-ghost"
+
+        <nav className="flex flex-col gap-5" aria-label="Cockpit navigation">
+          <RailAction
+            label="Overview"
+            icon={<LayoutDashboard className="h-[18px] w-[18px]" />}
+            active
+          />
+          <RailAction
+            label="Data"
+            icon={<Database className="h-[18px] w-[18px]" />}
+            onClick={() => setIsDataManagementOpen(true)}
+          />
+          <RailAction
+            label="Sound"
+            icon={<Bell className="h-[18px] w-[18px]" />}
             onClick={() => setIsSoundSettingsOpen(true)}
-            title="알림음 설정"
+          />
+          <RailAction
+            label="Command"
+            icon={<Command className="h-[18px] w-[18px]" />}
+            onClick={openCommandPalette}
+          />
+        </nav>
+
+        <div className="mt-auto flex flex-col items-center gap-3">
+          <div className="flex h-10 w-10 items-center justify-center rounded-xl border border-slate-200 bg-slate-50">
+            <ThemeSelector compact />
+          </div>
+          <div className="flex h-10 w-10 items-center justify-center overflow-visible rounded-xl border border-slate-200 bg-slate-50">
+            <AuthHeader compact />
+          </div>
+          <span className="h-1.5 w-1.5 rounded-full bg-cyan-500 shadow-[0_0_0_4px_rgba(6,182,212,0.12)]" />
+        </div>
+      </aside>
+
+      <main className="flex min-w-0 flex-1 flex-col overflow-hidden">
+        <header className="flex h-[76px] shrink-0 items-center justify-between border-b border-slate-200 bg-white px-5">
+          <div className="flex items-center gap-4">
+            <div>
+              <p className="text-[10px] font-bold uppercase tracking-[0.18em] text-blue-600">
+                My Commit / Focus intelligence
+              </p>
+              <div className="mt-1 flex items-baseline gap-3">
+                <h1 className="text-lg font-semibold tracking-tight text-slate-950">
+                  Analytics cockpit
+                </h1>
+                <span className="font-mono text-xs text-slate-400">
+                  {currentDate}
+                </span>
+              </div>
+            </div>
+            <div className="h-8 w-px bg-slate-200" />
+            <div className="flex items-center gap-2 text-xs text-slate-500">
+              <CalendarDays className="h-4 w-4 text-slate-400" />
+              {currentDateLabel}
+            </div>
+          </div>
+
+          <div className="flex items-center gap-3">
+            {currentNotification && (
+              <Badge variant={isOvertime ? 'warning' : 'success'}>
+                <Timer className="h-3 w-3" />
+                {isOvertime ? 'Overtime' : 'Rest'} {remainingTime}
+              </Badge>
+            )}
+            <Badge variant={syncVariant}>
+              <span
+                className={`h-1.5 w-1.5 rounded-full ${getSyncDotClass(syncStatus)}`}
+              />
+              {syncLabel}
+            </Badge>
+            <DayNavigator />
+          </div>
+        </header>
+
+        <div className="grid min-h-0 flex-1 grid-rows-[110px_minmax(0,1fr)] gap-4 p-4">
+          <section
+            className="grid grid-cols-4 gap-4"
+            aria-label="오늘의 핵심 지표"
           >
-            <Bell size={16} />
-          </button>
+            <MetricCard
+              label="Productive"
+              value={minutesToTimeString(productiveMinutes)}
+              detail={`${logCount}개 기록 중 생산 누적`}
+              icon={<Clock3 className="h-[18px] w-[18px]" />}
+              accent="blue"
+            />
+            <MetricCard
+              label="Consumed"
+              value={minutesToTimeString(wastedMinutes)}
+              detail={`현재 균형 ${balanceMinutes >= 0 ? '+' : '−'}${minutesToTimeString(
+                Math.abs(balanceMinutes),
+              )}`}
+              icon={<Timer className="h-[18px] w-[18px]" />}
+              accent="orange"
+            />
+            <MetricCard
+              label="Focus ratio"
+              value={`${productiveRatio}%`}
+              detail={`${minutesToTimeString(trackedMinutes)} 관측 기준`}
+              icon={<Percent className="h-[18px] w-[18px]" />}
+              accent="cyan"
+            />
+            <MetricCard
+              label="Avg. pace"
+              value={`${averagePace}`}
+              detail="분 / 시간 · 오늘 평균"
+              icon={<Gauge className="h-[18px] w-[18px]" />}
+              accent="graphite"
+            />
+          </section>
+
+          <section className="grid min-h-0 grid-cols-[minmax(0,1fr)_400px] gap-4">
+            <div className="flex min-h-0 flex-col gap-4">
+              <Card className="flex min-h-0 flex-1 flex-col overflow-hidden">
+                <CardHeader className="flex-row items-center justify-between border-b border-slate-100 p-4">
+                  <div>
+                    <CardTitle className="flex items-center gap-2">
+                      <BarChart3 className="h-4 w-4 text-blue-600" />
+                      Focus analytics
+                    </CardTitle>
+                    <CardDescription className="mt-1">
+                      생산 속도와 누적 시간 균형을 같은 시간축에서 확인합니다.
+                    </CardDescription>
+                  </div>
+                  <TabsList>
+                    <TabsTrigger
+                      active={chartView === 'pace'}
+                      onClick={() => setChartView('pace')}
+                    >
+                      생산 페이스
+                    </TabsTrigger>
+                    <TabsTrigger
+                      active={chartView === 'balance'}
+                      onClick={() => setChartView('balance')}
+                    >
+                      시간 밸런스
+                    </TabsTrigger>
+                  </TabsList>
+                </CardHeader>
+                <CardContent className="min-h-0 flex-1 p-4">
+                  <Tabs className="h-full">
+                    <TabsContent active={chartView === 'pace'}>
+                      <Area_ProductivePaceChart logsForCharts={logsForCharts} />
+                    </TabsContent>
+                    <TabsContent active={chartView === 'balance'}>
+                      <Area_AvailableRestTimeChart
+                        logsForCharts={logsForCharts}
+                      />
+                    </TabsContent>
+                  </Tabs>
+                </CardContent>
+              </Card>
+
+              <Card className="h-[72px] shrink-0">
+                <CardContent className="flex h-full items-center justify-between gap-5 p-4">
+                  <div className="flex min-w-0 items-center gap-5 overflow-hidden">
+                    <ShortcutHint keys="/" label="활동 입력" />
+                    <ShortcutHint keys="⌥ 1" label="생산 시작" />
+                    <ShortcutHint keys="⌥ 2" label="소비 시작" />
+                    <ShortcutHint keys="[  ]" label="날짜 이동" />
+                    <ShortcutHint keys="⌘ P" label="명령 팔레트" />
+                  </div>
+                  <div className="shrink-0 border-l border-slate-200 pl-5 text-right">
+                    <p className="text-[10px] font-semibold uppercase tracking-[0.12em] text-slate-400">
+                      Last sync
+                    </p>
+                    <p className="mt-1 font-mono text-[11px] text-slate-700">
+                      {lastSyncLabel}
+                    </p>
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
 
-          <DataManagementButton onClick={() => setIsDataManagementOpen(true)} />
-          <ThemeSelector />
-          <AuthHeader />
+            <TextLogContainer />
+          </section>
         </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>
+      </main>
 
       <SoundSettingsDialog
         isOpen={isSoundSettingsOpen}
diff --git a/apps/web/src/utils/PaceUtil.ts b/apps/web/src/utils/PaceUtil.ts
index 5a235f2..225ccd7 100644
--- a/apps/web/src/utils/PaceUtil.ts
+++ b/apps/web/src/utils/PaceUtil.ts
@@ -8,8 +8,10 @@ export interface Log {
   wasted: number;
 }
 
-export const avgPaceOf = (logs: Log[]) =>
-  Math.floor(logs.reduce((acc, cur) => acc + cur.pace, 0) / logs.length);
+export const avgPaceOf = (logs: Log[]) => {
+  if (logs.length === 0) return 0;
+  return Math.floor(logs.reduce((acc, cur) => acc + cur.pace, 0) / logs.length);
+};
 
 const UNIT = 10;
 
diff --git a/apps/web/src/utils/commandEvents.ts b/apps/web/src/utils/commandEvents.ts
index f871ef3..ba60f8c 100644
--- a/apps/web/src/utils/commandEvents.ts
+++ b/apps/web/src/utils/commandEvents.ts
@@ -1,6 +1,23 @@
 // Command Palette에서 사용되는 커스텀 이벤트 정의
 
 export const FOCUS_ACTIVITY_INPUT_EVENT = 'focusActivityInput';
+export const OPEN_COMMAND_PALETTE_EVENT = 'openCommandPalette';
+
+export const isTextEntryTarget = (target: EventTarget | null) => {
+  if (!(target instanceof HTMLElement)) return false;
+
+  const tagName = target.tagName.toLowerCase();
+  return (
+    target.isContentEditable ||
+    tagName === 'input' ||
+    tagName === 'textarea' ||
+    tagName === 'select'
+  );
+};
+
+export const openCommandPalette = () => {
+  window.dispatchEvent(new CustomEvent(OPEN_COMMAND_PALETTE_EVENT));
+};
 
 /**
  * 신규 활동 입력창으로 focus 이벤트 발생
@@ -20,6 +37,11 @@ export const addFocusActivityInputListener = (callback: () => void) => {
   return () => window.removeEventListener(FOCUS_ACTIVITY_INPUT_EVENT, callback);
 };
 
+export const addOpenCommandPaletteListener = (callback: () => void) => {
+  window.addEventListener(OPEN_COMMAND_PALETTE_EVENT, callback);
+  return () => window.removeEventListener(OPEN_COMMAND_PALETTE_EVENT, callback);
+};
+
 export const dispatchAddProductionStart = (content?: string) => {
   window.dispatchEvent(
     new CustomEvent(ADD_PRODUCTION_START_EVENT, { detail: { content } }),