From 14f61e24947fb92dd71ec0a7196a6e815f8e66da Mon Sep 17 00:00:00 2001
From: dujinkim <dujin.kim@dtsolution.co.kr>
Date: Mon, 21 Jul 2025 07:54:26 +0000
Subject: (최겸)기술영업 RFQ 담당자 초대, 요구사항 반영
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/signup/tech-vendor-join-form.tsx | 69 ++++++++++++++++++++++++-----
 1 file changed, 57 insertions(+), 12 deletions(-)

(limited to 'components/signup/tech-vendor-join-form.tsx')

diff --git a/components/signup/tech-vendor-join-form.tsx b/components/signup/tech-vendor-join-form.tsx
index db81b88c..efdee322 100644
--- a/components/signup/tech-vendor-join-form.tsx
+++ b/components/signup/tech-vendor-join-form.tsx
@@ -38,6 +38,7 @@ import { Check, ChevronsUpDown, Loader2, Plus, X } from "lucide-react"
 import { cn } from "@/lib/utils"
 
 import { createTechVendorFromSignup } from "@/lib/tech-vendors/service"
+import { TechVendorItemSelectorDialog } from "./tech-vendor-item-selector-dialog"
 import { createTechVendorSchema, CreateTechVendorSchema } from "@/lib/tech-vendors/validations"
 import { VENDOR_TYPES } from "@/db/schema/techVendors"
 import { verifyTechVendorInvitationToken } from "@/lib/tech-vendor-invitation-token"
