Feature/api integration

[yerroong]

✔️ 체크리스트

• : Merge할 브랜치를 확인해 주세요.

🔍 작업 내용

• 로그인 api, 문의하기 페이지 api 연결
• 문의하기 페이지 컴포넌트화

⚠️ 주의 사항 / 기타

이미지 업로드 s3 오류 확인 필요

Summary by CodeRabbit

릴리스 노트

• 신규 기능

  • 사용자 로그인 및 인증 시스템 구현
  • 문의사항 작성, 조회, 삭제 기능 추가
  • 카테고리별 문의 필터링 및 정렬 기능
  • 이미지 첨부 및 클라우드 스토리지 업로드 지원
  • 문의 이력 조회 및 응답 추적 기능

• 개선 사항

  • 로그아웃 기능 추가
  • 카테고리 탭 레이아웃 개선
  • 버튼 비활성화 상태 지원
  • 오류 처리 및 로딩 상태 강화

• 문서

  • API 통합 가이드 추가

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 899402d4-7889-41d8-bd33-1b85c6da3401

📥 Commits

Reviewing files that changed from the base of the PR and between c559d9b and a529656.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (26)

• .env
• API_INTEGRATION.md
• package.json
• src/api/client.ts
• src/api/index.ts
• src/api/services/authService.ts
• src/api/services/questionService.ts
• src/api/types.ts
• src/components/BottomBar.tsx
• src/components/Header.tsx
• src/page/Admin/AdminLayout.tsx
• src/page/Alarm.tsx
• src/page/Login/LoginPage.tsx
• src/page/Main/components/GradientButton.tsx
• src/page/Policy/Policy.tsx
• src/page/PolicyDetail/components/ActiveBlockBanner.tsx
• src/page/PolicyDetail/components/BlockTab.tsx
• src/page/PolicyDetail/components/Blockpolicymanager.tsx
• src/page/Setting.tsx
• src/page/SharedData/SharedData.tsx
• src/page/Support.tsx
• src/page/Support/Support.tsx
• src/page/Support/components/InquiryForm.tsx
• src/page/Support/components/InquiryHistory.tsx
• src/routes/Router.tsx
• vite.config.ts

---

📝 Walkthrough

Walkthrough

API 기반 아키텍처를 도입하여 Axios 클라이언트, 인증 서비스, 질문 서비스를 구현했고, 로그인 페이지와 로그아웃 기능을 서버 기반으로 변경했으며, 지원 페이지를 모듈화된 컴포넌트로 재구성했습니다.

Changes

Cohort / File(s)	Summary
API 통합 기초 설정 .env, package.json, vite.config.ts, API_INTEGRATION.md	API 기본 URL 환경변수 추가, axios 의존성 설치, Vite 프록시 설정, API 통합 문서 작성
API 클라이언트 인프라 src/api/client.ts, src/api/index.ts, src/api/types.ts	Axios 인스턴스, CSRF 토큰 관리, 요청/응답 인터셉터, 401 처리를 포함한 API 클라이언트 설정 및 공용 응답 타입 정의
API 서비스 계층 src/api/services/authService.ts, src/api/services/questionService.ts	로그인/로그아웃 및 질문 CRUD, 카테고리 조회, 파일 업로드, S3 프리사인된 URL 처리를 위한 서비스 구현
인증 흐름 구현 src/page/Login/LoginPage.tsx, src/page/Admin/AdminLayout.tsx, src/page/Setting.tsx	클라이언트 기반 로그인, 토큰 저장소 관리, 로그아웃 처리 및 /login으로 리다이렉트 추가
라우팅 구조 개선 src/routes/Router.tsx, src/components/Header.tsx, src/components/BottomBar.tsx	루트 경로를 /login으로 리다이렉트, 기본 경로를 /main으로 변경, 홈 페이지 감지 로직 업데이트
지원 페이지 모듈화 src/page/Support.tsx (삭제), src/page/Support/Support.tsx, src/page/Support/components/InquiryForm.tsx, src/page/Support/components/InquiryHistory.tsx	단일 파일에서 탭 기반 모듈형 구조로 리팩토링, 질문 생성 폼 및 이력 보기 컴포넌트 분리
컴포넌트 유지보수 업데이트 src/page/Main/components/GradientButton.tsx, src/page/Alarm.tsx, src/page/Policy.tsx, src/page/PolicyDetail/components/ActiveBlockBanner.tsx, src/page/PolicyDetail/components/BlockTab.tsx, src/page/PolicyDetail/components/Blockpolicymanager.tsx, src/page/SharedData/SharedData.tsx	비활성화 상태 지원, 반응형 레이아웃 개선, 콘솔 로깅 제거, 의존성 최적화, 함수 시그니처 단순화

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant LoginPage as Login Page
    participant AuthService as Auth Service
    participant APIClient as API Client
    participant Backend as Backend

    User->>LoginPage: 이메일/비밀번호 입력 및 로그인 클릭
    LoginPage->>AuthService: login(credentials)
    AuthService->>APIClient: POST /auth/user/login
    APIClient->>APIClient: 요청 인터셉터: Authorization 헤더 추가
    APIClient->>Backend: HTTP 요청
    Backend->>Backend: 인증 처리
    Backend->>APIClient: 응답 (tokens, user info, XSRF-TOKEN 헤더)
    APIClient->>APIClient: 응답 인터셉터: XSRF-TOKEN 추출 및 저장
    APIClient->>AuthService: 응답 데이터
    AuthService->>AuthService: CSRF 토큰 쿠키에서 읽기 및 설정
    AuthService->>LoginPage: LoginResult (success, status, data, message)
    LoginPage->>LoginPage: localStorage에 accessToken, refreshToken, user 저장
    LoginPage->>User: /main으로 리다이렉트

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~50 minutes

Possibly related PRs

• PR #15: Header 및 BottomBar 컴포넌트의 라우팅 로직 변경과 /main 경로 도입이 동일하게 적용되어 있습니다.
• PR #27: Router 구조 변경 및 Admin 레이아웃 수정이 동일 파일을 대상으로 합니다.

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feature/api-integration

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}