Amkor/Groupware
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI Unification: Refactor UserList and MailForm to Notepad design system, and finalize Customs management

Browse Source
This commit is contained in:
backuppc
2025-12-30 15:07:09 +09:00
parent 8d6183715a
commit 9f7308b549
6 changed files with 1440 additions and 866 deletions
Download Patch File Download Diff File Expand all files Collapse all files

365
Project/frontend/src/components/customs/CustomEditDialog.tsx Normal file
View File

@@ -0,0 +1,365 @@
import { useState, useEffect } from 'react';
import {
Building,
User,
Phone,
Mail,
MapPin,
FileText,
X,
Save,
Trash2,
Hash,
Briefcase
} from 'lucide-react';
import { comms } from '@/communication';
import type { CustomItem } from '@/types';
import { DevelopmentNotice } from '../DevelopmentNotice';
interface CustomEditDialogProps {
isOpen: boolean;
onClose: () => void;
onSaved: () => void;
item: CustomItem | null;
}
const initialForm: Omit<CustomItem, 'idx' | 'wuid' | 'wdate' | 'gcode'> = {
grp: '',
name: '',
owner: '',
ownertel: '',
address: '',
tel: '',
fax: '',
email: '',
memo: '',
uptae: '',
staff: '',
stafftel: '',
name2: ''
};
export function CustomEditDialog({ isOpen, onClose, onSaved, item }: CustomEditDialogProps) {
const [formData, setFormData] = useState<Omit<CustomItem, 'idx' | 'wuid' | 'wdate' | 'gcode'>>(initialForm);
const [loading, setLoading] = useState(false);
useEffect(() => {
if (item) {
setFormData({
grp: item.grp || '',
name: item.name || '',
owner: item.owner || '',
ownertel: item.ownertel || '',
address: item.address || '',
tel: item.tel || '',
fax: item.fax || '',
email: item.email || '',
memo: item.memo || '',
uptae: item.uptae || '',
staff: item.staff || '',
stafftel: item.stafftel || '',
name2: item.name2 || ''
});
} else {
setFormData(initialForm);
}
}, [item, isOpen]);
const handleSave = async () => {
if (!formData.name) {
alert('업체명을 입력해주세요.');
return;
}
setLoading(true);
try {
let response;
if (item) {
response = await comms.updateCustoms({ ...formData, idx: item.idx });
} else {
response = await comms.addCustoms(formData);
}
if (response.Success) {
onSaved();
onClose();
} else {
alert(response.Message || '저장에 실패했습니다.');
}
} catch (error) {
console.error('업체정보 저장 오류:', error);
alert('저장 중 오류가 발생했습니다.');
} finally {
setLoading(false);
}
};
const handleDelete = async () => {
if (!item) return;
if (!confirm('정말 삭제하시겠습니까?')) return;
setLoading(true);
try {
const response = await comms.deleteCustoms(item.idx);
if (response.Success) {
onSaved();
onClose();
} else {
alert(response.Message || '삭제에 실패했습니다.');
}
} catch (error) {
console.error('업체정보 삭제 오류:', error);
alert('삭제 중 오류가 발생했습니다.');
} finally {
setLoading(false);
}
};
if (!isOpen) return null;
return (
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
{/* 배경 오버레이 */}
<div
className="absolute inset-0 bg-black/60 backdrop-blur-sm animate-fade-in"
onClick={onClose}
/>
{/* 다이얼로그 콘텐트 */}
<div className="relative w-full max-w-2xl bg-[#1a1c1e] border border-white/10 rounded-3xl shadow-2xl overflow-hidden animate-scale-in">
<div className="px-6 py-5 border-b border-white/10 flex items-center justify-between bg-white/[0.02]">
<div className="flex items-center gap-3">
<div className="p-2 bg-primary-500/20 rounded-xl text-primary-400">
<Building className="w-5 h-5" />
</div>
<div>
<h3 className="text-xl font-bold text-white tracking-tight">
{item ? '업체 정보 수정' : '새 업체 등록'}
</h3>
<p className="text-white/30 text-[10px] uppercase font-bold tracking-widest mt-0.5">
{item ? 'Edit Company Profile' : 'Register New Company'}
</p>
</div>
</div>
<button
onClick={onClose}
className="p-2 hover:bg-white/10 rounded-xl text-white/40 hover:text-white transition-colors"
>
<X className="w-5 h-5" />
</button>
</div>
<div className="p-6 max-h-[70vh] overflow-y-auto custom-scrollbar">
{/* 개발 중 알림 */}
<div className="mb-6">
<DevelopmentNotice />
</div>
<div className="space-y-8">
{/* 기본 정보 */}
<section className="space-y-4">
<div className="flex items-center gap-3 mb-2">
<Hash className="w-4 h-4 text-primary-500" />
<h4 className="text-sm font-bold text-white/70 uppercase tracking-tighter">기본 정보</h4>
<div className="flex-1 h-px bg-white/5"></div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="space-y-1.5 px-3 py-2 bg-white/5 rounded-2xl border border-white/5 focus-within:border-primary-500/30 transition-colors">
<label className="text-[10px] font-bold text-white/30 uppercase pl-1 flex items-center gap-1.5">
<Building className="w-2.5 h-2.5" /> 업체명 (국문) *
</label>
<input
type="text"
value={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
placeholder="한글 업체명"
/>
</div>
<div className="space-y-1.5 px-3 py-2 bg-white/5 rounded-2xl border border-white/5 focus-within:border-primary-500/30 transition-colors">
<label className="text-[10px] font-bold text-white/30 uppercase pl-1 flex items-center gap-1.5">
<Briefcase className="w-2.5 h-2.5" /> 업체명 (영문/기타)
</label>
<input
type="text"
value={formData.name2}
onChange={(e) => setFormData({ ...formData, name2: e.target.value })}
className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
placeholder="영문 업체명 또는 별칭"
/>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div className="space-y-1.5 px-3 py-2 bg-white/5 rounded-2xl border border-white/5">
<label className="text-[10px] font-bold text-white/30 uppercase pl-1">대표자</label>
<input
type="text"
value={formData.owner}
onChange={(e) => setFormData({ ...formData, owner: e.target.value })}
className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
placeholder="대표자 성함"
/>
</div>
<div className="space-y-1.5 px-3 py-2 bg-white/5 rounded-2xl border border-white/5">
<label className="text-[10px] font-bold text-white/30 uppercase pl-1">구분</label>
<input
type="text"
value={formData.grp}
onChange={(e) => setFormData({ ...formData, grp: e.target.value })}
className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
placeholder="협력사, 고객사 등"
/>
</div>
<div className="space-y-1.5 px-3 py-2 bg-white/5 rounded-2xl border border-white/5">
<label className="text-[10px] font-bold text-white/30 uppercase pl-1">업태</label>
<input
type="text"
value={formData.uptae}
onChange={(e) => setFormData({ ...formData, uptae: e.target.value })}
className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
placeholder="IT, 유통 등"
/>
</div>
</div>
</section>
{/* 연락처 정보 */}
<section className="space-y-4">
<div className="flex items-center gap-3 mb-2">
<Phone className="w-4 h-4 text-primary-500" />
<h4 className="text-sm font-bold text-white/70 uppercase tracking-tighter">연락처 및 위치</h4>
<div className="flex-1 h-px bg-white/5"></div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="space-y-1.5 px-3 py-2 bg-white/5 rounded-2xl border border-white/5">
<label className="text-[10px] font-bold text-white/30 uppercase pl-1 flex items-center gap-1.5">
<Phone className="w-2.5 h-2.5" /> 대표 전화
</label>
<input
type="text"
value={formData.tel}
onChange={(e) => setFormData({ ...formData, tel: e.target.value })}
className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
placeholder="00-000-0000"
/>
</div>
<div className="space-y-1.5 px-3 py-2 bg-white/5 rounded-2xl border border-white/5">
<label className="text-[10px] font-bold text-white/30 uppercase pl-1 flex items-center gap-1.5">
<Mail className="w-2.5 h-2.5" /> 대표 이메일
</label>
<input
type="text"
value={formData.email}
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
placeholder="email@company.com"
/>
</div>
</div>
<div className="space-y-1.5 px-3 py-2 bg-white/5 rounded-2xl border border-white/5">
<label className="text-[10px] font-bold text-white/30 uppercase pl-1 flex items-center gap-1.5">
<MapPin className="w-2.5 h-2.5" /> 주소
</label>
<input
type="text"
value={formData.address}
onChange={(e) => setFormData({ ...formData, address: e.target.value })}
className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
placeholder="사업장 소재지 상세 주소"
/>
</div>
</section>
{/* 담당자 정보 */}
<section className="space-y-4">
<div className="flex items-center gap-3 mb-2">
<User className="w-4 h-4 text-primary-500" />
<h4 className="text-sm font-bold text-white/70 uppercase tracking-tighter">담당자 정보</h4>
<div className="flex-1 h-px bg-white/5"></div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="space-y-1.5 px-3 py-2 bg-white/5 rounded-2xl border border-white/5">
<label className="text-[10px] font-bold text-white/30 uppercase pl-1">담당자 성함</label>
<input
type="text"
value={formData.staff}
onChange={(e) => setFormData({ ...formData, staff: e.target.value })}
className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
placeholder="담당자 이름"
/>
</div>
<div className="space-y-1.5 px-3 py-2 bg-white/5 rounded-2xl border border-white/5">
<label className="text-[10px] font-bold text-white/30 uppercase pl-1">담당자 연락처</label>
<input
type="text"
value={formData.stafftel}
onChange={(e) => setFormData({ ...formData, stafftel: e.target.value })}
className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
placeholder="010-0000-0000"
/>
</div>
</div>
</section>
{/* 메모 */}
<section className="space-y-4">
<div className="flex items-center gap-3 mb-2">
<FileText className="w-4 h-4 text-primary-500" />
<h4 className="text-sm font-bold text-white/70 uppercase tracking-tighter">추가 정보</h4>
<div className="flex-1 h-px bg-white/5"></div>
</div>
<div className="space-y-1.5 px-3 py-2 bg-white/5 rounded-2xl border border-white/5">
<label className="text-[10px] font-bold text-white/30 uppercase pl-1">메모 및 특이사항</label>
<textarea
rows={4}
value={formData.memo}
onChange={(e) => setFormData({ ...formData, memo: e.target.value })}
className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10 resize-none"
placeholder="업체 관련 메모를 자유롭게 입력하세요"
/>
</div>
</section>
</div>
</div>
{/* 푸터 버튼 */}
<div className="px-6 py-5 bg-white/[0.02] border-t border-white/10 flex items-center justify-between">
<div>
{item && (
<button
onClick={handleDelete}
disabled={loading}
className="flex items-center gap-2 px-4 py-2 bg-red-500/10 hover:bg-red-500/20 text-red-400 rounded-xl font-bold text-xs transition-colors border border-red-500/20"
>
<Trash2 className="w-3.5 h-3.5" />
삭제
</button>
)}
</div>
<div className="flex items-center gap-3">
<button
onClick={onClose}
className="px-5 py-2 text-white/40 hover:text-white font-bold text-xs transition-colors"
>
취소
</button>
<button
onClick={handleSave}
disabled={loading}
className="flex items-center gap-2 px-6 py-2 bg-primary-500 hover:bg-primary-600 text-white rounded-xl font-bold text-xs shadow-lg shadow-primary-500/20 transition-all disabled:opacity-50"
>
<Save className="w-3.5 h-3.5" />
{loading ? '저장 중...' : (item ? '수정 완료' : '업체 등록')}
</button>
</div>
</div>
</div>
</div>
);
}