@@ -144,6 +145,8 @@ export function TechVendorJoinForm() {
   const [isSubmitting, setIsSubmitting] = React.useState(false)
   const [isLoading, setIsLoading] = React.useState(false)
   const [hasValidToken, setHasValidToken] = React.useState<boolean | null>(null)
+  const [isItemSelectorOpen, setIsItemSelectorOpen] = React.useState(false)
+  const [selectedItemCodes, setSelectedItemCodes] = React.useState<string[]>([])
 
   // React Hook Form (항상 최상위에서 호출)
   const form = useForm<CreateTechVendorSchema>({
@@ -158,7 +161,7 @@ export function TechVendorJoinForm() {
       phone: "",
       country: "",
       website: "",
-      techVendorType: ["조선"],
+      techVendorType: [],
       representativeName: "",
       representativeBirth: "",
       representativeEmail: "",
@@ -200,13 +203,15 @@ export function TechVendorJoinForm() {
         
         if (tokenPayload) {
           setHasValidToken(true);
+          console.log("tokenPayload", tokenPayload);
           // 토큰에서 가져온 정보로 폼 미리 채우기
           form.setValue("vendorName", tokenPayload.vendorName);
           form.setValue("email", tokenPayload.email);
+          form.setValue("techVendorType", tokenPayload.vendorType as "조선" | "해양TOP" | "해양HULL" | ("조선" | "해양TOP" | "해양HULL")[]);
           
-          // 연락처 정보도 미리 채우기
-          form.setValue("contacts.0.contactName", tokenPayload.vendorName);
-          form.setValue("contacts.0.contactEmail", tokenPayload.email);
+          // // 연락처 정보도 미리 채우기
+          // form.setValue("contacts.0.contactName", tokenPayload.vendorName);
+          // form.setValue("contacts.0.contactEmail", tokenPayload.email);
           
           toast({
             title: "초대 정보 로드 완료",
@@ -292,6 +297,13 @@ export function TechVendorJoinForm() {
     form.setValue("files", updated, { shouldValidate: true })
   }
 
+  const handleItemsSelected = (itemCodes: string[]) => {
+    setSelectedItemCodes(itemCodes)
+    // 선택된 아이템 코드들을 콤마로 구분하여 items 필드에 설정
+    const itemsString = itemCodes.join(", ")
+    form.setValue("items", itemsString)
+  }
+
   // Submit
   async function onSubmit(values: CreateTechVendorSchema) {
     setIsSubmitting(true)
@@ -310,7 +322,7 @@ export function TechVendorJoinForm() {
         email: values.email,
         phone: values.phone,
         country: values.country,
-        techVendorType: Array.isArray(values.techVendorType) ? values.techVendorType[0] : values.techVendorType,
+        techVendorType: values.techVendorType as "조선" | "해양TOP" | "해양HULL" | ("조선" | "해양TOP" | "해양HULL")[],
         representativeName: values.representativeName || "",
         representativeBirth: values.representativeBirth || "",
         representativeEmail: values.representativeEmail || "",
@@ -323,6 +335,7 @@ export function TechVendorJoinForm() {
         vendorData: techVendorData,
         files: mainFiles,
         contacts: values.contacts,
+        selectedItemCodes: selectedItemCodes,
         invitationToken: invitationToken || undefined,
       })
 
@@ -413,7 +426,7 @@ export function TechVendorJoinForm() {
                                 id={`techVendorType-${type}`}
                                 checked={field.value?.includes(type) || false}
                                 onChange={(e) => {
-                                  const currentValues = field.value || [];
+                                  const currentValues = Array.isArray(field.value) ? field.value : [];
                                   if (e.target.checked) {
                                     field.onChange([...currentValues, type]);
                                   } else {
@@ -557,7 +570,7 @@ export function TechVendorJoinForm() {
                     )}
                   />
 
-                  {/* 이메일 */}
+                  {/* 이메일 (수정 불가, 뷰 전용) */}
                   <FormField
                     control={form.control}
                     name="email"
@@ -567,7 +580,13 @@ export function TechVendorJoinForm() {
                           이메일
                         </FormLabel>
                         <FormControl>
-                          <Input placeholder="example@company.com" {...field} />
+                          <Input
+                            placeholder="example@company.com"
+                            {...field}
+                            readOnly
+                            tabIndex={-1}
+                            className="bg-muted cursor-not-allowed pointer-events-none"
+                          />
                         </FormControl>
                         <FormMessage />
                       </FormItem>
@@ -616,11 +635,29 @@ export function TechVendorJoinForm() {
                         <FormLabel className="after:content-['*'] after:ml-0.5 after:text-red-500">
                           주요 품목
                         </FormLabel>
-                        <FormControl>
-                          <Input placeholder="주요 품목을 입력하세요" {...field} />
-                        </FormControl>
+                        <div className="space-y-2">
+                          <FormControl>
+                            <Input placeholder="주요 품목을 입력하세요" {...field} />
+                          </FormControl>
+                          <div className="flex items-center space-x-2">
+                            <Button
+                              type="button"
+                              variant="outline"
+                              size="sm"
+                              onClick={() => setIsItemSelectorOpen(true)}
+                              disabled={!form.watch("techVendorType") || (Array.isArray(form.watch("techVendorType")) && form.watch("techVendorType").length === 0)}
+                            >
+                              공급가능품목 선택
+                            </Button>
+                            {selectedItemCodes.length > 0 && (
+                              <span className="text-sm text-muted-foreground">
+                                {selectedItemCodes.length}개 아이템 선택됨
+                              </span>
+                            )}
+                          </div>
+                        </div>
                         <FormDescription>
-                          회사에서 주로 다루는 품목들을 쉼표로 구분하여 입력하세요.
+                          공급가능품목 선택 버튼을 클릭하여 아이템을 선택하세요. 원하는 아이템이 없다면 텍스트로 입력하세요.
                         </FormDescription>
                         <FormMessage />
                       </FormItem>
@@ -902,6 +939,14 @@ export function TechVendorJoinForm() {
           </Form>
         </div>
       </section>
+
+      {/* 공급가능품목 선택 다이얼로그 */}
+      <TechVendorItemSelectorDialog
+        open={isItemSelectorOpen}
+        onOpenChange={setIsItemSelectorOpen}
+        vendorType={form.watch("techVendorType")}
+        onItemsSelected={handleItemsSelected}
+      />
     </div>
   )
 }
\ No newline at end of file
-- 
cgit v1.2.3