a938da9e22
- 회계: 거래처, 매입/매출, 입출금 상세 페이지 개선 - HR: 직원 관리 및 출퇴근 설정 기능 수정 - 주문관리: 상세폼 구조 분리 (cards, dialogs, hooks, tables) - 알림설정: 컴포넌트 구조 단순화 및 리팩토링 - 캘린더: 헤더 및 일정 타입 개선 - 출고관리: 액션 및 타입 정의 추가 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
891 lines
31 KiB
TypeScript
891 lines
31 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useCallback, useMemo, useRef, useEffect } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { Building2, Plus, X, Loader2, Upload, FileText, Image as ImageIcon, Download, List } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Textarea } from '@/components/ui/textarea';
|
|
import { Switch } from '@/components/ui/switch';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/components/ui/select';
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
} from '@/components/ui/alert-dialog';
|
|
import { PageLayout } from '@/components/organisms/PageLayout';
|
|
import { PageHeader } from '@/components/organisms/PageHeader';
|
|
import { useDaumPostcode } from '@/hooks/useDaumPostcode';
|
|
import { toast } from 'sonner';
|
|
import type { Partner, PartnerFormData, PartnerMemo, PartnerDocument } from './types';
|
|
import {
|
|
PARTNER_TYPE_OPTIONS,
|
|
CATEGORY_OPTIONS,
|
|
CREDIT_RATING_OPTIONS,
|
|
TRANSACTION_GRADE_OPTIONS,
|
|
PAYMENT_DAY_OPTIONS,
|
|
getEmptyPartnerFormData,
|
|
partnerToFormData,
|
|
} from './types';
|
|
|
|
// 목업 문서 목록 (상세 모드에서 다운로드 버튼 테스트용)
|
|
const MOCK_DOCUMENTS: PartnerDocument[] = [
|
|
{
|
|
id: '1',
|
|
fileName: '사업자등록증.pdf',
|
|
fileUrl: '#',
|
|
fileSize: 1024000, // 1MB
|
|
uploadedAt: '2024-12-15T10:00:00',
|
|
},
|
|
{
|
|
id: '2',
|
|
fileName: '통장사본.jpg',
|
|
fileUrl: '#',
|
|
fileSize: 512000, // 500KB
|
|
uploadedAt: '2024-12-16T14:30:00',
|
|
},
|
|
{
|
|
id: '3',
|
|
fileName: '인감증명서.pdf',
|
|
fileUrl: '#',
|
|
fileSize: 768000, // 750KB
|
|
uploadedAt: '2024-12-18T09:00:00',
|
|
},
|
|
];
|
|
|
|
interface PartnerFormProps {
|
|
mode: 'view' | 'edit' | 'new';
|
|
partnerId?: string;
|
|
initialData?: Partner;
|
|
}
|
|
|
|
export default function PartnerForm({ mode, partnerId, initialData }: PartnerFormProps) {
|
|
const router = useRouter();
|
|
const isViewMode = mode === 'view';
|
|
const isNewMode = mode === 'new';
|
|
const isEditMode = mode === 'edit';
|
|
|
|
// 폼 데이터
|
|
const [formData, setFormData] = useState<PartnerFormData>(
|
|
initialData ? partnerToFormData(initialData) : getEmptyPartnerFormData()
|
|
);
|
|
|
|
// 로딩 상태
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
// 다이얼로그 상태
|
|
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
|
|
const [showSaveDialog, setShowSaveDialog] = useState(false);
|
|
|
|
// 새 메모 입력
|
|
const [newMemo, setNewMemo] = useState('');
|
|
|
|
// 파일 업로드 ref
|
|
const logoInputRef = useRef<HTMLInputElement>(null);
|
|
const documentInputRef = useRef<HTMLInputElement>(null);
|
|
|
|
// 드래그 상태
|
|
const [isDragging, setIsDragging] = useState(false);
|
|
|
|
// 상세/수정 모드에서 목데이터 초기화
|
|
useEffect(() => {
|
|
if (initialData) {
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
// 문서 목데이터
|
|
documents: prev.documents.length === 0 ? MOCK_DOCUMENTS : prev.documents,
|
|
// 회사 로고 목데이터
|
|
logoUrl: prev.logoUrl || prev.logoBlob ? prev.logoUrl : 'https://placehold.co/750x250/f97316/white?text=Company+Logo',
|
|
}));
|
|
}
|
|
}, [initialData]);
|
|
|
|
// Daum 우편번호 서비스
|
|
const { openPostcode } = useDaumPostcode({
|
|
onComplete: (result) => {
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
zipCode: result.zonecode,
|
|
address1: result.address,
|
|
}));
|
|
},
|
|
});
|
|
|
|
// 필드 변경 핸들러
|
|
const handleChange = useCallback((field: keyof PartnerFormData, value: unknown) => {
|
|
setFormData((prev) => ({ ...prev, [field]: value }));
|
|
}, []);
|
|
|
|
// 네비게이션 핸들러
|
|
const handleBack = useCallback(() => {
|
|
router.push('/ko/juil/project/bidding/partners');
|
|
}, [router]);
|
|
|
|
const handleEdit = useCallback(() => {
|
|
router.push(`/ko/juil/project/bidding/partners/${partnerId}/edit`);
|
|
}, [router, partnerId]);
|
|
|
|
const handleCancel = useCallback(() => {
|
|
if (isNewMode) {
|
|
router.push('/ko/juil/project/bidding/partners');
|
|
} else {
|
|
router.push(`/ko/juil/project/bidding/partners/${partnerId}`);
|
|
}
|
|
}, [router, partnerId, isNewMode]);
|
|
|
|
// 저장 핸들러
|
|
const handleSave = useCallback(() => {
|
|
if (!formData.partnerName.trim()) {
|
|
toast.error('거래처명을 입력해주세요.');
|
|
return;
|
|
}
|
|
setShowSaveDialog(true);
|
|
}, [formData.partnerName]);
|
|
|
|
const handleConfirmSave = useCallback(async () => {
|
|
setIsLoading(true);
|
|
try {
|
|
// TODO: 실제 API 연동
|
|
await new Promise((resolve) => setTimeout(resolve, 1000));
|
|
toast.success(isNewMode ? '거래처가 등록되었습니다.' : '수정이 완료되었습니다.');
|
|
setShowSaveDialog(false);
|
|
router.push('/ko/juil/project/bidding/partners');
|
|
router.refresh();
|
|
} catch (error) {
|
|
toast.error(error instanceof Error ? error.message : '저장에 실패했습니다.');
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
}, [isNewMode, router]);
|
|
|
|
// 삭제 핸들러
|
|
const handleDelete = useCallback(() => {
|
|
setShowDeleteDialog(true);
|
|
}, []);
|
|
|
|
const handleConfirmDelete = useCallback(async () => {
|
|
setIsLoading(true);
|
|
try {
|
|
// TODO: 실제 API 연동
|
|
await new Promise((resolve) => setTimeout(resolve, 1000));
|
|
toast.success('거래처가 삭제되었습니다.');
|
|
setShowDeleteDialog(false);
|
|
router.push('/ko/juil/project/bidding/partners');
|
|
router.refresh();
|
|
} catch (error) {
|
|
toast.error(error instanceof Error ? error.message : '삭제에 실패했습니다.');
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
}, [router]);
|
|
|
|
// 메모 추가 핸들러
|
|
const handleAddMemo = useCallback(() => {
|
|
if (!newMemo.trim()) return;
|
|
const now = new Date();
|
|
const dateStr = now.toISOString().slice(0, 10);
|
|
const timeStr = now.toTimeString().slice(0, 5);
|
|
const memo: PartnerMemo = {
|
|
id: String(Date.now()),
|
|
content: `${dateStr} ${timeStr} [사용자] ${newMemo}`,
|
|
createdAt: now.toISOString(),
|
|
};
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
memos: [...prev.memos, memo],
|
|
}));
|
|
setNewMemo('');
|
|
}, [newMemo]);
|
|
|
|
// 메모 삭제 핸들러
|
|
const handleDeleteMemo = useCallback((memoId: string) => {
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
memos: prev.memos.filter((m) => m.id !== memoId),
|
|
}));
|
|
}, []);
|
|
|
|
// 로고 업로드 핸들러
|
|
const handleLogoUpload = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = e.target.files?.[0];
|
|
if (!file) return;
|
|
|
|
// 파일 크기 검증 (10MB)
|
|
if (file.size > 10 * 1024 * 1024) {
|
|
toast.error('파일 크기는 10MB 이하여야 합니다.');
|
|
return;
|
|
}
|
|
|
|
// 파일 타입 검증
|
|
if (!['image/png', 'image/jpeg', 'image/gif'].includes(file.type)) {
|
|
toast.error('PNG, JPEG, GIF 파일만 업로드 가능합니다.');
|
|
return;
|
|
}
|
|
|
|
// BLOB으로 변환
|
|
const reader = new FileReader();
|
|
reader.onload = () => {
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
logoBlob: reader.result as string,
|
|
logoUrl: null,
|
|
}));
|
|
};
|
|
reader.readAsDataURL(file);
|
|
}, []);
|
|
|
|
// 로고 삭제 핸들러
|
|
const handleLogoRemove = useCallback(() => {
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
logoBlob: null,
|
|
logoUrl: null,
|
|
}));
|
|
if (logoInputRef.current) {
|
|
logoInputRef.current.value = '';
|
|
}
|
|
}, []);
|
|
|
|
// 문서 업로드 핸들러
|
|
const handleDocumentUpload = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = e.target.files?.[0];
|
|
if (!file) return;
|
|
|
|
// 파일 크기 검증 (10MB)
|
|
if (file.size > 10 * 1024 * 1024) {
|
|
toast.error('파일 크기는 10MB 이하여야 합니다.');
|
|
return;
|
|
}
|
|
|
|
const doc: PartnerDocument = {
|
|
id: String(Date.now()),
|
|
fileName: file.name,
|
|
fileUrl: URL.createObjectURL(file),
|
|
fileSize: file.size,
|
|
uploadedAt: new Date().toISOString(),
|
|
};
|
|
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
documents: [...prev.documents, doc],
|
|
}));
|
|
|
|
if (documentInputRef.current) {
|
|
documentInputRef.current.value = '';
|
|
}
|
|
}, []);
|
|
|
|
// 문서 삭제 핸들러
|
|
const handleDocumentRemove = useCallback((docId: string) => {
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
documents: prev.documents.filter((d) => d.id !== docId),
|
|
}));
|
|
}, []);
|
|
|
|
// 드래그앤드롭 핸들러
|
|
const handleDragOver = useCallback((e: React.DragEvent<HTMLDivElement>) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (!isViewMode) {
|
|
setIsDragging(true);
|
|
}
|
|
}, [isViewMode]);
|
|
|
|
const handleDragLeave = useCallback((e: React.DragEvent<HTMLDivElement>) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
setIsDragging(false);
|
|
}, []);
|
|
|
|
const handleDrop = useCallback((e: React.DragEvent<HTMLDivElement>) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
setIsDragging(false);
|
|
|
|
if (isViewMode) return;
|
|
|
|
const files = Array.from(e.dataTransfer.files);
|
|
files.forEach((file) => {
|
|
// 파일 크기 검증 (10MB)
|
|
if (file.size > 10 * 1024 * 1024) {
|
|
toast.error(`${file.name}: 파일 크기는 10MB 이하여야 합니다.`);
|
|
return;
|
|
}
|
|
|
|
const doc: PartnerDocument = {
|
|
id: String(Date.now() + Math.random()),
|
|
fileName: file.name,
|
|
fileUrl: URL.createObjectURL(file),
|
|
fileSize: file.size,
|
|
uploadedAt: new Date().toISOString(),
|
|
};
|
|
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
documents: [...prev.documents, doc],
|
|
}));
|
|
});
|
|
}, [isViewMode]);
|
|
|
|
// 타이틀 및 설명
|
|
const pageTitle = useMemo(() => {
|
|
if (isNewMode) return '거래처 등록';
|
|
if (isEditMode) return '거래처 수정';
|
|
return '거래처 상세';
|
|
}, [isNewMode, isEditMode]);
|
|
|
|
const pageDescription = useMemo(() => {
|
|
if (isNewMode) return '새로운 거래처를 등록합니다';
|
|
if (isEditMode) return '거래처 정보를 수정합니다';
|
|
return '거래처 상세 정보 및 신용등급을 관리합니다';
|
|
}, [isNewMode, isEditMode]);
|
|
|
|
// 헤더 버튼
|
|
const headerActions = useMemo(() => {
|
|
if (isViewMode) {
|
|
return (
|
|
<div className="flex gap-2">
|
|
<Button variant="outline" onClick={handleBack}>
|
|
<List className="h-4 w-4 mr-2" />
|
|
목록
|
|
</Button>
|
|
ㅇ <Button onClick={handleEdit} className="bg-blue-500 hover:bg-blue-600">
|
|
수정
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
if (isEditMode) {
|
|
return (
|
|
<div className="flex gap-2">
|
|
<Button variant="outline" onClick={handleBack}>
|
|
<List className="h-4 w-4 mr-2" />
|
|
목록
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
className="text-red-500 border-red-200 hover:bg-red-50"
|
|
onClick={handleDelete}
|
|
>
|
|
삭제
|
|
</Button>
|
|
<Button onClick={handleSave} className="bg-blue-500 hover:bg-blue-600" disabled={isLoading}>
|
|
{isLoading && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
|
|
저장
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
// 등록 모드
|
|
return (
|
|
<div className="flex gap-2">
|
|
<Button variant="outline" onClick={handleCancel}>
|
|
취소
|
|
</Button>
|
|
<Button onClick={handleSave} className="bg-blue-500 hover:bg-blue-600" disabled={isLoading}>
|
|
{isLoading && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
|
|
저장
|
|
</Button>
|
|
</div>
|
|
);
|
|
}, [isViewMode, isEditMode, isLoading, handleBack, handleEdit, handleDelete, handleCancel, handleSave]);
|
|
|
|
// 입력 필드 렌더링 헬퍼
|
|
const renderField = (
|
|
label: string,
|
|
field: keyof PartnerFormData,
|
|
value: string | number,
|
|
options?: {
|
|
required?: boolean;
|
|
type?: 'text' | 'tel' | 'email' | 'number';
|
|
placeholder?: string;
|
|
disabled?: boolean;
|
|
}
|
|
) => {
|
|
const { required, type = 'text', placeholder, disabled } = options || {};
|
|
return (
|
|
<div className="space-y-2">
|
|
<Label className="text-sm font-medium text-gray-700">
|
|
{label} {required && <span className="text-red-500">*</span>}
|
|
</Label>
|
|
<Input
|
|
type={type}
|
|
value={value}
|
|
onChange={(e) =>
|
|
handleChange(field, type === 'number' ? Number(e.target.value) : e.target.value)
|
|
}
|
|
placeholder={placeholder}
|
|
disabled={isViewMode || disabled}
|
|
className="bg-white"
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// 셀렉트 필드 렌더링 헬퍼
|
|
const renderSelectField = (
|
|
label: string,
|
|
field: keyof PartnerFormData,
|
|
value: string,
|
|
options: { value: string; label: string }[],
|
|
required?: boolean
|
|
) => {
|
|
return (
|
|
<div className="space-y-2">
|
|
<Label className="text-sm font-medium text-gray-700">
|
|
{label} {required && <span className="text-red-500">*</span>}
|
|
</Label>
|
|
<Select value={value} onValueChange={(val) => handleChange(field, val)} disabled={isViewMode}>
|
|
<SelectTrigger className="bg-white">
|
|
<SelectValue placeholder="선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{options.map((option) => (
|
|
<SelectItem key={option.value} value={option.value}>
|
|
{option.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<PageLayout>
|
|
<PageHeader
|
|
title={pageTitle}
|
|
description={pageDescription}
|
|
icon={Building2}
|
|
actions={headerActions}
|
|
onBack={handleBack}
|
|
/>
|
|
|
|
<div className="space-y-6">
|
|
{/* 기본 정보 */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-lg">기본 정보 *</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{renderField('사업자등록번호', 'businessNumber', formData.businessNumber, {
|
|
placeholder: '000-00-00000',
|
|
})}
|
|
{renderField('거래처 코드', 'partnerCode', formData.partnerCode || '', {
|
|
placeholder: '자동생성',
|
|
disabled: true,
|
|
})}
|
|
{renderField('거래처명', 'partnerName', formData.partnerName, { required: true })}
|
|
{renderField('대표자명', 'representative', formData.representative)}
|
|
{renderSelectField('거래처 유형', 'partnerType', formData.partnerType, PARTNER_TYPE_OPTIONS)}
|
|
{renderField('업태', 'businessType', formData.businessType)}
|
|
{renderSelectField('업종', 'category', formData.category, CATEGORY_OPTIONS)}
|
|
{renderField('업종(직접입력)', 'businessCategory', formData.businessCategory)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* 연락처 정보 */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-lg">연락처 정보</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
{/* 주소 */}
|
|
<div className="space-y-2">
|
|
<Label className="text-sm font-medium text-gray-700">주소</Label>
|
|
<div className="flex gap-2">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
disabled={isViewMode}
|
|
className="shrink-0"
|
|
onClick={() => openPostcode()}
|
|
>
|
|
우편번호 찾기
|
|
</Button>
|
|
<Input
|
|
value={formData.zipCode}
|
|
onChange={(e) => handleChange('zipCode', e.target.value)}
|
|
placeholder="우편번호"
|
|
disabled
|
|
className="w-[120px] bg-gray-50"
|
|
/>
|
|
<Input
|
|
value={formData.address1}
|
|
onChange={(e) => handleChange('address1', e.target.value)}
|
|
placeholder="기본주소"
|
|
disabled
|
|
className="flex-1 bg-gray-50"
|
|
/>
|
|
</div>
|
|
<Input
|
|
value={formData.address2}
|
|
onChange={(e) => handleChange('address2', e.target.value)}
|
|
placeholder="상세주소"
|
|
disabled={isViewMode}
|
|
className="bg-white"
|
|
/>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{renderField('전화번호', 'phone', formData.phone, {
|
|
type: 'tel',
|
|
placeholder: '02-0000-0000',
|
|
})}
|
|
{renderField('모바일', 'mobile', formData.mobile, {
|
|
type: 'tel',
|
|
placeholder: '010-0000-0000',
|
|
})}
|
|
{renderField('팩스', 'fax', formData.fax, {
|
|
type: 'tel',
|
|
placeholder: '02-0000-0000',
|
|
})}
|
|
{renderField('이메일', 'email', formData.email, { type: 'email' })}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* 담당자 정보 */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-lg">담당자 정보</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{renderField('담당자명', 'manager', formData.manager)}
|
|
{renderField('담당자 전화', 'managerPhone', formData.managerPhone, { type: 'tel' })}
|
|
<div className="md:col-span-2">
|
|
{renderField('시스템 관리자', 'systemManager', formData.systemManager)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* 회사 정보 */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-lg">회사 정보</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
{/* 회사 로고 */}
|
|
<div className="space-y-2">
|
|
<Label className="text-sm font-medium text-gray-700">회사 로고</Label>
|
|
<input
|
|
ref={logoInputRef}
|
|
type="file"
|
|
accept="image/png,image/jpeg,image/gif"
|
|
onChange={handleLogoUpload}
|
|
className="hidden"
|
|
/>
|
|
<div
|
|
className={`border-2 border-dashed rounded-lg p-6 text-center transition-colors ${
|
|
isViewMode ? 'bg-gray-50' : 'hover:border-primary/50 cursor-pointer'
|
|
}`}
|
|
onClick={() => !isViewMode && logoInputRef.current?.click()}
|
|
>
|
|
{formData.logoBlob || formData.logoUrl ? (
|
|
<div className="flex items-center justify-center gap-4">
|
|
<img
|
|
src={formData.logoBlob || formData.logoUrl || ''}
|
|
alt="회사 로고"
|
|
className="max-h-[100px] max-w-[300px] object-contain"
|
|
/>
|
|
{!isViewMode && (
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
handleLogoRemove();
|
|
}}
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<>
|
|
<ImageIcon className="w-12 h-12 text-gray-400 mx-auto mb-2" />
|
|
<p className="text-sm text-gray-500">750 X 250px, 10MB 이하의 PNG, JPEG, GIF</p>
|
|
{!isViewMode && (
|
|
<Button type="button" variant="outline" className="mt-2">
|
|
이미지 업로드
|
|
</Button>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{renderSelectField(
|
|
'매출 결제일',
|
|
'salesPaymentDay',
|
|
String(formData.salesPaymentDay || 15),
|
|
PAYMENT_DAY_OPTIONS
|
|
)}
|
|
{renderSelectField('신용등급', 'creditRating', formData.creditRating, CREDIT_RATING_OPTIONS)}
|
|
{renderSelectField(
|
|
'거래등급',
|
|
'transactionGrade',
|
|
formData.transactionGrade,
|
|
TRANSACTION_GRADE_OPTIONS
|
|
)}
|
|
{renderField('세금계산서 이메일', 'taxInvoiceEmail', formData.taxInvoiceEmail, {
|
|
type: 'email',
|
|
})}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* 추가 정보 */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-lg">추가 정보</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{/* 미수금 */}
|
|
<div className="space-y-2">
|
|
<Label className="text-sm font-medium text-gray-700">미수금</Label>
|
|
<Input
|
|
type="text"
|
|
value={formData.outstandingAmount?.toLocaleString() + '원'}
|
|
disabled
|
|
className="bg-gray-50"
|
|
/>
|
|
</div>
|
|
{/* 연체 */}
|
|
<div className="space-y-2">
|
|
<Label className="text-sm font-medium text-gray-700">연체</Label>
|
|
<div className="flex items-center gap-4">
|
|
<Input
|
|
type="text"
|
|
value={formData.overdueDays ? `${formData.overdueDays}일` : '-'}
|
|
disabled
|
|
className="bg-gray-50 flex-1"
|
|
/>
|
|
<div className="flex items-center gap-2">
|
|
<Switch
|
|
checked={formData.overdueToggle}
|
|
onCheckedChange={(checked) => handleChange('overdueToggle', checked)}
|
|
disabled={isViewMode}
|
|
/>
|
|
<span className="text-sm">{formData.overdueToggle ? 'ON' : 'OFF'}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* 악성채권 */}
|
|
<div className="space-y-2">
|
|
<Label className="text-sm font-medium text-gray-700">악성채권</Label>
|
|
<div className="flex items-center gap-4">
|
|
<div
|
|
className={`px-3 py-2 rounded-md text-sm flex-1 ${
|
|
formData.badDebtToggle ? 'bg-red-100 text-red-800' : 'bg-gray-100 text-gray-500'
|
|
}`}
|
|
>
|
|
{formData.badDebtToggle ? '악성채권' : '-'}
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Switch
|
|
checked={formData.badDebtToggle}
|
|
onCheckedChange={(checked) => handleChange('badDebtToggle', checked)}
|
|
disabled={isViewMode}
|
|
/>
|
|
<span className="text-sm">{formData.badDebtToggle ? 'ON' : 'OFF'}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 메모 */}
|
|
<div className="space-y-4 pt-4 border-t">
|
|
<Label className="text-sm font-medium text-gray-700">메모</Label>
|
|
{/* 메모 입력 */}
|
|
{!isViewMode && (
|
|
<div className="flex gap-2">
|
|
<Textarea
|
|
value={newMemo}
|
|
onChange={(e) => setNewMemo(e.target.value)}
|
|
placeholder="메모를 입력하세요..."
|
|
className="flex-1 bg-white"
|
|
rows={2}
|
|
/>
|
|
<Button
|
|
type="button"
|
|
onClick={handleAddMemo}
|
|
className="bg-blue-500 hover:bg-blue-600 self-end"
|
|
>
|
|
<Plus className="h-4 w-4 mr-1" />
|
|
추가
|
|
</Button>
|
|
</div>
|
|
)}
|
|
{/* 메모 리스트 */}
|
|
{formData.memos.length > 0 ? (
|
|
<div className="space-y-2">
|
|
{formData.memos.map((memo) => (
|
|
<div key={memo.id} className="flex items-start justify-between p-3 bg-gray-50 rounded-lg">
|
|
<p className="text-sm text-gray-700 flex-1">{memo.content}</p>
|
|
{!isViewMode && (
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-6 w-6 text-gray-400 hover:text-red-500"
|
|
onClick={() => handleDeleteMemo(memo.id)}
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<p className="text-sm text-gray-500 text-center py-4">등록된 메모가 없습니다.</p>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* 필요 서류 */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-lg">필요 서류</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<input
|
|
ref={documentInputRef}
|
|
type="file"
|
|
onChange={handleDocumentUpload}
|
|
className="hidden"
|
|
/>
|
|
<div
|
|
className={`border-2 border-dashed rounded-lg p-6 text-center transition-colors ${
|
|
isViewMode
|
|
? 'bg-gray-50'
|
|
: isDragging
|
|
? 'border-primary bg-primary/5'
|
|
: 'hover:border-primary/50 cursor-pointer'
|
|
}`}
|
|
onClick={() => !isViewMode && documentInputRef.current?.click()}
|
|
onDragOver={handleDragOver}
|
|
onDragLeave={handleDragLeave}
|
|
onDrop={handleDrop}
|
|
>
|
|
<Upload className={`w-12 h-12 mx-auto mb-2 ${isDragging ? 'text-primary' : 'text-gray-400'}`} />
|
|
<p className="text-sm text-gray-600">
|
|
{isDragging ? '파일을 여기에 놓으세요' : '클릭하여 파일을 첨부하거나, 마우스로 파일을 끌어오세요.'}
|
|
</p>
|
|
</div>
|
|
{/* 업로드된 파일 목록 */}
|
|
{formData.documents.length > 0 && (
|
|
<div className="space-y-2">
|
|
{formData.documents.map((doc) => (
|
|
<div key={doc.id} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
|
|
<div className="flex items-center gap-3">
|
|
<FileText className="w-8 h-8 text-primary" />
|
|
<div>
|
|
<p className="text-sm font-medium">{doc.fileName}</p>
|
|
<p className="text-xs text-gray-500">
|
|
{(doc.fileSize / 1024).toFixed(1)} KB
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{isViewMode ? (
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => {
|
|
const link = document.createElement('a');
|
|
link.href = doc.fileUrl;
|
|
link.download = doc.fileName;
|
|
link.click();
|
|
toast.success(`${doc.fileName} 다운로드를 시작합니다.`);
|
|
}}
|
|
>
|
|
<Download className="h-4 w-4 mr-1" />
|
|
다운로드
|
|
</Button>
|
|
) : (
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => handleDocumentRemove(doc.id)}
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* 삭제 확인 다이얼로그 */}
|
|
<AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>거래처 삭제</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
'{formData.partnerName}'을(를) 삭제하시겠습니까?
|
|
<br />
|
|
확인 클릭 시 거래처관리 목록으로 이동합니다.
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel disabled={isLoading}>취소</AlertDialogCancel>
|
|
<AlertDialogAction
|
|
onClick={handleConfirmDelete}
|
|
className="bg-red-600 hover:bg-red-700"
|
|
disabled={isLoading}
|
|
>
|
|
{isLoading && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
|
|
삭제
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
|
|
{/* 저장 확인 다이얼로그 */}
|
|
<AlertDialog open={showSaveDialog} onOpenChange={setShowSaveDialog}>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>{isNewMode ? '거래처 등록' : '수정 확인'}</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
{isNewMode
|
|
? '거래처를 등록하시겠습니까?'
|
|
: '정말 수정하시겠습니까? 확인 클릭 시 "수정이 완료되었습니다." 알림이 표시됩니다.'}
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel disabled={isLoading}>취소</AlertDialogCancel>
|
|
<AlertDialogAction
|
|
onClick={handleConfirmSave}
|
|
className="bg-blue-500 hover:bg-blue-600"
|
|
disabled={isLoading}
|
|
>
|
|
{isLoading && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
|
|
확인
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
</PageLayout>
|
|
);
|
|
} |