refactor: 전체 프론트엔드 하드코딩 색상 → CSS 변수 일괄 치환

447+ 파일, 4500+ 줄 변경:
- gray-* → border/bg-muted/text-foreground/text-muted-foreground
- blue-* → primary/ring
- red-* → destructive
- green-* → emerald (일관성)
- indigo-* → primary
- yellow/orange → amber (통일)
- dark mode 변형도 시맨틱 토큰으로 변환

Made-with: Cursor

frontend/components/dataflow/connection/redesigned/RightPanel/TableStep.tsx

@@ -87,7 +87,7 @@ export const TableStep: React.FC<TableStepProps> = ({
   return (
     <div className="space-y-8">
       <div className="text-center">
-        <h2 className="text-2xl font-bold text-gray-900 mb-2">
+        <h2 className="text-2xl font-bold text-foreground mb-2">
           테이블 선택
         </h2>
         <p className="text-muted-foreground">
@@ -96,14 +96,14 @@ export const TableStep: React.FC<TableStepProps> = ({
       </div>
 
       {/* 연결 정보 표시 */}
-      <div className="bg-gray-50 rounded-lg p-4">
+      <div className="bg-muted rounded-lg p-4">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-3">
             <Database className="w-5 h-5 text-primary" />
-            <span className="font-medium text-gray-900">{fromConnection?.name}</span>
-            <span className="text-sm text-gray-500">→</span>
-            <Database className="w-5 h-5 text-green-600" />
-            <span className="font-medium text-gray-900">{toConnection?.name}</span>
+            <span className="font-medium text-foreground">{fromConnection?.name}</span>
+            <span className="text-sm text-muted-foreground">→</span>
+            <Database className="w-5 h-5 text-emerald-600" />
+            <span className="font-medium text-foreground">{toConnection?.name}</span>
           </div>
         </div>
       </div>
@@ -115,8 +115,8 @@ export const TableStep: React.FC<TableStepProps> = ({
             <div className="w-8 h-8 bg-primary/20 rounded-full flex items-center justify-center">
               <span className="text-primary font-bold">1</span>
             </div>
-            <h3 className="text-lg font-semibold text-gray-900">소스 테이블</h3>
-            <span className="text-sm text-gray-500">(FROM)</span>
+            <h3 className="text-lg font-semibold text-foreground">소스 테이블</h3>
+            <span className="text-sm text-muted-foreground">(FROM)</span>
           </div>
           
           <div className="space-y-2">
@@ -126,16 +126,16 @@ export const TableStep: React.FC<TableStepProps> = ({
                 className={`p-4 rounded-lg border-2 cursor-pointer transition-all duration-200 ${
                   selectedFromTable === table.name
                     ? "border-primary bg-accent shadow-md"
-                    : "border-gray-200 bg-white hover:border-blue-300 hover:bg-blue-25"
+                    : "border-border bg-white hover:border-primary/40 hover:bg-blue-25"
                 }`}
                 onClick={() => handleFromTableSelect(table.name)}
               >
                 <div className="flex items-center gap-3">
                   <Table className="w-6 h-6 text-primary" />
                   <div className="flex-1">
-                    <h4 className="font-medium text-gray-900">{table.name}</h4>
+                    <h4 className="font-medium text-foreground">{table.name}</h4>
                     <p className="text-sm text-muted-foreground">{table.columns.length}개 컬럼</p>
-                    <p className="text-xs text-gray-500">{table.rowCount?.toLocaleString()}개 행</p>
+                    <p className="text-xs text-muted-foreground">{table.rowCount?.toLocaleString()}개 행</p>
                   </div>
                   {selectedFromTable === table.name && (
                     <CheckCircle className="w-5 h-5 text-primary" />
@@ -149,11 +149,11 @@ export const TableStep: React.FC<TableStepProps> = ({
         {/* TO 테이블 */}
         <div className="space-y-4">
           <div className="flex items-center gap-2">
-            <div className="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
-              <span className="text-green-600 font-bold">2</span>
+            <div className="w-8 h-8 bg-emerald-100 rounded-full flex items-center justify-center">
+              <span className="text-emerald-600 font-bold">2</span>
             </div>
-            <h3 className="text-lg font-semibold text-gray-900">대상 테이블</h3>
-            <span className="text-sm text-gray-500">(TO)</span>
+            <h3 className="text-lg font-semibold text-foreground">대상 테이블</h3>
+            <span className="text-sm text-muted-foreground">(TO)</span>
           </div>
           
           <div className="space-y-2">
@@ -162,20 +162,20 @@ export const TableStep: React.FC<TableStepProps> = ({
                 key={table.name}
                 className={`p-4 rounded-lg border-2 cursor-pointer transition-all duration-200 ${
                   selectedToTable === table.name
-                    ? "border-green-500 bg-green-50 shadow-md"
-                    : "border-gray-200 bg-white hover:border-green-300 hover:bg-green-25"
+                    ? "border-emerald-500 bg-emerald-50 shadow-md"
+                    : "border-border bg-white hover:border-green-300 hover:bg-green-25"
                 }`}
                 onClick={() => handleToTableSelect(table.name)}
               >
                 <div className="flex items-center gap-3">
-                  <Table className="w-6 h-6 text-green-600" />
+                  <Table className="w-6 h-6 text-emerald-600" />
                   <div className="flex-1">
-                    <h4 className="font-medium text-gray-900">{table.name}</h4>
+                    <h4 className="font-medium text-foreground">{table.name}</h4>
                     <p className="text-sm text-muted-foreground">{table.columns.length}개 컬럼</p>
-                    <p className="text-xs text-gray-500">{table.rowCount?.toLocaleString()}개 행</p>
+                    <p className="text-xs text-muted-foreground">{table.rowCount?.toLocaleString()}개 행</p>
                   </div>
                   {selectedToTable === table.name && (
-                    <CheckCircle className="w-5 h-5 text-green-600" />
+                    <CheckCircle className="w-5 h-5 text-emerald-600" />
                   )}
                 </div>
               </div>
@@ -188,7 +188,7 @@ export const TableStep: React.FC<TableStepProps> = ({
       <div className="flex justify-between">
         <button
           onClick={onBack}
-          className="flex items-center gap-2 px-6 py-3 rounded-lg font-medium text-muted-foreground bg-gray-100 hover:bg-gray-200 transition-all duration-200"
+          className="flex items-center gap-2 px-6 py-3 rounded-lg font-medium text-muted-foreground bg-muted hover:bg-muted/80 transition-all duration-200"
         >
           <ArrowLeft className="w-4 h-4" />
           이전 단계
@@ -199,8 +199,8 @@ export const TableStep: React.FC<TableStepProps> = ({
           disabled={!canProceed}
           className={`flex items-center gap-2 px-6 py-3 rounded-lg font-medium transition-all duration-200 ${
             canProceed
-              ? "bg-orange-500 text-white hover:bg-orange-600 shadow-md hover:shadow-lg"
-              : "bg-gray-300 text-gray-500 cursor-not-allowed"
+              ? "bg-amber-500 text-white hover:bg-orange-600 shadow-md hover:shadow-lg"
+              : "bg-muted/60 text-muted-foreground cursor-not-allowed"
           }`}
         >
           다음 단계: 필드 매핑