diff options
Diffstat (limited to 'components/signup/tech-vendor-join-form.tsx')
| -rw-r--r-- | components/signup/tech-vendor-join-form.tsx | 69 |
1 files changed, 57 insertions, 12 deletions
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 |