.

src/components/admin/dashboard/AdminDashboardTrafficChart.tsx

@@ -0,0 +1,85 @@
+import { BarChart3 } from 'lucide-react';
+import EmptyState from '@/components/ui/EmptyState';
+import SegmentedControl from '@/components/ui/SegmentedControl';
+import Surface from '@/components/ui/Surface';
+import { DashboardRange, DashboardTrafficPoint } from '@/types';
+
+interface AdminDashboardTrafficChartProps {
+  points: DashboardTrafficPoint[];
+  range: DashboardRange;
+  onRangeChange: (range: DashboardRange) => void;
+  isFallback: boolean;
+}
+
+const rangeOptions = [
+  { label: '7일', value: '7d' },
+  { label: '30일', value: '30d' },
+  { label: '90일', value: '90d' },
+] satisfies { label: string; value: DashboardRange }[];
+
+const formatDay = (value: string) => {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+
+  return new Intl.DateTimeFormat('ko-KR', {
+    month: 'numeric',
+    day: 'numeric',
+  }).format(date);
+};
+
+export default function AdminDashboardTrafficChart({
+  points,
+  range,
+  onRangeChange,
+  isFallback,
+}: AdminDashboardTrafficChartProps) {
+  const maxViews = Math.max(...points.map((point) => point.views), 1);
+
+  return (
+    <Surface as="section" className="p-5">
+      <div className="mb-6 flex flex-col justify-between gap-3 sm:flex-row sm:items-center">
+        <div>
+          <div className="flex items-center gap-2">
+            <BarChart3 size={19} className="text-[var(--color-accent)]" />
+            <h2 className="text-lg font-bold text-[var(--color-text)]">트래픽 흐름</h2>
+          </div>
+          <p className="mt-1 text-sm text-[var(--color-text-muted)]">
+            최근 기간별 조회수 흐름을 확인합니다.
+          </p>
+        </div>
+        <SegmentedControl
+          ariaLabel="트래픽 기간"
+          options={rangeOptions}
+          value={range}
+          onChange={onRangeChange}
+        />
+      </div>
+
+      {points.length > 0 ? (
+        <div className="flex h-64 items-end gap-1.5 overflow-hidden rounded-lg border border-[var(--color-line)] bg-white/50 px-3 py-4 dark:bg-white/5">
+          {points.map((point) => {
+            const height = Math.max((point.views / maxViews) * 100, 4);
+
+            return (
+              <div key={point.date} className="flex min-w-2 flex-1 flex-col items-center gap-2">
+                <div
+                  className="w-full rounded-t bg-[var(--color-accent)]/70 transition hover:bg-[var(--color-accent)]"
+                  style={{ height: `${height}%` }}
+                  title={`${formatDay(point.date)} 조회 ${point.views.toLocaleString()}`}
+                />
+                <span className="hidden text-[10px] font-medium text-[var(--color-text-subtle)] sm:block">
+                  {formatDay(point.date)}
+                </span>
+              </div>
+            );
+          })}
+        </div>
+      ) : (
+        <EmptyState
+          title="통계 API 연결 전"
+          description={isFallback ? '백엔드 집계가 준비되면 기간별 그래프가 표시됩니다.' : '표시할 트래픽 데이터가 없습니다.'}
+        />
+      )}
+    </Surface>
+  );
+}