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/lib/registry/components/rack-structure/RackStructureComponent.tsx

@@ -95,12 +95,12 @@ const ConditionCard: React.FC<ConditionCardProps> = ({
   };
 
   return (
-    <div className="relative rounded-lg border border-gray-200 bg-white shadow-sm">
+    <div className="relative rounded-lg border border-border bg-white shadow-sm">
       {/* 헤더 */}
-      <div className="flex items-center justify-between rounded-t-lg bg-blue-600 px-4 py-2 text-white">
+      <div className="flex items-center justify-between rounded-t-lg bg-primary px-4 py-2 text-white">
         <span className="font-medium">조건 {index + 1}</span>
         {!readonly && (
-          <button onClick={() => onRemove(condition.id)} className="rounded p-1 transition-colors hover:bg-blue-700">
+          <button onClick={() => onRemove(condition.id)} className="rounded p-1 transition-colors hover:bg-primary/90">
             <X className="h-4 w-4" />
           </button>
         )}
@@ -111,8 +111,8 @@ const ConditionCard: React.FC<ConditionCardProps> = ({
         {/* 열 범위 */}
         <div className="flex items-center gap-2">
           <div className="flex-1">
-            <label className="mb-1 block text-xs font-medium text-gray-700">
-              열 범위 <span className="text-red-500">*</span>
+            <label className="mb-1 block text-xs font-medium text-foreground">
+              열 범위 <span className="text-destructive">*</span>
             </label>
             <div className="flex items-center gap-2">
               <Input
@@ -125,7 +125,7 @@ const ConditionCard: React.FC<ConditionCardProps> = ({
                 disabled={readonly}
                 className="h-9 text-center"
               />
-              <span className="text-gray-500">~</span>
+              <span className="text-muted-foreground">~</span>
               <Input
                 type="number"
                 min={1}
@@ -139,8 +139,8 @@ const ConditionCard: React.FC<ConditionCardProps> = ({
             </div>
           </div>
           <div className="w-20">
-            <label className="mb-1 block text-xs font-medium text-gray-700">
-              단 수 <span className="text-red-500">*</span>
+            <label className="mb-1 block text-xs font-medium text-foreground">
+              단 수 <span className="text-destructive">*</span>
             </label>
             <Input
               type="number"
@@ -156,14 +156,14 @@ const ConditionCard: React.FC<ConditionCardProps> = ({
         </div>
 
         {/* 계산 결과 */}
-        <div className="rounded-md bg-blue-50 px-3 py-2 text-center text-sm text-blue-700">
+        <div className="rounded-md bg-primary/10 px-3 py-2 text-center text-sm text-primary">
           {locationCount > 0 ? (
             <>
               {localValues.startRow}열 ~ {localValues.endRow}열 x {localValues.levels}단 ={" "}
               <strong>{locationCount}개</strong>
             </>
           ) : (
-            <span className="text-gray-500">값을 입력하세요</span>
+            <span className="text-muted-foreground">값을 입력하세요</span>
           )}
         </div>
       </div>
@@ -664,7 +664,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
       <Card>
         <CardHeader className="flex flex-row items-center justify-between pb-2">
           <CardTitle className="flex items-center gap-2 text-base">
-            <div className="h-4 w-1 rounded bg-gradient-to-b from-green-500 to-blue-500" />렉 라인 구조 설정
+            <div className="h-4 w-1 rounded bg-gradient-to-b from-green-500 to-primary/50" />렉 라인 구조 설정
           </CardTitle>
           {!readonly && (
             <div className="flex items-center gap-2">
@@ -757,9 +757,9 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
 
           {/* 기존 데이터 존재 알림 */}
           {!isCheckingDuplicates && existingLocations.length > 0 && !hasDuplicateWithExisting && (
-            <Alert className="mb-4 border-blue-200 bg-blue-50">
-              <AlertCircle className="h-4 w-4 text-blue-600" />
-              <AlertDescription className="text-blue-800">
+            <Alert className="mb-4 border-primary/20 bg-primary/10">
+              <AlertCircle className="h-4 w-4 text-primary" />
+              <AlertDescription className="text-primary">
                 해당 창고/층/구역에 <strong>{existingLocations.length}개</strong>의 위치가 이미 등록되어 있습니다.
               </AlertDescription>
             </Alert>
@@ -767,47 +767,47 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
 
           {/* 현재 매핑된 값 표시 */}
           {(context.warehouseCode || context.warehouseName || context.floor || context.zone) && (
-            <div className="mb-4 flex flex-wrap gap-2 rounded-lg bg-gray-50 p-3">
+            <div className="mb-4 flex flex-wrap gap-2 rounded-lg bg-muted p-3">
               {(context.warehouseCode || context.warehouseName) && (
-                <span className="rounded bg-blue-100 px-2 py-1 text-xs text-blue-800">
+                <span className="rounded bg-primary/10 px-2 py-1 text-xs text-primary">
                   창고: {context.warehouseName || context.warehouseCode}
                   {context.warehouseName && context.warehouseCode && ` (${context.warehouseCode})`}
                 </span>
               )}
               {context.floor && (
-                <span className="rounded bg-green-100 px-2 py-1 text-xs text-green-800">층: {context.floor}</span>
+                <span className="rounded bg-emerald-100 px-2 py-1 text-xs text-emerald-800">층: {context.floor}</span>
               )}
               {context.zone && (
                 <span className="rounded bg-purple-100 px-2 py-1 text-xs text-purple-800">구역: {context.zone}</span>
               )}
               {context.locationType && (
-                <span className="rounded bg-orange-100 px-2 py-1 text-xs text-orange-800">
+                <span className="rounded bg-amber-100 px-2 py-1 text-xs text-orange-800">
                   유형: {context.locationType}
                 </span>
               )}
               {context.status && (
-                <span className="rounded bg-gray-200 px-2 py-1 text-xs text-gray-800">상태: {context.status}</span>
+                <span className="rounded bg-muted/80 px-2 py-1 text-xs text-foreground">상태: {context.status}</span>
               )}
             </div>
           )}
 
           {/* 안내 메시지 */}
-          <div className="mb-4 rounded-lg bg-blue-50 p-4">
-            <ol className="space-y-1 text-sm text-blue-800">
+          <div className="mb-4 rounded-lg bg-primary/10 p-4">
+            <ol className="space-y-1 text-sm text-primary">
               <li className="flex items-start gap-2">
-                <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-blue-600 text-xs font-bold text-white">
+                <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-primary text-xs font-bold text-white">
                   1
                 </span>
                 조건 추가 버튼을 클릭하여 렉 라인 조건을 생성하세요
               </li>
               <li className="flex items-start gap-2">
-                <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-blue-600 text-xs font-bold text-white">
+                <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-primary text-xs font-bold text-white">
                   2
                 </span>
                 각 조건마다 열 범위와 단 수를 입력하세요
               </li>
               <li className="flex items-start gap-2">
-                <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-blue-600 text-xs font-bold text-white">
+                <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-primary text-xs font-bold text-white">
                   3
                 </span>
                 예시: 조건1(1~3열, 3단), 조건2(4~6열, 5단)
@@ -817,9 +817,9 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
 
           {/* 조건 목록 또는 빈 상태 */}
           {conditions.length === 0 ? (
-            <div className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-200 py-12">
-              <div className="mb-4 text-6xl text-gray-300">📦</div>
-              <p className="mb-4 text-gray-500">조건을 추가하여 렉 구조를 설정하세요</p>
+            <div className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-border py-12">
+              <div className="mb-4 text-6xl text-muted-foreground/50">📦</div>
+              <p className="mb-4 text-muted-foreground">조건을 추가하여 렉 구조를 설정하세요</p>
               {!readonly && (
                 <Button onClick={addCondition} className="gap-1">
                   <Plus className="h-4 w-4" />첫 번째 조건 추가
@@ -870,15 +870,15 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
             {config.showStatistics && (
               <div className="mb-4 grid grid-cols-3 gap-4">
                 <div className="rounded-lg border bg-white p-4 text-center">
-                  <div className="text-sm text-gray-500">총 위치</div>
+                  <div className="text-sm text-muted-foreground">총 위치</div>
                   <div className="text-2xl font-bold">{statistics.totalLocations}개</div>
                 </div>
                 <div className="rounded-lg border bg-white p-4 text-center">
-                  <div className="text-sm text-gray-500">열 수</div>
+                  <div className="text-sm text-muted-foreground">열 수</div>
                   <div className="text-2xl font-bold">{statistics.totalRows}개</div>
                 </div>
                 <div className="rounded-lg border bg-white p-4 text-center">
-                  <div className="text-sm text-gray-500">최대 단</div>
+                  <div className="text-sm text-muted-foreground">최대 단</div>
                   <div className="text-2xl font-bold">{statistics.maxLevel}단</div>
                 </div>
               </div>
@@ -889,7 +889,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
               <div className="rounded-lg border">
                 <ScrollArea className="h-[400px]">
                   <Table>
-                    <TableHeader className="sticky top-0 bg-gray-50">
+                    <TableHeader className="sticky top-0 bg-muted">
                       <TableRow>
                         <TableHead className="w-12 text-center">No</TableHead>
                         <TableHead>위치코드</TableHead>
@@ -921,8 +921,8 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
                 </ScrollArea>
               </div>
             ) : (
-              <div className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-200 py-8 text-gray-500">
-                <Eye className="mb-2 h-8 w-8 text-gray-300" />
+              <div className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-border py-8 text-muted-foreground">
+                <Eye className="mb-2 h-8 w-8 text-muted-foreground/50" />
                 <p>미리보기 생성 버튼을 클릭하여 결과를 확인하세요</p>
               </div>
             )}
@@ -969,16 +969,16 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
               {/* 템플릿 목록 */}
               {templates.length > 0 ? (
                 <div className="space-y-2">
-                  <div className="text-sm font-medium text-gray-700">저장된 템플릿</div>
+                  <div className="text-sm font-medium text-foreground">저장된 템플릿</div>
                   <ScrollArea className="h-[200px]">
                     {templates.map((template) => (
                       <div
                         key={template.id}
-                        className="flex items-center justify-between rounded-lg border p-3 hover:bg-gray-50"
+                        className="flex items-center justify-between rounded-lg border p-3 hover:bg-muted"
                       >
                         <div>
                           <div className="font-medium">{template.name}</div>
-                          <div className="text-xs text-gray-500">{template.conditions.length}개 조건</div>
+                          <div className="text-xs text-muted-foreground">{template.conditions.length}개 조건</div>
                         </div>
                         <div className="flex gap-2">
                           <Button variant="outline" size="sm" onClick={() => loadTemplate(template)}>
@@ -993,7 +993,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
                   </ScrollArea>
                 </div>
               ) : (
-                <div className="py-8 text-center text-gray-500">저장된 템플릿이 없습니다</div>
+                <div className="py-8 text-center text-muted-foreground">저장된 템플릿이 없습니다</div>
               )}
             </div>
           )}