60 lines
3.2 KiB
Markdown
60 lines
3.2 KiB
Markdown
# Q&A 뷰어 프로젝트
|
|
|
|
## 1. 프로젝트 개요
|
|
|
|
- **목표**: Q&A 게시판 데이터를 시각적으로 쉽게 조회할 수 있는 동적 인터페이스를 구축합니다.
|
|
- **핵심 아이디어**: 백엔드 API를 통해 데이터 스키마를 동적으로 조회하고, 해당 스키마에 맞춰 테이블, 폼(데이터 생성/수정) 등의 UI를 자동으로 렌더링하여 생산성을 극대화합니다.
|
|
|
|
## 2. 핵심 기능
|
|
|
|
- API를 통한 동적 데이터 스키마 조회
|
|
- 스키마 기반 동적 테이블 UI 렌더링
|
|
- 스키마 기반 동적 폼 UI 렌더링 (데이터 생성/수정)
|
|
- OIDC 표준을 이용한 사용자 인증
|
|
|
|
## 3. 기술 스택
|
|
|
|
- **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와 같은 라이브러리를 활용하여 스키마 기반의 동적 데이터 유효성 검사 구현
|
|
- **코드 품질 관리**: Biome을 프로젝트에 통합하여 코드 포맷팅과 린트 검사를 자동화하고, 일관된 코드 스타일 유지
|
|
|
|
### Phase 3: 인증 및 배포 (예정)
|
|
|
|
- **목표**: OIDC 기반의 안정적인 인증 시스템을 구축하고, Docker를 통해 배포 환경을 마련합니다.
|
|
- **주요 작업**:
|
|
- **OIDC 연동**: OIDC 클라이언트 라이브러리를 설치하고, 로그인/로그아웃 및 토큰 관리 로직 구현
|
|
- **인증 상태 관리**: 사용자의 로그인 상태를 전역으로 관리하고, 인증 상태에 따라 UI가 동적으로 변경되도록 설정
|
|
- **라우트 보호**: 인증이 필요한 페이지에 접근 제어(Route Guard)를 적용하여 비인가 사용자의 접근 차단
|
|
- **컨테이너화**: Dockerfile을 작성하고 Docker Compose를 설정하여 개발 및 프로덕션 환경을 컨테이너 기반으로 구축
|