From 0a767480cdd29fded3849323812a40f1a96a9194 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Thu, 30 Oct 2025 18:31:08 +0900
Subject: [PATCH] =?UTF-8?q?=EC=BB=A4=EB=B0=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/webtypes/RepeaterInput.tsx     | 161 +++++++++---------
 1 file changed, 79 insertions(+), 82 deletions(-)

diff --git a/frontend/components/webtypes/RepeaterInput.tsx b/frontend/components/webtypes/RepeaterInput.tsx
index 10be037d..5560e2a3 100644
--- a/frontend/components/webtypes/RepeaterInput.tsx
+++ b/frontend/components/webtypes/RepeaterInput.tsx
@@ -6,7 +6,7 @@ import { Textarea } from "@/components/ui/textarea";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Separator } from "@/components/ui/separator";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Plus, X, GripVertical, ChevronDown, ChevronUp } from "lucide-react";
 import { RepeaterFieldGroupConfig, RepeaterData, RepeaterItemData, RepeaterFieldDefinition } from "@/types/repeater";
 import { cn } from "@/lib/utils";
@@ -285,9 +285,9 @@ export const RepeaterInput: React.FC<RepeaterInputProps> = ({
   if (fields.length === 0) {
     return (
       <div className={cn("space-y-4", className)}>
-        <div className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-orange-300 bg-orange-50 p-8 text-center">
-          <p className="text-sm font-medium text-orange-900">필드가 정의되지 않았습니다</p>
-          <p className="mt-2 text-xs text-orange-700">속성 패널에서 필드를 추가하세요.</p>
+        <div className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-destructive/30 bg-destructive/5 p-8 text-center">
+          <p className="text-sm font-medium text-destructive">필드가 정의되지 않았습니다</p>
+          <p className="mt-2 text-xs text-muted-foreground">속성 패널에서 필드를 추가하세요.</p>
         </div>
       </div>
     );
@@ -297,8 +297,8 @@ export const RepeaterInput: React.FC<RepeaterInputProps> = ({
   if (items.length === 0) {
     return (
       <div className={cn("space-y-4", className)}>
-        <div className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-8 text-center">
-          <p className="mb-4 text-sm text-gray-500">{emptyMessage}</p>
+        <div className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-border bg-muted/30 p-8 text-center">
+          <p className="mb-4 text-sm text-muted-foreground">{emptyMessage}</p>
           {!readonly && !disabled && items.length < maxItems && (
             <Button type="button" onClick={handleAddItem} size="sm">
               <Plus className="mr-2 h-4 w-4" />
@@ -318,82 +318,79 @@ export const RepeaterInput: React.FC<RepeaterInputProps> = ({
   // 그리드/테이블 형식 렌더링
   const renderGridLayout = () => {
     return (
-      <div className="rounded-lg border bg-white">
-        {/* 테이블 헤더 */}
-        <div
-          className="grid gap-2 border-b bg-gray-50 p-3 font-semibold"
-          style={{
-            gridTemplateColumns: `40px ${allowReorder ? "40px " : ""}${fields.map(() => "1fr").join(" ")} 80px`,
-          }}
-        >
-          {showIndex && <div className="text-center text-sm">#</div>}
-          {allowReorder && <div className="text-center text-sm"></div>}
-          {fields.map((field) => (
-            <div key={field.name} className="text-sm text-gray-700">
-              {field.label}
-              {field.required && <span className="ml-1 text-orange-500">*</span>}
-            </div>
-          ))}
-          <div className="text-center text-sm">작업</div>
-        </div>
-
-        {/* 테이블 바디 */}
-        <div className="divide-y">
-          {items.map((item, itemIndex) => (
-            <div
-              key={itemIndex}
-              className={cn(
-                "grid gap-2 p-3 transition-colors hover:bg-gray-50",
-                draggedIndex === itemIndex && "bg-blue-50 opacity-50",
-              )}
-              style={{
-                gridTemplateColumns: `40px ${allowReorder ? "40px " : ""}${fields.map(() => "1fr").join(" ")} 80px`,
-              }}
-              draggable={allowReorder && !readonly && !disabled}
-              onDragStart={() => handleDragStart(itemIndex)}
-              onDragOver={(e) => handleDragOver(e, itemIndex)}
-              onDrop={(e) => handleDrop(e, itemIndex)}
-              onDragEnd={handleDragEnd}
-            >
-              {/* 인덱스 번호 */}
+      <div className="bg-card">
+        <Table>
+          <TableHeader>
+            <TableRow className="bg-background">
               {showIndex && (
-                <div className="flex items-center justify-center text-sm font-medium text-gray-600">
-                  {itemIndex + 1}
-                </div>
+                <TableHead className="h-12 w-12 px-6 py-3 text-center text-sm font-semibold">#</TableHead>
               )}
-
-              {/* 드래그 핸들 */}
-              {allowReorder && !readonly && !disabled && (
-                <div className="flex items-center justify-center">
-                  <GripVertical className="h-4 w-4 cursor-move text-gray-400" />
-                </div>
+              {allowReorder && (
+                <TableHead className="h-12 w-12 px-6 py-3 text-center text-sm font-semibold"></TableHead>
               )}
-
-              {/* 필드들 */}
               {fields.map((field) => (
-                <div key={field.name} className="flex items-center">
-                  {renderField(field, itemIndex, item[field.name])}
-                </div>
+                <TableHead key={field.name} className="h-12 px-6 py-3 text-sm font-semibold">
+                  {field.label}
+                  {field.required && <span className="ml-1 text-destructive">*</span>}
+                </TableHead>
               ))}
-
-              {/* 삭제 버튼 */}
-              <div className="flex items-center justify-center">
-                {!readonly && !disabled && items.length > minItems && (
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="icon"
-                    onClick={() => handleRemoveItem(itemIndex)}
-                    className="h-8 w-8 text-red-500 hover:bg-red-50 hover:text-red-700"
-                    title="항목 제거"
-                  >
-                    <X className="h-4 w-4" />
-                  </Button>
+              <TableHead className="h-12 w-20 px-6 py-3 text-center text-sm font-semibold">작업</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {items.map((item, itemIndex) => (
+              <TableRow
+                key={itemIndex}
+                className={cn(
+                  "bg-background transition-colors hover:bg-muted/50",
+                  draggedIndex === itemIndex && "opacity-50",
                 )}
-              </div>
-            </div>
-          ))}
-        </div>
+                draggable={allowReorder && !readonly && !disabled}
+                onDragStart={() => handleDragStart(itemIndex)}
+                onDragOver={(e) => handleDragOver(e, itemIndex)}
+                onDrop={(e) => handleDrop(e, itemIndex)}
+                onDragEnd={handleDragEnd}
+              >
+                {/* 인덱스 번호 */}
+                {showIndex && (
+                  <TableCell className="h-16 px-6 py-3 text-center text-sm font-medium">
+                    {itemIndex + 1}
+                  </TableCell>
+                )}
+
+                {/* 드래그 핸들 */}
+                {allowReorder && !readonly && !disabled && (
+                  <TableCell className="h-16 px-6 py-3 text-center">
+                    <GripVertical className="h-4 w-4 cursor-move text-muted-foreground" />
+                  </TableCell>
+                )}
+
+                {/* 필드들 */}
+                {fields.map((field) => (
+                  <TableCell key={field.name} className="h-16 px-6 py-3">
+                    {renderField(field, itemIndex, item[field.name])}
+                  </TableCell>
+                ))}
+
+                {/* 삭제 버튼 */}
+                <TableCell className="h-16 px-6 py-3 text-center">
+                  {!readonly && !disabled && items.length > minItems && (
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="icon"
+                      onClick={() => handleRemoveItem(itemIndex)}
+                      className="h-8 w-8 text-destructive hover:bg-destructive/10 hover:text-destructive"
+                      title="항목 제거"
+                    >
+                      <X className="h-4 w-4" />
+                    </Button>
+                  )}
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
       </div>
     );
   };
@@ -423,12 +420,12 @@ export const RepeaterInput: React.FC<RepeaterInputProps> = ({
                 <div className="flex items-center gap-2">
                   {/* 드래그 핸들 */}
                   {allowReorder && !readonly && !disabled && (
-                    <GripVertical className="h-4 w-4 flex-shrink-0 cursor-move text-gray-400" />
+                    <GripVertical className="h-4 w-4 flex-shrink-0 cursor-move text-muted-foreground" />
                   )}
 
                   {/* 인덱스 번호 */}
                   {showIndex && (
-                    <CardTitle className="text-sm font-semibold text-gray-700">항목 {itemIndex + 1}</CardTitle>
+                    <CardTitle className="text-sm font-semibold text-foreground">항목 {itemIndex + 1}</CardTitle>
                   )}
                 </div>
 
@@ -453,7 +450,7 @@ export const RepeaterInput: React.FC<RepeaterInputProps> = ({
                       variant="ghost"
                       size="icon"
                       onClick={() => handleRemoveItem(itemIndex)}
-                      className="h-8 w-8 text-red-500 hover:bg-red-50 hover:text-red-700"
+                      className="h-8 w-8 text-destructive hover:bg-destructive/10 hover:text-destructive"
                       title="항목 제거"
                     >
                       <X className="h-4 w-4" />
@@ -467,9 +464,9 @@ export const RepeaterInput: React.FC<RepeaterInputProps> = ({
                   <div className={getFieldsLayoutClass()}>
                     {fields.map((field) => (
                       <div key={field.name} className="space-y-1" style={{ width: field.width }}>
-                        <label className="text-sm font-medium text-gray-700">
+                        <label className="text-sm font-medium text-foreground">
                           {field.label}
-                          {field.required && <span className="ml-1 text-orange-500">*</span>}
+                          {field.required && <span className="ml-1 text-destructive">*</span>}
                         </label>
                         {renderField(field, itemIndex, item[field.name])}
                       </div>
@@ -500,7 +497,7 @@ export const RepeaterInput: React.FC<RepeaterInputProps> = ({
       )}
 
       {/* 제한 안내 */}
-      <div className="flex justify-between text-xs text-gray-500">
+      <div className="flex justify-between text-xs text-muted-foreground">
         <span>현재: {items.length}개 항목</span>
         <span>
           (최소: {minItems}, 최대: {maxItems})