qna-viewer-react/TODO.md at main

Files

Lectom C Han 27844ef237 dockerizing for production

2025-08-05 14:00:07 +09:00

Docker 환경 Nginx 프록시 오류 해결: Docker 컨테이너 환경에서 Nginx가 API 서버로 요청을 올바르게 프록시하지 못하던 404 오류를 해결했습니다.
- 원인 분석: proxy_pass에 http://와 경로가 포함된 환경 변수가 그대로 사용되어 upstream 설정 오류가 발생하고, 경로가 잘못 조합되는 문제를 확인했습니다.
- 해결: docker-entrypoint.sh 스크립트에서 기존 VITE_API_PROXY_TARGET 변수를 VITE_API_HOST (호스트:포트)와 VITE_API_DIR (경로)로 분리하도록 수정했습니다.
- Nginx 설정 수정: nginx.conf.template에서 upstream 블록은 ${VITE_API_HOST}를 사용하고, proxy_pass에서는 ${VITE_API_DIR}를 사용하여 최종 경로를 조합하도록 변경하여 문제를 근본적으로 해결했습니다.

빌드 오류 수정: pnpm build 시 발생하던 12개의 타입스크립트 오류를 모두 해결하여 빌드 프로세스를 안정화했습니다.
- DynamicForm: value prop의 타입 불일치 오류를 해결했습니다.
- DynamicTable: 존재하지 않는 속성(minSize, maxSize) 접근 오류를 수정했습니다.
- Header: 사용되지 않는 변수(homePath)를 제거했습니다.
- main.tsx: ThemeProvider에 잘못 전달된 prop을 제거했습니다.
- FeedbackListPage: 데이터 타입 불일치로 인해 발생하던 다양한 오류들을 해결했습니다.
빌드 성능 최적화: React.lazy와 Suspense를 사용하여 페이지 컴포넌트를 동적으로 가져오도록(Code Splitting) 구현했습니다. 이를 통해 초기 로딩 시 번들 크기를 줄여 성능을 개선하고, 빌드 시 발생하던 청크 크기 경고를 해결했습니다.
개발 환경 개선: pnpm install 또는 biome 실행 시 나타나던 npm warn 경고를 해결하기 위해 프로젝트 루트에 .npmrc 파일을 추가하여 전역 설정을 덮어쓰도록 조치했습니다.

2025-08-05 11:00:00 KST - Descope 연동 완료

사용자 인증: Descope SDK를 연동하여 로그인, 로그아웃, 사용자 정보 조회 기능 구현.
UI 개선:
- 로그인 상태에 따라 사용자 프로필 아이콘(사진/이니셜/기본 아이콘) 동적 변경.
- 테마(Light/Dark)에 따라 로고 이미지 자동 전환.
- 로그아웃 시 홈페이지로 리디렉션.
피드백 작성 연동:
- 새 피드백 작성 시, 로그인한 사용자 정보를 ‘작성자’ 필드에 자동으로 채우고 수정 불가 처리.
- 로그인하지 않은 경우 ‘새 피드백 작성’ 버튼 숨김 처리.
무한 렌더링 버그 수정: FeedbackCreatePage에서 useEffect 의존성 문제로 발생하던 무한 렌더링 오류 해결.
Favicon 설정: 프로젝트 favicon을 올바르게 표시하도록 index.html 수정.

2025-08-05 10:30:00 KST - 이슈 API 연동 및 UI 개선 완료

레이아웃 안정성 및 반응형 개선 (완료)
- 페이지 레이아웃 고정: 테이블 행 확장 시 페이지 전체가 밀리는 현상 수정. PageTitle을 상단에 고정하고 컨텐츠 영역만 스크롤되도록 MainLayout 및 PageLayout 구조 개선.
- 일관된 페이지 너비 적용: 목록 페이지와 상세 페이지의 너비가 다른 문제 해결. 모든 페이지가 최대 1400px 너비를 갖도록 container 사용법 통일.
- 반응형 헤더 구현: 모바일 화면 크기에서 햄버거 메뉴가 나타나도록 Header 컴포넌트 개선.
- 컴포넌트 리팩터링: IssueDetailPage의 UI를 재사용 가능한 IssueDetailCard 컴포넌트로 분리.
- UI/UX 개선:
  - DynamicTable의 검색창과 카드 간 여백 조정.
  - IssueDetailCard의 제목, 레이블, 컨텐츠 스타일을 개선하여 가독성 향상.
- 접근성(a11y) 수정: DynamicTable의 컬럼 리사이저에 slider 역할을 부여하여 웹 접근성 lint 오류 해결.