🧩 표 + 편집 모달 + 코드피커

리스트 → 행 편집 → 공통코드 선택 → 저장 → 토스트 알림까지, 전형적 CRUD 화면의 조립 예시.

라이브 데모

총 3 건

ID	이름	상태	대응 국가	메모
1	김철수	ACTIVE	KR	VIP
2	이영희	INACTIVE	KRUS	-
3	박민수	PENDING	—	신규

핵심 코드

// 1) 행 편집 모달 trigger
<button onClick={() => setEditing(r)}>편집</button>

// 2) 모달 안에서 공통코드 피커를 CodeInput 으로
<CodeInput codeGroupId="STATUS" value={row.statusCode}
    onChange={(id) => setRow({ ...row, statusCode: id })} />

<MultiCodeInput codeGroupId="COUNTRY" value={row.countryCodes}
    onChange={(ids) => setRow({ ...row, countryCodes: ids })} />

// 3) 삭제 전 confirm + 성공 toast 조합
if (await confirm({ variant: "danger", title: "삭제" })) {
    await api.delete(...);
    toast.success("삭제되었습니다");
}