share job
This commit is contained in:
JAE SIK CHO
187
frontend/src/app/(main)/fedex/0010/write/page.tsx
Normal file
187
frontend/src/app/(main)/fedex/0010/write/page.tsx
Normal file
@@ -0,0 +1,187 @@
|
||||
'use client';
|
||||
|
||||
import { useQuery, useMutation } from '@tanstack/react-query';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { getFedexCodes, insertFedex } from '@/lib/api/fedex';
|
||||
import { useToast } from '@/components/common/Toast';
|
||||
|
||||
interface FormValues {
|
||||
ieGbn: string;
|
||||
sCode: string;
|
||||
sYear: string;
|
||||
sJechl: string;
|
||||
comNm: string;
|
||||
jSingoDt: string;
|
||||
sSingoDt: string;
|
||||
jGwiCd: string;
|
||||
fStCd: string;
|
||||
fJjCd: string;
|
||||
fJjContents: string;
|
||||
fJjNm: string;
|
||||
fJjRegDt: string;
|
||||
fJjRegGbn: string;
|
||||
}
|
||||
|
||||
export default function Fedex0010WritePage() {
|
||||
const router = useRouter();
|
||||
const { success, error: toastError } = useToast();
|
||||
|
||||
const { data: codes } = useQuery({
|
||||
queryKey: ['fedex', 'codes'],
|
||||
queryFn: getFedexCodes,
|
||||
});
|
||||
|
||||
const { register, handleSubmit, formState: { errors } } = useForm<FormValues>({
|
||||
defaultValues: { fJjRegGbn: '1' },
|
||||
});
|
||||
|
||||
const saveMut = useMutation({
|
||||
mutationFn: (data: FormValues) => insertFedex(data as Record<string, unknown>),
|
||||
onSuccess: (sq) => {
|
||||
success('등록되었습니다.');
|
||||
router.push(`/fedex/0010/${sq}`);
|
||||
},
|
||||
onError: () => toastError('등록 중 오류가 발생했습니다.'),
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="p-4 max-w-2xl">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h1 className="text-xl font-bold">수입정정 등록</h1>
|
||||
<button
|
||||
onClick={() => router.back()}
|
||||
className="text-sm text-gray-500 hover:text-gray-700"
|
||||
>
|
||||
← 목록
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit((d) => saveMut.mutate(d))} className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">신고 구분</label>
|
||||
<select
|
||||
{...register('ieGbn')}
|
||||
className="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="I">수입</option>
|
||||
<option value="E">수출</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">업체명 *</label>
|
||||
<input
|
||||
{...register('comNm', { required: '업체명을 입력하세요.' })}
|
||||
className="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
{errors.comNm && <p className="text-red-500 text-xs mt-1">{errors.comNm.message}</p>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">신고번호 코드</label>
|
||||
<input {...register('sCode')} className="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">연도</label>
|
||||
<input {...register('sYear')} placeholder="2024" className="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">제출번호</label>
|
||||
<input {...register('sJechl')} className="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">원신고일</label>
|
||||
<input type="date" {...register('jSingoDt')} className="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">정정신고일</label>
|
||||
<input type="date" {...register('sSingoDt')} className="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">관세청 구분</label>
|
||||
<select
|
||||
{...register('jGwiCd')}
|
||||
className="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white"
|
||||
>
|
||||
<option value="">선택</option>
|
||||
{codes?.gwiList.map((g) => (
|
||||
<option key={g.jGwiCd} value={g.jGwiCd}>{g.jGwiDes}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">처리상태</label>
|
||||
<select
|
||||
{...register('fStCd')}
|
||||
className="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white"
|
||||
>
|
||||
<option value="">선택</option>
|
||||
{codes?.fstList.map((f) => (
|
||||
<option key={f.fStCd} value={f.fStCd}>{f.fStDes}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">정정사유</label>
|
||||
<select
|
||||
{...register('fJjCd')}
|
||||
className="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white"
|
||||
>
|
||||
<option value="">선택</option>
|
||||
{codes?.fjjList.map((f) => (
|
||||
<option key={f.fJjCd} value={f.fJjCd}>{f.fJjDes1}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">정정내용</label>
|
||||
<textarea
|
||||
{...register('fJjContents')}
|
||||
rows={4}
|
||||
className="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">담당자명</label>
|
||||
<input {...register('fJjNm')} className="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">처리일</label>
|
||||
<input type="date" {...register('fJjRegDt')} className="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-2 pt-2 border-t">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => router.back()}
|
||||
className="px-4 py-2 text-sm border rounded hover:bg-gray-50"
|
||||
>
|
||||
취소
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={saveMut.isPending}
|
||||
className="px-4 py-2 text-sm bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50"
|
||||
>
|
||||
{saveMut.isPending ? '저장 중...' : '저장'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user