fix: 키 설정

[KwonDeaGeun]

Summary by CodeRabbit

릴리스 노트

• 새로운 기능
  • API 키 인증 지원 추가로 보안 강화
  • 새로운 환경 변수를 통한 API 키 설정 가능하며, 설정 시 모든 API 요청에 인증 헤더 포함

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
what-the-bus-web	Ready	Preview	Comment	Nov 3, 2025 4:57am

[coderabbitai]

개요

.env.sample 파일에 새로운 환경변수 VITE_API_KEY를 추가하고, src/lib/api.ts에서 이 변수가 정의된 경우 API 요청에 x-api-key 헤더를 조건부로 포함하도록 구현했습니다.

변경 사항

코호트 / 파일명	변경 요약
환경 설정 \.env.sample``	VITE_API_KEY 환경변수 추가; 기존 VITE_API_BASE_URL은 유지
API 클라이언트 \src/lib/api.ts``	VITE_API_KEY가 정의된 경우 모든 API 요청에 x-api-key 헤더를 조건부로 포함하도록 수정

예상 코드 리뷰 난이도

🎯 1 (간단함) | ⏱️ ~5분

• 간단한 환경변수 추가 및 조건부 헤더 설정
• 기존 API 서명 및 제어 흐름에는 변화 없음

시

🐰 새로운 API 열쇠를 들고,
헤더에 담아 요청을 보내고,
보안이 한 발 더 가까워졌네!
작은 변화가 모여,
든든한 방패가 되었어! 🔐

Pre-merge checks and finishing touches

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title Check	❓ Inconclusive	PR 제목 "fix: 키 설정"은 변경 사항과 관련이 있습니다. 실제 변경 사항은 VITE_API_KEY 환경 변수를 추가하고 API 클라이언트에 x-api-key 헤더 로직을 구현하는 것으로, 이는 키 설정과 직접적으로 연결됩니다. 그러나 "키 설정"이라는 표현은 상당히 모호하고 일반적입니다. 팀원이 커밋 히스토리를 훑어볼 때 이것이 구체적으로 API 키 환경 설정에 관한 것인지, 아니면 다른 종류의 키 설정인지 명확하게 파악하기 어렵습니다. 더 구체적인 제목(예: "API 키 환경 변수 설정 추가")이 의도를 더 명확하게 전달할 수 있습니다.	제목을 더 구체적으로 개선하는 것을 권장합니다. 예를 들어 "fix: API 키 환경 변수 설정 추가" 또는 "fix: API 요청에 API 키 헤더 추가"와 같이 변경하면 변경 사항의 의도가 더 명확해질 것입니다.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/setting-api-key

---

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

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

.env.sample (1)

2-3: 정적 분석 도구에서 제안하는 선택적 개선 사항

정적 분석 도구가 다음 사항을 제안하고 있습니다:

• 환경 변수를 알파벳 순으로 정렬 (VITE_API_BASE_URL, VITE_API_KEY, VITE_KAKAO_MAP_API_KEY 순서)
• 파일 끝에 빈 줄 추가

이러한 개선 사항은 선택적이며 코드의 기능에는 영향을 주지 않습니다.

필요하다면 다음 diff를 적용하세요:

+VITE_API_BASE_URL=
+VITE_API_KEY=
 VITE_KAKAO_MAP_API_KEY=
-VITE_API_BASE_URL=
-VITE_API_KEY=
+

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b44165b and 2a78274.

📒 Files selected for processing (2)

• .env.sample (1 hunks)
• src/lib/api.ts (1 hunks)

🧰 Additional context used

🧠 Learnings (1)

📓 Common learnings

Learnt from: KwonDeaGeun
Repo: KwonDeaGeun/WhatTheBus-Web PR: 21
File: src/App.tsx:16-23
Timestamp: 2025-09-22T04:45:54.455Z
Learning: KwonDeaGeun은 TypeScript에서 any 타입 사용을 피하고 더 타입 안전한 코드를 선호한다.

🪛 dotenv-linter (4.0.0)

.env.sample

[warning] 2-2: [UnorderedKey] The VITE_API_BASE_URL key should go before the VITE_KAKAO_MAP_API_KEY key

(UnorderedKey)

---

[warning] 3-3: [EndingBlankLine] No blank line at the end of the file

(EndingBlankLine)

---

[warning] 3-3: [UnorderedKey] The VITE_API_KEY key should go before the VITE_KAKAO_MAP_API_KEY key

(UnorderedKey)

🔇 Additional comments (1)

src/lib/api.ts (1)

7-9: 구현은 정확하지만 클라이언트 측 API 키 노출 확인 필요

조건부 헤더 추가 구현이 올바르게 되어 있으며 타입 안전성도 유지되고 있습니다.

다만, Vite의 VITE_ 접두사가 붙은 환경 변수는 클라이언트 측 번들에 포함되어 브라우저에서 노출됩니다. API 키가 공개 API의 속도 제한을 위한 것이라면 문제없지만, 민감한 인증 정보라면 보안 위험이 될 수 있습니다.

이것이 의도된 동작인지 확인해 주세요. 만약 민감한 키라면 서버 측 프록시를 통한 요청을 고려해야 합니다.