'use client'; import { useActionState, useEffect, useRef } from 'react'; import { FoxButton } from '@fox/core/components/fox-button'; import { FoxDescriptionList, type FoxDescriptionItem, } from '@fox/core/components/fox-description-list'; import { FoxModal } from '@fox/core/components/fox-modal'; import { FoxToggleSwitch } from '@fox/core/components/fox-toggle-switch'; import { formatGradeClassNumber, formatOptionalValue, type StudentMember, } from '@/lib/domain/student-member'; import { updateStudentActiveStatus, type UpdateStudentActiveStatusState, } from '../_actions'; interface StudentDetailModalProps { member: StudentMember; onClose: () => void; } const INITIAL_STATE: UpdateStudentActiveStatusState = { status: 'idle' }; const DETAIL_FORM_ID = 'student-active-status-form'; /** * 사용여부 수정 가능 여부의 단일 토글. 백엔드에 사용여부 값도 변경 API도 없어 현재는 false다 — * 변경 API가 생기면 이 상수를 true로 되돌리고 `_actions.ts`의 미지원 처리를 실제 구현으로 * 바꾸면 된다(토글·저장 버튼의 비활성이 함께 풀린다). */ const IS_ACTIVE_STATUS_EDITABLE = false; const ACTIVE_STATUS_UNSUPPORTED_NOTE = '사용여부 변경은 백엔드 API 준비 후 제공됩니다.'; /** 시안은 두 값을 " / "로 묶는다("홍라애 / 010-2222-1234"). 둘 다 없으면 `-`다. */ function joinPair(first: string | null, second: string | null) { const parts = [first, second].filter( (value): value is string => value !== null && value !== '' ); return parts.length > 0 ? parts.join(' / ') : '-'; } /** * 학생 회원 조회 팝업 — 시안: 관리자페이지(QsFVFFUKGH68xAPVkF3SJ9) modal 5227:809 * * 모든 항목이 조회 전용이다. 데이터는 목록 행이 이미 갖고 있는 member를 그대로 받으므로 * 재조회하지 않는다(백엔드에 단건 조회 API도 아직 없다). 백엔드가 주지 않는 값은 `-`다. * * 시안은 보호자(이름/연락처)와 학교(학교/학년·반·번호)를 각각 한 줄로 묶는다 — 종전처럼 * 항목을 따로 두지 않고 시안의 8줄 구성을 그대로 따랐다. * * 사용여부는 이 팝업에서 유일하게 수정 가능한 항목이지만, 백엔드 목록 응답에 값이 없고 변경 * API도 없어 토글·저장 버튼을 비활성으로 둔다(`_actions.ts`의 미지원 처리와 짝). 폼·Server * Action 배선은 남겨 두었으므로 API가 생기면 `IS_ACTIVE_STATUS_EDITABLE`만 되돌리면 된다. * * 저장 버튼은 `form={DETAIL_FORM_ID}`로 폼과 이어 둔다 — FoxModal이 버튼을 `foot` 슬롯에 * 그려 폼의 자손이 아니게 되는데, 네이티브 `form` 속성은 같은 문서 안에서 id만 맞으면 그 * 폼을 제출한다. */ export function StudentDetailModal({ member, onClose }: StudentDetailModalProps) { const [state, formAction, isPending] = useActionState( updateStudentActiveStatus, INITIAL_STATE ); const formRef = useRef<HTMLFormElement>(null); useEffect(() => { if (state.status === 'success') { onClose(); } }, [state, onClose]); const items: FoxDescriptionItem[] = [ { key: 'name', term: '이름', description: member.name }, { key: 'loginId', term: 'ID', description: member.loginId }, { key: 'phoneNumber', term: '휴대전화 번호', description: formatOptionalValue(member.phoneNumber), }, { key: 'email', term: '이메일', description: formatOptionalValue(member.email), }, { key: 'birthDate', term: '생년월일', description: formatOptionalValue(member.birthDate), }, { key: 'guardian', term: '보호자 이름 / 연락처', description: joinPair(member.guardianName, member.guardianPhoneNumber), }, { key: 'school', term: '학교 / 학년·반·번호', description: joinPair( member.schoolName, formatGradeClassNumber(member) === '-' ? null : formatGradeClassNumber(member) ), }, { key: 'isActive', term: '사용여부', description: ( <FoxToggleSwitch name="isActive" value="true" label={member.isActive ? '활성' : '비활성'} defaultChecked={member.isActive ?? false} disabled={!IS_ACTIVE_STATUS_EDITABLE} /> ), }, ]; return ( <FoxModal open size="sm" title="학생 회원 조회" onClose={onClose} actions={ <> <FoxButton type="default" size="md" label="취소" onAction={onClose} /> {/* FoxButton에는 폼을 가리키는 prop이 없다(네이티브 `form` 속성 미노출). 버튼이 foot 슬롯에 그려져 폼의 자손이 아니므로 ref로 직접 제출한다. 비활성 사유는 감싼 span의 title로 남긴다 — 비활성 버튼은 hover를 받지 못한다. */} <span title={ IS_ACTIVE_STATUS_EDITABLE ? undefined : ACTIVE_STATUS_UNSUPPORTED_NOTE } > <FoxButton type="primary" size="md" label={isPending ? '저장 중...' : '저장'} disabled={isPending || !IS_ACTIVE_STATUS_EDITABLE} onAction={() => formRef.current?.requestSubmit()} /> </span> </> } > <form ref={formRef} id={DETAIL_FORM_ID} action={formAction}> <input type="hidden" name="id" value={member.id} /> <FoxDescriptionList items={items} /> </form> </FoxModal> ); }