[Deploy] 배포 #114
[Deploy] 배포 #114
Conversation
Summary by CodeRabbit
Walkthrough응답 인터셉터에서 문자열 메시지 기반 판별을 HTTP 상태 코드 기반(401/404)으로 변경하고, 토큰 갱신 실패 분기 메시지를 조정했습니다. 푸터의 일부 링크를 알림을 띄우는 정적 요소로 전환했습니다. 공개 API 시그니처 변화는 없습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant App
participant Axios as Axios Interceptor
participant API
participant Auth as Token Refresh API
User->>App: 요청 트리거
App->>Axios: HTTP 요청
Axios->>API: 원본 요청 전송
API-->>Axios: 응답(200/401/기타)
alt 200
Axios-->>App: 정상 응답 전달
else 401 (로그인/회원가입 제외, 미리다이렉트)
Axios->>Auth: 토큰 리프레시 요청
alt 리프레시 성공
Axios->>API: 원본 요청 재시도
API-->>Axios: 재시도 응답
Axios-->>App: 재시도 결과 전달
else 리프레시 실패(401/404)
Axios-->>App: 로그아웃 및 스토리지 초기화, 오류 처리
end
else 기타 오류
Axios-->>App: 로그/로그아웃/스토리지 초기화
end
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. ✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
Status, Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
src/api/axiosInstance.ts(2 hunks)src/components/layout/Footer.tsx(2 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
src/components/layout/Footer.tsx (2)
src/layout/layout.tsx (1)
Layout(10-20)src/components/home/info.tsx (1)
MainInfo(10-68)
src/api/axiosInstance.ts (1)
src/api/auth/auth.ts (1)
logout(33-36)
🪛 Biome (2.1.2)
src/components/layout/Footer.tsx
[error] 10-11: Static Elements should not be interactive.
To add interactivity such as a mouse or key event listener to a static element, give the element an appropriate role value.
(lint/a11y/noStaticElementInteractions)
[error] 10-11: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
(lint/a11y/useKeyWithClickEvents)
🔇 Additional comments (1)
src/api/axiosInstance.ts (1)
43-49:refreshError.status→refreshError.response?.status로 수정 필요아래처럼 분기 조건을 고쳐야 정상적으로 동작합니다:
@@ src/api/axiosInstance.ts:43-49 - if (refreshError.status === 401) { + if (refreshError.response?.status === 401) { console.error('refreshToken이 없습니다. 로그인 페이지로 이동합니다.'); void logout(); localStorage.clear(); - } else if (refreshError.status === 404) { + } else if (refreshError.response?.status === 404) { console.error('사용자 정보를 찾지 못했습니다. 로그인 페이지로 이동합니다.'); void logout(); localStorage.clear();수동 점검 부탁드립니다:
- 백엔드가 실제로 401/404 상태코드를 위 케이스에 매핑하는지 확인
- 과거 메시지 기반 분기 흔적(예:
"The token is null.","The token is invalid.")이 남아 있는지 아래 명령어로 추가 점검rg -nP -C2 "The token is (null|invalid)\."
| (response) => response, | ||
| async (error) => { | ||
| if (error.response?.data.error === 'Unauthorized') { | ||
| if (error.status === 401) { |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
AxiosError에 status 필드 직접 접근은 잘못된 패턴 — 401 분기 동작하지 않습니다
Axios에서는 HTTP 상태코드가 error.response?.status에 있습니다. 현재 error.status === 401은 항상 실패하여 리프레시 로직이 실행되지 않습니다.
아래처럼 수정해 주세요.
- if (error.status === 401) {
+ if (error.response?.status === 401) {다음 스크립트로 레포 내에서 유사한 오용을 점검해 주세요.
🏁 Script executed:
#!/bin/bash
# AxiosError에서 .status 직접 접근 사용 여부 점검
rg -nP -C2 --type=ts --type=tsx '\b(?:error|refreshError)\.status\b'Length of output: 98
이전 스크립트에서 --type=tsx를 인식하지 못해 오류가 발생했습니다. 아래처럼 파일 확장자를 직접 지정해 다시 확인해 주세요.
🏁 Script executed:
#!/bin/bash
# AxiosError에서 .status 직접 접근 사용 여부 점검 (.ts, .tsx 파일 대상)
rg -nP -C2 '\b(?:error|refreshError)\.status\b' -g '*.ts' -g '*.tsx'Length of output: 1157
AxiosError 상태코드 접근 방식 수정 요청
AxiosError의 HTTP 상태코드는 error.response?.status에 저장되므로, error.status 또는 refreshError.status 직접 접근은 항상 undefined를 반환해 분기가 동작하지 않습니다. 아래 3곳을 모두 수정해 주세요.
• src/api/axiosInstance.ts:21
- if (error.status === 401) {
+ if (error.response?.status === 401) {• src/api/axiosInstance.ts:43
- if (refreshError.status === 401) {
+ if (refreshError.response?.status === 401) {• src/api/axiosInstance.ts:47
- } else if (refreshError.status === 404) {
+ } else if (refreshError.response?.status === 404) {🤖 Prompt for AI Agents
In src/api/axiosInstance.ts around lines 21, 43 and 47, the code is checking
error.status / refreshError.status but AxiosError stores HTTP status on
error.response?.status; update all three checks to read error.response?.status
(and refreshError.response?.status) instead of error.status, using optional
chaining and proper type narrowing/casting for AxiosError if needed so the 401
and other status branches evaluate correctly.
| <div onClick={() => alert('아직 지원하지 않는 기능이에요')}>개인정보 처리방침</div> | ||
| </li> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
div에 onClick 사용으로 접근성(a11y) 위반 — button으로 교체 권장
정적 요소에 인터랙션을 부여해 lint 경고가 발생합니다(noStaticElementInteractions, useKeyWithClickEvents). 시멘틱한 <button>을 사용하면 키보드 접근성(Enter/Space)과 역할 노출이 자동으로 해결됩니다.
아래처럼 교체해 주세요.
- <div onClick={() => alert('아직 지원하지 않는 기능이에요')}>개인정보 처리방침</div>
+ <button type="button" onClick={() => alert('아직 지원하지 않는 기능이에요')} className="cursor-pointer">
+ 개인정보 처리방침
+ </button>
...
- <div onClick={() => alert('아직 지원하지 않는 기능이에요')}>고객문의</div>
+ <button type="button" onClick={() => alert('아직 지원하지 않는 기능이에요')} className="cursor-pointer">
+ 고객문의
+ </button>참고: 향후 실제 페이지가 준비되면 <Link>로 되돌리거나, 준비 중인 기능이라면 토스트/모달 등 비차단 UI를 고려해 주세요.
Also applies to: 23-24
🧰 Tools
🪛 Biome (2.1.2)
[error] 10-11: Static Elements should not be interactive.
To add interactivity such as a mouse or key event listener to a static element, give the element an appropriate role value.
(lint/a11y/noStaticElementInteractions)
[error] 10-11: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
(lint/a11y/useKeyWithClickEvents)
🤖 Prompt for AI Agents
In src/components/layout/Footer.tsx around lines 10-11 (and also apply same
change to lines 23-24), replace the interactive <div> with a semantic <button>
so keyboard and screen-reader accessibility is provided; keep the existing
onClick handler, add type="button" to avoid form submit side-effects, preserve
existing className/styles and aria-label if needed, and remove any redundant
role or tabIndex attributes—when the real page exists switch back to a <Link> or
use a non-blocking toast/modal for “coming soon” behavior.
🚨 관련 이슈
✨ 변경사항
✏️ 작업 내용
😅 미완성 작업
📢 논의 사항 및 참고 사항