App 화면 만들기

좁은 목록에서도 노트 상태를 볼 수 있게 바꿉니다. Resource 만들기를 마친 뒤 App 루트의 resources/js/resources/notes/section/NoteListSection.tsx를 여세요. noteColumns()에 있는 status 컬럼을 다음으로 교체합니다.

{
    key: 'status',
    header: t('workshop.note.status.label'),
    size: 'meta',
    priority: 1,
    cell: (row) => (
        <ResourceStatusBadge
            resourceKey="workshop.note"
            field="status"
            status={row.status}
        />
    ),
},12345678910111213

ResourceStatusBadge는 이미 import되어 있습니다. priority: 1을 주면 일반 메타데이터 컬럼이 접히는 너비에서도 상태를 유지합니다. 고정 key와 descriptor 기반 배지는 그대로 사용하며 화면 표현만 바꾸므로 마이그레이션이나 Composer update는 필요하지 않습니다.

확인

Workshop의 노트 목록을 새로고침하고 창 너비를 줄여 상태가 남는지 확인하세요. 읽을 수 있는 행을 선택하면 Inspector가 열려야 합니다. 읽기 권한이 없는 계정에는 기존 접근 거부 화면이 표시되어야 합니다.

입력 폼·상세·Inspector·목록에 새 필드를 연결하려면 데이터 모델과 마이그레이션를 이어서 사용합니다.

파일별 책임

App 내부는 #app/, 공개 타입은 @nexia/sdk, 호스트 컴포넌트는 @nexia/sdk/host에서 가져옵니다. @/, @shell/, @shared/ui 등 Core alias는 App API가 아닙니다.

생성된 흐름 확장

폼에는 필수 이름, 서버 필드 오류, 미저장 변경, 생성 완료와 화면 이동 처리가 있습니다. 단순 submit handler로 갈아엎지 말고 새 필드를 여기에 연결하세요. Resource ID와 Route 함수는 계약 파일에 둡니다. 캐시 키에는 테넌트와 목록의 선택 대상을 유지합니다.

목록은 meta.list_schema로 허용 필터·정렬을 받고 ResourceTable로 표 기능을 구성하며 응답 actions로 가능한 동작을 표시합니다. 로딩·빈 상태·오류/재시도·권한 상태를 보존하세요. 저장된 보기 설정의 식별자인 tableId는 번역하지 않습니다.

Legal Entity 목록의 useOrganizationListScope는 Route Surface에서 사용하고 선택기를 NxPageFrame.organizationScope에 둡니다. 생성 폼은 하나의 대상을 고르고 상세·수정은 저장된 소유자를 보여 줍니다. 표준 테넌트 기준정보에는 조직 선택기를 넣지 않습니다. LE/OU 목록 모드, 프레임 연결 예시, 공용 Legal Entity·Operating Unit 폼 입력은 React 컴포넌트와 훅을 참고하세요.

독립 페이지 등록

Note를 표현하지 않는 페이지라면 App 진입점에 등록하고 App 소유 navigation contribution을 선언합니다. Route·지연 등록·prefetch·컴포넌트의 정확한 형식은 React 컴포넌트와 훅을 사용하세요. Route 등록만으로 메뉴나 접근 권한이 생기지는 않습니다.

새 프런트엔드 진입점을 활성화한 뒤에는 Vite를 재시작합니다. Contribution·Route 변경은 Core 루트에서 task artisan -- nexia-runtime:refresh-runtime-caches로 갱신합니다. 일반 Section 수정은 실행 중인 개발 서버를 사용합니다.

화면 동작 확인

키보드로 이동하고 잘못된 입력을 제출해 보세요. 미저장 취소, 필터 목록 새로고침, 권한 없는 레코드 접근도 확인합니다. App 테스트하기에서 필요한 검사만 선택합니다. 라벨·오류·포커스·로딩 동작은 SDK 컨트롤을 재사용합니다.