(김준회) 한국업체 법인등록번호 필수값에서 제외, taxId 입력시 10자리 숫자 아니면 한국업체 taxid 아니라고 경고 UI 추가

1 files changed, 31 insertions, 7 deletions

diff --git a/components/login/partner-auth-form.tsx b/components/login/partner-auth-form.tsx
index fb8cd8af..10efaec5 100644
--- a/components/login/partner-auth-form.tsx
+++ b/components/login/partner-auth-form.tsx
@@ -7,7 +7,6 @@ import { useTranslation } from "@/i18n/client"
 import Link from "next/link"
 
 import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import {
   DropdownMenu,
@@ -20,7 +19,6 @@ import { GlobeIcon, ChevronDownIcon, Loader, Ship, LogIn, InfoIcon, HelpCircle }
 import { languages } from "@/config/language"
 import { cn } from "@/lib/utils"
 import { buttonVariants } from "@/components/ui/button"
-import { siteConfig } from "@/config/site"
 import {
   Tooltip,
   TooltipContent,
@@ -37,11 +35,10 @@ import { checkJoinPortal } from "@/lib/vendors/service"
 import Image from "next/image"
 // ↑ 실제 경로 맞춤 수정 (ex: "@/app/[lng]/actions/joinPortal" 등)
 
-interface UserAuthFormProps extends React.HTMLAttributes<HTMLDivElement> { }
-
-export function CompanyAuthForm({ className, ...props }: UserAuthFormProps) {
+export function CompanyAuthForm({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
   const [isLoading, setIsLoading] = React.useState<boolean>(false)
   const [showInfoBanner, setShowInfoBanner] = React.useState<boolean>(true)
+  const [taxIdWarning, setTaxIdWarning] = React.useState<boolean>(false)
   const router = useRouter()
   const { toast } = useToast()
 
@@ -51,6 +48,11 @@ export function CompanyAuthForm({ className, ...props }: UserAuthFormProps) {
   const lng = params.lng as string
   const { t, i18n } = useTranslation(lng, "login")
 
+  // 컴포넌트 마운트 시 초기 상태 설정
+  React.useEffect(() => {
+    setTaxIdWarning(false)
+  }, [])
+
   const handleChangeLanguage = (lang: string) => {
     const segments = pathname.split("/")
     segments[1] = lang
@@ -69,6 +71,16 @@ export function CompanyAuthForm({ className, ...props }: UserAuthFormProps) {
     router.push(`/${lng}/partners`);
   }
 
+  // 사업자등록번호 검증 함수
+  const validateTaxId = (value: string) => {
+    // - 제거하고 숫자만 추출
+    const numericValue = value.replace(/-/g, '').replace(/\D/g, '');
+    // 한국 기업의 사업자등록번호는 10자리 숫자
+    const isValidLength = numericValue.length === 10;
+    setTaxIdWarning(!isValidLength && numericValue.length > 0);
+    return isValidLength;
+  }
+
   // ---------------------------
   // 1) onSubmit -> 서버 액션 호출
   // ---------------------------
@@ -89,6 +101,9 @@ export function CompanyAuthForm({ className, ...props }: UserAuthFormProps) {
       return
     }
 
+    // 제출 시에도 검증 수행
+    validateTaxId(taxID)
+
     try {
       // ---------------------------
       // 2) 서버 액션 호출
@@ -125,8 +140,8 @@ export function CompanyAuthForm({ className, ...props }: UserAuthFormProps) {
           })
         }, 1000);
       }
-    } catch (error: any) {
-      console.error(error)
+    } catch (error: unknown) {
+      console.error('Form submission error:', error)
       toast({
         variant: "destructive",
         title: "오류",
@@ -227,11 +242,20 @@ export function CompanyAuthForm({ className, ...props }: UserAuthFormProps) {
                       autoComplete="off"
                       autoCorrect="off"
                       disabled={isLoading}
+                      onChange={(e) => validateTaxId(e.target.value)}
                       className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-50"
                     />
                     <p className="text-xs text-muted-foreground">
                       {t("taxIdHint") || "사업자 등록 번호는 업체 인증에 사용됩니다"}
                     </p>
+                    {taxIdWarning && (
+                      <div className="flex items-center gap-2 p-2 bg-orange-50 border border-orange-200 rounded-md">
+                        <InfoIcon className="h-4 w-4 text-orange-600 flex-shrink-0" />
+                        <p className="text-xs text-orange-700">
+                          {t("taxIdWarning") || "한국 기업의 사업자등록번호는 10자리 숫자입니다. 외국 기업의 경우 다른 형식으로 입력 가능합니다."}
+                        </p>
+                      </div>
+                    )}
                   </div>
                   <Button type="submit" disabled={isLoading} variant="samsung">
                     {isLoading && <Loader className="mr-2 h-4 w-4 animate-spin" />}