[FE admin] src 내부 폴더 및 컴포넌트 설명 - innovationacademy-kr/slabs-munetic GitHub Wiki

🗂 src 폴더 구조

├─ src
│  ├─ components
│  ├─ contexts
│  ├─ lib
│  ├─ pages
│  ├─ style
│  ├─ types
│  ├─ App.ts
│  └─ main.ts

• components : 컴포넌트 폴더
• contexts : 전역 상태 관리 폴더
• lib : api 관리 폴더
• page : 라우팅 페이지 관련 폴더
• style : 전역 스타일 폴더
• types : 타입 관련 폴더

🗂 components 폴더 설명

├─ components
│  ├─ AdminUser
│  ├─ Auth
│  ├─ Info
│  ├─ Inputs
│  ├─ style
│  ├─ Menu
│  ├─ Table
│  └─ Routing.tsx

• AdminUser : /admin_users에서 admin 유저를 새로 추가하는 컴포넌트를 담고 있다.
• Auth : 로그인 페이지 로그인 input 컴포너트와 /auth/password 비밀번호 변경 컴포넌트를 담고 있다.
• Info : /users/:id, /admin_users/:id, /lessons/:id 에서 재사용되는 상세 정보 그리드 컴포넌트를 담고 있다. users와 admin_users 상세 정보 컴포넌트는 Info/User 폴더 내 컴포넌트를 공유하고 lessons 상세 정보 페이지 컴포넌트는 Lesson폴더에 위치한다. 모든 Info 컴포넌트가 공유하는 style 컴포넌트는 Common 폴더에 있다.
• Inputs : 재사용할 수 있는 input 컴포넌트들이 있는 곳으로 일반 input 컴포넌트, 비밀번호 input컴포넌트, select input컴포넌트가 있다.
• Menu : 메뉴 바와 관련된 컴포넌트들이 위치돼있다.
• Table : /users/,/users/:id, /admin_users, /admin_users/:id, /lessons/ 페이지에 재사용되는 테이블 컴포넌트를 담고 있다. 각 경로별 테이블의 컬럼과 노출하는 정보 종류가 다르기 때문에 AdminUser, Lesson, User로 세부 폴더를 구분했다.

🗂 contexts 폴더 설명

├─ contexts
│  ├─ info.tsx
│  └─ login.tsx

현재 로그인 상태 값과 /:id 경로 페이지들의 상세 정보 값을 전역 상태값으로 관리하고 있다.