eec8384
feat: 가맹몰 상세 수정의 등록 정보를 시안대로 가로 한 줄에 놓는다
…
기획 BO-MAL-003(2805:1760)은 등록일시·등록자·최종 수정·현재 상태 네 쌍을 나란히 두는데,
FoxDescriptionList가 세로로 쌓고 줄마다 구분선을 그어 어긋났다. 목록에 inline 변형
(layout="inline")을 더해 쌍을 가로로 놓고 구분선을 뺀다. 이름은 label-sm·subtle, 값은
body-sm으로 시안 실측(12/13px)을 따르고, 쌍 사이 60px는 토큰에 없어 gap-11로 맞춘다.
Co-Authored-By: Claude Opus 5
Browse code
09-14
640bf45
feat: 학생 회원 조회 팝업을 시안대로 구현 (+ FoxDescriptionList)
…
시안: 관리자페이지(QsFVFFUKGH68xAPVkF3SJ9) modal 5227:809.
FoxModal이 껍데기를 전부 덮는다 — padding 40 · radius 24 · 닫기 버튼 · tit/contents/foot 슬롯 ·
`` 시맨틱까지 시안 값 그대로다. 없던 것은 라벨+값 조회 목록 하나였다.
- FoxDescriptionList 신설(사용자 확정). ``/``/` `로 그려 이름·값 관계가 보조기술에
전달되게 하고, 이름 쪽은 ` ` 안에 FoxFormLabel을 `span`으로 넣어 서식을 디자인시스템과
맞췄다(` `가 이미 라벨이라 ``은 가리킬 대상이 없다). 값이 ReactNode라 글자든
토글이든 들어간다.
- student-detail-modal을 FoxModal + FoxDescriptionList + FoxToggleSwitch + FoxButton으로
다시 썼다. components/ui의 Modal·Field·Input·RadioGroup을 더 이상 쓰지 않는다.
시안을 따라 보호자(이름/연락처)와 학교(학교/학년·반·번호)를 각각 한 줄로 묶었다 — 종전에는
따로 두던 항목이다. 둘 다 비어 있으면 `-`다.
지킨 것 — 사용여부는 백엔드에 값도 변경 API도 없어 토글·저장 버튼을 비활성으로 둔다. 폼·Server
Action 배선은 그대로라 API가 생기면 IS_ACTIVE_STATUS_EDITABLE만 되돌리면 된다. 비활성 사유는
감싼 span의 title로 남겼다(비활성 버튼은 hover를 받지 못한다).
FoxButton에는 폼을 가리키는 prop이 없어(네이티브 `form` 속성 미노출) 저장 버튼이 foot 슬롯에서
폼의 자손이 아니게 된다. @fox를 건드리는 대신 ref로 `requestSubmit()`을 부른다.
검증 — 폭 400 · padding 40 · radius 24 · 제목 "학생 회원 조회" · 닫기 버튼, 8항목이 시안과
같다(이름·ID·휴대전화 번호·이메일·생년월일·보호자 이름/연락처·학교/학년·반·번호·사용여부),
사용여부는 토글, 하단은 취소 + 저장(비활성).
Co-Authored-By: Claude Opus 5
Browse code
08-18