HttpClient → PolymorphicHttpClient → Service → Component 계층 구조

🧭 API 요청 전체 흐름 (CSR + SSR 대응 구조)

┌────────────────────────────────────────────────────────────┐
│                     React Component (UI 계층)              │
│  예: LoginForm, GatheringList, ReviewPage 등                │
└────────────────────────────────────────────────────────────┘
             │
             ▼ ① 사용자 이벤트 발생 (예: 로그인 버튼 클릭)
──────────────────────────────────────────────────────────────
│                  Service 계층 (비즈니스 로직)               │
│  예: authService.login(formData)                            │
│--------------------------------------------------------------│
│  → 실제 HTTP 요청은 PolymorphicHttpClient를 통해 실행       │
──────────────────────────────────────────────────────────────
             │
             ▼ ② PolymorphicHttpClient (환경별 처리)
──────────────────────────────────────────────────────────────
│  - HttpClient를 상속                                          │
│  - CSR / SSR 환경 구분(`typeof window`)                       │
│  - 토큰 주입 (localStorage or cookies)                        │
│  - 요청 헤더 구성                                             │
│  - API 호출 재시도 / 에러 처리                                │
│--------------------------------------------------------------│
│  예시:                                                        │
│   if (typeof window !== 'undefined')                          │
│      token = localStorage.getItem('access_token');            │
│   else                                                         │
│      token = cookies().get('access_token');                   │
│   headers.Authorization = `Bearer ${token}`                   │
│   return this.request(endpoint, { ...options, headers })       │
──────────────────────────────────────────────────────────────
             │
             ▼ ③ HttpClient (공통 fetch 로직)
──────────────────────────────────────────────────────────────
│  - baseUrl 관리 (`https://api.example.com`)                   │
│  - fetch() 공통 옵션 (method, headers, body 등) 설정          │
│  - 응답 코드 검증 / JSON 변환                                │
│--------------------------------------------------------------│
│  예시:                                                        │
│   const res = await fetch(this.baseUrl + endpoint, options);  │
│   if (!res.ok) throw new Error('HTTP Error');                 │
│   return res.json();                                          │
──────────────────────────────────────────────────────────────
             │
             ▼ ④ 외부 API 서버 (Vercel API / Backend)
──────────────────────────────────────────────────────────────
│  - 실제 데이터 처리                                           │
│  - DB 연동 / 인증 검증 / CRUD 수행                           │
│  - 응답(JSON) 반환                                           │
──────────────────────────────────────────────────────────────
             │
             ▼ ⑤ HttpClient → PolymorphicHttpClient → Service로 응답 반환
──────────────────────────────────────────────────────────────
│  - JSON 데이터를 서비스 계층으로 반환                        │
│  - 서비스 계층은 컴포넌트에 가공된 형태로 전달                │
──────────────────────────────────────────────────────────────
             │
             ▼ ⑥ React Component에서 결과 반영
──────────────────────────────────────────────────────────────
│  - 상태 업데이트 (setState, useQuery 등)                     │
│  - UI 렌더링 (성공 / 실패 메시지 표시)                       │
└──────────────────────────────────────────────────────────────┘

🧩 단계별 정리 요약

단계	계층	역할
①	Component (UI)	사용자 이벤트 발생 (onSubmit, onClick)
②	Service	요청 로직 호출 (authService.login())
③	PolymorphicHttpClient	CSR/SSR 환경 구분, 토큰 주입, 헤더 구성
④	HttpClient	공통 fetch 로직 수행
⑤	API 서버	실제 DB/비즈니스 로직 실행
⑥	Component	응답 결과로 화면 갱신

⚙️ 핵심 포인트

• HttpClient.ts
  👉 가장 하단의 공통 “전송기(fetch layer)”
  (소켓 아님, 단발성 요청–응답 단위의 표준 HTTP 통신기)
• PolymorphicHttpClient.ts
  👉 실행 환경(CSR/SSR)에 따라 다른 인증 처리 방식 적용
  (쿠키 or localStorage)
• Service 계층
  👉 비즈니스 의미를 갖는 메서드 모음 (login, getUser, joinGathering, …)
• Component
  👉 UI + 이벤트 연결부 (useEffect, onClick, mutate 등)

---

🧠 최종 요약 문장

HttpClient.ts는 API 요청의 “기초 엔진”,
PolymorphicHttpClient.ts는 “환경 적응 레이어”,
Service는 “업무 의미를 붙인 요청 메서드”,
Component는 “사용자 인터페이스”.

즉,
UI → Service → PolymorphicHttpClient → HttpClient → API 서버 → 다시 UI로
데이터가 흐르며,
이 전체가 “CSR/SSR을 모두 지원하는 API 통신 파이프라인”입니다.