diff --git a/resources/views/finance/corporate-cards.blade.php b/resources/views/finance/corporate-cards.blade.php index 5fba401e..d156c258 100644 --- a/resources/views/finance/corporate-cards.blade.php +++ b/resources/views/finance/corporate-cards.blade.php @@ -61,7 +61,10 @@ function CorporateCardsManagement() { paymentDay: 15, creditLimit: 10000000, currentUsage: 3500000, - holder: '김대표', + cardHolderName: '(주)코드브릿지', + actualUser: '김대표', + expiryDate: '28/12', + cvc: '123', status: 'active', memo: '일반 업무용' }, @@ -74,7 +77,10 @@ function CorporateCardsManagement() { paymentDay: 25, creditLimit: 5000000, currentUsage: 2100000, - holder: '박마케팅', + cardHolderName: '(주)코드브릿지', + actualUser: '박마케팅', + expiryDate: '27/06', + cvc: '456', status: 'active', memo: '마케팅/광고비 전용' }, @@ -87,7 +93,10 @@ function CorporateCardsManagement() { paymentDay: 0, creditLimit: 0, currentUsage: 850000, - holder: '이개발', + cardHolderName: '(주)코드브릿지', + actualUser: '이개발', + expiryDate: '29/03', + cvc: '789', status: 'active', memo: '개발 장비/소프트웨어 구매' }, @@ -100,7 +109,10 @@ function CorporateCardsManagement() { paymentDay: 10, creditLimit: 3000000, currentUsage: 0, - holder: '최관리', + cardHolderName: '(주)코드브릿지', + actualUser: '최관리', + expiryDate: '26/09', + cvc: '321', status: 'inactive', memo: '비상용' } @@ -120,7 +132,10 @@ function CorporateCardsManagement() { cardType: 'credit', paymentDay: 15, creditLimit: '', - holder: '', + cardHolderName: '', + actualUser: '', + expiryDate: '', + cvc: '', status: 'active', memo: '' }; @@ -158,7 +173,8 @@ function CorporateCardsManagement() { const filteredCards = cards.filter(card => { const matchesSearch = card.cardName.toLowerCase().includes(searchTerm.toLowerCase()) || card.cardCompany.toLowerCase().includes(searchTerm.toLowerCase()) || - card.holder.toLowerCase().includes(searchTerm.toLowerCase()); + card.actualUser.toLowerCase().includes(searchTerm.toLowerCase()) || + (card.cardHolderName && card.cardHolderName.toLowerCase().includes(searchTerm.toLowerCase())); const matchesStatus = filterStatus === 'all' || card.status === filterStatus; return matchesSearch && matchesStatus; }); @@ -181,7 +197,10 @@ function CorporateCardsManagement() { cardType: card.cardType, paymentDay: card.paymentDay, creditLimit: card.creditLimit, - holder: card.holder, + cardHolderName: card.cardHolderName || '', + actualUser: card.actualUser || '', + expiryDate: card.expiryDate || '', + cvc: card.cvc || '', status: card.status, memo: card.memo }); @@ -190,7 +209,7 @@ function CorporateCardsManagement() { // 카드 저장 const handleSaveCard = () => { - if (!formData.cardName || !formData.cardNumber || !formData.holder) { + if (!formData.cardName || !formData.cardNumber || !formData.cardHolderName || !formData.actualUser) { alert('필수 항목을 입력해주세요.'); return; } @@ -312,7 +331,7 @@ className="flex items-center gap-2 px-4 py-2 bg-violet-600 hover:bg-violet-700 t setSearchTerm(e.target.value)} className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-violet-500 focus:border-violet-500" @@ -380,8 +399,16 @@ className={`bg-white rounded-xl border-2 p-6 cursor-pointer transition-all hover
-

사용자

-

{card.holder}

+

이용자명

+

{card.cardHolderName || '-'}

+
+
+

실사용자

+

{card.actualUser}

+
+
+

유효기간

+

{card.expiryDate || '-'}

카드종류

@@ -487,28 +514,60 @@ className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus
-
- - setFormData(prev => ({ ...prev, cardNumber: e.target.value }))} - placeholder="1234-5678-9012-3456" - className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-violet-500 font-mono" - /> -
-
- + setFormData(prev => ({ ...prev, holder: e.target.value }))} - placeholder="카드 사용자명" + value={formData.cardNumber} + onChange={(e) => setFormData(prev => ({ ...prev, cardNumber: e.target.value }))} + placeholder="1234-5678-9012-3456" + className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-violet-500 font-mono" + /> +
+
+ + setFormData(prev => ({ ...prev, cardHolderName: e.target.value }))} + placeholder="카드 명의자 (법인명)" className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-violet-500" />
+
+ +
+
+ + { + let val = e.target.value.replace(/[^\d]/g, ''); + if (val.length > 4) val = val.slice(0, 4); + if (val.length >= 2) val = val.slice(0, 2) + '/' + val.slice(2); + setFormData(prev => ({ ...prev, expiryDate: val })); + }} + placeholder="YY/MM" + maxLength={5} + className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-violet-500 font-mono text-center" + /> +
+
+ + { + const val = e.target.value.replace(/[^\d]/g, '').slice(0, 3); + setFormData(prev => ({ ...prev, cvc: val })); + }} + placeholder="3자리" + maxLength={3} + className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-violet-500 font-mono text-center" + /> +
setFormData(prev => ({ ...prev, actualUser: e.target.value }))} + placeholder="실제 카드 사용자명" + className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-violet-500" + /> +
+ {formData.cardType === 'credit' && (