From 8538256edfc310956bc24281c19db656eb19bec7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Mon, 23 Feb 2026 17:01:24 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20[card]=20CardForm=20=EC=B4=88=EA=B8=B0?=
 =?UTF-8?q?=EA=B0=92=EC=97=90=20=EB=88=84=EB=9D=BD=EB=90=9C=20CardFormData?=
 =?UTF-8?q?=20=ED=95=84=EC=88=98=20=ED=95=84=EB=93=9C=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/hr/CardManagement/CardForm.tsx | 254 ++++++++++++++++++
 1 file changed, 254 insertions(+)
 create mode 100755 src/components/hr/CardManagement/CardForm.tsx

diff --git a/src/components/hr/CardManagement/CardForm.tsx b/src/components/hr/CardManagement/CardForm.tsx
new file mode 100755
index 00000000..c65f8860
--- /dev/null
+++ b/src/components/hr/CardManagement/CardForm.tsx
@@ -0,0 +1,254 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { PageLayout } from '@/components/organisms/PageLayout';
+import { PageHeader } from '@/components/organisms/PageHeader';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { CreditCard, ArrowLeft, Save } from 'lucide-react';
+import type { Card as CardType, CardFormData, CardCompany, CardStatus } from './types';
+import { CARD_COMPANIES, CARD_STATUS_LABELS } from './types';
+import { getActiveEmployees } from './actions';
+
+interface CardFormProps {
+  mode: 'create' | 'edit';
+  card?: CardType;
+  onSubmit: (data: CardFormData) => void;
+}
+
+export function CardForm({ mode, card, onSubmit }: CardFormProps) {
+  const router = useRouter();
+  const [formData, setFormData] = useState<CardFormData>({
+    cardCompany: '',
+    cardType: '',
+    cardNumber: '',
+    cardName: '',
+    alias: '',
+    expiryDate: '',
+    csv: '',
+    paymentDay: '',
+    pinPrefix: '',
+    totalLimit: 0,
+    usedAmount: 0,
+    remainingLimit: 0,
+    status: 'active',
+    userId: '',
+    memo: '',
+  });
+
+  // 직원 목록 상태
+  const [employees, setEmployees] = useState<Array<{ id: string; label: string }>>([]);
+  const [isLoadingEmployees, setIsLoadingEmployees] = useState(true);
+
+  // 직원 목록 로드
+  useEffect(() => {
+    const loadEmployees = async () => {
+      setIsLoadingEmployees(true);
+      const result = await getActiveEmployees();
+      if (result.success && result.data) {
+        setEmployees(result.data);
+      }
+      setIsLoadingEmployees(false);
+    };
+    loadEmployees();
+  }, []);
+
+  // 수정 모드일 때 기존 데이터 로드
+  useEffect(() => {
+    if (mode === 'edit' && card) {
+      setFormData({
+        cardCompany: card.cardCompany,
+        cardNumber: card.cardNumber,
+        cardName: card.cardName,
+        expiryDate: card.expiryDate,
+        pinPrefix: card.pinPrefix,
+        status: card.status,
+        userId: card.user?.id || '',
+      });
+    }
+  }, [mode, card]);
+
+  const handleBack = () => {
+    if (mode === 'edit' && card) {
+      router.push(`/ko/hr/card-management/${card.id}`);
+    } else {
+      router.push('/ko/hr/card-management');
+    }
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onSubmit(formData);
+  };
+
+  // 카드번호 포맷팅 (1234-1234-1234-1234)
+  const handleCardNumberChange = (value: string) => {
+    const digits = value.replace(/\D/g, '').slice(0, 16);
+    const parts = digits.match(/.{1,4}/g) || [];
+    const formatted = parts.join('-');
+    setFormData(prev => ({ ...prev, cardNumber: formatted }));
+  };
+
+  // 유효기간 포맷팅 (MMYY)
+  const handleExpiryDateChange = (value: string) => {
+    const digits = value.replace(/\D/g, '').slice(0, 4);
+    setFormData(prev => ({ ...prev, expiryDate: digits }));
+  };
+
+  // 비밀번호 앞 2자리
+  const handlePinPrefixChange = (value: string) => {
+    const digits = value.replace(/\D/g, '').slice(0, 2);
+    setFormData(prev => ({ ...prev, pinPrefix: digits }));
+  };
+
+  return (
+    <PageLayout>
+      <PageHeader
+        title={mode === 'create' ? '카드 등록' : '카드 수정'}
+        description={mode === 'create' ? '새로운 카드를 등록합니다' : '카드 정보를 수정합니다'}
+        icon={CreditCard}
+      />
+
+      <form onSubmit={handleSubmit} className="space-y-6">
+        {/* 기본 정보 */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">기본 정보</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="cardCompany">카드사</Label>
+                <Select
+                  value={formData.cardCompany}
+                  onValueChange={(value) => setFormData(prev => ({ ...prev, cardCompany: value as CardCompany }))}
+                >
+                  <SelectTrigger id="cardCompany">
+                    <SelectValue placeholder="카드사를 선택하세요" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {CARD_COMPANIES.map((company) => (
+                      <SelectItem key={company.value} value={company.value}>
+                        {company.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="cardNumber">카드번호</Label>
+                <Input
+                  id="cardNumber"
+                  value={formData.cardNumber}
+                  onChange={(e) => handleCardNumberChange(e.target.value)}
+                  placeholder="1234-1234-1234-1234"
+                  maxLength={19}
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="expiryDate">유효기간</Label>
+                <Input
+                  id="expiryDate"
+                  value={formData.expiryDate}
+                  onChange={(e) => handleExpiryDateChange(e.target.value)}
+                  placeholder="MMYY"
+                  maxLength={4}
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="pinPrefix">카드 비밀번호 앞 2자리</Label>
+                <Input
+                  id="pinPrefix"
+                  type="password"
+                  value={formData.pinPrefix}
+                  onChange={(e) => handlePinPrefixChange(e.target.value)}
+                  placeholder="**"
+                  maxLength={2}
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="cardName">카드명</Label>
+                <Input
+                  id="cardName"
+                  value={formData.cardName}
+                  onChange={(e) => setFormData(prev => ({ ...prev, cardName: e.target.value }))}
+                  placeholder="카드명을 입력해주세요"
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="status">상태</Label>
+                <Select
+                  value={formData.status}
+                  onValueChange={(value) => setFormData(prev => ({ ...prev, status: value as CardStatus }))}
+                >
+                  <SelectTrigger id="status">
+                    <SelectValue placeholder="상태 선택" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="active">{CARD_STATUS_LABELS.active}</SelectItem>
+                    <SelectItem value="suspended">{CARD_STATUS_LABELS.suspended}</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* 사용자 정보 */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">사용자 정보</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-2">
+              <Label htmlFor="userId">부서 / 이름 / 직책</Label>
+              <Select
+                value={formData.userId}
+                onValueChange={(value) => setFormData(prev => ({ ...prev, userId: value }))}
+                disabled={isLoadingEmployees}
+              >
+                <SelectTrigger id="userId">
+                  <SelectValue placeholder={isLoadingEmployees ? '직원 목록 로딩 중...' : '선택해서 해당 카드의 사용자로 설정'} />
+                </SelectTrigger>
+                <SelectContent>
+                  {employees.map((employee) => (
+                    <SelectItem key={employee.id} value={employee.id}>
+                      {employee.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* 버튼 영역 */}
+        <div className="flex items-center justify-between">
+          <Button type="button" variant="outline" onClick={handleBack}>
+            <ArrowLeft className="w-4 h-4 mr-2" />
+            취소
+          </Button>
+          <Button type="submit">
+            <Save className="w-4 h-4 mr-2" />
+            {mode === 'create' ? '등록' : '저장'}
+          </Button>
+        </div>
+      </form>
+    </PageLayout>
+  );
+}
\ No newline at end of file