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/admin/ScreenAssignmentTab.tsx

@@ -223,7 +223,7 @@ export const ScreenAssignmentTab: React.FC<ScreenAssignmentTabProps> = ({ menus
             </div>
 
             {selectedMenu && (
-              <div className="rounded-lg border bg-gray-50 p-4">
+              <div className="rounded-lg border bg-muted p-4">
                 <div className="flex items-center justify-between">
                   <div>
                     <h3 className="font-medium">
@@ -267,7 +267,7 @@ export const ScreenAssignmentTab: React.FC<ScreenAssignmentTabProps> = ({ menus
                 <Monitor className="h-5 w-5" />
                 할당된 화면 ({assignedScreens.length}개)
               </CardTitle>
-              <Button onClick={openAssignDialog} className="bg-blue-600 hover:bg-blue-700">
+              <Button onClick={openAssignDialog} className="bg-primary hover:bg-primary/90">
                 <Plus className="mr-2 h-4 w-4" />
                 화면 할당
               </Button>
@@ -275,15 +275,15 @@ export const ScreenAssignmentTab: React.FC<ScreenAssignmentTabProps> = ({ menus
           </CardHeader>
           <CardContent>
             {loading ? (
-              <div className="py-8 text-center text-gray-500">로딩 중...</div>
+              <div className="py-8 text-center text-muted-foreground">로딩 중...</div>
             ) : assignedScreens.length === 0 ? (
-              <div className="py-8 text-center text-gray-500">할당된 화면이 없습니다. 화면을 할당해보세요.</div>
+              <div className="py-8 text-center text-muted-foreground">할당된 화면이 없습니다. 화면을 할당해보세요.</div>
             ) : (
               <div className="space-y-3">
                 {assignedScreens.map((screen) => (
                   <div
                     key={screen.screenId}
-                    className="flex items-center justify-between rounded-lg border p-4 hover:bg-gray-50"
+                    className="flex items-center justify-between rounded-lg border p-4 hover:bg-muted"
                   >
                     <div className="flex-1">
                       <div className="flex items-center gap-3">
@@ -298,7 +298,7 @@ export const ScreenAssignmentTab: React.FC<ScreenAssignmentTabProps> = ({ menus
                       <p className="mt-1 text-sm text-muted-foreground">
                         테이블: {screen.tableName} | 생성일: {screen.createdDate.toLocaleDateString()}
                       </p>
-                      {screen.description && <p className="mt-1 text-sm text-gray-500">{screen.description}</p>}
+                      {screen.description && <p className="mt-1 text-sm text-muted-foreground">{screen.description}</p>}
                     </div>
                     <Button
                       variant="outline"
@@ -307,7 +307,7 @@ export const ScreenAssignmentTab: React.FC<ScreenAssignmentTabProps> = ({ menus
                         setSelectedScreen(screen);
                         setShowUnassignDialog(true);
                       }}
-                      className="text-destructive hover:text-red-700"
+                      className="text-destructive hover:text-destructive"
                     >
                       <X className="h-4 w-4" />
                     </Button>
@@ -330,7 +330,7 @@ export const ScreenAssignmentTab: React.FC<ScreenAssignmentTabProps> = ({ menus
           <div className="space-y-4">
             {/* 검색 */}
             <div className="relative">
-              <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform text-gray-400" />
+              <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform text-muted-foreground/70" />
               <Input
                 placeholder="화면명 또는 코드로 검색..."
                 value={searchTerm}
@@ -342,13 +342,13 @@ export const ScreenAssignmentTab: React.FC<ScreenAssignmentTabProps> = ({ menus
             {/* 화면 목록 */}
             <div className="max-h-64 space-y-2 overflow-y-auto">
               {filteredAvailableScreens.length === 0 ? (
-                <div className="py-4 text-center text-gray-500">할당 가능한 화면이 없습니다.</div>
+                <div className="py-4 text-center text-muted-foreground">할당 가능한 화면이 없습니다.</div>
               ) : (
                 filteredAvailableScreens.map((screen) => (
                   <div
                     key={screen.screenId}
                     className={`cursor-pointer rounded-lg border p-3 transition-colors ${
-                      selectedScreen?.screenId === screen.screenId ? "border-primary bg-accent" : "hover:bg-gray-50"
+                      selectedScreen?.screenId === screen.screenId ? "border-primary bg-accent" : "hover:bg-muted"
                     }`}
                     onClick={() => setSelectedScreen(screen)}
                   >
@@ -385,7 +385,7 @@ export const ScreenAssignmentTab: React.FC<ScreenAssignmentTabProps> = ({ menus
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel onClick={() => setSelectedScreen(null)}>취소</AlertDialogCancel>
-            <AlertDialogAction onClick={handleUnassignScreen} className="bg-red-600 hover:bg-red-700">
+            <AlertDialogAction onClick={handleUnassignScreen} className="bg-destructive hover:bg-red-700">
               할당 해제
             </AlertDialogAction>
           </AlertDialogFooter>