Merge remote-tracking branch 'origin/master'
This commit is contained in:
@@ -0,0 +1,13 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { use } from 'react';
|
||||||
|
import CardTransactionDetailClient from '@/components/accounting/CardTransactionInquiry/CardTransactionDetailClient';
|
||||||
|
|
||||||
|
interface PageProps {
|
||||||
|
params: Promise<{ id: string }>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function CardTransactionEditPage({ params }: PageProps) {
|
||||||
|
const { id } = use(params);
|
||||||
|
return <CardTransactionDetailClient transactionId={id} initialMode="edit" />;
|
||||||
|
}
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { use } from 'react';
|
||||||
|
import CardTransactionDetailClient from '@/components/accounting/CardTransactionInquiry/CardTransactionDetailClient';
|
||||||
|
|
||||||
|
interface PageProps {
|
||||||
|
params: Promise<{ id: string }>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function CardTransactionDetailPage({ params }: PageProps) {
|
||||||
|
const { id } = use(params);
|
||||||
|
return <CardTransactionDetailClient transactionId={id} initialMode="view" />;
|
||||||
|
}
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import CardTransactionDetailClient from '@/components/accounting/CardTransactionInquiry/CardTransactionDetailClient';
|
||||||
|
|
||||||
|
export default function CardTransactionNewPage() {
|
||||||
|
return <CardTransactionDetailClient initialMode="create" />;
|
||||||
|
}
|
||||||
@@ -0,0 +1,124 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState, useCallback, useEffect } from 'react';
|
||||||
|
import { useRouter } from 'next/navigation';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
import { IntegratedDetailTemplate } from '@/components/templates/IntegratedDetailTemplate';
|
||||||
|
import type { DetailMode } from '@/components/templates/IntegratedDetailTemplate/types';
|
||||||
|
import { cardTransactionDetailConfig } from './cardTransactionDetailConfig';
|
||||||
|
import type { CardTransaction } from './types';
|
||||||
|
import {
|
||||||
|
getCardTransactionById,
|
||||||
|
createCardTransaction,
|
||||||
|
updateCardTransaction,
|
||||||
|
deleteCardTransaction,
|
||||||
|
} from './actions';
|
||||||
|
|
||||||
|
// ===== Props =====
|
||||||
|
interface CardTransactionDetailClientProps {
|
||||||
|
transactionId?: string;
|
||||||
|
initialMode?: DetailMode;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function CardTransactionDetailClient({
|
||||||
|
transactionId,
|
||||||
|
initialMode = 'view',
|
||||||
|
}: CardTransactionDetailClientProps) {
|
||||||
|
const router = useRouter();
|
||||||
|
const [mode, setMode] = useState<DetailMode>(initialMode);
|
||||||
|
const [transaction, setTransaction] = useState<CardTransaction | null>(null);
|
||||||
|
const [isLoading, setIsLoading] = useState(initialMode !== 'create');
|
||||||
|
|
||||||
|
// ===== 데이터 로드 =====
|
||||||
|
useEffect(() => {
|
||||||
|
const loadTransaction = async () => {
|
||||||
|
if (transactionId && initialMode !== 'create') {
|
||||||
|
setIsLoading(true);
|
||||||
|
const result = await getCardTransactionById(transactionId);
|
||||||
|
if (result.success && result.data) {
|
||||||
|
setTransaction(result.data);
|
||||||
|
} else {
|
||||||
|
toast.error(result.error || '카드 사용내역을 불러오는데 실패했습니다.');
|
||||||
|
}
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
loadTransaction();
|
||||||
|
}, [transactionId, initialMode]);
|
||||||
|
|
||||||
|
// ===== 저장/등록 핸들러 =====
|
||||||
|
const handleSubmit = useCallback(
|
||||||
|
async (formData: Record<string, unknown>): Promise<{ success: boolean; error?: string }> => {
|
||||||
|
const submitData = cardTransactionDetailConfig.transformSubmitData?.(formData) || formData;
|
||||||
|
|
||||||
|
if (!submitData.merchantName) {
|
||||||
|
toast.error('가맹점명을 입력해주세요.');
|
||||||
|
return { success: false, error: '가맹점명을 입력해주세요.' };
|
||||||
|
}
|
||||||
|
if (!submitData.amount || Number(submitData.amount) <= 0) {
|
||||||
|
toast.error('사용금액을 입력해주세요.');
|
||||||
|
return { success: false, error: '사용금액을 입력해주세요.' };
|
||||||
|
}
|
||||||
|
if (!submitData.usedAt) {
|
||||||
|
toast.error('사용일시를 선택해주세요.');
|
||||||
|
return { success: false, error: '사용일시를 선택해주세요.' };
|
||||||
|
}
|
||||||
|
|
||||||
|
const result =
|
||||||
|
mode === 'create'
|
||||||
|
? await createCardTransaction(submitData as Parameters<typeof createCardTransaction>[0])
|
||||||
|
: await updateCardTransaction(transactionId!, submitData as Parameters<typeof updateCardTransaction>[1]);
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
toast.success(mode === 'create' ? '카드 사용내역이 등록되었습니다.' : '카드 사용내역이 수정되었습니다.');
|
||||||
|
router.push('/ko/accounting/card-transactions');
|
||||||
|
return { success: true };
|
||||||
|
} else {
|
||||||
|
toast.error(result.error || '저장에 실패했습니다.');
|
||||||
|
return { success: false, error: result.error };
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[mode, transactionId, router]
|
||||||
|
);
|
||||||
|
|
||||||
|
// ===== 삭제 핸들러 =====
|
||||||
|
const handleDelete = useCallback(async (): Promise<{ success: boolean; error?: string }> => {
|
||||||
|
if (!transactionId) return { success: false, error: 'ID가 없습니다.' };
|
||||||
|
|
||||||
|
const result = await deleteCardTransaction(transactionId);
|
||||||
|
if (result.success) {
|
||||||
|
toast.success('카드 사용내역이 삭제되었습니다.');
|
||||||
|
router.push('/ko/accounting/card-transactions');
|
||||||
|
return { success: true };
|
||||||
|
} else {
|
||||||
|
toast.error(result.error || '삭제에 실패했습니다.');
|
||||||
|
return { success: false, error: result.error };
|
||||||
|
}
|
||||||
|
}, [transactionId, router]);
|
||||||
|
|
||||||
|
// ===== 모드 변경 핸들러 =====
|
||||||
|
const handleModeChange = useCallback(
|
||||||
|
(newMode: DetailMode) => {
|
||||||
|
if (newMode === 'edit' && transactionId) {
|
||||||
|
router.push(`/ko/accounting/card-transactions/${transactionId}/edit`);
|
||||||
|
} else {
|
||||||
|
setMode(newMode);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[transactionId, router]
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<IntegratedDetailTemplate
|
||||||
|
config={cardTransactionDetailConfig as Parameters<typeof IntegratedDetailTemplate>[0]['config']}
|
||||||
|
mode={mode}
|
||||||
|
initialData={transaction as unknown as Record<string, unknown> | undefined}
|
||||||
|
itemId={transactionId}
|
||||||
|
isLoading={isLoading}
|
||||||
|
onSubmit={handleSubmit}
|
||||||
|
onDelete={handleDelete}
|
||||||
|
onModeChange={handleModeChange}
|
||||||
|
buttonPosition="top"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -238,6 +238,220 @@ export async function getCardTransactionSummary(params?: {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ===== 카드 거래 단건 조회 =====
|
||||||
|
export async function getCardTransactionById(id: string): Promise<{
|
||||||
|
success: boolean;
|
||||||
|
data?: CardTransaction;
|
||||||
|
error?: string;
|
||||||
|
}> {
|
||||||
|
try {
|
||||||
|
const url = `${process.env.NEXT_PUBLIC_API_URL}/api/v1/card-transactions/${id}`;
|
||||||
|
const { response, error } = await serverFetch(url, { method: 'GET' });
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return { success: false, error: error.message };
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!response?.ok) {
|
||||||
|
return { success: false, error: `API 오류: ${response?.status}` };
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = await response.json();
|
||||||
|
|
||||||
|
if (!result.success) {
|
||||||
|
return { success: false, error: result.message || '조회에 실패했습니다.' };
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
success: true,
|
||||||
|
data: transformItem(result.data),
|
||||||
|
};
|
||||||
|
} catch (error) {
|
||||||
|
if (isNextRedirectError(error)) throw error;
|
||||||
|
console.error('[CardTransactionActions] getCardTransactionById error:', error);
|
||||||
|
return { success: false, error: '서버 오류가 발생했습니다.' };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ===== 카드 거래 등록 =====
|
||||||
|
export async function createCardTransaction(data: {
|
||||||
|
cardId?: number;
|
||||||
|
usedAt: string;
|
||||||
|
merchantName: string;
|
||||||
|
amount: number;
|
||||||
|
memo?: string;
|
||||||
|
usageType?: string;
|
||||||
|
}): Promise<{
|
||||||
|
success: boolean;
|
||||||
|
data?: CardTransaction;
|
||||||
|
error?: string;
|
||||||
|
}> {
|
||||||
|
try {
|
||||||
|
const url = `${process.env.NEXT_PUBLIC_API_URL}/api/v1/card-transactions`;
|
||||||
|
const { response, error } = await serverFetch(url, {
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify({
|
||||||
|
card_id: data.cardId,
|
||||||
|
used_at: data.usedAt,
|
||||||
|
merchant_name: data.merchantName,
|
||||||
|
amount: data.amount,
|
||||||
|
description: data.memo,
|
||||||
|
account_code: data.usageType,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return { success: false, error: error.message };
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!response?.ok) {
|
||||||
|
return { success: false, error: `API 오류: ${response?.status}` };
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = await response.json();
|
||||||
|
|
||||||
|
if (!result.success) {
|
||||||
|
return { success: false, error: result.message || '등록에 실패했습니다.' };
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
success: true,
|
||||||
|
data: transformItem(result.data),
|
||||||
|
};
|
||||||
|
} catch (error) {
|
||||||
|
if (isNextRedirectError(error)) throw error;
|
||||||
|
console.error('[CardTransactionActions] createCardTransaction error:', error);
|
||||||
|
return { success: false, error: '서버 오류가 발생했습니다.' };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ===== 카드 거래 수정 =====
|
||||||
|
export async function updateCardTransaction(
|
||||||
|
id: string,
|
||||||
|
data: {
|
||||||
|
usedAt?: string;
|
||||||
|
merchantName?: string;
|
||||||
|
amount?: number;
|
||||||
|
memo?: string;
|
||||||
|
usageType?: string;
|
||||||
|
}
|
||||||
|
): Promise<{
|
||||||
|
success: boolean;
|
||||||
|
data?: CardTransaction;
|
||||||
|
error?: string;
|
||||||
|
}> {
|
||||||
|
try {
|
||||||
|
const url = `${process.env.NEXT_PUBLIC_API_URL}/api/v1/card-transactions/${id}`;
|
||||||
|
const { response, error } = await serverFetch(url, {
|
||||||
|
method: 'PUT',
|
||||||
|
body: JSON.stringify({
|
||||||
|
used_at: data.usedAt,
|
||||||
|
merchant_name: data.merchantName,
|
||||||
|
amount: data.amount,
|
||||||
|
description: data.memo,
|
||||||
|
account_code: data.usageType,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return { success: false, error: error.message };
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!response?.ok) {
|
||||||
|
return { success: false, error: `API 오류: ${response?.status}` };
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = await response.json();
|
||||||
|
|
||||||
|
if (!result.success) {
|
||||||
|
return { success: false, error: result.message || '수정에 실패했습니다.' };
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
success: true,
|
||||||
|
data: transformItem(result.data),
|
||||||
|
};
|
||||||
|
} catch (error) {
|
||||||
|
if (isNextRedirectError(error)) throw error;
|
||||||
|
console.error('[CardTransactionActions] updateCardTransaction error:', error);
|
||||||
|
return { success: false, error: '서버 오류가 발생했습니다.' };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ===== 카드 거래 삭제 =====
|
||||||
|
export async function deleteCardTransaction(id: string): Promise<{
|
||||||
|
success: boolean;
|
||||||
|
error?: string;
|
||||||
|
}> {
|
||||||
|
try {
|
||||||
|
const url = `${process.env.NEXT_PUBLIC_API_URL}/api/v1/card-transactions/${id}`;
|
||||||
|
const { response, error } = await serverFetch(url, { method: 'DELETE' });
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return { success: false, error: error.message };
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!response?.ok) {
|
||||||
|
return { success: false, error: `API 오류: ${response?.status}` };
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = await response.json();
|
||||||
|
|
||||||
|
if (!result.success) {
|
||||||
|
return { success: false, error: result.message || '삭제에 실패했습니다.' };
|
||||||
|
}
|
||||||
|
|
||||||
|
return { success: true };
|
||||||
|
} catch (error) {
|
||||||
|
if (isNextRedirectError(error)) throw error;
|
||||||
|
console.error('[CardTransactionActions] deleteCardTransaction error:', error);
|
||||||
|
return { success: false, error: '서버 오류가 발생했습니다.' };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ===== 카드 목록 조회 (등록 폼용) =====
|
||||||
|
export async function getCardList(): Promise<{
|
||||||
|
success: boolean;
|
||||||
|
data: Array<{ id: number; name: string; cardNumber: string }>;
|
||||||
|
error?: string;
|
||||||
|
}> {
|
||||||
|
try {
|
||||||
|
const url = `${process.env.NEXT_PUBLIC_API_URL}/api/v1/cards`;
|
||||||
|
const { response, error } = await serverFetch(url, { method: 'GET' });
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return { success: false, data: [], error: error.message };
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!response?.ok) {
|
||||||
|
return { success: false, data: [], error: `API 오류: ${response?.status}` };
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = await response.json();
|
||||||
|
|
||||||
|
if (!result.success) {
|
||||||
|
return { success: false, data: [], error: result.message };
|
||||||
|
}
|
||||||
|
|
||||||
|
const cards = (result.data?.data || result.data || []).map((card: {
|
||||||
|
id: number;
|
||||||
|
card_name: string;
|
||||||
|
card_company: string;
|
||||||
|
card_number_last4: string;
|
||||||
|
}) => ({
|
||||||
|
id: card.id,
|
||||||
|
name: card.card_name,
|
||||||
|
cardNumber: `${card.card_company} ${card.card_number_last4}`,
|
||||||
|
}));
|
||||||
|
|
||||||
|
return { success: true, data: cards };
|
||||||
|
} catch (error) {
|
||||||
|
if (isNextRedirectError(error)) throw error;
|
||||||
|
console.error('[CardTransactionActions] getCardList error:', error);
|
||||||
|
return { success: false, data: [], error: '서버 오류가 발생했습니다.' };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// ===== 계정과목 일괄 수정 =====
|
// ===== 계정과목 일괄 수정 =====
|
||||||
export async function bulkUpdateAccountCode(
|
export async function bulkUpdateAccountCode(
|
||||||
ids: number[],
|
ids: number[],
|
||||||
|
|||||||
@@ -0,0 +1,125 @@
|
|||||||
|
import { CreditCard } from 'lucide-react';
|
||||||
|
import type { DetailConfig, FieldDefinition } from '@/components/templates/IntegratedDetailTemplate/types';
|
||||||
|
import type { CardTransaction } from './types';
|
||||||
|
import { USAGE_TYPE_OPTIONS } from './types';
|
||||||
|
import { getCardList } from './actions';
|
||||||
|
|
||||||
|
// ===== 필드 정의 =====
|
||||||
|
const fields: FieldDefinition[] = [
|
||||||
|
// 카드 선택 (create에서만 선택 가능)
|
||||||
|
{
|
||||||
|
key: 'cardId',
|
||||||
|
label: '카드',
|
||||||
|
type: 'select',
|
||||||
|
required: true,
|
||||||
|
placeholder: '카드를 선택해주세요',
|
||||||
|
fetchOptions: async () => {
|
||||||
|
const result = await getCardList();
|
||||||
|
if (result.success) {
|
||||||
|
return result.data.map((card) => ({
|
||||||
|
value: String(card.id),
|
||||||
|
label: `${card.name} (${card.cardNumber})`,
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
return [];
|
||||||
|
},
|
||||||
|
disabled: (mode) => mode === 'view',
|
||||||
|
},
|
||||||
|
// 사용일시
|
||||||
|
{
|
||||||
|
key: 'usedAt',
|
||||||
|
label: '사용일시',
|
||||||
|
type: 'datetime-local',
|
||||||
|
required: true,
|
||||||
|
placeholder: '사용일시를 선택해주세요',
|
||||||
|
disabled: (mode) => mode === 'view',
|
||||||
|
},
|
||||||
|
// 가맹점명
|
||||||
|
{
|
||||||
|
key: 'merchantName',
|
||||||
|
label: '가맹점명',
|
||||||
|
type: 'text',
|
||||||
|
required: true,
|
||||||
|
placeholder: '가맹점명을 입력해주세요',
|
||||||
|
disabled: (mode) => mode === 'view',
|
||||||
|
},
|
||||||
|
// 사용금액
|
||||||
|
{
|
||||||
|
key: 'amount',
|
||||||
|
label: '사용금액',
|
||||||
|
type: 'number',
|
||||||
|
required: true,
|
||||||
|
placeholder: '사용금액을 입력해주세요',
|
||||||
|
disabled: (mode) => mode === 'view',
|
||||||
|
},
|
||||||
|
// 적요
|
||||||
|
{
|
||||||
|
key: 'memo',
|
||||||
|
label: '적요',
|
||||||
|
type: 'text',
|
||||||
|
placeholder: '적요를 입력해주세요',
|
||||||
|
gridSpan: 2,
|
||||||
|
disabled: (mode) => mode === 'view',
|
||||||
|
},
|
||||||
|
// 사용유형
|
||||||
|
{
|
||||||
|
key: 'usageType',
|
||||||
|
label: '사용유형',
|
||||||
|
type: 'select',
|
||||||
|
placeholder: '선택',
|
||||||
|
options: USAGE_TYPE_OPTIONS.map((opt) => ({
|
||||||
|
value: opt.value,
|
||||||
|
label: opt.label,
|
||||||
|
})),
|
||||||
|
disabled: (mode) => mode === 'view',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
// ===== Config 정의 =====
|
||||||
|
export const cardTransactionDetailConfig: DetailConfig = {
|
||||||
|
title: '카드 사용내역',
|
||||||
|
description: '카드 사용 내역을 등록/수정합니다',
|
||||||
|
icon: CreditCard,
|
||||||
|
basePath: '/accounting/card-transactions',
|
||||||
|
fields,
|
||||||
|
gridColumns: 2,
|
||||||
|
actions: {
|
||||||
|
showBack: true,
|
||||||
|
showDelete: true,
|
||||||
|
showEdit: true,
|
||||||
|
backLabel: '목록',
|
||||||
|
deleteLabel: '삭제',
|
||||||
|
editLabel: '수정',
|
||||||
|
deleteConfirmMessage: {
|
||||||
|
title: '카드 사용내역 삭제',
|
||||||
|
description: '이 카드 사용내역을 삭제하시겠습니까? 삭제된 데이터는 복구할 수 없습니다.',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
transformInitialData: (data: Record<string, unknown>): Record<string, unknown> => {
|
||||||
|
const record = data as unknown as CardTransaction;
|
||||||
|
// usedAt을 datetime-local 형식으로 변환 (YYYY-MM-DDTHH:mm)
|
||||||
|
let usedAtFormatted = '';
|
||||||
|
if (record.usedAt) {
|
||||||
|
// "2025-01-22 14:30" 형식을 "2025-01-22T14:30" 형식으로 변환
|
||||||
|
usedAtFormatted = record.usedAt.replace(' ', 'T').slice(0, 16);
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
cardId: record.id ? '' : '', // 수정 시에는 카드 변경 불가
|
||||||
|
usedAt: usedAtFormatted,
|
||||||
|
merchantName: record.merchantName || '',
|
||||||
|
amount: record.amount || 0,
|
||||||
|
memo: record.memo || '',
|
||||||
|
usageType: record.usageType || 'unset',
|
||||||
|
};
|
||||||
|
},
|
||||||
|
transformSubmitData: (formData: Record<string, unknown>) => {
|
||||||
|
return {
|
||||||
|
cardId: formData.cardId ? Number(formData.cardId) : undefined,
|
||||||
|
usedAt: formData.usedAt as string,
|
||||||
|
merchantName: formData.merchantName as string,
|
||||||
|
amount: Number(formData.amount),
|
||||||
|
memo: formData.memo as string,
|
||||||
|
usageType: formData.usageType as string,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
@@ -15,8 +15,9 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import { useState, useMemo, useCallback, useEffect } from 'react';
|
import { useState, useMemo, useCallback, useEffect } from 'react';
|
||||||
|
import { useRouter } from 'next/navigation';
|
||||||
import { format, startOfMonth, endOfMonth } from 'date-fns';
|
import { format, startOfMonth, endOfMonth } from 'date-fns';
|
||||||
import { CreditCard, RefreshCw, Save, Loader2 } from 'lucide-react';
|
import { CreditCard, Plus, RefreshCw, Save, Loader2 } from 'lucide-react';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Checkbox } from '@/components/ui/checkbox';
|
import { Checkbox } from '@/components/ui/checkbox';
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
@@ -94,6 +95,8 @@ export function CardTransactionInquiry({
|
|||||||
initialSummary,
|
initialSummary,
|
||||||
initialPagination,
|
initialPagination,
|
||||||
}: CardTransactionInquiryProps) {
|
}: CardTransactionInquiryProps) {
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
// ===== 외부 상태 (UniversalListPage 외부에서 관리) =====
|
// ===== 외부 상태 (UniversalListPage 외부에서 관리) =====
|
||||||
const [data, setData] = useState<CardTransaction[]>(initialData);
|
const [data, setData] = useState<CardTransaction[]>(initialData);
|
||||||
const [summary, setSummary] = useState(
|
const [summary, setSummary] = useState(
|
||||||
@@ -377,6 +380,14 @@ export function CardTransactionInquiry({
|
|||||||
},
|
},
|
||||||
filterTitle: '카드 필터',
|
filterTitle: '카드 필터',
|
||||||
|
|
||||||
|
// 헤더 액션 (등록 버튼)
|
||||||
|
headerActions: () => (
|
||||||
|
<Button className="ml-auto" onClick={() => router.push('/ko/accounting/card-transactions/new')}>
|
||||||
|
<Plus className="w-4 h-4 mr-2" />
|
||||||
|
카드내역 등록
|
||||||
|
</Button>
|
||||||
|
),
|
||||||
|
|
||||||
// 커스텀 필터 함수
|
// 커스텀 필터 함수
|
||||||
customFilterFn: (items) => {
|
customFilterFn: (items) => {
|
||||||
if (cardFilter === 'all') return items;
|
if (cardFilter === 'all') return items;
|
||||||
@@ -580,6 +591,7 @@ export function CardTransactionInquiry({
|
|||||||
totalAmount,
|
totalAmount,
|
||||||
selectedAccountSubject,
|
selectedAccountSubject,
|
||||||
isLoading,
|
isLoading,
|
||||||
|
router,
|
||||||
handleRowClick,
|
handleRowClick,
|
||||||
handleRefresh,
|
handleRefresh,
|
||||||
handleSaveAccountSubject,
|
handleSaveAccountSubject,
|
||||||
|
|||||||
@@ -3,8 +3,8 @@
|
|||||||
import { useState, useCallback, useEffect, useMemo } from 'react';
|
import { useState, useCallback, useEffect, useMemo } from 'react';
|
||||||
import { useRouter } from 'next/navigation';
|
import { useRouter } from 'next/navigation';
|
||||||
import { LayoutDashboard, Settings } from 'lucide-react';
|
import { LayoutDashboard, Settings } from 'lucide-react';
|
||||||
import { ContentLoadingSpinner } from '@/components/ui/loading-spinner';
|
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { CEODashboardSkeleton } from './skeletons';
|
||||||
import { PageLayout } from '@/components/organisms/PageLayout';
|
import { PageLayout } from '@/components/organisms/PageLayout';
|
||||||
import { PageHeader } from '@/components/organisms/PageHeader';
|
import { PageHeader } from '@/components/organisms/PageHeader';
|
||||||
import {
|
import {
|
||||||
@@ -244,7 +244,7 @@ export function CEODashboard() {
|
|||||||
description="전체 현황을 조회합니다."
|
description="전체 현황을 조회합니다."
|
||||||
icon={LayoutDashboard}
|
icon={LayoutDashboard}
|
||||||
/>
|
/>
|
||||||
<ContentLoadingSpinner text="데이터를 불러오는 중..." />
|
<CEODashboardSkeleton />
|
||||||
</PageLayout>
|
</PageLayout>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
279
src/components/business/CEODashboard/skeletons/index.tsx
Normal file
279
src/components/business/CEODashboard/skeletons/index.tsx
Normal file
@@ -0,0 +1,279 @@
|
|||||||
|
/**
|
||||||
|
* CEODashboard Skeleton Components
|
||||||
|
*
|
||||||
|
* 대시보드 로딩 시 실제 레이아웃과 동일한 형태의 스켈레톤
|
||||||
|
*/
|
||||||
|
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { Card, CardContent } from '@/components/ui/card';
|
||||||
|
import { Skeleton } from '@/components/ui/skeleton';
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 1. 오늘의 이슈 섹션 스켈레톤
|
||||||
|
// ============================================
|
||||||
|
export function TodayIssueSectionSkeleton() {
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardContent className="p-6">
|
||||||
|
{/* 헤더 */}
|
||||||
|
<div className="flex items-center mb-4">
|
||||||
|
<Skeleton className="h-6 w-28" />
|
||||||
|
<Skeleton className="h-9 w-44 ml-auto" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 리스트 그리드 */}
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-3">
|
||||||
|
{Array.from({ length: 6 }).map((_, i) => (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
className="flex items-center gap-2 p-3 border border-gray-200 rounded-lg"
|
||||||
|
>
|
||||||
|
<Skeleton className="h-5 w-16 rounded-full" />
|
||||||
|
<Skeleton className="h-4 flex-1" />
|
||||||
|
<Skeleton className="h-4 w-12" />
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 2. 일일 일보 섹션 스켈레톤
|
||||||
|
// ============================================
|
||||||
|
export function DailyReportSectionSkeleton() {
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardContent className="p-6">
|
||||||
|
{/* 헤더 */}
|
||||||
|
<div className="flex items-center justify-between mb-4">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Skeleton className="h-6 w-20" />
|
||||||
|
<Skeleton className="h-5 w-12 rounded-full" />
|
||||||
|
</div>
|
||||||
|
<Skeleton className="h-4 w-24" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 4개 카드 그리드 */}
|
||||||
|
<div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-4 gap-3 xs:gap-4 mb-4">
|
||||||
|
{Array.from({ length: 4 }).map((_, i) => (
|
||||||
|
<div key={i} className="p-4 bg-gray-50 rounded-lg space-y-2">
|
||||||
|
<Skeleton className="h-4 w-16" />
|
||||||
|
<Skeleton className="h-7 w-24" />
|
||||||
|
<Skeleton className="h-3 w-20" />
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 체크포인트 */}
|
||||||
|
<div className="border-t pt-4 space-y-1">
|
||||||
|
{Array.from({ length: 2 }).map((_, i) => (
|
||||||
|
<Skeleton key={i} className="h-4 w-full max-w-md" />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 3. 현황판 섹션 스켈레톤
|
||||||
|
// ============================================
|
||||||
|
export function StatusBoardSectionSkeleton() {
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardContent className="p-6">
|
||||||
|
{/* 섹션 타이틀 */}
|
||||||
|
<div className="flex items-center gap-2 mb-4">
|
||||||
|
<Skeleton className="h-6 w-16" />
|
||||||
|
<Skeleton className="h-5 w-12 rounded-full" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 카드 그리드 */}
|
||||||
|
<div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-4 gap-3">
|
||||||
|
{Array.from({ length: 8 }).map((_, i) => (
|
||||||
|
<div key={i} className="p-4 border rounded-lg space-y-2">
|
||||||
|
<Skeleton className="h-4 w-16" />
|
||||||
|
<Skeleton className="h-8 w-12" />
|
||||||
|
<Skeleton className="h-3 w-20" />
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 4. 당월 예상 지출 섹션 스켈레톤
|
||||||
|
// ============================================
|
||||||
|
export function MonthlyExpenseSectionSkeleton() {
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardContent className="p-6">
|
||||||
|
{/* 헤더 */}
|
||||||
|
<div className="flex items-center gap-2 mb-4">
|
||||||
|
<Skeleton className="h-6 w-32" />
|
||||||
|
<Skeleton className="h-5 w-12 rounded-full" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 카드 그리드 */}
|
||||||
|
<div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
||||||
|
{Array.from({ length: 4 }).map((_, i) => (
|
||||||
|
<div key={i} className="p-4 bg-gray-50 rounded-lg space-y-3">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Skeleton className="h-8 w-8 rounded" />
|
||||||
|
<Skeleton className="h-4 w-20" />
|
||||||
|
</div>
|
||||||
|
<Skeleton className="h-7 w-28" />
|
||||||
|
<Skeleton className="h-3 w-16" />
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 5. 카드/가지급금 관리 섹션 스켈레톤
|
||||||
|
// ============================================
|
||||||
|
export function CardManagementSectionSkeleton() {
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardContent className="p-6">
|
||||||
|
{/* 헤더 */}
|
||||||
|
<div className="flex items-center gap-2 mb-4">
|
||||||
|
<Skeleton className="h-6 w-36" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 카드 그리드 */}
|
||||||
|
<div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 gap-4">
|
||||||
|
{Array.from({ length: 3 }).map((_, i) => (
|
||||||
|
<div key={i} className="p-4 border rounded-lg space-y-3">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<Skeleton className="h-4 w-20" />
|
||||||
|
<Skeleton className="h-6 w-6 rounded" />
|
||||||
|
</div>
|
||||||
|
<Skeleton className="h-7 w-32" />
|
||||||
|
<Skeleton className="h-3 w-24" />
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 6. 미수금/채권추심/접대비/복리후생비 공통 스켈레톤
|
||||||
|
// ============================================
|
||||||
|
export function AmountSectionSkeleton({ cardCount = 4 }: { cardCount?: number }) {
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardContent className="p-6">
|
||||||
|
{/* 헤더 */}
|
||||||
|
<div className="flex items-center gap-2 mb-4">
|
||||||
|
<Skeleton className="h-6 w-24" />
|
||||||
|
<Skeleton className="h-5 w-12 rounded-full" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 카드 그리드 */}
|
||||||
|
<div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-4 gap-4">
|
||||||
|
{Array.from({ length: cardCount }).map((_, i) => (
|
||||||
|
<div key={i} className="p-4 bg-gray-50 rounded-lg space-y-2">
|
||||||
|
<Skeleton className="h-4 w-16" />
|
||||||
|
<Skeleton className="h-7 w-24" />
|
||||||
|
<Skeleton className="h-3 w-20" />
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 7. 캘린더 섹션 스켈레톤
|
||||||
|
// ============================================
|
||||||
|
export function CalendarSectionSkeleton() {
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardContent className="p-6">
|
||||||
|
{/* 헤더 */}
|
||||||
|
<div className="flex items-center justify-between mb-4">
|
||||||
|
<Skeleton className="h-6 w-16" />
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Skeleton className="h-8 w-8 rounded" />
|
||||||
|
<Skeleton className="h-5 w-24" />
|
||||||
|
<Skeleton className="h-8 w-8 rounded" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 캘린더 그리드 */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
{/* 요일 헤더 */}
|
||||||
|
<div className="grid grid-cols-7 gap-1">
|
||||||
|
{Array.from({ length: 7 }).map((_, i) => (
|
||||||
|
<Skeleton key={i} className="h-8 w-full" />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
{/* 날짜 그리드 */}
|
||||||
|
{Array.from({ length: 5 }).map((_, row) => (
|
||||||
|
<div key={row} className="grid grid-cols-7 gap-1">
|
||||||
|
{Array.from({ length: 7 }).map((_, col) => (
|
||||||
|
<Skeleton key={col} className="h-20 w-full" />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 8. 전체 대시보드 스켈레톤
|
||||||
|
// ============================================
|
||||||
|
export function CEODashboardSkeleton() {
|
||||||
|
return (
|
||||||
|
<div className="space-y-6 animate-pulse">
|
||||||
|
{/* 오늘의 이슈 */}
|
||||||
|
<TodayIssueSectionSkeleton />
|
||||||
|
|
||||||
|
{/* 일일 일보 */}
|
||||||
|
<DailyReportSectionSkeleton />
|
||||||
|
|
||||||
|
{/* 현황판 */}
|
||||||
|
<StatusBoardSectionSkeleton />
|
||||||
|
|
||||||
|
{/* 당월 예상 지출 */}
|
||||||
|
<MonthlyExpenseSectionSkeleton />
|
||||||
|
|
||||||
|
{/* 카드/가지급금 관리 */}
|
||||||
|
<CardManagementSectionSkeleton />
|
||||||
|
|
||||||
|
{/* 접대비 현황 */}
|
||||||
|
<AmountSectionSkeleton cardCount={4} />
|
||||||
|
|
||||||
|
{/* 복리후생비 현황 */}
|
||||||
|
<AmountSectionSkeleton cardCount={4} />
|
||||||
|
|
||||||
|
{/* 미수금 현황 */}
|
||||||
|
<AmountSectionSkeleton cardCount={4} />
|
||||||
|
|
||||||
|
{/* 채권추심 현황 */}
|
||||||
|
<AmountSectionSkeleton cardCount={3} />
|
||||||
|
|
||||||
|
{/* 부가세 현황 */}
|
||||||
|
<AmountSectionSkeleton cardCount={2} />
|
||||||
|
|
||||||
|
{/* 캘린더 */}
|
||||||
|
<CalendarSectionSkeleton />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CEODashboardSkeleton;
|
||||||
Reference in New Issue
Block a user