1 files changed, 58 insertions, 27 deletions

diff --git a/lib/form-list/table/meta-sheet.tsx b/lib/form-list/table/meta-sheet.tsx
index 694ee845..7c15bdea 100644
--- a/lib/form-list/table/meta-sheet.tsx
+++ b/lib/form-list/table/meta-sheet.tsx
@@ -1,8 +1,9 @@
 "use client"
 
 import * as React from "react"
-import { useMemo } from "react"
+import { useState } from "react"
 import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
 import {
   Sheet,
   SheetContent,
@@ -34,6 +35,56 @@ import {
 import type { TagTypeClassFormMappings } from "@/db/schema/vendorData" // or your actual type
 import { fetchFormMetadata, FormColumn } from "@/lib/forms/services"
 
+// 옵션을 표시하기 위한 새로운 컴포넌트
+const CollapsibleOptions = ({ options }: { options?: string[] }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  
+  // 옵션이 없거나 5개 이하인 경우 모두 표시
+  if (!options || options.length <= 5) {
+    return (
+      <div className="flex flex-wrap gap-1">
+        {options?.map((option) => (
+          <Badge key={option} variant="outline" className="text-xs">
+            {option}
+          </Badge>
+        )) || "-"}
+      </div>
+    );
+  }
+  
+  // 더 많은 옵션이 있는 경우 접었다 펼칠 수 있게 함
+  return (
+    <div>
+      <div className="flex flex-wrap gap-1 mb-1">
+        {isExpanded 
+          ? options.map((option) => (
+              <Badge key={option} variant="outline" className="text-xs">
+                {option}
+              </Badge>
+            ))
+          : options.slice(0, 3).map((option) => (
+              <Badge key={option} variant="outline" className="text-xs">
+                {option}
+              </Badge>
+            ))
+        }
+        {!isExpanded && (
+          <Badge variant="outline" className="text-xs bg-muted">
+            +{options.length - 3} more
+          </Badge>
+        )}
+      </div>
+      <Button
+        variant="ghost" 
+        size="sm" 
+        className="h-6 text-xs px-2 py-0"
+        onClick={() => setIsExpanded(!isExpanded)}
+      >
+        {isExpanded ? "Show less" : "Show all"}
+      </Button>
+    </div>
+  );
+};
 
 interface ViewMetasProps {
   open: boolean
@@ -51,7 +102,7 @@ export function ViewMetas({ open, onOpenChange, form }: ViewMetasProps) {
   const [loading, setLoading] = React.useState(false)
 
   // Group columns by type for better organization
-  const groupedColumns = useMemo(() => {
+  const groupedColumns = React.useMemo(() => {
     if (!metadata?.columns) return {}
     
     return metadata.columns.reduce((acc, column) => {
@@ -65,7 +116,7 @@ export function ViewMetas({ open, onOpenChange, form }: ViewMetasProps) {
   }, [metadata])
 
   // Types for the tabs
-  const columnTypes = useMemo(() => {
+  const columnTypes = React.useMemo(() => {
     return Object.keys(groupedColumns)
   }, [groupedColumns])
 
@@ -165,17 +216,7 @@ export function ViewMetas({ open, onOpenChange, form }: ViewMetasProps) {
                               <Badge variant="secondary">{column.type}</Badge>
                             </TableCell>
                             <TableCell>
-                              {column.options ? (
-                                <div className="flex flex-wrap gap-1">
-                                  {column.options.map((option) => (
-                                    <Badge key={option} variant="outline" className="text-xs">
-                                      {option}
-                                    </Badge>
-                                  ))}
-                                </div>
-                              ) : (
-                                "-"
-                              )}
+                              <CollapsibleOptions options={column.options} />
                             </TableCell>
                           </TableRow>
                         ))}
@@ -198,7 +239,7 @@ export function ViewMetas({ open, onOpenChange, form }: ViewMetasProps) {
                           <TableRow>
                             <TableHead>Key</TableHead>
                             <TableHead>Label</TableHead>
-                            {type === "select" && <TableHead>Options</TableHead>}
+                            {type === "LIST" && <TableHead>Options</TableHead>}
                           </TableRow>
                         </TableHeader>
                         <TableBody>
@@ -206,19 +247,9 @@ export function ViewMetas({ open, onOpenChange, form }: ViewMetasProps) {
                             <TableRow key={column.key}>
                               <TableCell className="font-mono text-sm">{column.key}</TableCell>
                               <TableCell>{column.label}</TableCell>
-                              {type === "select" && (
+                              {type === "LIST" && (
                                 <TableCell>
-                                  {column.options ? (
-                                    <div className="flex flex-wrap gap-1">
-                                      {column.options.map((option) => (
-                                        <Badge key={option} variant="outline" className="text-xs">
-                                          {option}
-                                        </Badge>
-                                      ))}
-                                    </div>
-                                  ) : (
-                                    "-"
-                                  )}
+                                  <CollapsibleOptions options={column.options} />
                                 </TableCell>
                               )}
                             </TableRow>