(최겸) 기술영업 벤더 개발

3 files changed, 734 insertions, 0 deletions

diff --git a/components/additional-info/tech-vendor-info-form.tsx b/components/additional-info/tech-vendor-info-form.tsx
new file mode 100644
index 00000000..8e6f7eaf
--- /dev/null
+++ b/components/additional-info/tech-vendor-info-form.tsx
@@ -0,0 +1,513 @@
+"use client"

+

+import * as React from "react"

+import { zodResolver } from "@hookform/resolvers/zod"

+import { useForm } from "react-hook-form"

+import { useSession } from "next-auth/react"

+

+import { Button } from "@/components/ui/button"

+import {

+  Form,

+  FormControl,

+  FormField,

+  FormItem,

+  FormLabel,

+  FormMessage,

+} from "@/components/ui/form"

+import { Input } from "@/components/ui/input"

+import { toast } from "@/hooks/use-toast"

+import { Download, Loader2, Mail, Phone, User } from "lucide-react"

+import { Badge } from "@/components/ui/badge"

+

+// 기술영업 벤더 관련 임포트

+import { getTechVendorDetailById, modifyTechVendor } from "@/lib/tech-vendors/service"

+import { updateTechVendorSchema, type UpdateTechVendorSchema } from "@/lib/tech-vendors/validations"

+

+import {

+  Card,

+  CardContent,

+  CardDescription,

+  CardHeader,

+  CardTitle,

+} from "@/components/ui/card"

+

+// 타입 정의

+interface TechVendorContact {

+  id: number

+  contactName: string

+  contactPosition: string | null

+  contactEmail: string

+  contactPhone: string | null

+  isPrimary: boolean

+}

+

+interface TechVendorAttachment {

+  id: number

+  fileName: string

+  filePath: string

+  attachmentType: string

+  createdAt: Date

+  updatedAt: Date

+}

+

