fix: 편지함 오류 수정 (#72)

* fix: 토큰 만료로 reissue 실패시 로그아웃 안되는 문제 해결

* fix: reissue 에러 시 에러 처리 안되는 문제 해결
- client.ts의 interceptors.response.use 구문 내에서 api 호출및 데이터 가공을 함수 밖으로 꺼냄

* fix: mailbox에서 isClosed 옵션 반대로 보여주는 문제 해결
- isClosed 상태를 반대로 받아와서 상태를 잘못 보여주는 문제 해결

* fix: 401 에러가 아닌 경우 바로 로그아웃 되는 문제 해결

* FIx: format date 로직 수정
- 소숫점 이하 자리로 인해 에러가 날 경우가 있을 것 같아서 . 기준 split 추가

* fix: mailBox 배포 api에 따른 수정 작업
- sharePost 요청 요청자 id 삭제
- 상세 페이지 api 경로 수정
- 우편함 상세체이지 날짜 잘못표기하는 에러 수정

---------

Co-authored-by: nirii00 <[email protected]>

Author: nirii00

src/apis/client.ts

@@ -31,13 +31,24 @@ const processQueue = (error: unknown, token: string | null = null) => {
   failedQueue = [];
 };
 
+const callReissue = async () => {
+  try {
+    const response = await getNewToken();
+    const newToken = response?.data.accessToken;
+    return newToken;
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+
 client.interceptors.request.use(
   (config) => {
+    console.log('response again', config);
+
     const accessToken = useAuthStore.getState().accessToken;
     if (config.url !== '/auth/reissue' && accessToken) {
       config.headers.Authorization = `Bearer ${accessToken}`;
     }
-
     return config;
   },
   (error) => Promise.reject(error),
@@ -48,14 +59,12 @@ client.interceptors.response.use(
   async (error) => {
     const setAccessToken = useAuthStore.getState().setAccessToken;
     const logout = useAuthStore.getState().logout;
-    const originalRequest = error.config;
+    const isLoggedIn = useAuthStore.getState().isLoggedIn;
 
-    if (!originalRequest) return Promise.reject(error);
+    const originalRequest = error.config;
 
-    if (
-      originalRequest.url === '/auth/reissue' ||
-      originalRequest.url.includes('/api/auth/token?state=')
-    ) {
+    if (!originalRequest || originalRequest.url === '/auth/reissue') {
+      if (isLoggedIn) logout();
       return Promise.reject(error);
     }
 
@@ -79,27 +88,21 @@ client.interceptors.response.use(
         } catch (e) {
           return Promise.reject(e);
         }
-      }
-
-      isRefreshing = true;
-
-      try {
-        const response = await getNewToken();
-        const newToken = response?.data.accessToken;
-
-        if (!newToken) throw new Error('Failed to refresh token');
-
-        setAccessToken(newToken);
-        processQueue(null, newToken);
-
-        isRefreshing = false;
-        originalRequest.headers.Authorization = `Bearer ${newToken}`;
-        return client(originalRequest);
-      } catch (e) {
-        processQueue(e, null);
-        isRefreshing = false;
-        logout();
-        return Promise.reject(e);
+      } else {
+        isRefreshing = true;
+        try {
+          const newToken = await callReissue();
+          setAccessToken(newToken);
+          processQueue(null, newToken);
+          isRefreshing = false;
+          originalRequest.headers.Authorization = `Bearer ${newToken}`;
+          return client(originalRequest);
+        } catch (e) {
+          processQueue(e, null);
+          isRefreshing = false;
+          if (isLoggedIn) logout();
+          return Promise.reject(e);
+        }
       }
     }
     return Promise.reject(error);

src/apis/mailBox.ts

@@ -12,8 +12,7 @@ export const getMailbox = async () => {
 
 export const getMailboxDetail = async (id: number, pageParam: number) => {
   try {
-    const response = await client.get(`/api/mailbox/${id}?page=${pageParam}&size=20`);
-    // const response = await client.get(`/api/mailbox/${id}`);
+    const response = await client.get(`/api/mailbox/${id}/detail?page=${pageParam}&size=20`);
 
     if (!response) throw new Error('error while fetching mailbox detail data');
     return response.data;

src/main.tsx

@@ -21,5 +21,5 @@ createRoot(document.getElementById('root')!).render(
       <App />
     </BrowserRouter>
   </QueryClientProvider>,
-  // </StrictMode>,
+  // </StrictMode>
 );

src/pages/LetterBox/index.tsx

@@ -21,6 +21,7 @@ const fetchMailLists = async () => {
   const response = await getMailbox();
   if (!response) throw new Error();
   const data: LetterBoxData[] = response.data;
+  console.log(data);
   // 정렬?
   return data;
 };
@@ -63,7 +64,7 @@ const LetterBoxPage = () => {
                     zipCode={data.oppositeZipCode}
                     letterCount={data.letterCount}
                     isChecked={data.oppositeRead}
-                    isClosed={data.active}
+                    isClosed={!data.active}
                   />
                 )),
               ).map((row, index) =>

src/pages/LetterBoxDetail/components/LetterPreview.tsx

@@ -61,7 +61,7 @@ const LetterPreview = forwardRef<HTMLDivElement, LetterPreviewProps>((props, ref
 
   return (
     <LetterWrapper isSender={isSend} onClick={() => handleItemClick(id)} ref={ref}>
-      <p className="body-r text-gray-80 mb-3">{date}</p>
+      <p className="body-r text-gray-80 mb-3">{formatDate(date)}</p>
       <p className="body-m text-gray-80 line-clamp-1 break-all">{title}</p>
     </LetterWrapper>
   );

src/pages/LetterBoxDetail/index.tsx

@@ -35,7 +35,7 @@ const LetterBoxDetailPage = () => {
     useInfiniteQuery({
       queryKey: ['mailBoxDetail', userInfo.id],
       queryFn: async ({ pageParam }) => {
-        console.log(`Fetching page: ${pageParam}`); // 디버깅용
+        console.log(`Fetching page: ${pageParam}`);
         const response = await getMailboxDetail(userInfo.id, pageParam);
         console.log(response.data);
         return response.data;
@@ -73,7 +73,7 @@ const LetterBoxDetailPage = () => {
 
   const shareMutation = useMutation({
     // Todo : useAuthStore -> myId 대체
-    mutationFn: () => postShareProposals(selected, 1, userInfo.id, shareComment),
+    mutationFn: () => postShareProposals(selected, userInfo.id, shareComment),
     onSuccess: () => {
       toggleShareMode();
       setShareComment('');

src/utils/formatDate.ts

@@ -1,11 +1,12 @@
 const formatDate = (isoString: string) => {
-  const date = new Date(isoString);
+  const trimmedIsoString = isoString.split('.')[0];
+  const date = new Date(trimmedIsoString);
   return date
     .toLocaleDateString('ko-KR', {
       year: 'numeric',
       month: '2-digit',
       day: '2-digit',
     })
-    .replace(/-/g, '.');
+    .replace(/\./g, '.');
 };
 export default formatDate;