[fix] 카카오 로그인 콜백 백엔드 JSON 노출 버그 수정

[maehwasoo]

📌 Summary

• close [fix] 카카오 로그인 콜백 백엔드 JSON 노출 버그 수정 #406

프론트 로그인 환경값을 백엔드 분기(local/preview/dev)와 일치시키고 관련 주석/설명을 정리했습니다.

📄 Tasks

• AuthEnvironment 타입에서 prod → dev로 변경
• hostname 기반 env 결정 로직을 dev로 통일
• 로그인 플로우 주석 및 문서화 내용의 env 표기 수정

🔍 To Reviewer

📸 Screenshot

[coderabbitai]

📝 Walkthrough

Summary by CodeRabbit

릴리스 노트

• Chores
  • 로그인 환경 설정을 업데이트했습니다. Kakao 로그인 흐름의 환경 감지 로직과 백엔드 리다이렉트 URL 파라미터가 조정되었습니다. 문서 설명도 함께 업데이트되어 환경 매핑이 더욱 명확해졌습니다.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

Walkthrough

Kakao OAuth 인증 흐름에서 production 환경 식별자 'prod'를 development 환경 'dev'로 변경하는 작업입니다. 타입 정의, 환경 감지 로직, 로그인 페이지, 콜백 처리 등 다섯 개 파일에서 일관되게 환경 설정값을 업데이트했습니다.

Changes

카테고리	파일	변경 요약
환경 설정 타입 및 로직 변경 src/pages/login/types/environment.ts, src/pages/login/utils/environment.ts	AuthEnvironment 유니언 타입에서 'prod' → 'dev' 치환 (exported type 변경), getAuthEnvironment 함수의 기본 반환값 업데이트 (localhost, preview.houme.kr 외 기본값을 'dev'로 변경)
인증 흐름 및 리다이렉트 URL 업데이트 src/pages/login/LoginPage.tsx, src/pages/login/KakaoCallback.tsx	Kakao 로그인 환경 파라미터에서 'prod' → 'dev' 적용, backend redirect URL의 env 값 업데이트 (local|preview|prod → local|preview|dev), 흐름 설명 및 주석 수정
API 문서 주석 업데이트 src/pages/login/apis/kakaoLogin.ts	Env 타입 파라미터 문서의 예제 코드에서 'prod' → 'dev' 변경 (runtime 영향 없음)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

판단 근거:

• 변경 패턴이 일관적이고 반복적 (환경값 치환)이지만, 타입 서명 변경(AuthEnvironment 유니언 타입)과 조건문 로직 변경(getAuthEnvironment 반환값)으로 인한 영향도 검토 필요
• 정의된 타입이 다른 모듈에서 어떻게 사용되는지 확인 필수
• 문서화 주석은 단순 변경이나, 실제 동작 로직 변경(특히 환경 감지)은 각 환경에서의 동작 검증 필요

Suggested reviewers

• gdbs1107
• jstar000

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Title check	⚠️ Warning	PR 제목은 [type] 형식을 따르고 34자로 50자 이내 요구사항을 만족하나, 실제 변경사항(prod→dev 환경값 통일)과 제목(JSON 노출 버그)이 일치하지 않습니다.	제목을 실제 변경사항에 맞게 수정하세요. 예: '[fix] 카카오 로그인 환경값 prod → dev로 통일' 또는 원래 의도가 JSON 버그라면 해당 수정을 포함하는 커밋이 필요합니다.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description check	✅ Passed	PR 설명이 변경사항(환경값 통일, 주석 정리)을 정확히 설명하고 있어 요구사항에 부합합니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between dbe44f2 and 90ad759.

📒 Files selected for processing (5)

• src/pages/login/KakaoCallback.tsx
• src/pages/login/LoginPage.tsx
• src/pages/login/apis/kakaoLogin.ts
• src/pages/login/types/environment.ts
• src/pages/login/utils/environment.ts

🧰 Additional context used

📓 Path-based instructions (4)

src/**/types/**/*.ts

⚙️ CodeRabbit configuration file

src/**/types/**/*.ts: 타입 정의 리뷰 시:

• import type 사용, default export 지양
• Discriminated Union으로 분기 명확화
• 상수 리터럴은 as const로 리터럴 타입 유지

Files:

• src/pages/login/types/environment.ts

src/**/*.ts

⚙️ CodeRabbit configuration file

src/**/*.ts: TypeScript 파일 리뷰 시:

• 타입/인터페이스는 PascalCase 사용, Type/I/T 접두사·접미사 금지 (제네릭 T 제외)
• interface는 객체 타입, type은 union/별칭에 사용하는지 확인
• API Response는 XXXResponse 네이밍 따르는지 확인
• var 사용 금지, const 우선 사용 확인
• type-only import 사용(import type), 불필요한 런타임 의존성 제거
• satisfies 연산자 활용으로 정확한 타입 보장

Files:

• src/pages/login/types/environment.ts
• src/pages/login/apis/kakaoLogin.ts
• src/pages/login/utils/environment.ts

