diff options
Diffstat (limited to 'components/signup/join-form.tsx')
| -rw-r--r-- | components/signup/join-form.tsx | 201 |
1 files changed, 122 insertions, 79 deletions
diff --git a/components/signup/join-form.tsx b/components/signup/join-form.tsx index 6885279a..973fb00c 100644 --- a/components/signup/join-form.tsx +++ b/components/signup/join-form.tsx @@ -910,6 +910,32 @@ function CompleteVendorForm({ }: VendorStepProps) { const [isSubmitting, setIsSubmitting] = useState(false); const { toast } = useToast(); + const effectiveCountry = data.country || accountData.country || ""; + const isKR = effectiveCountry === "KR"; + + useEffect(() => { + const handleMessage = (event: MessageEvent) => { + if (!event.data || event.data.type !== "JUSO_SELECTED") return; + const { zipNo, roadAddrPart1, roadAddrPart2, addrDetail } = event.data.payload || {}; + const combinedAddress = [roadAddrPart1, roadAddrPart2].filter(Boolean).join(" ").trim(); + onChange(prev => ({ + ...prev, + postalCode: zipNo || prev.postalCode, + address: combinedAddress || prev.address, + addressDetail: addrDetail || prev.addressDetail, + })); + }; + window.addEventListener("message", handleMessage); + return () => window.removeEventListener("message", handleMessage); + }, [onChange]); + + const handleJusoSearch = () => { + window.open( + "/api/juso", + "jusoSearch", + "width=570,height=420,scrollbars=yes,resizable=yes" + ); + }; // 담당자 관리 함수들 const addContact = () => { @@ -1259,13 +1285,28 @@ function CompleteVendorForm({ {/* 주소 */} <div> - <label className="block text-sm font-medium mb-1"> - {t('address')} <span className="text-red-500">*</span> - </label> + <div className="flex items-center justify-between gap-2 mb-1"> + <label className="block text-sm font-medium"> + {t('address')} <span className="text-red-500">*</span> + </label> + {isKR && ( + <Button + type="button" + variant="secondary" + size="sm" + onClick={handleJusoSearch} + disabled={isSubmitting} + > + 주소 검색 + </Button> + )} + </div> <Input value={data.address} onChange={(e) => handleInputChange('address', e.target.value)} disabled={isSubmitting} + readOnly={isKR} + className={cn(isKR && "bg-muted text-muted-foreground")} /> </div> @@ -1291,6 +1332,8 @@ function CompleteVendorForm({ value={data.postalCode} onChange={(e) => handleInputChange('postalCode', e.target.value)} disabled={isSubmitting} + readOnly={isKR} + className={cn(isKR && "bg-muted text-muted-foreground")} placeholder="우편번호를 입력해주세요" /> </div> @@ -1388,6 +1431,82 @@ function CompleteVendorForm({ </div> </div> + {/* 한국 사업자 정보 */} + {data.country === "KR" && ( + <div className="rounded-md border p-6 space-y-4"> + <h4 className="text-md font-semibold">{t('koreanBusinessInfo')}</h4> + <div className="grid grid-cols-1 md:grid-cols-2 gap-4"> + <div> + <label className="block text-sm font-medium mb-1"> + {t('name')} <span className="text-red-500">*</span> + </label> + <Input + value={data.representativeName} + onChange={(e) => handleInputChange('representativeName', e.target.value)} + disabled={isSubmitting} + /> + </div> + <div> + <label className="block text-sm font-medium mb-1"> + {t('representativeBirth')} <span className="text-red-500">*</span> + </label> + <Input + placeholder="YYYY-MM-DD" + value={data.representativeBirth} + onChange={(e) => handleInputChange('representativeBirth', e.target.value)} + disabled={isSubmitting} + /> + </div> + <div> + <label className="block text-sm font-medium mb-1"> + {t('representativeEmail')} <span className="text-red-500">*</span> + </label> + <Input + value={data.representativeEmail} + onChange={(e) => handleInputChange('representativeEmail', e.target.value)} + disabled={isSubmitting} + /> + </div> + <div> + <label className="block text-sm font-medium mb-1"> + {t('')} <span className="text-red-500">*</span> + </label> + <PhoneInput + value={data.representativePhone} + onChange={(value) => handleInputChange('representativePhone', value)} + countryCode="KR" + disabled={isSubmitting} + showValidation={true} + t={t} + /> + </div> + <div> + <label className="block text-sm font-medium mb-1"> + {t('corporateRegistrationNumber')} + </label> + <Input + value={data.corporateRegistrationNumber} + onChange={(e) => handleInputChange('corporateRegistrationNumber', e.target.value)} + disabled={isSubmitting} + /> + </div> + <div className="flex items-center space-x-2"> + <input + type="checkbox" + id="work-experience" + checked={data.representativeWorkExpirence} + onChange={(e) => handleInputChange('representativeWorkExpirence', e.target.checked)} + disabled={isSubmitting} + className="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" + /> + <label htmlFor="work-experience" className="text-sm"> + {t('samsungWorkExperience')} + </label> + </div> + </div> + </div> + )} + {/* 담당자 정보 */} <div className="rounded-md border p-6 space-y-4"> <div className="flex items-center justify-between"> @@ -1508,82 +1627,6 @@ function CompleteVendorForm({ </div> </div> - {/* 한국 사업자 정보 */} - {data.country === "KR" && ( - <div className="rounded-md border p-6 space-y-4"> - <h4 className="text-md font-semibold">{t('koreanBusinessInfo')}</h4> - <div className="grid grid-cols-1 md:grid-cols-2 gap-4"> - <div> - <label className="block text-sm font-medium mb-1"> - {t('representativeName')} <span className="text-red-500">*</span> - </label> - <Input - value={data.representativeName} - onChange={(e) => handleInputChange('representativeName', e.target.value)} - disabled={isSubmitting} - /> - </div> - <div> - <label className="block text-sm font-medium mb-1"> - {t('representativeBirth')} <span className="text-red-500">*</span> - </label> - <Input - placeholder="YYYY-MM-DD" - value={data.representativeBirth} - onChange={(e) => handleInputChange('representativeBirth', e.target.value)} - disabled={isSubmitting} - /> - </div> - <div> - <label className="block text-sm font-medium mb-1"> - {t('representativeEmail')} <span className="text-red-500">*</span> - </label> - <Input - value={data.representativeEmail} - onChange={(e) => handleInputChange('representativeEmail', e.target.value)} - disabled={isSubmitting} - /> - </div> - <div> - <label className="block text-sm font-medium mb-1"> - {t('representativePhone')} <span className="text-red-500">*</span> - </label> - <PhoneInput - value={data.representativePhone} - onChange={(value) => handleInputChange('representativePhone', value)} - countryCode="KR" - disabled={isSubmitting} - showValidation={true} - t={t} - /> - </div> - <div> - <label className="block text-sm font-medium mb-1"> - {t('corporateRegistrationNumber')} - </label> - <Input - value={data.corporateRegistrationNumber} - onChange={(e) => handleInputChange('corporateRegistrationNumber', e.target.value)} - disabled={isSubmitting} - /> - </div> - <div className="flex items-center space-x-2"> - <input - type="checkbox" - id="work-experience" - checked={data.representativeWorkExpirence} - onChange={(e) => handleInputChange('representativeWorkExpirence', e.target.checked)} - disabled={isSubmitting} - className="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" - /> - <label htmlFor="work-experience" className="text-sm"> - {t('samsungWorkExperience')} - </label> - </div> - </div> - </div> - )} - {/* 필수 첨부 서류 */} <div className="rounded-md border p-6 space-y-6"> <h4 className="text-md font-semibold">{t('requiredDocuments')}</h4> |