Trinity-goorm · chaeheonjeong · Mar 18, 2025 · Mar 16, 2025 · Mar 17, 2025 · Mar 18, 2025
diff --git a/index.html b/index.html
@@ -11,8 +11,14 @@
       rel="stylesheet"
       href="https://fonts.googleapis.com/css2?family=Material+Icons"
     />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined&display=swap">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200&icon_names=home">
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined&display=swap"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200&icon_names=home"
+    />
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     "react-router-dom": "^7.1.5",
     "react-spinners": "^0.15.0",
     "recoil": "^0.7.7",
+    "rollup-plugin-visualizer": "^5.14.0",
     "styled-components": "^6.1.15",
     "text-encoding": "^0.7.0",
     "unsplash-js": "^7.0.19",
@@ -56,7 +57,6 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jsdom": "^26.0.0",
-    "rollup-plugin-visualizer": "^5.14.0",
     "vite": "^6.0.5",
     "vitest": "^3.0.7"
   }

diff --git a/src/api/auth/PostLogin.js b/src/api/auth/PostLogin.js
@@ -3,7 +3,7 @@ const BASE_URL = import.meta.env.VITE_BASE_URL;
 
 const PostLogin = async (authCode) => {
   try {
-    const response = await axios.post(`http://10.0.133.177:8080/login`, {
+    const response = await axios.post(`${BASE_URL}/api/login`, {
       authCode,
     });
 

diff --git a/src/api/auth/PostLogout.js b/src/api/auth/PostLogout.js
@@ -4,7 +4,7 @@ const BASE_URL = import.meta.env.VITE_BASE_URL;
 
 const PostLogout = async (refreshToken) => {
   try {
-    const response = await axios.post(`${BASE_URL}/logout`, null, {
+    const response = await axios.post(`${BASE_URL}/api/logout`, null, {
       headers: {
         refresh: refreshToken,
       },

diff --git a/src/api/requestHandler.js b/src/api/requestHandler.js
@@ -16,7 +16,7 @@ const refreshAccessToken = async () => {
       throw new Error('Refresh token not found');
     }
 
-    const response = await axios.post(`${BASE_URL}/token/reissue`, {
+    const response = await axios.post(`${BASE_URL}/api/token/reissue`, {
       refresh: refreshToken,
     });
 
@@ -64,7 +64,7 @@ const requestHandler = async ({
     // 요청 보내기
     const response = await axios({
       method,
-      url: `http://10.0.133.177:8080/api${endpoint}`,
+      url: `${BASE_URL}/api${endpoint}`,
       headers: {
         'Content-Type': 'application/json',
         Authorization: `Bearer ${token}`,
@@ -82,10 +82,10 @@ const requestHandler = async ({
   } catch (error) {
     console.log(error);
     if (error.response?.status === 401) {
-      //window.location.href = '/login';
-      //localStorage.clear();
+      window.location.href = '/login';
+      localStorage.clear();
 
-      // const originalRequest = error.config;
+      /* // const originalRequest = error.config;
       // originalRequest._retry = true;
 
       // if (isRefreshing) {
@@ -111,7 +111,7 @@ const requestHandler = async ({
       //   isRefreshing = false;
       //   processQueue(refreshError, null);
       //   throw refreshError;
-      // }
+      // }*/
     }
 
     if (errorMessage) {

diff --git a/src/components/banner/Banner.jsx b/src/components/banner/Banner.jsx
@@ -1,42 +1,53 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, memo, Suspense } from "react";
 import * as style from "./style/Banner.js";
-import banner1 from "../../assets/img/banner1.webp";
-import banner2 from "../../assets/img/banner2.webp";
-import banner3 from "../../assets/img/banner3.webp";
-import banner4 from "../../assets/img/banner4.webp";
-import banner5 from "../../assets/img/banner5.webp";
-import banner6 from "../../assets/img/banner6.webp";
-import banner7 from "../../assets/img/banner7.webp";
+import banner1 from "../../assets/img/banner1.webp"; // 기본 이미지
 
-const banners = [
-    banner1,
-    banner2,
-    banner3,
-    banner4,
-    banner5,
-    banner6,
-    banner7
+const bannerImports = [
+    () => import("../../assets/img/banner2.webp"),
+    () => import("../../assets/img/banner3.webp"),
+    () => import("../../assets/img/banner4.webp"),
+    () => import("../../assets/img/banner5.webp"),
+    () => import("../../assets/img/banner6.webp"),
+    () => import("../../assets/img/banner7.webp"),
+    () => import("../../assets/img/banner8.webp"),
 ];
 
-const Banner = () => {
+const Banner = memo(() => {
     const [currentIndex, setCurrentIndex] = useState(0);
+    const [loadedBanners, setLoadedBanners] = useState([banner1]);
 
+    // ✅ Lazy Loading 적용
     useEffect(() => {
+        const loadNextImage = async () => {
+            if (loadedBanners.length < bannerImports.length + 1) {
+                try {
+                    const nextImage = await bannerImports[loadedBanners.length - 1]();
+                    setLoadedBanners((prevBanners) => [...prevBanners, nextImage.default]);
+                } catch (error) {
+                    console.error("Failed to load image", error);
+                }
+            }
+        };
+
         const interval = setInterval(() => {
-            setCurrentIndex((prevIndex) => (prevIndex + 1) % banners.length);
+            setCurrentIndex((prevIndex) => (prevIndex + 1) % (loadedBanners.length));
+            loadNextImage(); // ✅ 다음 배너 이미지를 필요할 때만 로드
         }, 4000);
+
         return () => clearInterval(interval);
-    }, [currentIndex]); // ✅ `currentIndex` 변경될 때만 실행
+    }, [currentIndex, loadedBanners]);
 
     return (
         <style.SliderContainer>
-            {banners.map((image, index) => (
-                <style.Slide key={index} active={index === currentIndex}>
-                    <img src={image} alt={`Banner ${index + 1}`} />
-                </style.Slide>
-            ))}
+            <Suspense fallback={<div>Loading Banner...</div>}>
+                {loadedBanners.map((image, index) => (
+                    <style.Slide key={index} active={index === currentIndex}>
+                        <img src={image} alt={`Banner ${index + 1}`} />
+                    </style.Slide>
+                ))}
+            </Suspense>
         </style.SliderContainer>
     );
-};
+});
 
 export default Banner;
diff --git a/src/components/recommend/RecommendFeed.jsx b/src/components/recommend/RecommendFeed.jsx
@@ -3,6 +3,7 @@ import { useNavigate } from "react-router-dom";
 import SaveButton from "../save/SaveButton.jsx";
 import wine from "../../assets/img/wineBar.jpg";
 import useSingleLike from "../../hooks/useSingleLike.js";
+import ProfileComponent from "../../components/search/ProfilerTableLogWrapper.jsx";
 
 
 const RecommendFeed = ({item}) => {