Files
sam-react-prod/src/app/[locale]/(protected)/settings/accounts/[id]/page.tsx
유병철 7f39f3066f feat(WEB): 회계/설정/카드 관리 페이지 대규모 기능 추가 및 리팩토링
- 일반전표입력, 상품권관리, 세금계산서 발행/조회 신규 페이지 추가
- 바로빌 연동 설정 페이지 추가
- 카드관리/계좌관리 리스트 UniversalListPage 공통 구조로 전환
- 카드거래조회/은행거래조회 리팩토링 (모달 분리, 액션 확장)
- 계좌 상세 폼(AccountDetailForm) 신규 구현
- 카드 상세(CardDetail) 신규 구현 + CardNumberInput 적용
- DateRangeSelector, StatCards, IntegratedListTemplateV2 공통 컴포넌트 개선
- 레거시 파일 정리 (CardManagementUnified, cardConfig, _legacy 등)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-15 23:18:45 +09:00

76 lines
2.1 KiB
TypeScript

'use client';
/**
* 계좌 상세/수정 페이지 - AccountDetailForm 적용
*/
import { useEffect, useState } from 'react';
import { useParams, useSearchParams } from 'next/navigation';
import { AccountDetailForm } from '@/components/settings/AccountManagement/AccountDetailForm';
import {
getBankAccount,
updateBankAccount,
deleteBankAccount,
} from '@/components/settings/AccountManagement/actions';
import type { Account, AccountFormData } from '@/components/settings/AccountManagement/types';
export default function AccountDetailPage() {
const params = useParams();
const searchParams = useSearchParams();
const accountId = Number(params.id);
const [account, setAccount] = useState<Account | null>(null);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const urlMode = searchParams.get('mode');
const initialMode: 'view' | 'edit' = urlMode === 'edit' ? 'edit' : 'view';
useEffect(() => {
async function loadAccount() {
setIsLoading(true);
try {
const result = await getBankAccount(accountId);
if (result.success && result.data) {
setAccount(result.data);
} else {
setError(result.error || '계좌를 찾을 수 없습니다.');
}
} catch {
setError('계좌 조회 중 오류가 발생했습니다.');
} finally {
setIsLoading(false);
}
}
loadAccount();
}, [accountId]);
const handleSubmit = async (data: AccountFormData) => {
const result = await updateBankAccount(accountId, data);
return { success: result.success, error: result.error };
};
const handleDelete = async () => {
const result = await deleteBankAccount(accountId);
return { success: result.success, error: result.error };
};
if (error && !isLoading) {
return (
<div className="p-6">
<div className="text-center py-8 text-muted-foreground">{error}</div>
</div>
);
}
return (
<AccountDetailForm
mode={initialMode}
initialData={account || undefined}
isLoading={isLoading}
onSubmit={handleSubmit}
onDelete={handleDelete}
/>
);
}