Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 4 additions & 5 deletions src/api/axiosInstance.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ let isRedirecting = false;
axiosInstance.interceptors.response.use(
(response) => response,
async (error) => {
if (error.response?.data.error === 'Unauthorized') {
if (error.status === 401) {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

if (isRedirecting) {
return Promise.reject(error);
}
Expand All @@ -35,18 +35,17 @@ axiosInstance.interceptors.response.use(

if (refreshResponse.code === '200') {
isRedirecting = false;

return axiosInstance(error.config);
}
} catch (errors) {
if (axios.isAxiosError(errors)) {
const refreshError = errors as AxiosError<IRefreshResponse>;
if (refreshError.response?.data.message === 'The token is null.') {
if (refreshError.status === 401) {
console.error('refreshToken이 없습니다. 로그인 페이지로 이동합니다.');
void logout();
localStorage.clear();
} else if (refreshError.response?.data.message === 'The token is invalid.') {
console.error('refreshToken이 만료되었습니다. 로그인 페이지로 이동합니다.');
} else if (refreshError.status === 404) {
console.error('사용자 정보를 찾지 못했습니다. 로그인 페이지로 이동합니다.');
void logout();
localStorage.clear();
} else {
Expand Down
4 changes: 2 additions & 2 deletions src/components/layout/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export default function Footer() {
{/* 상단 */}
<ul className="flex flex-wrap gap-x-4 gap-y-2 text-sm font-caption text-default-gray-800">
<li>
<Link to="/">개인정보 처리방침</Link>
<div onClick={() => alert('아직 지원하지 않는 기능이에요')}>개인정보 처리방침</div>
</li>
Comment on lines +10 to 11
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ 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.

<span>|</span>
<li>
Expand All @@ -20,7 +20,7 @@ export default function Footer() {
</li>
<span>|</span>
<li>
<Link to="/">고객문의</Link>
<div onClick={() => alert('아직 지원하지 않는 기능이에요')}>고객문의</div>
</li>
</ul>

Expand Down