(대표님) 20250613 16시 10분 global css, b-rfq, document 등

4 files changed, 1292 insertions, 0 deletions

diff --git a/lib/b-rfq/initial/add-initial-rfq-dialog.tsx b/lib/b-rfq/initial/add-initial-rfq-dialog.tsx
new file mode 100644
index 00000000..d0924be2
--- /dev/null
+++ b/lib/b-rfq/initial/add-initial-rfq-dialog.tsx
@@ -0,0 +1,534 @@
+// add-initial-rfq-dialog.tsx
+"use client"
+
+import * as React from "react"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { z } from "zod"
+import { Plus, Check, ChevronsUpDown, Search, Building, CalendarIcon } from "lucide-react"
+import { toast } from "sonner"
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import { Checkbox } from "@/components/ui/checkbox"
+import { cn, formatDate } from "@/lib/utils"
+import { addInitialRfqRecord, getIncotermsForSelection, getVendorsForSelection } from "../service"
+import { Calendar } from "@/components/ui/calendar"
+
+// Initial RFQ 추가 폼 스키마
+const addInitialRfqSchema = z.object({
+  vendorId: z.number({
+    required_error: "벤더를 선택해주세요.",
+  }),
+  initialRfqStatus: z.enum(["DRAFT", "Init. RFQ Sent", "S/L Decline", "Init. RFQ Answered"], {
+    required_error: "초기 RFQ 상태를 선택해주세요.",
+  }).default("DRAFT"),
+  dueDate: z.date({
+    required_error: "마감일을 선택해주세요.",
+  }),
+  validDate: z.date().optional(),
+  incotermsCode: z.string().optional(),
+  gtc: z.string().optional(),
+  gtcValidDate: z.string().optional(),
+  classification: z.string().optional(),
+  sparepart: z.string().optional(),
+  shortList: z.boolean().default(false),
+  returnYn: z.boolean().default(false),
+  cpRequestYn: z.boolean().default(false),
+  prjectGtcYn: z.boolean().default(false),
+  returnRevision: z.number().default(0),
+})
+
+type AddInitialRfqFormData = z.infer<typeof addInitialRfqSchema>
+
+interface Vendor {
+  id: number
+  vendorName: string
+  vendorCode: string
+  country: string
+  status: string
+}
+
+interface AddInitialRfqDialogProps {
+  rfqId: number
+  onSuccess?: () => void
+}
+
+export function AddInitialRfqDialog({ rfqId, onSuccess }: AddInitialRfqDialogProps) {
+  const [open, setOpen] = React.useState(false)
+  const [isSubmitting, setIsSubmitting] = React.useState(false)
+  const [vendors, setVendors] = React.useState<Vendor[]>([])
+  const [vendorsLoading, setVendorsLoading] = React.useState(false)
+  const [vendorSearchOpen, setVendorSearchOpen] = React.useState(false)
+  const [incoterms, setIncoterms] = React.useState<Incoterm[]>([])
+  const [incotermsLoading, setIncotermsLoading] = React.useState(false)
+  const [incotermsSearchOpen, setIncotermsSearchOpen] = React.useState(false)
+
+  const form = useForm<AddInitialRfqFormData>({
+    resolver: zodResolver(addInitialRfqSchema),
+    defaultValues: {
+      initialRfqStatus: "DRAFT",
+      shortList: false,
+      returnYn: false,
+      cpRequestYn: false,
+      prjectGtcYn: false,
+      returnRevision: 0,
+    },
+  })
+
+  // 벤더 목록 로드
+  const loadVendors = React.useCallback(async () => {
+    setVendorsLoading(true)
+    try {
+      const vendorList = await getVendorsForSelection()
+      setVendors(vendorList)
+    } catch (error) {
+      console.error("Failed to load vendors:", error)
+      toast.error("벤더 목록을 불러오는데 실패했습니다.")
+    } finally {
+      setVendorsLoading(false)
+    }
+  }, [])
+
+    // Incoterms 목록 로드
+    const loadIncoterms = React.useCallback(async () => {
+        setIncotermsLoading(true)
+        try {
+          const incotermsList = await getIncotermsForSelection()
+          setIncoterms(incotermsList)
+        } catch (error) {
+          console.error("Failed to load incoterms:", error)
+          toast.error("Incoterms 목록을 불러오는데 실패했습니다.")
+        } finally {
+          setIncotermsLoading(false)
+        }
+      }, [])
+
+  // 다이얼로그 열릴 때 벤더 목록 로드
+  React.useEffect(() => {
+    if (open) {
+      if (vendors.length === 0) {
+        loadVendors()
+      }
+      if (incoterms.length === 0) {
+        loadIncoterms()
+      }
+    }
+  }, [open, vendors.length, incoterms.length, loadVendors, loadIncoterms])
+
+  // 다이얼로그 닫기 핸들러
+  const handleOpenChange = (newOpen: boolean) => {
+    if (!newOpen && !isSubmitting) {
+      form.reset()
+    }
+    setOpen(newOpen)
+  }
+
+  // 폼 제출
+  const onSubmit = async (data: AddInitialRfqFormData) => {
+    setIsSubmitting(true)
+    
+    try {
+      const result = await addInitialRfqRecord({
+        ...data,
+        rfqId,
+      })
+      
+      if (result.success) {
+        toast.success(result.message || "초기 RFQ가 성공적으로 추가되었습니다.")
+        form.reset()
+        handleOpenChange(false)
+        onSuccess?.()
+      } else {
+        toast.error(result.message || "초기 RFQ 추가에 실패했습니다.")
+      }
+      
+    } catch (error) {
+      console.error("Submit error:", error)
+      toast.error("초기 RFQ 추가 중 오류가 발생했습니다.")
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  // 선택된 벤더 정보
+  const selectedVendor = vendors.find(vendor => vendor.id === form.watch("vendorId"))
+  const selectedIncoterm = incoterms.find(incoterm => incoterm.code === form.watch("incotermsCode"))
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogTrigger asChild>
+        <Button variant="outline" size="sm" className="gap-2">
+          <Plus className="size-4" aria-hidden="true" />
+          <span className="hidden sm:inline">초기 RFQ 추가</span>
+        </Button>
+      </DialogTrigger>
+      
+      <DialogContent className="sm:max-w-[600px] max-h-[80vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>초기 RFQ 추가</DialogTitle>
+          <DialogDescription>
+            새로운 벤더를 대상으로 하는 초기 RFQ를 추가합니다.
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+            {/* 벤더 선택 */}
+            <FormField
+              control={form.control}
+              name="vendorId"
+              render={({ field }) => (
+                <FormItem className="flex flex-col">
+                  <FormLabel>벤더 선택 *</FormLabel>
+                  <Popover open={vendorSearchOpen} onOpenChange={setVendorSearchOpen}>
+                    <PopoverTrigger asChild>
+                      <FormControl>
+                        <Button
+                          variant="outline"
+                          role="combobox"
+                          aria-expanded={vendorSearchOpen}
+                          className="justify-between"
+                          disabled={vendorsLoading}
+                        >
+                          {selectedVendor ? (
+                            <div className="flex items-center gap-2">
+                              <Building className="h-4 w-4" />
+                              <span className="truncate">
+                                {selectedVendor.vendorName} ({selectedVendor.vendorCode})
+                              </span>
+                            </div>
+                          ) : (
+                            <span className="text-muted-foreground">
+                              {vendorsLoading ? "로딩 중..." : "벤더를 선택하세요"}
+                            </span>
+                          )}
+                          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                        </Button>
+                      </FormControl>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-full p-0" align="start">
+                      <Command>
+                        <CommandInput 
+                          placeholder="벤더명 또는 코드로 검색..." 
+                          className="h-9"
+                        />
+                        <CommandList>
+                          <CommandEmpty>검색 결과가 없습니다.</CommandEmpty>
+                          <CommandGroup>
+                            {vendors.map((vendor) => (
+                              <CommandItem
+                                key={vendor.id}
+                                value={`${vendor.vendorName} ${vendor.vendorCode}`}
+                                onSelect={() => {
+                                  field.onChange(vendor.id)
+                                  setVendorSearchOpen(false)
+                                }}
+                              >
+                                <div className="flex items-center gap-2 w-full">
+                                  <Building className="h-4 w-4" />
+                                  <div className="flex-1 min-w-0">
+                                    <div className="font-medium truncate">
+                                      {vendor.vendorName}
+                                    </div>
+                                    <div className="text-sm text-muted-foreground">
+                                      {vendor.vendorCode} • {vendor.country}
+                                    </div>
+                                  </div>
+                                  <Check
+                                    className={cn(
+                                      "ml-auto h-4 w-4",
+                                      vendor.id === field.value ? "opacity-100" : "opacity-0"
+                                    )}
+                                  />
+                                </div>
+                              </CommandItem>
+                            ))}
+                          </CommandGroup>
+                        </CommandList>
+                      </Command>
+                    </PopoverContent>
+                  </Popover>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* 날짜 필드들 */}
+            <div className="grid grid-cols-2 gap-4">
+            <FormField
+                  control={form.control}
+                  name="dueDate"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-col">
+                      <FormLabel>견적 마감일</FormLabel>
+                      <Popover>
+                        <PopoverTrigger asChild>
+                          <FormControl>
+                            <Button
+                              variant="outline"
+                              className={cn(
+                                "w-full pl-3 text-left font-normal",
+                                !field.value && "text-muted-foreground"
+                              )}
+                            >
+                                                       {field.value ? (
+                                formatDate(field.value,"KR")
+                              ) : (
+                                <span>견적 유효일을 선택하세요</span>
+                              )}
+                              <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+                            </Button>
+                          </FormControl>
+                        </PopoverTrigger>
+                        <PopoverContent className="w-auto p-0" align="start">
+                          <Calendar
+                            mode="single"
+                            selected={field.value}
+                            onSelect={field.onChange}
+                            disabled={(date) =>
+                              date < new Date() || date < new Date("1900-01-01")
+                            }
+                            initialFocus
+                          />
+                        </PopoverContent>
+                      </Popover>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                        <FormField
+                  control={form.control}
+                  name="validDate"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-col">
+                      <FormLabel>견적 유효일</FormLabel>
+                      <Popover>
+                        <PopoverTrigger asChild>
+                          <FormControl>
+                            <Button
+                              variant="outline"
+                              className={cn(
+                                "w-full pl-3 text-left font-normal",
+                                !field.value && "text-muted-foreground"
+                              )}
+                            >
+                              {field.value ? (
+                                formatDate(field.value,"KR")
+                              ) : (
+                                <span>견적 유효일을 선택하세요</span>
+                              )}
+                              <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+                            </Button>
+                          </FormControl>
+                        </PopoverTrigger>
+                        <PopoverContent className="w-auto p-0" align="start">
+                          <Calendar
+                            mode="single"
+                            selected={field.value}
+                            onSelect={field.onChange}
+                            disabled={(date) =>
+                              date < new Date() || date < new Date("1900-01-01")
+                            }
+                            initialFocus
+                          />
+                        </PopoverContent>
+                      </Popover>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+            </div>
+
+            {/* Incoterms 및 GTC */}
+            <div className="grid grid-cols-2 gap-4">
+            <FormField
+              control={form.control}
+              name="vendorId"
+              render={({ field }) => (
+                <FormItem className="flex flex-col">
+                  <FormLabel>Incoterms *</FormLabel>
+                  <Popover open={incotermsSearchOpen} onOpenChange={setIncotermsSearchOpen}>
+                    <PopoverTrigger asChild>
+                      <FormControl>
+                        <Button
+                          variant="outline"
+                          role="combobox"
+                          aria-expanded={incotermsSearchOpen}
+                          className="justify-between"
+                          disabled={incotermsLoading}
+                        >
+                          {selectedIncoterm ? (
+                            <div className="flex items-center gap-2">
+                              <Building className="h-4 w-4" />
+                              <span className="truncate">
+                                {selectedIncoterm.code} ({selectedIncoterm.description})
+                              </span>
+                            </div>
+                          ) : (
+                            <span className="text-muted-foreground">
+                              {incotermsLoading ? "로딩 중..." : "인코텀즈를 선택하세요"}
+                            </span>
+                          )}
+                          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                        </Button>
+                      </FormControl>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-full p-0" align="start">
+                      <Command>
+                        <CommandInput 
+                          placeholder="코드 또는 내용으로 검색..." 
+                          className="h-9"
+                        />
+                        <CommandList>
+                          <CommandEmpty>검색 결과가 없습니다.</CommandEmpty>
+                          <CommandGroup>
+                            {incoterms.map((incoterm) => (
+                              <CommandItem
+                                key={incoterm.id}
+                                value={`${incoterm.code} ${incoterm.description}`}
+                                onSelect={() => {
+                                  field.onChange(vendor.id)
+                                  setVendorSearchOpen(false)
+                                }}
+                              >
+                                <div className="flex items-center gap-2 w-full">
+                                    <div className="font-medium truncate">
+                                      {incoterm.code}    {incoterm.description}
+                                    </div>
+                                  <Check
+                                    className={cn(
+                                      "ml-auto h-4 w-4",
+                                      incoterm.id === field.value ? "opacity-100" : "opacity-0"
+                                    )}
+                                  />
+                                </div>
+                              </CommandItem>
+                            ))}
+                          </CommandGroup>
+                        </CommandList>
+                      </Command>
+                    </PopoverContent>
+                  </Popover>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            </div>
+
+            {/* GTC 정보 */}
+            <div className="grid grid-cols-2 gap-4">
+              <FormField
+                control={form.control}
+                name="gtc"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>GTC</FormLabel>
+                    <FormControl>
+                      <Input placeholder="GTC 정보" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="gtcValidDate"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>GTC 유효일</FormLabel>
+                    <FormControl>
+                      <Input placeholder="GTC 유효일" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            {/* 분류 정보 */}
+            <div className="grid grid-cols-2 gap-4">
+              <FormField
+                control={form.control}
+                name="classification"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>선급</FormLabel>
+                    <FormControl>
+                      <Input placeholder="선급" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="sparepart"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Spare part</FormLabel>
+                    <FormControl>
+                      <Input placeholder="예비부품 정보" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+
+
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => handleOpenChange(false)}
+                disabled={isSubmitting}
+              >
+                취소
+              </Button>
+              <Button type="submit" disabled={isSubmitting}>
+                {isSubmitting ? "추가 중..." : "추가"}
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+
diff --git a/lib/b-rfq/initial/initial-rfq-detail-columns.tsx b/lib/b-rfq/initial/initial-rfq-detail-columns.tsx
new file mode 100644
index 00000000..f7ac0960
--- /dev/null
+++ b/lib/b-rfq/initial/initial-rfq-detail-columns.tsx
@@ -0,0 +1,386 @@
+// initial-rfq-detail-columns.tsx
+"use client"
+
+import * as React from "react"
+import { type ColumnDef } from "@tanstack/react-table"
+import {
+  Ellipsis, Building, Calendar, Eye,
+  MessageSquare, Settings, CheckCircle2, XCircle
+} from "lucide-react"
+
+import { formatDate } from "@/lib/utils"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import {
+  DropdownMenu, DropdownMenuContent, DropdownMenuItem,
+  DropdownMenuSeparator, DropdownMenuTrigger
+} from "@/components/ui/dropdown-menu"
+import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
+
+interface GetInitialRfqDetailColumnsProps {
+  onSelectDetail?: (detail: any) => void
+}
+
+export function getInitialRfqDetailColumns({
+  onSelectDetail
+}: GetInitialRfqDetailColumnsProps = {}): ColumnDef<any>[] {
+
+  return [
+    /** ───────────── 체크박스 ───────────── */
+    {
+      id: "select",
+      header: ({ table }) => (
+        <Checkbox
+          checked={
+            table.getIsAllPageRowsSelected() ||
+            (table.getIsSomePageRowsSelected() && "indeterminate")
+          }
+          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+          aria-label="Select all"
+          className="translate-y-0.5"
+        />
+      ),
+      cell: ({ row }) => (
+        <Checkbox
+          checked={row.getIsSelected()}
+          onCheckedChange={(value) => row.toggleSelected(!!value)}
+          aria-label="Select row"
+          className="translate-y-0.5"
+        />
+      ),
+      size: 40,
+      enableSorting: false,
+      enableHiding: false,
+    },
+
+    /** ───────────── RFQ 정보 ───────────── */
+    {
+      accessorKey: "rfqCode",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="RFQ 코드" />
+      ),
+      cell: ({ row }) => (
+        <Button
+          variant="link"
+          className="p-0 h-auto font-medium text-blue-600 hover:text-blue-800"
+          onClick={() => onSelectDetail?.(row.original)}
+        >
+          {row.getValue("rfqCode") as string}
+        </Button>
+      ),
+      size: 120,
+    },
+    {
+      accessorKey: "rfqStatus",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="RFQ 상태" />
+      ),
+      cell: ({ row }) => {
+        const status = row.getValue("rfqStatus") as string
+        const getStatusColor = (status: string) => {
+          switch (status) {
+            case "DRAFT": return "secondary"
+            case "Doc. Received": return "outline"
+            case "PIC Assigned": return "default"
+            case "Doc. Confirmed": return "default"
+            case "Init. RFQ Sent": return "default"
+            case "Init. RFQ Answered": return "success"
+            case "TBE started": return "warning"
+            case "TBE finished": return "warning"
+            case "Final RFQ Sent": return "default"
+            case "Quotation Received": return "success"
+            case "Vendor Selected": return "success"
+            default: return "secondary"
+          }
+        }
+        return (
+          <Badge variant={getStatusColor(status) as any}>
+            {status}
+          </Badge>
+        )
+      },
+      size: 140
+    },
+    {
+      accessorKey: "initialRfqStatus",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="초기 RFQ 상태" />
+      ),
+      cell: ({ row }) => {
+        const status = row.getValue("initialRfqStatus") as string
+        const getInitialStatusColor = (status: string) => {
+          switch (status) {
+            case "PENDING": return "outline"
+            case "SENT": return "default"
+            case "RESPONDED": return "success"
+            case "EXPIRED": return "destructive"
+            case "CANCELLED": return "secondary"
+            default: return "secondary"
+          }
+        }
+        return (
+          <Badge variant={getInitialStatusColor(status) as any}>
+            {status}
+          </Badge>
+        )
+      },
+      size: 120
+    },
+
+    /** ───────────── 벤더 정보 ───────────── */
+    {
+      id: "vendorInfo",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="벤더 정보" />
+      ),
+      cell: ({ row }) => {
+        const vendorName = row.original.vendorName as string
+        const vendorCode = row.original.vendorCode as string
+        const vendorCountry = row.original.vendorCountry as string
+        const businessSize = row.original.vendorBusinessSize as string
+        
+        return (
+          <div className="space-y-1">
+            <div className="flex items-center gap-2">
+              <Building className="h-4 w-4 text-muted-foreground" />
+              <div className="font-medium">{vendorName}</div>
+            </div>
+            <div className="text-sm text-muted-foreground">
+              {vendorCode} • {vendorCountry}
+            </div>
+            {businessSize && (
+              <Badge variant="outline" className="text-xs">
+                {businessSize}
+              </Badge>
+            )}
+          </div>
+        )
+      },
+      size: 200,
+    },
+
+    /** ───────────── 날짜 정보 ───────────── */
+    {
+      accessorKey: "dueDate",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="마감일" />
+      ),
+      cell: ({ row }) => {
+        const dueDate = row.getValue("dueDate") as Date
+        const isOverdue = dueDate && new Date(dueDate) < new Date()
+        
+        return dueDate ? (
+          <div className={`flex items-center gap-2 ${isOverdue ? 'text-red-600' : ''}`}>
+            <Calendar className="h-4 w-4" />
+            <div>
+              <div className="font-medium">{formatDate(dueDate)}</div>
+              {isOverdue && (
+                <div className="text-xs text-red-600">지연</div>
+              )}
+            </div>
+          </div>
+        ) : (
+          <span className="text-muted-foreground">-</span>
+        )
+      },
+      size: 120,
+    },
+    {
+      accessorKey: "validDate",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="유효일" />
+      ),
+      cell: ({ row }) => {
+        const validDate = row.getValue("validDate") as Date
+        return validDate ? (
+          <div className="text-sm">
+            {formatDate(validDate)}
+          </div>
+        ) : (
+          <span className="text-muted-foreground">-</span>
+        )
+      },
+      size: 100,
+    },
+
+    /** ───────────── Incoterms ───────────── */
+    {
+      id: "incoterms",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="Incoterms" />
+      ),
+      cell: ({ row }) => {
+        const code = row.original.incotermsCode as string
+        const description = row.original.incotermsDescription as string
+        
+        return code ? (
+          <div className="space-y-1">
+            <Badge variant="outline">{code}</Badge>
+            {description && (
+              <div className="text-xs text-muted-foreground max-w-[150px] truncate" title={description}>
+                {description}
+              </div>
+            )}
+          </div>
+        ) : (
+          <span className="text-muted-foreground">-</span>
+        )
+      },
+      size: 120,
+    },
+
+    /** ───────────── 플래그 정보 ───────────── */
+    {
+      id: "flags",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="플래그" />
+      ),
+      cell: ({ row }) => {
+        const shortList = row.original.shortList as boolean
+        const returnYn = row.original.returnYn as boolean
+        const cpRequestYn = row.original.cpRequestYn as boolean
+        const prjectGtcYn = row.original.prjectGtcYn as boolean
+        
+        return (
+          <div className="flex flex-wrap gap-1">
+            {shortList && (
+              <Badge variant="secondary" className="text-xs">
+                <CheckCircle2 className="h-3 w-3 mr-1" />
+                Short List
+              </Badge>
+            )}
+            {returnYn && (
+              <Badge variant="outline" className="text-xs">
+                Return
+              </Badge>
+            )}
+            {cpRequestYn && (
+              <Badge variant="outline" className="text-xs">
+                CP Request
+              </Badge>
+            )}
+            {prjectGtcYn && (
+              <Badge variant="outline" className="text-xs">
+                GTC
+              </Badge>
+            )}
+          </div>
+        )
+      },
+      size: 150,
+    },
+
+    /** ───────────── 분류 정보 ───────────── */
+    {
+      id: "classification",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="분류" />
+      ),
+      cell: ({ row }) => {
+        const classification = row.original.classification as string
+        const sparepart = row.original.sparepart as string
+        
+        return (
+          <div className="space-y-1">
+            {classification && (
+              <div className="text-sm font-medium max-w-[120px] truncate" title={classification}>
+                {classification}
+              </div>
+            )}
+            {sparepart && (
+              <Badge variant="outline" className="text-xs">
+                {sparepart}
+              </Badge>
+            )}
+          </div>
+        )
+      },
+      size: 120,
+    },
+
+    /** ───────────── 리비전 정보 ───────────── */
+    {
+      accessorKey: "returnRevision",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="리비전" />
+      ),
+      cell: ({ row }) => {
+        const revision = row.getValue("returnRevision") as number
+        return revision ? (
+          <Badge variant="outline">
+            Rev. {revision}
+          </Badge>
+        ) : (
+          <span className="text-muted-foreground">-</span>
+        )
+      },
+      size: 80,
+    },
+
+    /** ───────────── 등록/수정 정보 ───────────── */
+    {
+      accessorKey: "createdAt",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="등록일" />
+      ),
+      cell: ({ row }) => {
+        const created = row.getValue("createdAt") as Date
+        const updated = row.original.updatedAt as Date
+        
+        return (
+          <div className="space-y-1">
+            <div className="text-sm">{formatDate(created)}</div>
+            {updated && new Date(updated) > new Date(created) && (
+              <div className="text-xs text-blue-600">
+                수정: {formatDate(updated)}
+              </div>
+            )}
+          </div>
+        )
+      },
+      size: 120,
+    },
+
+    /** ───────────── 액션 ───────────── */
+    {
+      id: "actions",
+      enableHiding: false,
+      cell: ({ row }) => {
+        return (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                aria-label="Open menu"
+                variant="ghost"
+                className="flex size-8 p-0 data-[state=open]:bg-muted"
+              >
+                <Ellipsis className="size-4" aria-hidden="true" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-48">
+              <DropdownMenuItem onClick={() => onSelectDetail?.(row.original)}>
+                <Eye className="mr-2 h-4 w-4" />
+                상세 보기
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <MessageSquare className="mr-2 h-4 w-4" />
+                벤더 응답 보기
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem>
+                <Settings className="mr-2 h-4 w-4" />
+                설정 수정
+              </DropdownMenuItem>
+              <DropdownMenuItem className="text-red-600">
+                <XCircle className="mr-2 h-4 w-4" />
+                삭제
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )
+      },
+      size: 40,
+    },
+  ]
+}
\ No newline at end of file
diff --git a/lib/b-rfq/initial/initial-rfq-detail-table.tsx b/lib/b-rfq/initial/initial-rfq-detail-table.tsx
new file mode 100644
index 00000000..fc8a5bc2
--- /dev/null
+++ b/lib/b-rfq/initial/initial-rfq-detail-table.tsx
@@ -0,0 +1,263 @@
+"use client"
+
+import * as React from "react"
+import { type DataTableAdvancedFilterField, type DataTableFilterField } from "@/types/table"
+import { useDataTable } from "@/hooks/use-data-table"
+import { DataTable } from "@/components/data-table/data-table"
+import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"
+import { getInitialRfqDetail } from "../service" // 앞서 만든 서버 액션
+import { getInitialRfqDetailColumns } from "./initial-rfq-detail-columns"
+import { InitialRfqDetailTableToolbarActions } from "./initial-rfq-detail-toolbar-actions"
+
+interface InitialRfqDetailTableProps {
+  promises: Promise<Awaited<ReturnType<typeof getInitialRfqDetail>>>
+  rfqId?: number
+}
+
+export function InitialRfqDetailTable({ promises, rfqId }: InitialRfqDetailTableProps) {
+  const { data, pageCount } = React.use(promises)
+
+  // 선택된 상세 정보
+  const [selectedDetail, setSelectedDetail] = React.useState<any>(null)
+
+  const columns = React.useMemo(
+    () => getInitialRfqDetailColumns({
+      onSelectDetail: setSelectedDetail
+    }),
+    []
+  )
+
+  /**
+   * 필터 필드 정의
+   */
+  const filterFields: DataTableFilterField<any>[] = [
+    {
+      id: "rfqCode",
+      label: "RFQ 코드",
+      placeholder: "RFQ 코드로 검색...",
+    },
+    {
+      id: "vendorName",
+      label: "벤더명",
+      placeholder: "벤더명으로 검색...",
+    },
+    {
+      id: "rfqStatus",
+      label: "RFQ 상태",
+      options: [
+        { label: "Draft", value: "DRAFT", count: 0 },
+        { label: "문서 접수", value: "Doc. Received", count: 0 },
+        { label: "담당자 배정", value: "PIC Assigned", count: 0 },
+        { label: "문서 확정", value: "Doc. Confirmed", count: 0 },
+        { label: "초기 RFQ 발송", value: "Init. RFQ Sent", count: 0 },
+        { label: "초기 RFQ 응답", value: "Init. RFQ Answered", count: 0 },
+        { label: "TBE 시작", value: "TBE started", count: 0 },
+        { label: "TBE 완료", value: "TBE finished", count: 0 },
+        { label: "최종 RFQ 발송", value: "Final RFQ Sent", count: 0 },
+        { label: "견적 접수", value: "Quotation Received", count: 0 },
+        { label: "벤더 선정", value: "Vendor Selected", count: 0 },
+      ],
+    },
+    {
+      id: "initialRfqStatus",
+      label: "초기 RFQ 상태",
+      options: [
+        { label: "대기", value: "PENDING", count: 0 },
+        { label: "발송", value: "SENT", count: 0 },
+        { label: "응답", value: "RESPONDED", count: 0 },
+        { label: "만료", value: "EXPIRED", count: 0 },
+        { label: "취소", value: "CANCELLED", count: 0 },
+      ],
+    },
+    {
+      id: "vendorCountry",
+      label: "벤더 국가",
+      options: [
+        { label: "한국", value: "KR", count: 0 },
+        { label: "중국", value: "CN", count: 0 },
+        { label: "일본", value: "JP", count: 0 },
+        { label: "미국", value: "US", count: 0 },
+        { label: "독일", value: "DE", count: 0 },
+      ],
+    },
+  ]
+
+  /**
+   * 고급 필터 필드
+   */
+  const advancedFilterFields: DataTableAdvancedFilterField<any>[] = [
+    {
+      id: "rfqCode",
+      label: "RFQ 코드",
+      type: "text",
+    },
+    {
+      id: "vendorName",
+      label: "벤더명",
+      type: "text",
+    },
+    {
+      id: "vendorCode",
+      label: "벤더 코드",
+      type: "text",
+    },
+    {
+      id: "vendorCountry",
+      label: "벤더 국가",
+      type: "multi-select",
+      options: [
+        { label: "한국", value: "KR" },
+        { label: "중국", value: "CN" },
+        { label: "일본", value: "JP" },
+        { label: "미국", value: "US" },
+        { label: "독일", value: "DE" },
+      ],
+    },
+    {
+      id: "rfqStatus",
+      label: "RFQ 상태",
+      type: "multi-select",
+      options: [
+        { label: "Draft", value: "DRAFT" },
+        { label: "문서 접수", value: "Doc. Received" },
+        { label: "담당자 배정", value: "PIC Assigned" },
+        { label: "문서 확정", value: "Doc. Confirmed" },
+        { label: "초기 RFQ 발송", value: "Init. RFQ Sent" },
+        { label: "초기 RFQ 응답", value: "Init. RFQ Answered" },
+        { label: "TBE 시작", value: "TBE started" },
+        { label: "TBE 완료", value: "TBE finished" },
+        { label: "최종 RFQ 발송", value: "Final RFQ Sent" },
+        { label: "견적 접수", value: "Quotation Received" },
+        { label: "벤더 선정", value: "Vendor Selected" },
+      ],
+    },
+    {
+      id: "initialRfqStatus",
+      label: "초기 RFQ 상태",
+      type: "multi-select",
+      options: [
+        { label: "대기", value: "PENDING" },
+        { label: "발송", value: "SENT" },
+        { label: "응답", value: "RESPONDED" },
+        { label: "만료", value: "EXPIRED" },
+        { label: "취소", value: "CANCELLED" },
+      ],
+    },
+    {
+      id: "vendorBusinessSize",
+      label: "벤더 규모",
+      type: "multi-select",
+      options: [
+        { label: "대기업", value: "LARGE" },
+        { label: "중기업", value: "MEDIUM" },
+        { label: "소기업", value: "SMALL" },
+        { label: "스타트업", value: "STARTUP" },
+      ],
+    },
+    {
+      id: "incotermsCode",
+      label: "Incoterms",
+      type: "text",
+    },
+    {
+      id: "dueDate",
+      label: "마감일",
+      type: "date",
+    },
+    {
+      id: "validDate",
+      label: "유효일",
+      type: "date",
+    },
+    {
+      id: "shortList",
+      label: "Short List",
+      type: "boolean",
+    },
+    {
+      id: "returnYn",
+      label: "Return 여부",
+      type: "boolean",
+    },
+    {
+      id: "cpRequestYn",
+      label: "CP Request 여부",
+      type: "boolean",
+    },
+    {
+      id: "prjectGtcYn",
+      label: "Project GTC 여부",
+      type: "boolean",
+    },
+    {
+      id: "classification",
+      label: "분류",
+      type: "text",
+    },
+    {
+      id: "sparepart",
+      label: "예비부품",
+      type: "text",
+    },
+    {
+      id: "createdAt",
+      label: "등록일",
+      type: "date",
+    },
+  ]
+
+  const { table } = useDataTable({
+    data,
+    columns,
+    pageCount,
+    filterFields,
+    enableAdvancedFilter: true,
+    initialState: {
+      sorting: [{ id: "createdAt", desc: true }],
+      columnPinning: { right: ["actions"] },
+    },
+    getRowId: (originalRow) => originalRow.initialRfqId.toString(),
+    shallow: false,
+    clearOnDefault: true,
+  })
+
+  return (
+    <div className="space-y-6">
+      {/* 메인 테이블 */}
+      <div className="h-full w-full">
+        <DataTable table={table} className="h-full">
+          <DataTableAdvancedToolbar
+            table={table}
+            filterFields={advancedFilterFields}
+            shallow={false}
+          >
+            <InitialRfqDetailTableToolbarActions table={table} rfqId={rfqId} />
+          </DataTableAdvancedToolbar>
+        </DataTable>
+      </div>
+
+      {/* 선택된 상세 정보 패널 (필요시 추가) */}
+      {selectedDetail && (
+        <div className="border rounded-lg p-4">
+          <h3 className="text-lg font-semibold mb-2">
+            상세 정보: {selectedDetail.rfqCode}
+          </h3>
+          <div className="grid grid-cols-2 gap-4 text-sm">
+            <div>
+              <strong>벤더:</strong> {selectedDetail.vendorName}
+            </div>
+            <div>
+              <strong>국가:</strong> {selectedDetail.vendorCountry}
+            </div>
+            <div>
+              <strong>마감일:</strong> {formatDate(selectedDetail.dueDate)}
+            </div>
+            <div>
+              <strong>유효일:</strong> {formatDate(selectedDetail.validDate)}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/lib/b-rfq/initial/initial-rfq-detail-toolbar-actions.tsx b/lib/b-rfq/initial/initial-rfq-detail-toolbar-actions.tsx
new file mode 100644
index 00000000..981659d5
--- /dev/null
+++ b/lib/b-rfq/initial/initial-rfq-detail-toolbar-actions.tsx
@@ -0,0 +1,109 @@
+// initial-rfq-detail-toolbar-actions.tsx
+"use client"
+
+import * as React from "react"
+import { type Table } from "@tanstack/react-table"
+import { Button } from "@/components/ui/button"
+import { 
+  Download, 
+  Mail, 
+  RefreshCw, 
+  Settings,
+  Trash2,
+  FileText
+} from "lucide-react"
+
+interface InitialRfqDetailTableToolbarActionsProps {
+  table: Table<any>
+  rfqId?: number
+}
+
+export function InitialRfqDetailTableToolbarActions({
+  table,
+  rfqId
+}: InitialRfqDetailTableToolbarActionsProps) {
+  
+  // 선택된 행들 가져오기
+  const selectedRows = table.getFilteredSelectedRowModel().rows
+  const selectedDetails = selectedRows.map((row) => row.original)
+  const selectedCount = selectedRows.length
+
+  const handleBulkEmail = () => {
+    console.log("Bulk email to selected vendors:", selectedDetails)
+    // 벌크 이메일 로직 구현
+  }
+
+  const handleBulkDelete = () => {
+    console.log("Bulk delete selected items:", selectedDetails)
+    // 벌크 삭제 로직 구현
+    table.toggleAllRowsSelected(false)
+  }
+
+  const handleExport = () => {
+    console.log("Export data:", selectedCount > 0 ? selectedDetails : "all data")
+    // 데이터 엑스포트 로직 구현
+  }
+
+  const handleRefresh = () => {
+    window.location.reload()
+  }
+
+  return (
+    <div className="flex items-center gap-2">
+      {/** 선택된 항목이 있을 때만 표시되는 액션들 */}
+      {selectedCount > 0 && (
+        <>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleBulkEmail}
+            className="h-8"
+          >
+            <Mail className="mr-2 h-4 w-4" />
+            이메일 발송 ({selectedCount})
+          </Button>
+          
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleBulkDelete}
+            className="h-8 text-red-600 hover:text-red-700"
+          >
+            <Trash2 className="mr-2 h-4 w-4" />
+            삭제 ({selectedCount})
+          </Button>
+        </>
+      )}
+
+      {/** 항상 표시되는 액션들 */}
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={handleExport}
+        className="h-8"
+      >
+        <Download className="mr-2 h-4 w-4" />
+        엑스포트
+      </Button>
+
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={handleRefresh}
+        className="h-8"
+      >
+        <RefreshCw className="mr-2 h-4 w-4" />
+        새로고침
+      </Button>
+
+      <Button
+        variant="outline"
+        size="sm"
+        className="h-8"
+      >
+        <Settings className="mr-2 h-4 w-4" />
+        설정
+      </Button>
+    </div>
+  )
+}