Feature/cham 62

[pillow12360]

유형

• 기능 추가
• 버그 수정
• 리팩토링
• 문서 수정
• 기타

설명

가족 스페이스 API-UI 연동 PR

변경 사항

• 가족 스페이스 백엔드 API 완전 연동
• React Query 기반 상태 관리 구현
• JWT 인증 시스템 통합
• 실시간 UI 업데이트 구현
• 타입 안전성 확보 (age: Integer → String)
• 에러 처리 및 로딩 상태 구현

🔧 기술 스택

• 상태 관리: React Query + Zustand
• API 통신: Axios (인터셉터 포함)
• 인증: JWT + 자동 토큰 갱신
• 타입 검사: TypeScript 완전 적용
• UI: React + Tailwind + ShadCN

📁 주요 파일

src/
├── store/useAuthStore.ts          # 통합 인증 스토어
├── lib/api/
│   ├── axios.ts                   # API 클라이언트 + 인터셉터
│   ├── auth.ts                    # 인증 API
│   └── family.ts                  # 가족 API
├── hooks/
│   ├── useAuth.ts                 # 인증 훅
│   └── family/                    # 가족 관련 훅들
├── components/family/             # 가족 스페이스 컴포넌트
└── types/family.type.ts           # 타입 정의

✨ 구현 기능

• 가족 생성/참여/탈퇴
• 초대 코드 생성/검증
• 실시간 할인 계산 (청소년 할인 포함)
• 구성원 관리 및 현황 표시
• 에러 복구 및 재시도 로직
• 스켈레톤 로딩 UI

🛠️ 버그 수정

• age 필드 타입 불일치로 인한 500 에러 해결
• 중복 인증 스토어 파일 정리
• SSR 환경에서의 토큰 접근 문제 해결
• API 호출 시 Authorization 헤더 누락 해결