majiayu000 Purpose
새로운 네비게이션 탭을 추가할 때 필요한 모든 파일과 설정을 자동으로 생성합니다:
- 탭 컴포넌트 생성 - 탭의 메인 컴포넌트 파일 생성
- TabContent lazy import 추가 - React.lazy import + Suspense 래핑 추가
- types/system.ts 업데이트 - AppTab 타입, TAB_META, TAB_GROUPS, DEFAULT_TAB_PERMISSIONS 업데이트
- 권한 설정 - 역할별 접근 권한 기본값 설정
When to Run
- 새로운 네비게이션 탭을 추가해야 할 때
- 기존 탭을 새로운 구조로 분리할 때
Related Files
| File | Purpose |
|---|---|
types/system.ts |
AppTab 타입, TAB_META, TAB_GROUPS, DEFAULT_TAB_PERMISSIONS |
components/Layout/TabContent.tsx |
탭 라우팅 (React.lazy import) |
components/Navigation/Sidebar.tsx |
사이드바 네비게이션 |
Workflow
Step 1: 사용자 입력 수집
AskUserQuestion을 사용하여 다음을 확인합니다:
- 탭 ID (kebab-case, 예:
notice-board) - 탭 한국어 라벨 (예:
공지사항) - 탭 아이콘 (예:
📢) - 소속 탭 그룹 (HOME, SCHEDULE, CLASS, STUDENT, ADMIN, SYSTEM, SUPPORT 중 선택)
- 접근 가능 역할 (기본값: 전체 역할)
Step 2: 탭 컴포넌트 디렉토리 및 파일 생성
생성할 파일:
components/<PascalCase>/
├── <PascalCase>Tab.tsx # 메인 탭 컴포넌트
└── index.ts # barrel export
탭 컴포넌트 템플릿:
import React from 'react';
interface <PascalCase>TabProps {
departmentId: string;
// 필요한 props 추가
}
export default function <PascalCase>Tab({ departmentId }: <PascalCase>TabProps) {
return (
<div className="p-4">
<h1 className="text-xl font-bold mb-4"><한국어 라벨></h1>
{/* TODO: 구현 */}
</div>
);
}
Step 3: types/system.ts 업데이트
- AppTab 유니온 타입에 추가:
type AppTab = '...' | '<tab-id>';
- TAB_META에 메타데이터 추가:
'<tab-id>': { label: '<한국어 라벨>', icon: '<아이콘>' },
- TAB_GROUPS의 해당 그룹에 추가:
{ id: '<GROUP>', tabs: [...existingTabs, '<tab-id>'], ... }
- DEFAULT_TAB_PERMISSIONS에 추가 (선택된 역할에 탭 추가)
Step 4: TabContent.tsx에 lazy import 추가
const <PascalCase>Tab = React.lazy(() => import('../<PascalCase>/<PascalCase>Tab'));
렌더링 분기에 case 추가:
case '<tab-id>':
return <Suspense fallback={<VideoLoading />}><ErrorBoundary><PascalCase>Tab {...props} /></ErrorBoundary></Suspense>;
Step 5: 검증
생성된 파일들이 올바른지 확인합니다:
- 탭 컴포넌트 파일 존재 확인
- AppTab 타입에 새 탭 포함 확인
- TabContent lazy import 존재 확인
- TAB_META에 메타데이터 존재 확인
Output Format
## 탭 생성 완료
| 항목 | 상태 | 파일 |
|------|------|------|
| 컴포넌트 | 생성됨 | `components/<Name>/<Name>Tab.tsx` |
| barrel export | 생성됨 | `components/<Name>/index.ts` |
| AppTab 타입 | 업데이트 | `types/system.ts` |
| TAB_META | 업데이트 | `types/system.ts` |
| TAB_GROUPS | 업데이트 | `types/system.ts` |
| DEFAULT_TAB_PERMISSIONS | 업데이트 | `types/system.ts` |
| lazy import | 추가됨 | `components/Layout/TabContent.tsx` |
다음 단계:
1. 탭 컴포넌트에 실제 기능을 구현하세요
2. 필요한 훅을 `hooks/` 디렉토리에 추가하세요
3. `/verify-lazy-loading`으로 lazy import 패턴을 검증하세요
Exceptions
다음은 문제가 아닙니다:
- TODO 주석이 남아있는 컴포넌트 - 보일러플레이트이므로 실제 구현은 별도 작업
- props 타입이 기본값인 것 - departmentId만 기본 제공하며, 추가 props는 구현 시 정의