From 26fbdba9dc1a3de036b7d03ab641ea6530cddb27 Mon Sep 17 00:00:00 2001
From: hyerin11 <hodolin24@naver.com>
Date: Tue, 6 Aug 2024 12:01:16 +0900
Subject: [PATCH 1/8] =?UTF-8?q?#=20db=EA=B0=92=20=EB=B0=9B=EC=95=84?=
 =?UTF-8?q?=EC=98=A4=EA=B8=B0=20=EC=84=B1=EA=B3=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/mainPage/FoodNav.js   | 10 +++++++---
 src/pages/userMain/CategoriesPage.js | 18 ++++++++++--------
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/components/mainPage/FoodNav.js b/src/components/mainPage/FoodNav.js
index 20c85d71..241de2ce 100644
--- a/src/components/mainPage/FoodNav.js
+++ b/src/components/mainPage/FoodNav.js
@@ -14,9 +14,13 @@ const getRandomStores = (stores, count) => {
 
 // 🌿 카테고리 문자열에서 실제 foodType만 추출하는 함수
 const extractFoodType = (category) => {
-  // category 문자열에서 'foodType=' 이후의 값을 추출
-  const match = category.match(/\(foodType=(.*?)\)/);
-  return match ? match[1] : category; // 추출된 foodType 또는 원래 문자열 반환
+   // category가 유효한 문자열인지 확인
+   if (category && typeof category === 'string') {
+    // 'foodType=' 이후의 값 추출
+    const match = category.match(/\(foodType=(.*?)\)/);
+    return match ? match[1] : category; 
+    }
+  return ''; // category가 유효하지 않은 경우 빈 문자열 반환
 };
 
 const FoodNav = ({ selectedCategory, stores }) => {
diff --git a/src/pages/userMain/CategoriesPage.js b/src/pages/userMain/CategoriesPage.js
index f49f75d6..ecaa72d1 100644
--- a/src/pages/userMain/CategoriesPage.js
+++ b/src/pages/userMain/CategoriesPage.js
@@ -29,19 +29,22 @@ const categories = Object.keys(categoriesInfo).map(key => categoriesInfo[key].na
 
 // 🌿 카테고리 문자열에서 실제 foodType만 추출하는 함수
 const extractFoodType = (category) => {
-  const match = category.match(/\(foodType=(.*?)\)/);
-  return match ? match[1] : category; 
+  if (category && typeof category === 'string') {
+    const match = category.match(/\(foodType=(.*?)\)/);
+    return match ? match[1] : category;
+  }
+  return ''; // category가 유효하지 않은 경우 빈 문자열 반환
 };
 
 const CategoriesPage = () => {
   const { categoryName } = useParams();
   const [stores, setStores] = useState([]);
 
-  // 카테고리 정보
-  const category = categoriesInfo[categoryName];
+  // 카테고리 정보(null인 경우 기타로 분류)
+  const category = categoriesInfo[categoryName] || { name: '기타', image: salad };
 
   useEffect(() => {
-    fetch(STORELISTS_URL) 
+    fetch(STORELISTS_URL)
       .then(response => response.json())
       .then(data => {
         const filteredStores = data.filter(store => extractFoodType(store.category) === category.name);
@@ -55,10 +58,9 @@ const CategoriesPage = () => {
       {/* 카테고리 분류(헤더) */}
       <div className={styles.header}>
         <h1>{category.name}</h1>
-          <img src={category.image} alt={category.name} />
-      
+        <img src={category.image} alt={category.name} />
       </div>
-      
+
       {/* 카테고리 버튼 */}
       <CategoryBtn categories={categories} onCategoryClick={() => {}} />
 

From 65d151ec3775602afce2905d1928af1abefd52fa Mon Sep 17 00:00:00 2001
From: hyerin11 <hodolin24@naver.com>
Date: Tue, 6 Aug 2024 12:02:38 +0900
Subject: [PATCH 2/8] =?UTF-8?q?#=20=EC=B0=9C=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/mainPage/CategoryList.js       |  25 ++-
 .../mainPage/CategoryList.module.scss         | 152 +++++++++---------
 2 files changed, 101 insertions(+), 76 deletions(-)

diff --git a/src/components/mainPage/CategoryList.js b/src/components/mainPage/CategoryList.js
index e107063f..29cfcbf6 100644
--- a/src/components/mainPage/CategoryList.js
+++ b/src/components/mainPage/CategoryList.js
@@ -1,16 +1,25 @@
-import React from 'react';
+import React, { useState } from 'react';
 import styles from './CategoryList.module.scss';
 import { useModal } from '../../pages/common/ModalProvider';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faWonSign, faBoxOpen } from "@fortawesome/free-solid-svg-icons";
+import { faWonSign, faBoxOpen, faHeart as faHeartSolid } from "@fortawesome/free-solid-svg-icons";
+import { faHeart as faHeartRegular } from "@fortawesome/free-regular-svg-icons";
 
 const CategoryList = ({ stores }) => {
     const { openModal } = useModal();
+    const [favorites, setFavorites] = useState({}); // 찜 상태를 관리할 객체
 
     const handleClick = (store) => {
         openModal('productDetail', { productDetail: store });
     };
 
+    const handleFavoriteClick = (storeId) => {
+        setFavorites(prevFavorites => ({
+            ...prevFavorites,
+            [storeId]: !prevFavorites[storeId]
+        }));
+    };
+
     return (
         <div className={styles.list}>
             <h1 className={styles.storeList}>우리 동네 가게 리스트</h1>
@@ -21,6 +30,18 @@ const CategoryList = ({ stores }) => {
                         className={`${styles.categoryItem} ${store.productCnt === 1 ? styles['low-stock'] : ''}`}
                         onClick={() => handleClick(store)}
                     >
+                        <div 
+                            className={styles.heartIcon} 
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                handleFavoriteClick(store.storeId);
+                            }}
+                        >
+                            <FontAwesomeIcon 
+                                icon={favorites[store.storeId] ? faHeartSolid : faHeartRegular} 
+                                className={favorites[store.storeId] ? styles.favorited : styles.notFavorited}
+                            />
+                        </div>
                         <img src={store.storeImg} alt={store.storeName} className={styles.categoryImage} />
                         {store.productCnt === 1 && <div className={styles.overlay}>SOLD OUT</div>}
                         <p className={styles.categoryName}>{store.storeName}</p>
diff --git a/src/components/mainPage/CategoryList.module.scss b/src/components/mainPage/CategoryList.module.scss
index 82d5c155..0d704d1a 100644
--- a/src/components/mainPage/CategoryList.module.scss
+++ b/src/components/mainPage/CategoryList.module.scss
@@ -30,89 +30,92 @@
   text-align: center;
   position: relative;
   height: 250px;
-}
-
-.categoryImage {
-  width: 100%;
-  height: 180px;
-  object-fit: cover;
-  display: block;
-  border-radius: 10px;
-  border: 1px solid #cecece;
-}
-
-.categoryItem p {
-  height: 15%;
-  display: flex;
-  align-items: center;
-  padding: 20px 0 10px 10px;
-  position: absolute;
-  bottom: 40px;
-  left: 0;
-  right: 0;
-  font-size: 20px;
-}
-
-.storePrice { 
-  font-size: 15px;
-  position: absolute;
-  bottom: 20px;
-  left: 10px;
-}
-
-.productCnt {
-  font-size: 15px;
-  position: absolute;
-  bottom: 20px;
-  right: 10px;
-}
+  
+  // 수량 0일 때 회색처리
+  position: relative;
+  overflow: hidden;  
 
+  .categoryImage {
+    width: 100%;
+    height: 180px;
+    object-fit: cover;
+    display: block;
+    border-radius: 10px;
+    border: 1px solid #cecece;
+    transition: opacity 0.3s ease; 
+  }
 
+  .overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 72%;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 15px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    font-size: 18px;
+    font-weight: bold;
+    opacity: 0; 
+    transition: opacity 0.3s ease;  
+  }
 
-// 수량 0일 때 회색처리
+  &.low-stock {
+    .overlay {
+      opacity: 1;
+    }
 
-.categoryItem {
-  position: relative;
-  overflow: hidden;  
-}
+    .categoryImage {
+      opacity: 0.5; 
+    }
+  }
 
-.categoryImage {
-  width: 100%;
-  height: 180px;
-  object-fit: cover;
-  display: block;
-  border-radius: 10px;
-  border: 1px solid #cecece;
-  transition: opacity 0.3s ease; 
-}
+  // 찜 기능 하트 아이콘
+  .heartIcon {
+    font-size: 18px;
+    color: rgb(255, 71, 114);
+    position: absolute;
+    right: 10px;
+    bottom: 80px;
+    z-index: 1;
+    transition: transform 0.3s ease, color 0.3s ease; 
+
+    &:hover {
+      transform: scale(1.2); 
+      color: rgb(255, 0, 100);
+    }
+  }
 
-.overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 72%;
-  background: rgba(0, 0, 0, 0.2);
-  border-radius: 15px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #fff;
-  font-size: 18px;
-  font-weight: bold;
-  opacity: 0; 
-  transition: opacity 0.3s ease;  
-}
+  p {
+    height: 15%;
+    display: flex;
+    align-items: center;
+    padding: 20px 0 10px 10px;
+    position: absolute;
+    bottom: 40px;
+    left: 0;
+    right: 0;
+    font-size: 20px;
+  }
 
-.categoryItem.low-stock .overlay {
-  opacity: 1;
-}
+  .storePrice {
+    font-size: 15px;
+    position: absolute;
+    bottom: 20px;
+    left: 10px;
+  }
 
-.categoryItem.low-stock .categoryImage {
-  opacity: 0.5; 
+  .productCnt {
+    font-size: 15px;
+    position: absolute;
+    bottom: 20px;
+    right: 10px;
+  }
 }
 
-
 @media (max-width: 1200px) {
   .categoryItem {
     flex: 1 1 calc(33.333% - 20px);
@@ -126,10 +129,11 @@
 }
 
 @media (max-width: 400px) {
-  .list{
+  .list {
     margin: 0 20px;
     width: 90%;
   }
+
   .categoryItem {
     flex: 1 1 100%;
   }

From 986ff37d1d7f373a4d61b00c59aa0459c708681e Mon Sep 17 00:00:00 2001
From: hyerin11 <hodolin24@naver.com>
Date: Tue, 6 Aug 2024 14:19:25 +0900
Subject: [PATCH 3/8] =?UTF-8?q?#=20slidesToScroll=20=EC=98=A4=EB=A5=98=20?=
 =?UTF-8?q?=ED=95=B4=EA=B2=B0=20=EB=B0=8F=205=EA=B0=9C=EC=94=A9=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/mainPage/FoodNav.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/mainPage/FoodNav.js b/src/components/mainPage/FoodNav.js
index 241de2ce..9ca609b5 100644
--- a/src/components/mainPage/FoodNav.js
+++ b/src/components/mainPage/FoodNav.js
@@ -39,10 +39,10 @@ const FoodNav = ({ selectedCategory, stores }) => {
   const settings = (slidesToShow) => ({
     dots: true,
     infinite: true,
-    speed: 500,
+    speed: 900,
     slidesToShow: slidesToShow,
-    slidesToScroll: 5,
-    centerMode: true,
+    slidesToScroll: slidesToShow,
+    centerMode: false,
     centerPadding: '0',
     arrows: true,
     responsive: [
@@ -50,7 +50,9 @@ const FoodNav = ({ selectedCategory, stores }) => {
         breakpoint: 400,
         settings: {
           dots: false,
-          slidesToShow: 2, 
+          slidesToShow: 2,
+          slidesToScroll: 1, 
+          centerMode: true,
           centerPadding: '10%',
         },
       },
@@ -102,7 +104,7 @@ const FoodNav = ({ selectedCategory, stores }) => {
       {/* 추천 가게 리스트(랜덤) */}
       <div className={styles.list}>
         <h2 className={styles.title}>이웃들의 추천 가게</h2>
-        <Slider {...settings(4)} className={styles.slider}>
+        <Slider {...settings(5)} className={styles.slider}>
           {randomStores.map((store, index) => (
             <div
               key={index}

From ad23acb61cab81e71049102cde6fe26df77c2629 Mon Sep 17 00:00:00 2001
From: hyerin11 <hodolin24@naver.com>
Date: Tue, 6 Aug 2024 16:25:50 +0900
Subject: [PATCH 4/8] =?UTF-8?q?#=20dot=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/mainPage/FoodNav.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/mainPage/FoodNav.js b/src/components/mainPage/FoodNav.js
index 9ca609b5..21dbb30f 100644
--- a/src/components/mainPage/FoodNav.js
+++ b/src/components/mainPage/FoodNav.js
@@ -37,7 +37,7 @@ const FoodNav = ({ selectedCategory, stores }) => {
   };
 
   const settings = (slidesToShow) => ({
-    dots: true,
+    dots: false,
     infinite: true,
     speed: 900,
     slidesToShow: slidesToShow,

From 7201af9cace75c17517d5404c960b07c45d90df8 Mon Sep 17 00:00:00 2001
From: hyerin11 <hodolin24@naver.com>
Date: Thu, 8 Aug 2024 11:24:40 +0900
Subject: [PATCH 5/8] =?UTF-8?q?#=20customerId=20=EC=9E=84=EC=8B=9C?=
 =?UTF-8?q?=EB=A1=9C=20=EC=B0=9C=20=EB=B2=84=ED=8A=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                       | 29 ++++++++++
 package.json                            |  1 +
 src/components/mainPage/CategoryList.js | 70 ++++++++++++++++++++++---
 3 files changed, 93 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ec67f89e..c79fc2a6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "axios": "^1.7.3",
         "bootstrap": "^5.3.3",
         "eslint-config-react-app": "^7.0.1",
         "eslint-plugin-jsx-a11y": "^6.9.0",
@@ -5391,6 +5392,29 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.3.tgz",
+      "integrity": "sha512-Ar7ND9pU99eJ9GpoGQKhKf58GpUOgnzuaB7ueNQ5BMi0p+LZ5oaEnfF999fAArcTIBwXTCHAmGcHOZJaWPq9Nw==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.1.1.tgz",
@@ -14487,6 +14511,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
diff --git a/package.json b/package.json
index f3ab8e06..00b2906d 100755
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.7.3",
     "bootstrap": "^5.3.3",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-jsx-a11y": "^6.9.0",
diff --git a/src/components/mainPage/CategoryList.js b/src/components/mainPage/CategoryList.js
index 29cfcbf6..2ba6db82 100644
--- a/src/components/mainPage/CategoryList.js
+++ b/src/components/mainPage/CategoryList.js
@@ -1,25 +1,81 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import styles from './CategoryList.module.scss';
 import { useModal } from '../../pages/common/ModalProvider';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faWonSign, faBoxOpen, faHeart as faHeartSolid } from "@fortawesome/free-solid-svg-icons";
 import { faHeart as faHeartRegular } from "@fortawesome/free-regular-svg-icons";
 
+// 하트 상태를 토글하고 서버에 저장하는 함수
+const toggleFavorite = async (storeId, customerId) => {
+    try {
+        const response = await fetch(`http://localhost:8083/api/favorites/${storeId}`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ customerId }),
+        });
+
+        if (!response.ok) {
+            throw new Error('Network response was not ok');
+        }
+
+        const data = await response.json();
+        console.log('Favorite toggled successfully:', data);
+    } catch (error) {
+        console.error('Error toggling favorite:', error);
+    }
+};
+
+const fetchFavorites = async (customerId, setFavorites) => {
+    try {
+        const response = await fetch(`http://localhost:8083/api/favorites/user/${customerId}`);
+        if (!response.ok) {
+            throw new Error('Network response was not ok');
+        }
+        const data = await response.json();
+        const favorites = data.reduce((acc, store) => {
+            acc[store.storeId] = true;
+            return acc;
+        }, {});
+        setFavorites(favorites);
+    } catch (error) {
+        console.error('Error fetching favorites:', error);
+    }
+};
+
 const CategoryList = ({ stores }) => {
     const { openModal } = useModal();
-    const [favorites, setFavorites] = useState({}); // 찜 상태를 관리할 객체
+    const [favorites, setFavorites] = useState({});
+
+    // 실제 customerId와 storeId 설정
+    const customerId = 'test@gmail.com'; // 실제 customerId
+    const storeId = 'thdghtjd115@naver.com'; // 실제 storeId
 
     const handleClick = (store) => {
         openModal('productDetail', { productDetail: store });
     };
 
-    const handleFavoriteClick = (storeId) => {
-        setFavorites(prevFavorites => ({
-            ...prevFavorites,
-            [storeId]: !prevFavorites[storeId]
-        }));
+    const handleFavoriteClick = async (storeId) => {
+        try {
+            await toggleFavorite(storeId, customerId);
+
+            // 찜 상태를 토글
+            setFavorites(prevFavorites => ({
+                ...prevFavorites,
+                [storeId]: !prevFavorites[storeId]
+            }));
+        } catch (error) {
+            console.error('Error toggling favorite:', error);
+        }
     };
 
+    useEffect(() => {
+        if (customerId) {
+            fetchFavorites(customerId, setFavorites);
+        }
+    }, [customerId]);
+
     return (
         <div className={styles.list}>
             <h1 className={styles.storeList}>우리 동네 가게 리스트</h1>

From 7d004e5b0b864efbb986b456fdaae4a8c70fdd5f Mon Sep 17 00:00:00 2001
From: hyerin11 <hodolin24@naver.com>
Date: Thu, 8 Aug 2024 15:12:08 +0900
Subject: [PATCH 6/8] =?UTF-8?q?#=20host-config=20=EC=B2=98=EB=A6=AC=20?=
 =?UTF-8?q?=EB=B0=8F=20JSON=20=ED=8C=8C=EC=8B=B1=20=ED=99=95=EC=9D=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/mainPage/CategoryList.js | 45 ++++++++++++++++---------
 src/config/host-config.js               |  4 ++-
 2 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/src/components/mainPage/CategoryList.js b/src/components/mainPage/CategoryList.js
index 2ba6db82..a7a92f64 100644
--- a/src/components/mainPage/CategoryList.js
+++ b/src/components/mainPage/CategoryList.js
@@ -4,11 +4,12 @@ import { useModal } from '../../pages/common/ModalProvider';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faWonSign, faBoxOpen, faHeart as faHeartSolid } from "@fortawesome/free-solid-svg-icons";
 import { faHeart as faHeartRegular } from "@fortawesome/free-regular-svg-icons";
+import { FAVORITESTORE_URL } from '../../config/host-config';
 
 // 하트 상태를 토글하고 서버에 저장하는 함수
 const toggleFavorite = async (storeId, customerId) => {
     try {
-        const response = await fetch(`http://localhost:8083/api/favorites/${storeId}`, {
+        const response = await fetch(`${FAVORITESTORE_URL}/${storeId}`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json',
@@ -16,29 +17,42 @@ const toggleFavorite = async (storeId, customerId) => {
             body: JSON.stringify({ customerId }),
         });
 
-        if (!response.ok) {
-            throw new Error('Network response was not ok');
+        // 응답의 Content-Type을 확인하여 JSON으로 파싱할 수 있는지 확인
+        const contentType = response.headers.get('Content-Type');
+        if (contentType && contentType.includes('application/json')) {
+            const data = await response.json();
+            console.log('Favorite toggled successfully:', data);
+        } else {
+            // JSON이 아닌 응답을 처리
+            const text = await response.text();
+            console.error('Unexpected response format:', text);
         }
 
-        const data = await response.json();
-        console.log('Favorite toggled successfully:', data);
     } catch (error) {
         console.error('Error toggling favorite:', error);
     }
 };
 
+// 사용자의 모든 찜 상태 조회
 const fetchFavorites = async (customerId, setFavorites) => {
     try {
-        const response = await fetch(`http://localhost:8083/api/favorites/user/${customerId}`);
-        if (!response.ok) {
-            throw new Error('Network response was not ok');
+        const response = await fetch(`${FAVORITESTORE_URL}/${customerId}`);
+        
+        // 응답의 Content-Type을 확인하여 JSON으로 파싱할 수 있는지 확인
+        const contentType = response.headers.get('Content-Type');
+        if (contentType && contentType.includes('application/json')) {
+            const data = await response.json();
+            const favorites = data.reduce((acc, store) => {
+                acc[store.storeId] = true;
+                return acc;
+            }, {});
+            setFavorites(favorites);
+        } else {
+            // JSON이 아닌 응답을 처리
+            const text = await response.text();
+            console.error('Unexpected response format:', text);
         }
-        const data = await response.json();
-        const favorites = data.reduce((acc, store) => {
-            acc[store.storeId] = true;
-            return acc;
-        }, {});
-        setFavorites(favorites);
+
     } catch (error) {
         console.error('Error fetching favorites:', error);
     }
@@ -49,8 +63,7 @@ const CategoryList = ({ stores }) => {
     const [favorites, setFavorites] = useState({});
 
     // 실제 customerId와 storeId 설정
-    const customerId = 'test@gmail.com'; // 실제 customerId
-    const storeId = 'thdghtjd115@naver.com'; // 실제 storeId
+    const customerId = 'test@gmail.com';
 
     const handleClick = (store) => {
         openModal('productDetail', { productDetail: store });
diff --git a/src/config/host-config.js b/src/config/host-config.js
index 1062ae78..b20f0d94 100755
--- a/src/config/host-config.js
+++ b/src/config/host-config.js
@@ -1,10 +1,12 @@
+
 const STORE = '/store';
 const CUSTOMER = '/customer';
 const STORELISTS = '/storeLists';
 const EMAIL = '/email';
+const FAVORITESTORE = '/api/favorites';
 
 export const STORE_URL =  STORE;
 export const CUSTOMER_URL = CUSTOMER;
 export const STORELISTS_URL = STORELISTS;
-
 export const EMAIL_URL = EMAIL;
+export const FAVORITESTORE_URL = FAVORITESTORE;

From aa1e6142da75e53c1d1b29706684d8e7371cd5a0 Mon Sep 17 00:00:00 2001
From: hyerin11 <hodolin24@naver.com>
Date: Thu, 8 Aug 2024 16:13:08 +0900
Subject: [PATCH 7/8] =?UTF-8?q?#=20refreshToken=20=EC=A0=81=EC=9A=A9=20?=
 =?UTF-8?q?=EC=98=88=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/mainPage/CategoryList.js | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/mainPage/CategoryList.js b/src/components/mainPage/CategoryList.js
index a7a92f64..4c463f63 100644
--- a/src/components/mainPage/CategoryList.js
+++ b/src/components/mainPage/CategoryList.js
@@ -13,6 +13,8 @@ const toggleFavorite = async (storeId, customerId) => {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json',
+                // 'Authorization' : 'Bearer ' + token,
+                // 'refreshToken' : refreshToken
             },
             body: JSON.stringify({ customerId }),
         });
@@ -21,15 +23,15 @@ const toggleFavorite = async (storeId, customerId) => {
         const contentType = response.headers.get('Content-Type');
         if (contentType && contentType.includes('application/json')) {
             const data = await response.json();
-            console.log('Favorite toggled successfully:', data);
+            //console.log('Favorite toggled successfully!', data);
         } else {
             // JSON이 아닌 응답을 처리
             const text = await response.text();
-            console.error('Unexpected response format:', text);
+            console.error('⚠️Unexpected response format:', text);
         }
 
     } catch (error) {
-        console.error('Error toggling favorite:', error);
+        console.error('⚠️Error toggling:', error);
     }
 };
 
@@ -50,19 +52,23 @@ const fetchFavorites = async (customerId, setFavorites) => {
         } else {
             // JSON이 아닌 응답을 처리
             const text = await response.text();
-            console.error('Unexpected response format:', text);
+            console.error('⚠️Unexpected response format:', text);
         }
 
     } catch (error) {
-        console.error('Error fetching favorites:', error);
+        console.error('⚠️Error fetching:', error);
     }
 };
 
+
+
+
+
 const CategoryList = ({ stores }) => {
     const { openModal } = useModal();
     const [favorites, setFavorites] = useState({});
 
-    // 실제 customerId와 storeId 설정
+    // customerId 더미값
     const customerId = 'test@gmail.com';
 
     const handleClick = (store) => {
@@ -79,7 +85,7 @@ const CategoryList = ({ stores }) => {
                 [storeId]: !prevFavorites[storeId]
             }));
         } catch (error) {
-            console.error('Error toggling favorite:', error);
+            console.error('⚠️Error toggling:', error);
         }
     };
 

From ceef195c1f1c2e6cda49ba1ca558871f829ce920 Mon Sep 17 00:00:00 2001
From: hyerin11 <hodolin24@naver.com>
Date: Thu, 8 Aug 2024 17:53:07 +0900
Subject: [PATCH 8/8] =?UTF-8?q?#=20=EC=B0=9C=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EB=AA=A8=EB=93=A0=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/mainPage/BestStoreList.js      | 190 +++++++++++++-----
 src/components/mainPage/CategoryList.js       |   3 +-
 .../mainPage/CategoryList.module.scss         |  39 ++--
 src/components/mainPage/FoodNav.js            | 118 ++++++++++-
 src/components/mainPage/FoodNav.module.scss   |  29 +++
 5 files changed, 302 insertions(+), 77 deletions(-)

diff --git a/src/components/mainPage/BestStoreList.js b/src/components/mainPage/BestStoreList.js
index d322b4a8..36fded73 100644
--- a/src/components/mainPage/BestStoreList.js
+++ b/src/components/mainPage/BestStoreList.js
@@ -1,63 +1,145 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import Slider from 'react-slick';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
-import styles from './FoodNav.module.scss';
-
+import styles from './FoodNav.module.scss'; // 수정된 SCSS 파일 경로
 import { useModal } from '../../pages/common/ModalProvider';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faWonSign, faBoxOpen, faHeart as faHeartSolid } from "@fortawesome/free-solid-svg-icons";
+import { faHeart as faHeartRegular } from "@fortawesome/free-regular-svg-icons";
+import { FAVORITESTORE_URL } from '../../config/host-config';
+
+// 하트 상태를 토글하고 서버에 저장하는 함수
+const toggleFavorite = async (storeId, customerId) => {
+    try {
+        const response = await fetch(`${FAVORITESTORE_URL}/${storeId}`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ customerId }),
+        });
+
+        const contentType = response.headers.get('Content-Type');
+        if (contentType && contentType.includes('application/json')) {
+            const data = await response.json();
+        } else {
+            const text = await response.text();
+            console.error('⚠️Unexpected response format:', text);
+        }
+
+    } catch (error) {
+        console.error('⚠️Error toggling:', error);
+    }
+};
+
+// 사용자의 모든 찜 상태 조회
+const fetchFavorites = async (customerId, setFavorites) => {
+    try {
+        const response = await fetch(`${FAVORITESTORE_URL}/${customerId}`);
+        
+        const contentType = response.headers.get('Content-Type');
+        if (contentType && contentType.includes('application/json')) {
+            const data = await response.json();
+            const favorites = data.reduce((acc, store) => {
+                acc[store.storeId] = true;
+                return acc;
+            }, {});
+            setFavorites(favorites);
+        } else {
+            const text = await response.text();
+            console.error('⚠️Unexpected response format:', text);
+        }
+
+    } catch (error) {
+        console.error('⚠️Error fetching:', error);
+    }
+};
 
 const BestStoreList = ({ stores = [] }) => {
-  const { openModal } = useModal();
-
-  const settings = {
-    slidesToShow: 5,
-    slidesToScroll: 5,
-    infinite: true,
-    arrows: true,
-    dots: true,
-    centerMode: true,
-    centerPadding: '0',
-    responsive: [
-      {
-        breakpoint: 400,
-        settings: {
-          dots: false,
-          slidesToShow: 2, 
-          centerPadding: '10%',
-          // centerMode: false,
-        },
-      },
-    ],
-  };
-
-  const handleClick = (store) => {
-    openModal('productDetail', { productDetail: store });
-  };
-
-  return (
-    <div className={styles.list}>
-      <h2 className={styles.title}>추천 가게</h2>
-      <Slider {...settings} className={styles.slider}>
-        {stores.length === 0 ? (
-          <div>No stores available</div>
-        ) : (
-          stores.map((store, index) => (
-            <div
-              key={index}
-              className={`${styles.storeItem} ${store.productCnt === 1 ? styles['low-stock'] : ''}`}
-              onClick={() => handleClick(store)}
-            >
-              <img src={store.storeImg} alt={store.storeName} />
-              {store.productCnt === 1 && <div className={styles.overlay}>SOLD OUT</div>}
-              <p className={styles.storeName}>{store.storeName}</p>
-              <span className={styles.storePrice}>{store.price}</span>
-              <span className={styles.productCnt}>수량: {store.productCnt}</span>
-            </div>
-          ))
-        )}
-      </Slider>
-    </div>
-  );
+    const { openModal } = useModal();
+    const [favorites, setFavorites] = useState({});
+
+    // customerId 더미값
+    const customerId = 'test@gmail.com';
+
+    useEffect(() => {
+        if (customerId) {
+            fetchFavorites(customerId, setFavorites);
+        }
+    }, [customerId]);
+
+    const handleClick = (store) => {
+        openModal('productDetail', { productDetail: store });
+    };
+
+    const handleFavoriteClick = async (storeId) => {
+        try {
+            await toggleFavorite(storeId, customerId);
+
+            setFavorites(prevFavorites => ({
+                ...prevFavorites,
+                [storeId]: !prevFavorites[storeId]
+            }));
+        } catch (error) {
+            console.error('⚠️Error toggling:', error);
+        }
+    };
+
+    const settings = {
+        slidesToShow: 5,
+        slidesToScroll: 5,
+        infinite: true,
+        arrows: true,
+        dots: true,
+        centerMode: true,
+        centerPadding: '0',
+        responsive: [
+            {
+                breakpoint: 400,
+                settings: {
+                    dots: false,
+                    slidesToShow: 2,
+                    centerPadding: '10%',
+                },
+            },
+        ],
+    };
+
+    return (
+        <div className={styles.list}>
+            <h2 className={styles.title}>추천 가게</h2>
+            <Slider {...settings} className={styles.slider}>
+                {stores.length === 0 ? (
+                    <div>No stores available</div>
+                ) : (
+                    stores.map((store, index) => (
+                        <div
+                            key={index}
+                            className={`${styles.storeItem} ${store.productCnt === 1 ? styles['low-stock'] : ''}`}
+                        >
+                            <div 
+                                className={`${styles.heartIcon} ${favorites[store.storeId] ? styles.favorited : styles.notFavorited}`} 
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    handleFavoriteClick(store.storeId);
+                                }}
+                            >
+                                <FontAwesomeIcon 
+                                    icon={favorites[store.storeId] ? faHeartSolid : faHeartRegular} 
+                                />
+                            </div>
+                            <img src={store.storeImg} alt={store.storeName} />
+                            {store.productCnt === 1 && <div className={styles.overlay}>SOLD OUT</div>}
+                            <p className={styles.storeName}>{store.storeName}</p>
+                            <span className={styles.storePrice}><FontAwesomeIcon icon={faWonSign} /> {store.price}</span>
+                            <span className={styles.productCnt}><FontAwesomeIcon icon={faBoxOpen} /> 수량: {store.productCnt}</span>
+                        </div>
+                    ))
+                )}
+            </Slider>
+        </div>
+    );
 };
 
 export default BestStoreList;
diff --git a/src/components/mainPage/CategoryList.js b/src/components/mainPage/CategoryList.js
index 4c463f63..8fa009d0 100644
--- a/src/components/mainPage/CategoryList.js
+++ b/src/components/mainPage/CategoryList.js
@@ -106,7 +106,7 @@ const CategoryList = ({ stores }) => {
                         onClick={() => handleClick(store)}
                     >
                         <div 
-                            className={styles.heartIcon} 
+                            className={`${styles.heartIcon} ${favorites[store.storeId] ? styles.favorited : styles.notFavorited}`} 
                             onClick={(e) => {
                                 e.stopPropagation();
                                 handleFavoriteClick(store.storeId);
@@ -114,7 +114,6 @@ const CategoryList = ({ stores }) => {
                         >
                             <FontAwesomeIcon 
                                 icon={favorites[store.storeId] ? faHeartSolid : faHeartRegular} 
-                                className={favorites[store.storeId] ? styles.favorited : styles.notFavorited}
                             />
                         </div>
                         <img src={store.storeImg} alt={store.storeName} className={styles.categoryImage} />
diff --git a/src/components/mainPage/CategoryList.module.scss b/src/components/mainPage/CategoryList.module.scss
index 0d704d1a..cfb568e6 100644
--- a/src/components/mainPage/CategoryList.module.scss
+++ b/src/components/mainPage/CategoryList.module.scss
@@ -73,21 +73,34 @@
     }
   }
 
-  // 찜 기능 하트 아이콘
-  .heartIcon {
-    font-size: 18px;
-    color: rgb(255, 71, 114);
-    position: absolute;
-    right: 10px;
-    bottom: 80px;
-    z-index: 1;
-    transition: transform 0.3s ease, color 0.3s ease; 
+// 찜 기능 하트 아이콘
+.heartIcon {
+  font-size: 18px;
+  color: rgb(152, 152, 152);
+  position: absolute;
+  right: 10px;
+  bottom: 80px;
+  z-index: 1;
+  transition: transform 0.3s ease, color 0.3s ease; 
+
+  // 마우스를 올렸을 때
+  &:hover {
+    transform: scale(1.2); 
+    color: rgb(255, 0, 100);
+  }
 
-    &:hover {
-      transform: scale(1.2); 
-      color: rgb(255, 0, 100);
-    }
+  // 클릭했을 때
+  &.favorited {
+    color: rgb(255, 71, 114);
   }
+}
+
+// 클릭된 상태에서 마우스 올렸을 때
+.heartIcon.favorited:hover {
+  transform: scale(1.1); 
+  color: rgb(255, 0, 100);
+}
+
 
   p {
     height: 15%;
diff --git a/src/components/mainPage/FoodNav.js b/src/components/mainPage/FoodNav.js
index 21dbb30f..f3dd7d93 100644
--- a/src/components/mainPage/FoodNav.js
+++ b/src/components/mainPage/FoodNav.js
@@ -5,6 +5,10 @@ import styles from "./FoodNav.module.scss";
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
 import './slick-theme.css';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faHeart as faHeartSolid } from "@fortawesome/free-solid-svg-icons";
+import { faHeart as faHeartRegular } from "@fortawesome/free-regular-svg-icons";
+import { FAVORITESTORE_URL } from '../../config/host-config';
 
 // 🌿 랜덤 가게 리스트 생성
 const getRandomStores = (stores, count) => {
@@ -14,28 +18,93 @@ const getRandomStores = (stores, count) => {
 
 // 🌿 카테고리 문자열에서 실제 foodType만 추출하는 함수
 const extractFoodType = (category) => {
-   // category가 유효한 문자열인지 확인
-   if (category && typeof category === 'string') {
-    // 'foodType=' 이후의 값 추출
+  if (category && typeof category === 'string') {
     const match = category.match(/\(foodType=(.*?)\)/);
-    return match ? match[1] : category; 
+    return match ? match[1] : category;
+  }
+  return '';
+};
+
+// 하트 상태를 토글하고 서버에 저장하는 함수
+const toggleFavorite = async (storeId, customerId) => {
+  try {
+    const response = await fetch(`${FAVORITESTORE_URL}/${storeId}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ customerId }),
+    });
+
+    const contentType = response.headers.get('Content-Type');
+    if (contentType && contentType.includes('application/json')) {
+      const data = await response.json();
+    } else {
+      const text = await response.text();
+      console.error('⚠️Unexpected response format:', text);
     }
-  return ''; // category가 유효하지 않은 경우 빈 문자열 반환
+  } catch (error) {
+    console.error('⚠️Error toggling:', error);
+  }
+};
+
+// 사용자의 모든 찜 상태 조회
+const fetchFavorites = async (customerId, setFavorites) => {
+  try {
+    const response = await fetch(`${FAVORITESTORE_URL}/${customerId}`);
+    
+    const contentType = response.headers.get('Content-Type');
+    if (contentType && contentType.includes('application/json')) {
+      const data = await response.json();
+      const favorites = data.reduce((acc, store) => {
+        acc[store.storeId] = true;
+        return acc;
+      }, {});
+      setFavorites(favorites);
+    } else {
+      const text = await response.text();
+      console.error('⚠️Unexpected response format:', text);
+    }
+  } catch (error) {
+    console.error('⚠️Error fetching:', error);
+  }
 };
 
 const FoodNav = ({ selectedCategory, stores }) => {
   const [randomStores, setRandomStores] = useState([]);
+  const [favorites, setFavorites] = useState({});
   const { openModal } = useModal();
 
+  // customerId 더미값
+  const customerId = 'test@gmail.com';
+
   useEffect(() => {
-    // 랜덤한 가게 목록을 선택하여 상태를 업데이트
-    setRandomStores(getRandomStores(stores, 5)); 
+    setRandomStores(getRandomStores(stores, 5));
   }, [stores]);
 
+  useEffect(() => {
+    if (customerId) {
+      fetchFavorites(customerId, setFavorites);
+    }
+  }, [customerId]);
+
   const handleClick = (store) => {
     openModal('productDetail', { productDetail: store });
   };
 
+  const handleFavoriteClick = async (storeId) => {
+    try {
+      await toggleFavorite(storeId, customerId);
+
+      setFavorites(prevFavorites => ({
+        ...prevFavorites,
+        [storeId]: !prevFavorites[storeId]
+      }));
+    } catch (error) {
+      console.error('⚠️Error toggling:', error);
+    }
+  };
+
   const settings = (slidesToShow) => ({
     dots: false,
     infinite: true,
@@ -51,7 +120,7 @@ const FoodNav = ({ selectedCategory, stores }) => {
         settings: {
           dots: false,
           slidesToShow: 2,
-          slidesToScroll: 1, 
+          slidesToScroll: 1,
           centerMode: true,
           centerPadding: '10%',
         },
@@ -71,6 +140,17 @@ const FoodNav = ({ selectedCategory, stores }) => {
               onClick={() => handleClick(store)}
               className={`${styles.storeItem} ${store.productCnt === 1 ? styles['low-stock'] : ''}`}
             >
+              <div 
+                className={`${styles.heartIcon} ${favorites[store.storeId] ? styles.favorited : styles.notFavorited}`} 
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleFavoriteClick(store.storeId);
+                }}
+              >
+                <FontAwesomeIcon 
+                  icon={favorites[store.storeId] ? faHeartSolid : faHeartRegular} 
+                />
+              </div>
               <img src={store.storeImg} alt={store.storeName} />
               {store.productCnt === 1 && <div className={styles.overlay}>SOLD OUT</div>}
               <p className={styles.storeName}>{store.storeName}</p>
@@ -91,6 +171,17 @@ const FoodNav = ({ selectedCategory, stores }) => {
               onClick={() => handleClick(store)}
               className={`${styles.storeItem} ${store.productCnt === 1 ? styles['low-stock'] : ''}`}
             >
+              <div 
+                className={`${styles.heartIcon} ${favorites[store.storeId] ? styles.favorited : styles.notFavorited}`} 
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleFavoriteClick(store.storeId);
+                }}
+              >
+                <FontAwesomeIcon 
+                  icon={favorites[store.storeId] ? faHeartSolid : faHeartRegular} 
+                />
+              </div>
               <img src={store.storeImg} alt={store.storeName} />
               {store.productCnt === 1 && <div className={styles.overlay}>SOLD OUT</div>}
               <p className={styles.storeName}>{store.storeName}</p>
@@ -111,6 +202,17 @@ const FoodNav = ({ selectedCategory, stores }) => {
               onClick={() => handleClick(store)}
               className={`${styles.storeItem} ${store.productCnt === 1 ? styles['low-stock'] : ''}`}
             >
+              <div 
+                className={`${styles.heartIcon} ${favorites[store.storeId] ? styles.favorited : styles.notFavorited}`} 
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleFavoriteClick(store.storeId);
+                }}
+              >
+                <FontAwesomeIcon 
+                  icon={favorites[store.storeId] ? faHeartSolid : faHeartRegular} 
+                />
+              </div>
               <img src={store.storeImg} alt={store.storeName} className={styles.image} />
               <span className={styles.category}>{extractFoodType(store.category)}</span>
               <p className={styles.storeName}>{store.storeName}</p>
diff --git a/src/components/mainPage/FoodNav.module.scss b/src/components/mainPage/FoodNav.module.scss
index e48301c6..45f8359b 100644
--- a/src/components/mainPage/FoodNav.module.scss
+++ b/src/components/mainPage/FoodNav.module.scss
@@ -137,6 +137,35 @@
 }
 
 
+// 찜 하트 기능
+.heartIcon {
+  font-size: 18px;
+  color: rgb(152, 152, 152); // 기본 회색
+  position: absolute;
+  right: 20px;
+  bottom: 70px;
+  z-index: 1;
+  transition: transform 0.3s ease, color 0.3s ease; 
+
+  // 마우스를 올렸을 때
+  &:hover {
+    transform: scale(1.2); 
+    color: rgb(255, 0, 100); // 핑크색
+  }
+
+  // 클릭했을 때
+  &.favorited {
+    color: rgb(255, 71, 114); // 빨간색
+  }
+}
+
+// 하트 아이콘이 클릭된 상태에서 호버할 때 스타일 적용
+.heartIcon.favorited:hover {
+  transform: scale(1.1); 
+  color: rgb(255, 0, 100); // 핑크색
+}
+
+
 @media (max-width: 400px) {
 
   .list{