회사 관리 - 등록 페이지 수정

frontend/components/admin/CompanyFormModal.tsx

@@ -5,6 +5,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
 import { LoadingSpinner } from "@/components/common/LoadingSpinner";
+import { validateBusinessNumber, formatBusinessNumber } from "@/lib/validation/businessNumber";
 
 interface CompanyFormModalProps {
   modalState: CompanyModalState;
@@ -29,6 +30,7 @@ export function CompanyFormModal({
   onClearError,
 }: CompanyFormModalProps) {
   const [isSaving, setIsSaving] = useState(false);
+  const [businessNumberError, setBusinessNumberError] = useState<string>("");
 
   // 모달이 열려있지 않으면 렌더링하지 않음
   if (!modalState.isOpen) return null;
@@ -36,15 +38,43 @@ export function CompanyFormModal({
   const { mode, formData, selectedCompany } = modalState;
   const isEditMode = mode === "edit";
 
+  // 사업자등록번호 변경 처리
+  const handleBusinessNumberChange = (value: string) => {
+    // 자동 포맷팅
+    const formatted = formatBusinessNumber(value);
+    onFormChange("business_registration_number", formatted);
+
+    // 유효성 검사 (10자리가 다 입력되었을 때만)
+    const cleaned = formatted.replace(/-/g, "");
+    if (cleaned.length === 10) {
+      const validation = validateBusinessNumber(formatted);
+      setBusinessNumberError(validation.isValid ? "" : validation.message);
+    } else if (cleaned.length < 10 && businessNumberError) {
+      // 10자리 미만이면 에러 초기화
+      setBusinessNumberError("");
+    }
+  };
+
   // 저장 처리
   const handleSave = async () => {
-    // 입력값 검증
+    // 입력값 검증 (필수 필드)
     if (!formData.company_name.trim()) {
       return;
     }
+    if (!formData.business_registration_number.trim()) {
+      return;
+    }
+
+    // 사업자등록번호 최종 검증
+    const validation = validateBusinessNumber(formData.business_registration_number);
+    if (!validation.isValid) {
+      setBusinessNumberError(validation.message);
+      return;
+    }
 
     setIsSaving(true);
     onClearError();
+    setBusinessNumberError("");
 
     try {
       const success = await onSave();
@@ -81,7 +111,7 @@ export function CompanyFormModal({
         </DialogHeader>
 
         <div className="space-y-4 py-4">
-          {/* 회사명 입력 */}
+          {/* 회사명 입력 (필수) */}
           <div className="space-y-2">
             <Label htmlFor="company_name">
               회사명 <span className="text-destructive">*</span>
@@ -97,10 +127,94 @@ export function CompanyFormModal({
             />
           </div>
 
+          {/* 사업자등록번호 입력 (필수) */}
+          <div className="space-y-2">
+            <Label htmlFor="business_registration_number">
+              사업자등록번호 <span className="text-destructive">*</span>
+            </Label>
+            <Input
+              id="business_registration_number"
+              value={formData.business_registration_number || ""}
+              onChange={(e) => handleBusinessNumberChange(e.target.value)}
+              placeholder="000-00-00000"
+              disabled={isLoading || isSaving}
+              maxLength={12}
+              className={businessNumberError ? "border-destructive" : ""}
+            />
+            {businessNumberError ? (
+              <p className="text-xs text-destructive">{businessNumberError}</p>
+            ) : (
+              <p className="text-xs text-muted-foreground">10자리 숫자 (자동 하이픈 추가)</p>
+            )}
+          </div>
+
+          {/* 대표자명 입력 */}
+          <div className="space-y-2">
+            <Label htmlFor="representative_name">대표자명</Label>
+            <Input
+              id="representative_name"
+              value={formData.representative_name || ""}
+              onChange={(e) => onFormChange("representative_name", e.target.value)}
+              placeholder="대표자명을 입력하세요"
+              disabled={isLoading || isSaving}
+            />
+          </div>
+
+          {/* 대표 연락처 입력 */}
+          <div className="space-y-2">
+            <Label htmlFor="representative_phone">대표 연락처</Label>
+            <Input
+              id="representative_phone"
+              value={formData.representative_phone || ""}
+              onChange={(e) => onFormChange("representative_phone", e.target.value)}
+              placeholder="010-0000-0000"
+              disabled={isLoading || isSaving}
+              type="tel"
+            />
+          </div>
+
+          {/* 이메일 입력 */}
+          <div className="space-y-2">
+            <Label htmlFor="email">이메일</Label>
+            <Input
+              id="email"
+              value={formData.email || ""}
+              onChange={(e) => onFormChange("email", e.target.value)}
+              placeholder="company@example.com"
+              disabled={isLoading || isSaving}
+              type="email"
+            />
+          </div>
+
+          {/* 웹사이트 입력 */}
+          <div className="space-y-2">
+            <Label htmlFor="website">웹사이트</Label>
+            <Input
+              id="website"
+              value={formData.website || ""}
+              onChange={(e) => onFormChange("website", e.target.value)}
+              placeholder="https://example.com"
+              disabled={isLoading || isSaving}
+              type="url"
+            />
+          </div>
+
+          {/* 회사 주소 입력 */}
+          <div className="space-y-2">
+            <Label htmlFor="address">회사 주소</Label>
+            <Input
+              id="address"
+              value={formData.address || ""}
+              onChange={(e) => onFormChange("address", e.target.value)}
+              placeholder="서울특별시 강남구..."
+              disabled={isLoading || isSaving}
+            />
+          </div>
+
           {/* 에러 메시지 */}
           {error && (
-            <div className="bg-destructive/10 rounded-md p-3">
-              <p className="text-destructive text-sm">{error}</p>
+            <div className="rounded-md bg-destructive/10 p-3">
+              <p className="text-sm text-destructive">{error}</p>
             </div>
           )}
 
@@ -129,7 +243,13 @@ export function CompanyFormModal({
           </Button>
           <Button
             onClick={handleSave}
-            disabled={isLoading || isSaving || !formData.company_name.trim()}
+            disabled={
+              isLoading ||
+              isSaving ||
+              !formData.company_name.trim() ||
+              !formData.business_registration_number.trim() ||
+              !!businessNumberError
+            }
             className="min-w-[80px]"
           >
             {(isLoading || isSaving) && <LoadingSpinner className="mr-2 h-4 w-4" />}