1 files changed, 116 insertions, 11 deletions
diff --git a/lib/pq/table/pq-lists-columns.tsx b/lib/pq/table/pq-lists-columns.tsx
index 1c401fac..a9262a12 100644
--- a/lib/pq/table/pq-lists-columns.tsx
+++ b/lib/pq/table/pq-lists-columns.tsx
@@ -13,9 +13,19 @@ import {
   DropdownMenuTrigger 
 } from "@/components/ui/dropdown-menu"
 import { Button } from "@/components/ui/button"
-import React from "react"
+import React, { useMemo, useState } from "react"
 import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
 import { Checkbox } from "@/components/ui/checkbox"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+import { DatePicker } from "@/components/ui/date-picker"
+import { toast } from "sonner"
 
 export interface PQList {
   id: number
@@ -48,6 +58,84 @@ const typeColors = {
 interface GetColumnsProps {
   setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<PQList> | null>>
 }
+
+// 유효일 수정 시트 컴포넌트
+interface EditValidToSheetProps {
+  pqList: PQList | null
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onUpdate: (pqListId: number, newValidTo: Date | null) => Promise<void>
+}
+
+export function EditValidToSheet({ pqList, open, onOpenChange, onUpdate }: EditValidToSheetProps) {
+  const [newValidTo, setNewValidTo] = useState<Date | null>(pqList?.validTo || null)
+  const [isLoading, setIsLoading] = useState(false)
+
+  const handleSave = async () => {
+    if (!pqList) return
+
+    setIsLoading(true)
+    try {
+      await onUpdate(pqList.id, newValidTo)
+      onOpenChange(false)
+    } catch (error) {
+      console.error("유효일 수정 실패:", error)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>유효일 수정</SheetTitle>
+          <SheetDescription>
+            {pqList && (
+              <>
+                <strong>{pqList.name}</strong>의 유효일을 수정합니다.
+              </>
+            )}
+          </SheetDescription>
+        </SheetHeader>
+
+        <div className="py-6">
+          <div className="space-y-4">
+            <div>
+              <label className="text-sm font-medium">현재 유효일</label>
+              <div className="mt-1 p-2 bg-muted rounded-md">
+                {pqList?.validTo ? formatDate(pqList.validTo, "ko-KR") : "설정되지 않음"}
+              </div>
+            </div>
+
+            <div>
+              <label className="text-sm font-medium">새 유효일</label>
+              <div className="mt-1">
+                <DatePicker
+                  date={newValidTo ?? undefined}
+                  onSelect={(date) => setNewValidTo(date ?? null)}
+                  placeholder="새 유효일을 선택하세요"
+                  minDate={new Date()}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <SheetFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            취소
+          </Button>
+          <Button onClick={handleSave} disabled={isLoading}>
+            {isLoading && <div className="mr-2 h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />}
+            저장
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  )
+}
+
 export function createPQListsColumns({
   setRowAction
 }: GetColumnsProps): ColumnDef<PQList>[] {
@@ -122,17 +210,23 @@ export function createPQListsColumns({
       ),
       cell: ({ row }) => {
         const validTo = row.getValue("validTo") as Date | null
-        const now = new Date()
-        const isExpired = validTo && validTo < now
-        
-        const formattedDate = validTo ? formatDate(validTo, "ko-KR") : "-"
-        
+
+        const dateInfo = useMemo(() => {
+          if (!validTo) return { formattedDate: "-", isExpired: false }
+
+          const now = new Date()
+          const isExpired = validTo < now
+          const formattedDate = formatDate(validTo, "ko-KR")
+
+          return { formattedDate, isExpired }
+        }, [validTo])
+
         return (
           <div className="text-sm">
-            <span className={isExpired ? "text-red-600 font-medium" : ""}>
-              {formattedDate}
+            <span className={dateInfo.isExpired ? "text-red-600 font-medium" : ""}>
+              {dateInfo.formattedDate}
             </span>
-            {isExpired && (
+            {dateInfo.isExpired && (
               <Badge variant="destructive" className="ml-2 text-xs">
                 만료
               </Badge>
@@ -168,14 +262,20 @@ export function createPQListsColumns({
       header: ({ column }) => (
         <DataTableColumnHeaderSimple column={column} title="생성일" />
       ),
-      cell: ({ row }) => formatDate(row.getValue("createdAt"), "ko-KR"),
+      cell: ({ row }) => {
+        const createdAt = row.getValue("createdAt") as Date
+        return useMemo(() => formatDate(createdAt, "ko-KR"), [createdAt])
+      },
     },
     {
       accessorKey: "updatedAt",
       header: ({ column }) => (
         <DataTableColumnHeaderSimple column={column} title="변경일" />
       ),
-      cell: ({ row }) => formatDate(row.getValue("updatedAt"), "ko-KR"),
+      cell: ({ row }) => {
+        const updatedAt = row.getValue("updatedAt") as Date
+        return useMemo(() => formatDate(updatedAt, "ko-KR"), [updatedAt])
+      },
     },
     {
       id: "actions",
@@ -196,6 +296,11 @@ export function createPQListsColumns({
             >
               상세보기
             </DropdownMenuItem>
+            <DropdownMenuItem
+              onSelect={() => setRowAction({ row, type: "editValidTo" })}
+            >
+              유효일 수정
+            </DropdownMenuItem>
             {/* <DropdownMenuSeparator />
             <DropdownMenuItem
               onSelect={() => setRowAction({ row, type: "delete" })}