4.0 KiB
4.0 KiB
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 여부를 물어봅니다.