좋아요 조회 (#283)

* fix[#29]: 디자인 검수 수정 * style:main css 수정 * fix:메인 css 수정 * fix:메인 css 수정 * main css 수정 * 북마크 css 수정 * resolve login error * feat[#246]: 사진업로드 * [#246]: 이미지 업로드 * style: main페이지 css 수정 * feat: 메인 좋아요기능 * fix: 메인페이지 좋아요기능 * fix: 메인 좋아요 완성 * fix: 찜 좋아요 수정 * fix: 찜 내역 조회 * 찜 목록 조회
RE-BON · Sep 1, 2022 · 9b27992 · 9b27992
1 parent a33eef3
commit 9b27992
Show file tree

Hide file tree

Showing 9 changed files with 521 additions and 179 deletions.
diff --git a/FrontEnd/rebon-frontend/src/pages/Main/BestCard/index.js b/FrontEnd/rebon-frontend/src/pages/Main/BestCard/index.js
@@ -10,35 +10,75 @@ import NoResult from "../../NoResult";
 
 export default function BestCard({ data, checked }) {
   const [bestList, setBestList] = useState();
+  const [token, setToken] = useState(window.sessionStorage.getItem('token'));
+  const [like, setLike] = useState([]);
+
   useEffect(() => {
     setTimeout(function () {
       if (data) {
         const result = data.filter((d) => d.id === checked);
-        console.log(result);
-        if (result.length > 0 && result[0].shop.length > 0) setBestList(result[0].shop);
-        else setBestList(null);
+        var isLike = [];
+        if (result.length > 0 && result[0].shop.length > 0) {
+          setBestList(result[0].shop);
+          result[0].shop.map((data, idx) => {
+            if (data.like) {
+              isLike[idx] = true;
+            } else {
+              isLike[idx] = false;
+            }
+          });
+          setLike(isLike);
+        } else setBestList(null);
       }
-    }, 300);
+    }, 1200);
   }, [data, checked]);
 
-  const [like, setLike] = useState(false);
+  const likeClick = (shopId, isLike, idx, e) => {
+    var newLike = [...like];
+    if (like[idx]) {
+      newLike[idx] = false;
 
-  const [token, setToken] = useState(window.sessionStorage.getItem('token'));
+      setLike(newLike);
 
-  const likeClick = (shopId, e) => {
-    if (like) {
-      setLike(false);
-      console.log('토큰');
-      console.log(token);
+      const config = {
+        headers: { Authorization: `Bearer ${token}` },
+      };
+      if (token) {
+        var url = 'http://3.34.139.61:8080/api/shops/' + shopId + '/unlike';
+        axios
+          .post(
+            url,
+            {
+              likeCount: 0,
+              like: false,
+            },
+            config
+          )
+          .then((response) => {
+            console.log(response);
+          })
+          .catch((error) => {
+            console.log(error);
+          });
+      }
     } else {
-      setLike(true);
+      newLike[idx] = true;
+      setLike(newLike);
+
       const config = {
         headers: { Authorization: `Bearer ${token}` },
       };
       if (token) {
         var url = 'http://3.34.139.61:8080/api/shops/' + shopId + '/like';
         axios
-          .post(url, config)
+          .post(
+            url,
+            {
+              likeCount: 1,
+              like: true,
+            },
+            config
+          )
           .then((response) => {
             console.log(response);
           })
@@ -55,6 +95,7 @@ export default function BestCard({ data, checked }) {
         ? bestList.map((item, idx) => {
             if (idx < 4) {
               var address = '/detail/' + item.id.toString();
+              var star = item.star.toFixed(1);
 
               return (
                 <div className="bestCard">
@@ -70,17 +111,17 @@ export default function BestCard({ data, checked }) {
                     <Link to={address} style={{ color: 'inherit', textDecoration: 'none' }}>
                       <div className="placeName-best">{item.name}</div>
                     </Link>
-                    <div className="starNum-best">{item.star}</div>
+                    <div className="starNum-best">{star}</div>
                   </div>
 
                   <div className="likeBtn">
-                    {item.like ? (
+                    {like[idx] ? (
                       <FaHeart
                         className="heart-icon"
                         md={8}
                         size="22"
                         onClick={(e) => {
-                          likeClick(item.id, e);
+                          likeClick(item.id, item.like, idx, e);
                         }}
                       />
                     ) : (
@@ -89,7 +130,7 @@ export default function BestCard({ data, checked }) {
                         md={8}
                         size="22"
                         onClick={(e) => {
-                          likeClick(item.id, e);
+                          likeClick(item.id, item.like, idx, e);
                         }}
                       />
                     )}

diff --git a/FrontEnd/rebon-frontend/src/pages/Main/Divider/index.js b/FrontEnd/rebon-frontend/src/pages/Main/Divider/index.js
@@ -3,23 +3,35 @@ import '../../../styles/main.css';
 import Toggle from 'react-toggle';
 import MainCard from '../MainCard';
 import axios from 'axios';
-import NoResult from "../../NoResult";
+import NoResult from '../../NoResult';
 
 export default function Divider({ data, tagId, cateId, checked }) {
   const [toggleOn, setToggleOn] = useState(false);
   const [sort, setSort] = useState('shopScore.star');
   const [shopInfo, setShopInfo] = useState(null);
   const [ready, setReady] = useState(false);
-  // const [noResult, setNoResult] = useState(false);
+  const [token, setToken] = useState(window.sessionStorage.getItem('token'));
+  const [like, setLike] = useState([]);
 
   useEffect(() => {
     setTimeout(function () {
+      var isLike = [];
       if (data) {
         const result = data.filter((d) => d.id === checked);
-        if (result.length > 0 && result[0].shop.length > 0) setShopInfo(result[0].shop);
-        else setShopInfo(null);
+        if (result.length > 0 && result[0].shop.length > 0) {
+          setShopInfo(result[0].shop);
+
+          result[0].shop.map((data, idx) => {
+            if (data.like) {
+              isLike[idx] = true;
+            } else {
+              isLike[idx] = false;
+            }
+            setLike(isLike);
+          });
+        } else setShopInfo(null);
       }
-    }, 400);
+    }, 1200);
     setReady(true);
   }, [checked]);
 
@@ -28,44 +40,54 @@ export default function Divider({ data, tagId, cateId, checked }) {
     else setToggleOn(true);
   };
 
+  const changeLike = (idx) => {
+    var newLike = [...like];
+    if (like[idx]) {
+      newLike[idx] = false;
+
+      setLike(newLike);
+    } else {
+      newLike[idx] = true;
+      setLike(newLike);
+    }
+  };
+
   return (
     <>
-      {ready ?
-        shopInfo?
-        (
-        <>
-          <div className="divider-main">
-            <div className="divider-right">
-              <Toggle className="main-toggle" id="" defaultChecked={toggleOn} onChange={toggleChange} />
-              <span className="main-toggle-label">현재 영업중</span>
-              <select
-                className="filter"
-                name="filter"
-                onChange={(e) => {
-                  setSort(e.target.value);
-                }}
-                defaultValue={"shopScore.star"}
-              >
-                <option value="shopScore.star">
-                  별점순
-                </option>
-                <option value="shopScore.reviewCount">리뷰많은 순</option>
-                <option value="createdAt">최신순</option>
-              </select>
+      {ready ? (
+        shopInfo ? (
+          <>
+            <div className="divider-main">
+              <div className="divider-right">
+                <Toggle className="main-toggle" id="" defaultChecked={toggleOn} onChange={toggleChange} />
+                <span className="main-toggle-label">현재 영업중</span>
+                <select
+                  className="filter"
+                  name="filter"
+                  onChange={(e) => {
+                    setSort(e.target.value);
+                  }}
+                  defaultValue={'shopScore.star'}
+                >
+                  <option value="shopScore.star">별점순</option>
+                  <option value="shopScore.reviewCount">리뷰많은 순</option>
+                  <option value="createdAt">최신순</option>
+                </select>
+              </div>
             </div>
-          </div>
-          <div className="mainCard-wrapper">
-            {toggleOn ? (
-              <MainCard tagId={tagId} cateId={cateId} data={shopInfo} sort={sort} checked={checked} open="true" />
-            ) : (
-              <MainCard tagId={tagId} cateId={cateId} data={shopInfo} sort={sort} checked={checked} open="false" />
-            )}
-          </div>
-        </>
-      ) : (
-        // <NoResult/>
+            <div className="mainCard-wrapper">
+              {toggleOn ? (
+                <MainCard tagId={tagId} cateId={cateId} data={shopInfo} sort={sort} checked={checked} open="true" like={like} changeLike={changeLike} />
+              ) : (
+                <MainCard tagId={tagId} cateId={cateId} data={shopInfo} sort={sort} checked={checked} open="false" like={like} changeLike={changeLike} />
+              )}
+            </div>
+          </>
+        ) : (
+          // <NoResult/>
           ''
-          ) : (
+        )
+      ) : (
         ''
       )}
     </>