+export function TechVendorInfoForm() {

+  const { data: session } = useSession()

+  const techCompanyId = session?.user?.techCompanyId

+

+  // 기술영업 벤더 데이터 상태

+  const [vendor, setVendor] = React.useState<any>(null)

+  const [contacts, setContacts] = React.useState<TechVendorContact[]>([])

+  const [attachments, setAttachments] = React.useState<TechVendorAttachment[]>([])

+  const [isLoading, setIsLoading] = React.useState(true)

+  const [isSubmitting, setIsSubmitting] = React.useState(false)

+  const [isDownloading, setIsDownloading] = React.useState(false)

+

+  // React Hook Form (기술영업 벤더용 스키마 사용)

+  const form = useForm<UpdateTechVendorSchema>({

+    resolver: zodResolver(updateTechVendorSchema),

+    defaultValues: {

+      vendorName: "",

+      vendorCode: "",

+      address: "",

+      email: "",

+      phone: "",

+      country: "",

+      website: "",

+      techVendorType: "",

+      status: "ACTIVE",

+    },

+    mode: "onChange",

+  })

+

+  const isFormValid = form.formState.isValid

+

+  // 기술영업 벤더 정보 가져오기

+  React.useEffect(() => {

+    async function fetchTechVendorData() {

+      if (!techCompanyId) return

+

+      try {

+        setIsLoading(true)

+        // 기술영업 벤더 상세 정보 가져오기 (연락처, 첨부파일 포함)

+        const vendorData = await getTechVendorDetailById(Number(techCompanyId))

+

+        if (!vendorData) {

+          toast({

+            variant: "destructive",

+            title: "오류",

+            description: "기술영업 벤더 정보를 찾을 수 없습니다.",

+          })

+          return

+        }

+

+        setVendor(vendorData)

+        setContacts(vendorData.contacts || [])

+        setAttachments(vendorData.attachments || [])

+

+        // 폼 기본값 설정

+        const formValues = {

+          vendorName: vendorData.vendorName || "",

+          vendorCode: vendorData.vendorCode || "",

+          address: vendorData.address || "",

+          email: vendorData.email || "",

+          phone: vendorData.phone || "",

+          country: vendorData.country || "",

+          website: vendorData.website || "",

+          techVendorType: vendorData.techVendorType || "",

+          status: vendorData.status || "ACTIVE",

+        }

+

+        form.reset(formValues)

+      } catch (error) {

+        console.error("Error fetching tech vendor data:", error)

+        toast({

+          variant: "destructive",

+          title: "데이터 로드 오류",

+          description: "기술영업 벤더 정보를 불러오는 중 오류가 발생했습니다.",

+        })

+      } finally {

+        setIsLoading(false)

+      }

+    }

+

+    fetchTechVendorData()

+  }, [techCompanyId, form])

+

+  const handleDownloadFile = async (file: TechVendorAttachment) => {

+    try {

+      setIsDownloading(true)

+      

+      const downloadUrl = `/api/tech-vendors/attachments/download?id=${file.id}&vendorId=${Number(techCompanyId)}`

+      

+      const downloadLink = document.createElement('a')

+      downloadLink.href = downloadUrl

+      downloadLink.download = file.fileName

+      downloadLink.target = '_blank'

+      document.body.appendChild(downloadLink)

+      downloadLink.click()

+      

+      setTimeout(() => {

+        document.body.removeChild(downloadLink)

+      }, 100)

+      

+      toast({

+        title: "다운로드 시작",

+        description: "파일 다운로드가 시작되었습니다.",

+      })

+    } catch (error) {

+      console.error("Error downloading file:", error)

+      toast({

+        variant: "destructive",

+        title: "다운로드 오류",

+        description: "파일 다운로드 중 오류가 발생했습니다.",

+      })

+    } finally {

+      setIsDownloading(false)

+    }

+  }

+

+  const handleDownloadAllFiles = async () => {

+    try {

+      setIsDownloading(true)

+

+      const downloadUrl = `/api/tech-vendors/attachments/download-all?vendorId=${Number(techCompanyId)}`

+      

+      const downloadLink = document.createElement('a')

+      downloadLink.href = downloadUrl

+      downloadLink.download = `tech-vendor-${techCompanyId}-files.zip`

+      downloadLink.target = '_blank'

+      document.body.appendChild(downloadLink)

+      downloadLink.click()

+      

+      setTimeout(() => {

+        document.body.removeChild(downloadLink)

+      }, 100)

+      

+      toast({

+        title: "다운로드 시작",

+        description: "전체 파일 다운로드가 시작되었습니다.",

+      })

+    } catch (error) {

+      console.error("Error downloading files:", error)

+      toast({

+        variant: "destructive",

+        title: "다운로드 오류",

+        description: "파일 다운로드 중 오류가 발생했습니다.",

+      })

+    } finally {

+      setIsDownloading(false)

+    }

+  }

+

+  async function onSubmit(values: UpdateTechVendorSchema) {

+    if (!techCompanyId) return

+    

+    setIsSubmitting(true)

+    

+    try {

+      const { error } = await modifyTechVendor({

+        ...values,

+        id: String(techCompanyId),

+      })

+

+      if (error) {

+        throw new Error(error)

+      }

+

+      toast({

+        title: "업데이트 완료",

+        description: "기술영업 벤더 정보가 성공적으로 업데이트되었습니다.",

+      })

+    } catch (error) {

+      console.error("Error updating tech vendor:", error)

+      toast({

+        variant: "destructive",

+        title: "업데이트 오류",

+        description: "기술영업 벤더 정보 업데이트 중 오류가 발생했습니다.",

+      })

+    } finally {

+      setIsSubmitting(false)

+    }

+  }

+

+  if (isLoading) {

+    return (

+      <div className="flex items-center justify-center p-8">

+        <Loader2 className="h-8 w-8 animate-spin" />

+        <span className="ml-2">기술영업 벤더 정보를 불러오는 중...</span>

+      </div>

+    )

+  }

+

+  if (!vendor) {

+    return (

+      <div className="flex items-center justify-center p-8">

+        <span>기술영업 벤더 정보를 찾을 수 없습니다.</span>

+      </div>

+    )

+  }

+

+  return (

+    <div className="space-y-6 p-6">

+      <div className="flex items-center justify-between">

+        <div>

+          <h2 className="text-2xl font-bold">기술영업 벤더 정보</h2>

+          <p className="text-gray-600">기술영업 벤더 정보를 확인하고 업데이트할 수 있습니다.</p>

+        </div>

+        {attachments.length > 0 && (

+          <Button

+            variant="outline"

+            onClick={handleDownloadAllFiles}

+            disabled={isDownloading}

+          >

+            <Download className="h-4 w-4 mr-2" />

+            {isDownloading ? "다운로드 중..." : "전체 파일 다운로드"}

+          </Button>

+        )}

+      </div>

+

+      <Form {...form}>

+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">

+          <Card>

+            <CardHeader>

+              <CardTitle>기본 정보</CardTitle>

+            </CardHeader>

+            <CardContent className="space-y-4">

+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">

+                <FormField

+                  control={form.control}

+                  name="vendorName"

+                  render={({ field }) => (

+                    <FormItem>

+                      <FormLabel>벤더명</FormLabel>

+                      <FormControl>

+                        <Input {...field} disabled />

+                      </FormControl>

+                      <FormMessage />

+                    </FormItem>

+                  )}

+                />

+                <FormField

+                  control={form.control}

+                  name="vendorCode"

+                  render={({ field }) => (

+                    <FormItem>

+                      <FormLabel>벤더 코드</FormLabel>

+                      <FormControl>

+                        <Input {...field} disabled />

+                      </FormControl>

+                      <FormMessage />

+                    </FormItem>

+                  )}

+                />

+              </div>

+

+              {/* 사업자등록번호 */}

+              {vendor.taxId && (

+                <div>

+                  <label className="text-sm font-medium text-gray-600">사업자등록번호</label>

+                  <p className="mt-1">{vendor.taxId}</p>

+                </div>

+              )}

+

+              {/* 공급품목 */}

+              {vendor.items && (

+                <div>

+                  <label className="text-sm font-medium text-gray-600">공급품목</label>

+                  <p className="mt-1 text-sm leading-relaxed">{vendor.items}</p>

+                </div>

+              )}

+

+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">

+                <FormField

+                  control={form.control}

+                  name="email"

+                  render={({ field }) => (

+                    <FormItem>

+                      <FormLabel>이메일</FormLabel>

+                      <FormControl>

+                        <Input {...field} type="email" />

+                      </FormControl>

+                      <FormMessage />

+                    </FormItem>

+                  )}

+                />

+                <FormField

+                  control={form.control}

+                  name="phone"

+                  render={({ field }) => (

+                    <FormItem>

+                      <FormLabel>전화번호</FormLabel>

+                      <FormControl>

+                        <Input {...field} />

+                      </FormControl>

+                      <FormMessage />

+                    </FormItem>

+                  )}

+                />

+              </div>

+

+              <FormField

+                control={form.control}

+                name="address"

+                render={({ field }) => (

+                  <FormItem>

+                    <FormLabel>주소</FormLabel>

+                    <FormControl>

+                      <Input {...field} />

+                    </FormControl>

+                    <FormMessage />

+                  </FormItem>

+                )}

+              />

+

+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">

+                <FormField

+                  control={form.control}

+                  name="country"

+                  render={({ field }) => (

+                    <FormItem>

+                      <FormLabel>국가</FormLabel>

+                      <FormControl>

+                        <Input {...field} />

+                      </FormControl>

+                      <FormMessage />

+                    </FormItem>

+                  )}

+                />

+                <FormField

+                  control={form.control}

+                  name="website"

+                  render={({ field }) => (

+                    <FormItem>

+                      <FormLabel>웹사이트</FormLabel>

+                      <FormControl>

+                        <Input {...field} />

+                      </FormControl>

+                      <FormMessage />

+                    </FormItem>

+                  )}

+                />

+              </div>

+            </CardContent>

+          </Card>

+

+

+          {/* 연락처 정보 */}

+          {contacts.length > 0 && (

+            <Card>

+              <CardHeader>

+                <CardTitle>연락처 정보</CardTitle>

+                <CardDescription>

+                  등록된 연락처 정보입니다.

+                </CardDescription>

+              </CardHeader>

+              <CardContent>

+                <div className="space-y-4">

+                  {contacts.map((contact) => (

+                    <div

+                      key={contact.id}

+                      className="flex items-center justify-between p-4 border rounded-lg"

+                    >

+                      <div className="flex items-center space-x-4">

+                        <div className="flex h-10 w-10 items-center justify-center rounded-full bg-blue-100">

+                          <User className="h-5 w-5 text-blue-600" />

+                        </div>

+                        <div>

+                          <div className="flex items-center space-x-2">

+                            <h4 className="font-medium">{contact.contactName}</h4>

+                            {contact.isPrimary && (

+                              <Badge variant="secondary">주 담당자</Badge>

+                            )}

+                          </div>

+                          {contact.contactPosition && (

+                            <p className="text-sm text-gray-600">{contact.contactPosition}</p>

+                          )}

+                        </div>

+                      </div>

+                      <div className="flex space-x-2">

+                        {contact.contactEmail && (

+                          <Button

+                            variant="ghost"

+                            size="sm"

+                            onClick={() => window.open(`mailto:${contact.contactEmail}`)}

+                          >

+                            <Mail className="h-4 w-4" />

+                          </Button>

+                        )}

+                        {contact.contactPhone && (

+                          <Button

+                            variant="ghost"

+                            size="sm"

+                            onClick={() => window.open(`tel:${contact.contactPhone}`)}

+                          >

+                            <Phone className="h-4 w-4" />

+                          </Button>

+                        )}

+                      </div>

+                    </div>

+                  ))}

+                </div>

+              </CardContent>

+            </Card>

+          )}

+

+          {/* 첨부파일 정보 */}

+          {attachments.length > 0 && (

+            <Card>

+              <CardHeader>

+                <CardTitle>첨부파일</CardTitle>

+                <CardDescription>

+                  업로드된 파일들을 확인하고 다운로드할 수 있습니다.

+                </CardDescription>

+              </CardHeader>

+              <CardContent>

+                <div className="space-y-2">

+                  {attachments.map((file) => (

+                    <div

+                      key={file.id}

+                      className="flex items-center justify-between p-3 border rounded-lg hover:bg-gray-50"

+                    >

+                      <div className="flex-1">

+                        <h4 className="font-medium">{file.fileName}</h4>

+                        <div className="flex items-center space-x-2 text-sm text-gray-600">

+                          <span>{file.attachmentType}</span>

+                          <span>•</span>

+                          <span>{new Date(file.createdAt).toLocaleDateString()}</span>

+                        </div>

+                      </div>

+                      <Button

+                        variant="ghost"

+                        size="sm"

+                        onClick={() => handleDownloadFile(file)}

+                        disabled={isDownloading}

+                      >

+                        <Download className="h-4 w-4" />

+                      </Button>

+                    </div>

+                  ))}

+                </div>

+              </CardContent>

+            </Card>

+          )}

+

+          <div className="flex justify-end space-x-4">

+            <Button

+              type="submit"

+              disabled={isSubmitting || !isFormValid}

+            >

+              {isSubmitting ? (

+                <>

+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />

+                  업데이트 중...

+                </>

+              ) : (

+                "정보 업데이트"

+              )}

+            </Button>

+          </div>

+        </form>

+      </Form>

+    </div>

+  )

+} 
\ No newline at end of file
diff --git a/components/tech-vendors/tech-vendor-container.tsx b/components/tech-vendors/tech-vendor-container.tsx
new file mode 100644
index 00000000..583d507c
--- /dev/null
+++ b/components/tech-vendors/tech-vendor-container.tsx
@@ -0,0 +1,100 @@
+"use client"

