feat: add next-themes package and update styles

- Added `next-themes` package for theme management.
- Updated various components to use `hsl(var(--foreground))` for color consistency.
- Changed background colors from `bg-white` to `bg-card` in multiple components for better theming support.

Made-with: Cursor

frontend/components/screen/ScreenNode.tsx

@@ -221,7 +221,7 @@ export const ScreenNode: React.FC<{ data: ScreenNodeData }> = ({ data }) => {
       </div>
 
       {/* 화면 미리보기 영역 (컴팩트) */}
-      <div className="h-[140px] overflow-hidden bg-slate-50 p-2">
+      <div className="h-[140px] overflow-hidden bg-muted/50 p-2">
         {layoutSummary ? (
           <ScreenPreview layoutSummary={layoutSummary} screenType={screenType} />
         ) : (
@@ -233,11 +233,11 @@ export const ScreenNode: React.FC<{ data: ScreenNodeData }> = ({ data }) => {
       </div>
 
       {/* 필드 매핑 영역 */}
-      <div className="flex-1 overflow-hidden border-t border-slate-200 bg-white px-2 py-1.5">
-        <div className="mb-1 flex items-center gap-1 text-[9px] font-medium text-slate-500">
+      <div className="flex-1 overflow-hidden border-t border-border bg-card px-2 py-1.5">
+        <div className="mb-1 flex items-center gap-1 text-[9px] font-medium text-muted-foreground">
           <Columns3 className="h-3 w-3" />
           <span>필드 매핑</span>
-          <span className="ml-auto text-[8px] text-slate-400">
+          <span className="ml-auto text-[8px] text-muted-foreground/70">
             {layoutSummary?.layoutItems?.filter(i => i.label && !i.componentKind?.includes('button')).length || 0}개
           </span>
         </div>
@@ -319,7 +319,7 @@ const ScreenPreview: React.FC<{ layoutSummary: ScreenLayoutSummary; screenType:
   // 그리드 화면 일러스트
   if (screenType === "grid") {
   return (
-      <div className="flex h-full flex-col gap-2 rounded-lg border border-slate-200 bg-muted/30 p-3">
+      <div className="flex h-full flex-col gap-2 rounded-lg border border-border bg-muted/30 p-3">
         {/* 상단 툴바 */}
         <div className="flex items-center gap-2">
           <div className="h-4 w-16 rounded bg-pink-400/80 shadow-sm" />
@@ -337,19 +337,19 @@ const ScreenPreview: React.FC<{ layoutSummary: ScreenLayoutSummary; screenType:
         {/* 테이블 행들 */}
         <div className="flex flex-1 flex-col gap-1 overflow-hidden">
           {[...Array(7)].map((_, i) => (
-            <div key={i} className={`flex gap-1 rounded px-2 py-1.5 ${i % 2 === 0 ? "bg-slate-100" : "bg-white"}`}>
+            <div key={i} className={`flex gap-1 rounded px-2 py-1.5 ${i % 2 === 0 ? "bg-muted" : "bg-card"}`}>
               {[...Array(5)].map((_, j) => (
-                <div key={j} className="h-2 flex-1 rounded bg-slate-300/70" />
+                <div key={j} className="h-2 flex-1 rounded bg-muted-foreground/30" />
               ))}
             </div>
           ))}
         </div>
         {/* 페이지네이션 */}
         <div className="flex items-center justify-center gap-2 pt-1">
-          <div className="h-2.5 w-4 rounded bg-slate-300" />
+          <div className="h-2.5 w-4 rounded bg-muted-foreground/40" />
           <div className="h-2.5 w-4 rounded bg-primary" />
-          <div className="h-2.5 w-4 rounded bg-slate-300" />
-          <div className="h-2.5 w-4 rounded bg-slate-300" />
+          <div className="h-2.5 w-4 rounded bg-muted-foreground/40" />
+          <div className="h-2.5 w-4 rounded bg-muted-foreground/40" />
         </div>
         {/* 컴포넌트 수 */}
         <div className="absolute bottom-2 right-2 rounded-md bg-slate-800/80 px-2 py-1 text-[10px] font-medium text-white shadow-sm">
@@ -362,17 +362,17 @@ const ScreenPreview: React.FC<{ layoutSummary: ScreenLayoutSummary; screenType:
   // 폼 화면 일러스트
   if (screenType === "form") {
     return (
-      <div className="flex h-full flex-col gap-3 rounded-lg border border-slate-200 bg-muted/30 p-3">
+      <div className="flex h-full flex-col gap-3 rounded-lg border border-border bg-muted/30 p-3">
         {/* 폼 필드들 */}
         {[...Array(6)].map((_, i) => (
           <div key={i} className="flex items-center gap-3">
-            <div className="h-2.5 w-14 rounded bg-slate-400" />
-            <div className="h-5 flex-1 rounded-md border border-slate-300 bg-white shadow-sm" />
+            <div className="h-2.5 w-14 rounded bg-muted-foreground/50" />
+            <div className="h-5 flex-1 rounded-md border border-border bg-card shadow-sm" />
           </div>
         ))}
         {/* 버튼 영역 */}
-        <div className="mt-auto flex justify-end gap-2 border-t border-slate-100 pt-3">
-          <div className="h-5 w-14 rounded-md bg-slate-300 shadow-sm" />
+        <div className="mt-auto flex justify-end gap-2 border-t border-border pt-3">
+          <div className="h-5 w-14 rounded-md bg-muted-foreground/40 shadow-sm" />
           <div className="h-5 w-14 rounded-md bg-primary shadow-sm" />
         </div>
         {/* 컴포넌트 수 */}
@@ -386,7 +386,7 @@ const ScreenPreview: React.FC<{ layoutSummary: ScreenLayoutSummary; screenType:
   // 대시보드 화면 일러스트
   if (screenType === "dashboard") {
     return (
-      <div className="grid h-full grid-cols-2 gap-2 rounded-lg border border-slate-200 bg-muted/30 p-3">
+      <div className="grid h-full grid-cols-2 gap-2 rounded-lg border border-border bg-muted/30 p-3">
         {/* 카드/차트들 */}
         <div className="rounded-lg bg-emerald-100 p-2 shadow-sm">
           <div className="mb-2 h-2.5 w-10 rounded bg-emerald-400" />
@@ -419,15 +419,15 @@ const ScreenPreview: React.FC<{ layoutSummary: ScreenLayoutSummary; screenType:
   // 액션 화면 일러스트 (버튼 중심)
   if (screenType === "action") {
     return (
-      <div className="flex h-full flex-col items-center justify-center gap-4 rounded-lg border border-slate-200 bg-muted/30 p-3">
-        <div className="rounded-full bg-slate-100 p-4 text-slate-400">
+      <div className="flex h-full flex-col items-center justify-center gap-4 rounded-lg border border-border bg-muted/30 p-3">
+        <div className="rounded-full bg-muted p-4 text-muted-foreground">
           <MousePointer2 className="h-10 w-10" />
             </div>
         <div className="flex gap-3">
           <div className="h-7 w-16 rounded-md bg-primary shadow-sm" />
-          <div className="h-7 w-16 rounded-md bg-slate-300 shadow-sm" />
+          <div className="h-7 w-16 rounded-md bg-muted-foreground/40 shadow-sm" />
             </div>
-        <div className="text-xs font-medium text-slate-400">액션 화면</div>
+        <div className="text-xs font-medium text-muted-foreground">액션 화면</div>
         {/* 컴포넌트 수 */}
         <div className="absolute bottom-2 right-2 rounded-md bg-slate-800/80 px-2 py-1 text-[10px] font-medium text-white shadow-sm">
           {totalComponents}개
@@ -695,7 +695,7 @@ export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => {
           if (filterRefs.length === 0 && lookupRefs.length === 0) return null;
           
           return (
-            <div className="flex items-center gap-1.5 px-2 py-1 mb-1.5 rounded border border-slate-300 bg-slate-50 text-[9px]">
+            <div className="flex items-center gap-1.5 px-2 py-1 mb-1.5 rounded border border-border bg-muted text-[9px]">
               {/* 필터 뱃지 */}
               {filterRefs.length > 0 && (
                 <span 
@@ -861,7 +861,7 @@ export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => {
 export const LegacyScreenNode = ScreenNode;
 export const AggregateNode: React.FC<{ data: any }> = ({ data }) => {
   return (
-    <div className="rounded-lg border-2 border-purple-300 bg-white p-3 shadow-lg">
+    <div className="rounded-lg border-2 border-purple-300 bg-card p-3 shadow-lg">
       <Handle type="target" position={Position.Left} id="left" className="!h-3 !w-3 !bg-purple-500" />
       <Handle type="source" position={Position.Right} id="right" className="!h-3 !w-3 !bg-purple-500" />
       <div className="flex items-center gap-2 text-purple-600">