서사형 덱빌딩 게임 시스템으로 리뉴얼

src/components/dashboard/Dashboard.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { useGameStore } from '../../store/gameState';
+
+export const Dashboard: React.FC = () => {
+  const { week, day, anomaly, political, trust, entropy } = useGameStore();
+
+  return (
+    <div className="w-full bg-gray-800 border-b border-gray-600 p-3 flex flex-col gap-2 shrink-0">
+      <div className="flex justify-between items-center text-sm font-bold border-b border-gray-700 pb-1">
+        <span>Week {week}</span>
+        <span>Day {day} / 5</span>
+      </div>
+
+      <div className="grid grid-cols-2 gap-2 mt-1">
+        <div className="bg-gray-700 p-2 rounded flex flex-col items-center">
+          <span className="text-xs text-gray-400">Data (Anomaly)</span>
+          <span className="text-lg font-mono text-blue-300">{anomaly}</span>
+        </div>
+        <div className="bg-gray-700 p-2 rounded flex flex-col items-center">
+          <span className="text-xs text-gray-400">Pol. Capital</span>
+          <span className="text-lg font-mono text-yellow-400">{political}</span>
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-1 mt-1">
+        <div className="flex justify-between items-center text-xs">
+          <span className="text-gray-400">Trust</span>
+          <span>{trust}%</span>
+        </div>
+        <div className="w-full h-2 bg-gray-900 rounded overflow-hidden">
+          <div className="h-full bg-green-500" style={{ width: `${trust}%` }}></div>
+        </div>
+
+        <div className="flex justify-between items-center text-xs mt-1">
+          <span className="text-gray-400">Entropy</span>
+          <span>{entropy}%</span>
+        </div>
+        <div className="w-full h-2 bg-gray-900 rounded overflow-hidden">
+          <div className="h-full bg-red-500" style={{ width: `${entropy}%` }}></div>
+        </div>
+      </div>
+    </div>
+  );
+};