+

+import * as React from "react"

+import { useRouter, usePathname, useSearchParams } from "next/navigation"

+import { ChevronDown } from "lucide-react"

+

+import { Button } from "@/components/ui/button"

+import {

+  DropdownMenu,

+  DropdownMenuContent,

+  DropdownMenuItem,

+  DropdownMenuTrigger,

+} from "@/components/ui/dropdown-menu"

+

+interface VendorType {

+  id: string

+  name: string

+  value: string

+}

+

+interface TechVendorContainerProps {

+  vendorTypes: VendorType[]

+  children: React.ReactNode

+}

+

+export function TechVendorContainer({

+  vendorTypes,

+  children,

+}: TechVendorContainerProps) {

+  const router = useRouter()

+  const pathname = usePathname()

+  const searchParamsObj = useSearchParams()

+  

+  // useSearchParams를 메모이제이션하여 안정적인 참조 생성

+  const searchParams = React.useMemo(

+    () => searchParamsObj || new URLSearchParams(),

+    [searchParamsObj]

+  )

+

+  // URL에서 현재 선택된 벤더 타입 가져오기

+  const vendorType = searchParams.get("vendorType") || "all"

+

+  // 선택한 벤더 타입에 해당하는 이름 찾기

+  const selectedVendor = vendorTypes.find((vendor) => vendor.id === vendorType)?.name || "전체"

+

+  // 벤더 타입 변경 핸들러

+  const handleVendorTypeChange = React.useCallback((value: string) => {

+    const params = new URLSearchParams(searchParams.toString())

+    if (value === "all") {

+      params.delete("vendorType")

+    } else {

+      params.set("vendorType", value)

+    }

+    

+    router.push(`${pathname}?${params.toString()}`)

+  }, [router, pathname, searchParams])

+

+  return (

+    <>

+      {/* 상단 영역: 제목 왼쪽 / 벤더 타입 선택기 오른쪽 */}

+      <div className="flex items-center justify-between">

+        {/* 왼쪽: 타이틀 & 설명 */}

+        <div>

+          <h2 className="text-2xl font-bold tracking-tight">기술영업 벤더 리스트</h2>

+          <p className="text-muted-foreground">

+            기술영업 벤더에 대한 요약 정보를 확인하고 관리할 수 있습니다.

+          </p>

+        </div>

+        

+        {/* 오른쪽: 벤더 타입 드롭다운 */}

+        <DropdownMenu>

+          <DropdownMenuTrigger asChild>

+            <Button variant="outline" className="min-w-[150px]">

+              {selectedVendor}

+              <ChevronDown className="ml-2 h-4 w-4" />

+            </Button>

+          </DropdownMenuTrigger>

+          <DropdownMenuContent align="end" className="w-[200px]">

+            {vendorTypes.map((vendor) => (

+              <DropdownMenuItem

+                key={vendor.id}

+                onClick={() => handleVendorTypeChange(vendor.id)}

+                className={vendor.id === vendorType ? "bg-muted" : ""}

+              >

+                {vendor.name}

+              </DropdownMenuItem>

+            ))}

+          </DropdownMenuContent>

+        </DropdownMenu>

+      </div>

+      

+      {/* 컨텐츠 영역 */}

+      <section className="overflow-hidden">

+        <div>

+          {children}

+        </div>

+      </section>

+    </>

+  )

+} 
\ No newline at end of file
diff --git a/components/tech-vendors/tech-vendor-items-container.tsx b/components/tech-vendors/tech-vendor-items-container.tsx
new file mode 100644
index 00000000..49a9d4ee
--- /dev/null
+++ b/components/tech-vendors/tech-vendor-items-container.tsx
@@ -0,0 +1,121 @@
+"use client"

