qna-viewer-react/GEMINI.md

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를 설정하여 개발 및 프로덕션 환경을 컨테이너 기반으로 구축