71 lines
4.0 KiB
Markdown
71 lines
4.0 KiB
Markdown
# Q&A 뷰어 프로젝트
|
||
## 0. 프젝트 전체 작업 진행 원칙
|
||
- GEMINI cli로 하는 모든 작업에 대해 한글로 응답하며, 기능단위 결과를 TODO.md 에 남긴다.
|
||
- 결과의 기록은 date 명령을 이용해 KST 기준으로 시분초까지 작성한다.
|
||
- node_modules를 제외한 이 프로젝트에서 생성하는 파일은 ts 혹은 tsx 이며 js 생성시
|
||
- 기능 단위 완성 후 사용자 승인을 받고 Biome를 이용해 lint 및 format 검사를 수행한다.
|
||
- 최종적으로 사용자에게 git commit을 한 뒤 TODO.md에 기록한다.
|
||
|
||
## 1. 프로젝트 개요
|
||
|
||
- **목표**: Q&A 게시판 데이터를 시각적으로 쉽게 조회할 수 있는 동적 인터페이스를 구축합니다.
|
||
- **핵심 아이디어**: 백엔드 API를 통해 데이터 스키마를 동적으로 조회하고, 해당 스키마에 맞춰 테이블, 폼(데이터 생성/수정) 등의 UI를 자동으로 렌더링하여 생산성을 극대화합니다.
|
||
|
||
## 2. 핵심 기능
|
||
|
||
- API를 통한 동적 데이터 스키마 조회
|
||
- 스키마 기반 동적 테이블 UI 렌더링
|
||
- 스키마 기반 동적 폼 UI 렌더링 (데이터 생성/수정)
|
||
- OIDC 표준을 이용한 사용자 인증
|
||
|
||
## 3. 기술 스택
|
||
- **Language**: `typescript`
|
||
- **Package Manager**: `pnpm`
|
||
- **Framework**: `React`
|
||
- **Build Tool**: `Vite`
|
||
- **Styling**: `Tailwind CSS`
|
||
- **UI Components**: `shadcn/ui`
|
||
- **State Management**: `Zustand`
|
||
- **Formatter/Linter**: `Biome`
|
||
|
||
## 4. 주요 아키텍처 및 결정 사항
|
||
|
||
- **인증**: OIDC (OpenID Connect) 표준을 준수하여 인증을 구현합니다.
|
||
- **데이터**: PoC(Proof of Concept) 레벨에서는 별도의 데이터베이스를 사용하지 않고, Mock 데이터를 활용하여 핵심 기능 개발에 집중합니다.
|
||
|
||
## 5. 개발 로드맵
|
||
|
||
### Phase 1: 기반 구축 및 핵심 기능 구현 (완료)
|
||
|
||
- **내용**: 프로젝트 초기 설정, 핵심 동적 UI 컴포넌트 개발 및 기본 페이지 구성을 완료했습니다.
|
||
- **주요 산출물**:
|
||
- `DynamicTable`, `DynamicForm` 컴포넌트
|
||
- 피드백 CRUD 페이지
|
||
- 기본 라우팅 설정
|
||
|
||
### Phase 2: 기능 고도화 및 안정화 (진행 중)
|
||
|
||
- **목표**: 사용자 경험을 개선하고 코드 품질을 향상시킵니다.
|
||
- **완료된 작업**:
|
||
- **동적 테이블 개선**: 페이지네이션, 열 정렬, 데이터 필터링, 날짜 범위 선택, 행 확장 등 고급 기능 추가
|
||
- **상태 관리 도입**: Zustand를 활용하여 프로젝트 ID, 테마 등 전역 상태 관리 시스템 구축
|
||
- **UI 개선**: 상단 헤더, 네비게이션 메뉴, Light/Dark/System 테마 전환 기능 구현
|
||
- **진행할 작업**:
|
||
- **테마 커스터마이징**: Dracula 테마를 다크 모드에 적용하고, 기본 테마를 라이트 모드로 설정
|
||
- **동적 폼 개선**: Zod와 같은 라이브러리를 활용하여 스키마 기반의 동적 데이터 유효성 검사 구현
|
||
|
||
### Phase 3: 인증 및 배포 (예정)
|
||
|
||
- **목표**: OIDC 기반의 안정적인 인증 시스템을 구축하고, Docker를 통해 배포 환경을 마련합니다.
|
||
- **주요 작업**:
|
||
- **OIDC 연동**: OIDC 클라이언트 라이브러리를 설치하고, 로그인/로그아웃 및 토큰 관리 로직 구현
|
||
- **인증 상태 관리**: 사용자의 로그인 상태를 전역으로 관리하고, 인증 상태에 따라 UI가 동적으로 변경되도록 설정
|
||
- **라우트 보호**: 인증이 필요한 페이지에 접근 제어(Route Guard)를 적용하여 비인가 사용자의 접근 차단
|
||
- **컨테이너화**: Dockerfile을 작성하고 Docker Compose를 설정하여 개발 및 프로덕션 환경을 컨테이너 기반으로 구축
|
||
|
||
## 6. 개발 원칙
|
||
|
||
- **코드 품질**: 모든 기능 구현 후, Biome 설정을 기반으로 코드를 정리하여 일관된 스타일과 높은 품질을 유지합니다.
|
||
- **버전 관리**: 각 기능 단위의 개발이 완료되<EBA38C><EB9098> 정상 동작이 확인되면, 사용자에게 git commit 여부를 물어봅니다.
|
||
|