+

+import * as React from "react"

+import { useRouter, usePathname, useSearchParams } from "next/navigation"

+import { ChevronDown } from "lucide-react"

+

+import { type TechVendor } from "@/db/schema/techVendors"

+

+import { Button } from "@/components/ui/button"

+import {

+  DropdownMenu,

+  DropdownMenuContent,

+  DropdownMenuItem,

+  DropdownMenuTrigger,

+} from "@/components/ui/dropdown-menu"

+import { TechVendorItemsTable } from "@/lib/tech-vendors/items-table/item-table"

+import { getVendorItemsByType } from "@/lib/tech-vendors/service"

+

+interface ItemType {

+  id: string

+  name: string

+  vendorType: string

+}

+

+interface TechVendorItemsContainerProps {

+  vendorId: number

+  vendor: TechVendor

+  itemTypes: ItemType[]

+}

+

+export function TechVendorItemsContainer({

+  vendorId,

+  vendor,

+  itemTypes,

+}: TechVendorItemsContainerProps) {

+  const router = useRouter()

+  const pathname = usePathname()

+  const searchParamsObj = useSearchParams()

+  

+  // useSearchParams를 메모이제이션하여 안정적인 참조 생성

+  const currentSearchParams = React.useMemo(

+    () => searchParamsObj || new URLSearchParams(),

+    [searchParamsObj]

+  )

+

+  // URL에서 현재 선택된 아이템 타입 가져오기 (기본값은 첫 번째 타입)

+  const itemType = currentSearchParams.get("type") || itemTypes[0]?.id || "ship"

+

+  // 선택한 아이템 타입에 해당하는 정보 찾기

+  const selectedItemType = itemTypes.find((item) => item.id === itemType) || itemTypes[0]

+

+  // 아이템 타입 변경 핸들러

+  const handleItemTypeChange = React.useCallback((value: string) => {

+    const params = new URLSearchParams(currentSearchParams.toString())

+    params.set("type", value)

+    

+    router.push(`${pathname}?${params.toString()}`)

+  }, [router, pathname, currentSearchParams])

+

+  // 현재 선택된 벤더 타입에 대한 아이템 데이터 가져오기

+  const promises = React.useMemo(() => {

+    if (selectedItemType) {

+      return getVendorItemsByType(vendorId, selectedItemType.vendorType)

+    }

+    return Promise.resolve({ data: [] })

+  }, [vendorId, selectedItemType])

+

+  // 벤더 타입이 하나뿐인 경우 드롭다운 숨기기

+  const showDropdown = itemTypes.length > 1

+

+  return (

+    <>

+      {/* 상단 영역: 제목 왼쪽 / 아이템 타입 선택기 오른쪽 */}

+      <div className="flex items-center justify-between">

+        {/* 왼쪽: 타이틀 & 설명 */}

+        <div>

+          <h4 className="text-lg font-medium">자재 목록</h4>

+          <p className="text-sm text-muted-foreground">

+            {vendor.vendorName}의 공급 가능한 자재 목록입니다.

+          </p>

+        </div>

+        

+        {/* 오른쪽: 아이템 타입 드롭다운 (타입이 여러 개인 경우에만 표시) */}

+        {showDropdown && (

+          <DropdownMenu>

+            <DropdownMenuTrigger asChild>

+              <Button variant="outline" className="min-w-[150px]">

+                {selectedItemType?.name || "타입 선택"}

+                <ChevronDown className="ml-2 h-4 w-4" />

+              </Button>

+            </DropdownMenuTrigger>

+            <DropdownMenuContent align="end" className="w-[200px]">

+              {itemTypes.map((item) => (

+                <DropdownMenuItem

+                  key={item.id}

+                  onClick={() => handleItemTypeChange(item.id)}

+                  className={item.id === itemType ? "bg-muted" : ""}

+                >

+                  {item.name}

+                </DropdownMenuItem>

+              ))}

+            </DropdownMenuContent>

+          </DropdownMenu>

+        )}

+      </div>

+      

+      {/* 컨텐츠 영역 */}

+      <section className="overflow-hidden">

+        <div>

+          {selectedItemType && (

+            <TechVendorItemsTable 

+              promises={promises} 

+              vendorId={vendorId}

+              vendorType={selectedItemType.vendorType}

+            />

+          )}

+        </div>

+      </section>

+    </>

+  )

+} 
\ No newline at end of file