[feat] 기능 오류 사항 수정

src/api/axios.config.ts

@@ -1,3 +1,5 @@
+/* eslint-disable no-param-reassign */
+/* eslint-disable implicit-arrow-linebreak */
 /* eslint-disable no-underscore-dangle */
 /* eslint-disable consistent-return */
 import axios from 'axios';
@@ -40,10 +42,23 @@ const api = axios.create({
   baseURL: BASE_URL, // 기본 URL 설정
   headers: {
     'Content-Type': 'application/json',
-    Authorization: `Bearer ${accessToken}`,
+    // Authorization: `Bearer ${accessToken}`,
   },
 });
 
+api.interceptors.request.use(
+  (config) => {
+    const token = getCookie('accessToken'); // 요청 직전에 액세스 토큰을 쿠키에서 가져옵니다.
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`; // 헤더에 액세스 토큰을 설정합니다.
+    }
+    return config;
+  },
+  (error) =>
+    // 요청 에러가 발생했을 경우 처리
+    Promise.reject(error),
+);
+
 api.interceptors.response.use(
   (response) => response, // 성공 응답은 그대로 반환
   async (error) => {
@@ -69,11 +84,46 @@ api.interceptors.response.use(
 
 export { api };
 
-export const formApi = axios.create({
+const formApi = axios.create({
   withCredentials: true,
   baseURL: BASE_URL,
   headers: {
     'Content-Type': 'multipart/form-data',
     Authorization: `Bearer ${accessToken}`,
   },
 });
+
+formApi.interceptors.request.use(
+  (config) => {
+    const token = getCookie('accessToken');
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+  },
+  (error) => Promise.reject(error),
+);
+
+formApi.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    const originalRequest = error.config;
+    if (error.response.status === 401 && !originalRequest._retry) {
+      originalRequest._retry = true;
+      try {
+        const data = await reIssuedToken();
+        formApi.defaults.headers.common.Authorization = `Bearer ${data.data.access_token}`;
+        originalRequest.headers.Authorization = `Bearer ${data.data.access_token}`;
+
+        return formApi(originalRequest);
+      } catch (refreshError) {
+        console.error('Failed to refresh token:', refreshError);
+        return Promise.reject(refreshError);
+      }
+    }
+
+    return Promise.reject(error);
+  },
+);
+
+export { formApi };

src/app/components/Header.tsx

@@ -8,7 +8,7 @@ import category from '@/util/category.json';
 import { useQuery } from '@tanstack/react-query';
 import { login, logout } from '@/api/user.ts';
 import ignorePath from '../styles/ignorePath.ts';
-import { getCookie, removeCookie } from '../cookies.tsx';
+import { removeCookie } from '../cookies.tsx';
 
 const mont = Montserrat({ subsets: ['latin'], weight: ['500'] });
 
@@ -20,18 +20,11 @@ function Header() {
   const router = useRouter();
   const path = usePathname() || '';
 
-  const { data, isLoading, isError } = useQuery({
+  const { data, isLoading } = useQuery({
     queryKey: ['login'],
     queryFn: login,
   });
 
-  // 토큰이 있는데 401 에러가 발생하면 새로고침
-  if (isError && getCookie('accessToken')) {
-    // setTimeout(() => {
-    //   window.location.reload();
-    // }, 100);
-  }
-
   if (ignorePath().includes(path)) {
     return null;
   }
@@ -165,7 +158,7 @@ function Header() {
 
         {/* 메뉴 푸터 */}
         <button
-          className="m-8 flex h-12 w-full flex-col"
+          className="mb-8 flex h-12 w-full flex-col p-8"
           onClick={() => {
             if (data) {
               logout();

src/app/home/Body.tsx

@@ -8,7 +8,6 @@
 
 'use client';
 
-import Script from 'next/script';
 import { Map, MapMarker } from 'react-kakao-maps-sdk';
 import Image from 'next/image';
 import { useEffect, useRef, useState } from 'react';
@@ -195,10 +194,6 @@ function Distance() {
           className="m-4 h-[28rem] w-[50rem] border border-zinc-300"
           id="map"
         >
-          <Script
-            src={process.env.NEXT_PUBLIC_KAKAO_SDK_URL}
-            strategy="beforeInteractive"
-          />
           {locPosition ? (
             <Map
               center={locPosition}
@@ -221,7 +216,9 @@ function Distance() {
               ))}
             </Map>
           ) : (
-            <p className="flex items-center justify-center">Loading map...</p>
+            <p className="flex items-center justify-center">
+              GPS 기능을 활성화 해 주세요.
+            </p>
           )}
         </div>
       </div>

src/app/layout.tsx

@@ -2,6 +2,7 @@ import React, { Suspense } from 'react';
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import './styles/globals.css';
+import Script from 'next/script';
 import StoreProvider from './StoreProvider.tsx';
 import Header from './components/Header.tsx';
 import Footer from './components/Footer.tsx';
@@ -31,6 +32,11 @@ export default function RootLayout({
           <Suspense fallback={<div>로딩중인데요?ㅋㅋ</div>}>
             <Header />
             <StoreProvider>
+              <Script
+                type="text/javascript"
+                src={process.env.NEXT_PUBLIC_KAKAO_SDK_URL}
+                strategy="beforeInteractive"
+              ></Script>
               <div className="flex min-h-screen min-w-full">{children}</div>
             </StoreProvider>
             <Footer />