토큰 만료에 대한 처리를 axios가 아닌 middleware에서 처리한다.

[jeongwoo903]

📝 작업 내용

리팩토링 과정 중 다음과 같은 에러가 발생했습니다.

Failed to fetch: Error: Cookies can only be modified in a Server Action or Route Handler. 

원인은 서버 컴포넌트에서 api fetching을 시도하고 있었는데 토큰 만료 시, 발생하는 await deleteTokenAction(); 해당 Server Action 때문에 불가피 하게 발생하고 있었습니다.

이유를 찾아보니 서버 컴포넌트에서는 응답헤더를 설정할 수 없다고 하더라구요.
서버 컴포넌트에서 데이터를 fetching하기 위해선 서버 컴포넌트를 사용해야 하는데, 그렇다고 서버 컴포넌트에서 쿠키를 세팅하려고 하면 에러가 발생을 하니 곤란한 상태입니다..

생각을 해보다가 미들웨어는 서버 컴포넌트의 렌더링 이전에 동작을 하기 때문에 해당 레이어에서 토큰 리프래쉬 및 쿠키 설정을 옮기면 될 것 같다는 생각을 했습니다.

다만 로직 세팅을 하려고 하니 만료 기간이나 refresh 정책에 대해서 이해가 조금 부족한 것 같아서 논의 후 처리하려고 합니다.

---

const onError = async (error: AxiosError<IErrorResponse>) => {
  if (error.response) {
    // 토큰 만료에 대한 redirect 처리
    if (error.response.data?.code === 'TOKEN_EXPIRED') {
      await deleteTokenAction();
      window.location.href = '/landing';
      // eslint-disable-next-line @typescript-eslint/no-empty-function
      return new Promise(() => {});
    }
    return Promise.reject(error);
  }

현재는 다음과 같은 방식으로 TOKEN_EXPIRED에 대한 처리가 이뤄지고 있는데 mock 데이터로 에러 시나리오를 만들어보면 다음과 같이 한 박자 늦게 동작합니다.

2025-09-25.3.34.53.mov
에러 시나리오

해당 처리를 하면 위와 같은 문제들도 부가적으로 처리가 될 거라고 기대하고 있습니다.

📢 참고 사항

📌 관련된 이슈

✅ Check List

• Notion task board에 링크를 기입했나요?
• assignees, label을 맞게 설정했나요?