'use client'; import { useActionState, useEffect, useRef } from 'react'; import { FoxButton } from '@fox/core/components/fox-button'; import { FoxHelperText } from '@fox/core/components/fox-helper-text'; import { FoxInput } from '@fox/core/components/fox-input'; import { FoxModal } from '@fox/core/components/fox-modal'; import { useFeedback } from '@/app/_hooks/use-feedback'; import type { CommonCodeDetail } from '@/lib/domain/common-code'; import { INITIAL_COMMON_CODE_FORM_STATE } from '@/lib/domain/common-code-form'; import { createCodeDetailAction, updateCodeDetailAction } from '../_actions'; import styles from './code-form.module.scss'; import { submitFormAction } from '@/app/_hooks/submit-form-action'; interface CodeDetailModalProps { /** 소속 공통코드 — 좌측에서 고른 값이라 팝업에서는 바꿀 수 없다. */ comCd: string; /** 수정 대상. 없으면 등록 팝업이다. */ detail?: CommonCodeDetail; /** 등록 시 채워 둘 정렬번호(기존 개수 + 1). */ nextSortSeq: number; onClose: () => void; } /** * 상세코드 등록/수정 팝업 — 기획 1842:16179 / 1842:16262. * * 코드ID는 좌측에서 고른 공통코드라 **항상 읽기 전용**이다(기획 ①: "상위코드 고정된 경우 비활성 * 처리"). 수정에서는 코드(`comDtlCd`)도 대상을 가리키는 값이라 바꿀 수 없다 — 백엔드가 두 코드로 * 행을 찾기 때문에 바꾸면 다른 행을 수정하게 된다. * * ⚠️ **등록 시 코드설명은 저장되지 않는다** — 백엔드 INSERT에 `DTL_CD_EXPLN`이 빠져 있다. * 시안대로 칸은 두고 백엔드에 수정을 요청했다(Repository 주석 참조). 수정에서는 정상 저장된다. */ export function CodeDetailModal({ comCd, detail, nextSortSeq, onClose, }: CodeDetailModalProps) { const isEdit = detail !== undefined; const { showToast } = useFeedback(); const formRef = useRef<HTMLFormElement>(null); const [state, formAction, isPending] = useActionState( isEdit ? updateCodeDetailAction : createCodeDetailAction, INITIAL_COMMON_CODE_FORM_STATE ); useEffect(() => { if (state.status === 'success') { showToast({ variant: 'success', message: isEdit ? '상세코드를 수정했습니다.' : '상세코드를 등록했습니다.', }); onClose(); } }, [state, showToast, onClose, isEdit]); const errors = state.status === 'error' ? (state.errors ?? {}) : {}; return ( <FoxModal open size="sm" title={isEdit ? '상세코드 수정' : '상세코드 등록'} onClose={onClose} actions={ <> <FoxButton type="default" size="md" label="취소" onAction={onClose} /> <FoxButton type="primary" size="md" label={isPending ? '저장 중...' : '저장'} disabled={isPending} onAction={() => formRef.current?.requestSubmit()} /> </> } > <form ref={formRef} onSubmit={(event) => submitFormAction(event, formAction)} className={styles.fields}> <input type="hidden" name={isEdit ? 'targetComCd' : 'comCd'} value={comCd} /> {isEdit && ( <input type="hidden" name="targetComDtlCd" value={detail.comDtlCd} /> )} <div className={styles.field}> <FoxInput size="md" label="코드ID" value={comCd} readOnly message="상위코드가 고정된 경우 비활성 처리됩니다." /> </div> <div className={styles.field}> <FoxInput size="md" name="comDtlCd" label="코드" requirement="required" defaultValue={detail?.comDtlCd ?? ''} readOnly={isEdit} placeholder="코드를 입력하세요." invalid={Boolean(errors.comDtlCd)} message={errors.comDtlCd} maxLength={50} /> </div> <div className={styles.field}> <FoxInput size="md" name="name" label="코드값의미" requirement="required" defaultValue={detail?.name ?? ''} placeholder="코드값의미를 입력하세요." invalid={Boolean(errors.name)} message={errors.name} maxLength={100} /> </div> <div className={styles.field}> <FoxInput size="md" type="number" name="sortSeq" label="정렬번호" requirement="required" min={1} step={1} defaultValue={detail?.sortSeq ?? nextSortSeq} invalid={Boolean(errors.sortSeq)} message={errors.sortSeq} /> </div> <div className={styles.field}> <FoxInput size="md" name="description" label="코드설명" defaultValue={detail?.description ?? ''} placeholder="코드설명을 입력하세요." invalid={Boolean(errors.description)} message={errors.description} maxLength={500} /> </div> {state.status === 'error' && state.message && ( <FoxHelperText type="danger" message={state.message} /> )} </form> </FoxModal> ); }