src/**

⚙️ CodeRabbit configuration file

src/**: 전체 프로젝트 코드 리뷰 시:

기본 규칙

• 모든 컴포넌트는 반드시 TypeScript로 작성
• SVG는 ?react 쿼리를 통해 React 컴포넌트로 임포트
• 스타일은 반드시 Vanilla Extract(.css.ts)로 작성
• 절대 경로 임포트 사용 (@pages, @shared 등)
• overlay-kit을 통한 모달 관리 패턴 준수

네이밍 컨벤션

• 컴포넌트와 클래스는 PascalCase 사용
• 폴더명은 camelCase 사용
• 파일명은 camelCase 사용 (컴포넌트 파일 제외)
• 변수와 함수는 camelCase 사용
• 상수는 BIG_SNAKE_CASE 사용
• 모든 타입/인터페이스는 PascalCase, Type/I/T 접두사·접미사 금지 (제네릭 T 제외)
• Props 타입은 컴포넌트명 + Props 형식
• API Response 타입은 XXXResponse 형식
• 함수 네이밍: get/create/check/handle/is/has/can 접두사 활용
• API 함수는 HTTP메서드 + 명사 형식 (getUserList, postComment)
• TanStack Query 훅: use + 행위 + 대상 + Query/Mutation (예: useGetUserListQuery)
• 커스텀 훅 파일명: use*.ts

보안 및 성능

• 환경 변수는 반드시 import.meta.env 사용
• API 키나 시크릿을 하드코딩하지 않음
• React.memo, useMemo, useCallback의 적절한 사용
• 큰 번들 사이즈 경고 (dynamic import 제안)
• 템플릿 리터럴 사용 권장 (문자열 조합 시)
• 구조 분해 할당 적극 활용

커밋 및 브랜치 패턴

• 커밋 타입: feat, fix, docs, style, refactor, test, chore, design, comment, rename, remove
• 브랜치 패턴: type/description/#issue-number 형식

Files:

• src/pages/login/types/environment.ts
• src/pages/login/KakaoCallback.tsx
• src/pages/login/LoginPage.tsx
• src/pages/login/apis/kakaoLogin.ts
• src/pages/login/utils/environment.ts

src/**/apis/**

⚙️ CodeRabbit configuration file

src/**/apis/**: API 레이어 리뷰 시:

• request 래퍼 사용(axios 직접 호출 금지), 공통 에러 포맷 정규화
• TanStack Query와의 통합(QueryKey Factory 사용)
• 재시도/취소 신호(AbortController) 처리 일관성
• 타입 안정성 확보(응답 제네릭, 불변 데이터)
• HTTP메서드 + 명사 네이밍 규칙 확인 (getUserList, postComment 등)
• async/await 패턴 일관성 확인

Files:

• src/pages/login/apis/kakaoLogin.ts

🔇 Additional comments (5)

src/pages/login/utils/environment.ts (1)

3-13: LGTM!

getAuthEnvironment 함수가 변경된 타입 정의와 일관되게 업데이트되었어요. 함수 로직은 명확하고 hostname 기반 환경 매핑이 올바르게 구현되어 있어요.

src/pages/login/KakaoCallback.tsx (1)

1-80: 문서 업데이트가 올바르게 반영되었어요.

주석 내 환경 네이밍이 'prod'에서 'dev'로 일관되게 변경되었고, 실제 코드 로직에는 변경이 없어요. OAuth 콜백 플로우 설명이 명확하게 유지되고 있어요.

src/pages/login/apis/kakaoLogin.ts (1)

10-59: API 함수 문서가 정확히 업데이트되었어요.

JSDoc 주석이 새로운 환경 타입을 반영하도록 업데이트되었고, 함수 구현은 변경되지 않았어요. API 레이어 가이드라인을 잘 준수하고 있어요:

• axiosInstance 래퍼 사용 ✓
• async/await 패턴 ✓
• 타입 안정성 확보 ✓
• 적절한 에러 처리 ✓

src/pages/login/LoginPage.tsx (1)

14-48: 로그인 플로우 문서화가 일관되게 업데이트되었어요.

카카오 로그인 흐름 설명에서 환경 네이밍이 'dev'로 통일되었어요. 코드 로직은 변경되지 않았고 환경 감지 및 리다이렉트 처리가 올바르게 유지되고 있어요.

src/pages/login/types/environment.ts (1)

1-1: 타입 정의는 올바릅니다.

AuthEnvironment 타입이 'local' | 'preview' | 'dev'로 변경되었으며, 모든 코딩 가이드라인을 준수합니다(export type 사용, PascalCase 네이밍). 코드베이스의 주석에 환경 매핑이 명확하게 문서화되어 있습니다:

• env=local: http://localhost:5173
• env=preview: http://preview.houme.kr
• env=dev: https://www.houme.kr

'dev'는 실제로는 프로덕션 환경(www.houme.kr)을 나타내는 의도적인 네이밍이며, 백엔드와 동일하게 조율되어 있습니다. 유지보수를 위해 이 매핑이 명확하게 문서화되어 있다면 현재 구현으로 문제없습니다.

---

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.}

[github-actions]

빌드 결과

빌드 성공 🎊

[github-actions]

🎨 Storybook 빌드 완료!

📚 Storybook: https://686a831b8e000345a949970a-araackiguy.chromatic.com/
🔍 Chromatic: https://www.chromatic.com/build?appId=686a831b8e000345a949970a&number=725

📊 빌드 정보

• 빌드 상태: success
• 테스트된 스토리: 0개
• 변경된 컴포넌트: 0개

🔍 시각적 변경사항: 0개 발견