From 0547ab2fe1701d84753d0e078bba718a79b07a0c Mon Sep 17 00:00:00 2001 From: dujinkim Date: Fri, 23 May 2025 05:26:26 +0000 Subject: (최겸)기술영업 벤더 개발 초안(index 스키마 미포함 상태) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/tech-vendors/items-table/add-item-dialog.tsx | 317 +++++++++++++++++++++++ 1 file changed, 317 insertions(+) create mode 100644 lib/tech-vendors/items-table/add-item-dialog.tsx (limited to 'lib/tech-vendors/items-table/add-item-dialog.tsx') diff --git a/lib/tech-vendors/items-table/add-item-dialog.tsx b/lib/tech-vendors/items-table/add-item-dialog.tsx new file mode 100644 index 00000000..bd1c32f5 --- /dev/null +++ b/lib/tech-vendors/items-table/add-item-dialog.tsx @@ -0,0 +1,317 @@ +"use client" + +import * as React from "react" +import { useForm } from "react-hook-form" +import { zodResolver } from "@hookform/resolvers/zod" +import { Check, ChevronsUpDown } from "lucide-react" +import { useRouter } from "next/navigation" + +import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog" +import { Button } from "@/components/ui/button" +import { Input } from "@/components/ui/input" +import { + Form, + FormControl, + FormField, + FormItem, + FormLabel, +} from "@/components/ui/form" +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "@/components/ui/popover" +import { + Command, + CommandEmpty, + CommandGroup, + CommandInput, + CommandItem, + CommandList, +} from "@/components/ui/command" +import { cn } from "@/lib/utils" +import { toast } from "sonner" + +import { + createTechVendorItemSchema, + type CreateTechVendorItemSchema, +} from "@/lib/tech-vendors/validations" + +import { createTechVendorItem, getItemsByVendorType, ItemDropdownOption } from "../service" + +interface AddItemDialogProps { + vendorId: number + vendorType: string +} + +export function AddItemDialog({ vendorId, vendorType }: AddItemDialogProps) { + const router = useRouter() + const [open, setOpen] = React.useState(false) + const [commandOpen, setCommandOpen] = React.useState(false) + const [items, setItems] = React.useState([]) + const [filteredItems, setFilteredItems] = React.useState([]) + const [isLoading, setIsLoading] = React.useState(false) + const [searchTerm, setSearchTerm] = React.useState("") + + const [selectedItem, setSelectedItem] = React.useState<{ + itemName: string; + description: string; + } | null>(null) + + const form = useForm({ + resolver: zodResolver(createTechVendorItemSchema), + defaultValues: { + vendorId, + itemCode: "", + }, + }) + + const fetchItems = React.useCallback(async () => { + if (items.length > 0) return + + console.log(`[AddItemDialog] fetchItems - 벤더 타입: ${vendorType || '알 수 없음'}, 벤더 ID: ${vendorId} 시작`) + + if (!vendorType) { + console.error("[AddItemDialog] 벤더 타입이 지정되지 않았습니다. 아이템을 불러올 수 없습니다.") + toast.error("벤더 타입이 지정되지 않아 아이템을 불러올 수 없습니다.") + setIsLoading(false) + return + } + + setIsLoading(true) + try { + console.log(`[AddItemDialog] getItemsByVendorType 호출 - 타입: ${vendorType}`) + const result = await getItemsByVendorType(vendorType, "") + console.log(`[AddItemDialog] getItemsByVendorType 결과:`, result) + + if (result.data) { + const formattedItems = result.data.map(item => ({ + itemCode: item.itemCode, + itemName: "기술영업", + description: "" + })) + console.log(`[AddItemDialog] 포맷된 아이템 목록:`, formattedItems) + setItems(formattedItems) + setFilteredItems(formattedItems) + } + } catch (err) { + console.error("[AddItemDialog] 아이템 조회 실패:", err) + toast.error("아이템 목록을 불러오는데 실패했습니다.") + } finally { + setIsLoading(false) + console.log(`[AddItemDialog] fetchItems 완료`) + } + }, [items.length, vendorType, vendorId]) + + React.useEffect(() => { + if (commandOpen) { + console.log(`[AddItemDialog] Popover 열림 - fetchItems 호출`) + fetchItems() + } + }, [commandOpen, fetchItems]) + + React.useEffect(() => { + if (!items.length) return + + if (!searchTerm.trim()) { + setFilteredItems(items) + return + } + + console.log(`[AddItemDialog] 검색어로 필터링: "${searchTerm}"`) + const lowerSearch = searchTerm.toLowerCase() + const filtered = items.filter(item => + item.itemCode.toLowerCase().includes(lowerSearch) || + item.itemName.toLowerCase().includes(lowerSearch) || + (item.description && item.description.toLowerCase().includes(lowerSearch)) + ) + + console.log(`[AddItemDialog] 필터링 결과: ${filtered.length}개 아이템`) + setFilteredItems(filtered) + }, [searchTerm, items]) + + const handleSelectItem = (item: ItemDropdownOption) => { + console.log(`[AddItemDialog] 아이템 선택: ${item.itemCode}`) + form.setValue("itemCode", item.itemCode, { shouldValidate: true }) + setSelectedItem({ + itemName: item.itemName, + description: item.description || "", + }) + console.log(`[AddItemDialog] 선택된 아이템 정보:`, { + itemCode: item.itemCode, + itemName: item.itemName, + description: item.description || "" + }) + setCommandOpen(false) + } + + async function onSubmit(data: CreateTechVendorItemSchema) { + console.log(`[AddItemDialog] 폼 제출 시작 - 데이터:`, data) + try { + if (!data.itemCode) { + console.error(`[AddItemDialog] itemCode가 없습니다.`) + toast.error("아이템을 선택해주세요.") + return + } + + console.log(`[AddItemDialog] createTechVendorItem 호출 - vendorId: ${data.vendorId}, itemCode: ${data.itemCode}`) + const submitData = { + ...data, + itemName: "기술영업" + } + console.log(`[AddItemDialog] 최종 제출 데이터:`, submitData) + + const result = await createTechVendorItem(submitData) + console.log(`[AddItemDialog] createTechVendorItem 결과:`, result) + + if (result.error) { + console.error(`[AddItemDialog] 추가 실패:`, result.error) + toast.error(result.error) + return + } + + console.log(`[AddItemDialog] 아이템 추가 성공`) + toast.success("아이템이 추가되었습니다.") + form.reset() + setSelectedItem(null) + setOpen(false) + console.log(`[AddItemDialog] 화면 새로고침 시작`) + router.refresh() + console.log(`[AddItemDialog] 화면 새로고침 완료`) + } catch (err) { + console.error("[AddItemDialog] 아이템 추가 오류:", err) + toast.error("아이템 추가 중 오류가 발생했습니다.") + } + } + + function handleDialogOpenChange(nextOpen: boolean) { + console.log(`[AddItemDialog] 다이얼로그 상태 변경: ${nextOpen ? '열림' : '닫힘'}`) + if (!nextOpen) { + form.reset() + setSelectedItem(null) + } + setOpen(nextOpen) + } + + const selectedItemCode = form.watch("itemCode") + console.log(`[AddItemDialog] 현재 선택된 itemCode:`, selectedItemCode) + const displayItemName = selectedItem?.itemName || "" + + return ( + + + + + + + + Create New Item + + 아이템을 선택한 후 Create 버튼을 누르세요. + + + +
+ { + console.log(`[AddItemDialog] 폼 제출 이벤트 발생`) + form.handleSubmit(onSubmit)(e) + }} className="flex flex-col flex-1 overflow-hidden"> +
+
+ 아이템 선택 + + + + + + + + + 검색 결과가 없습니다 + {isLoading ? ( +
로딩 중...
+ ) : ( + + {filteredItems.map((item) => ( + handleSelectItem(item)} + > + + {item.itemCode} + - {item.itemName} + + ))} + + )} + + + + +
+ + {selectedItem && ( +
+

선택된 아이템 정보

+ + ( + + + + + + )} + /> + +
+
Item Name
+
{selectedItem.itemName}
+
+ + {selectedItem.description && ( +
+
Description
+
{selectedItem.description}
+
+ )} +
+ )} +
+ + + + +
+ + + + ) +} \ No newline at end of file -- cgit v1.2.3