main 페이지 좋아요 기능 (#272)

* fix[#29]: 디자인 검수 수정 * style:main css 수정 * fix:메인 css 수정 * fix:메인 css 수정 * main css 수정 * 북마크 css 수정 * resolve login error * feat[#246]: 사진업로드 * [#246]: 이미지 업로드 * style: main페이지 css 수정 * feat: 메인 좋아요기능
RE-BON · Aug 29, 2022 · a2cb071 · a2cb071
1 parent e83f02c
commit a2cb071
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 44 deletions.
diff --git a/FrontEnd/rebon-frontend/src/pages/Main/BestCard/index.js b/FrontEnd/rebon-frontend/src/pages/Main/BestCard/index.js
@@ -3,6 +3,7 @@ import '../../../styles/main.css';
 import { FiHeart } from 'react-icons/fi';
 import { FaHeart } from 'react-icons/fa';
 import { Link } from 'react-router-dom';
+import axios from 'axios';
 
 import { BsFillBookmarkFill } from 'react-icons/bs';
 
@@ -12,6 +13,7 @@ export default function BestCard({ data, checked }) {
     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);
       }
@@ -20,52 +22,32 @@ export default function BestCard({ data, checked }) {
 
   const [like, setLike] = useState(false);
 
-  const likeClick = () => {
+  const [token, setToken] = useState(window.sessionStorage.getItem('token'));
+
+  const likeClick = (shopId, e) => {
     if (like) {
       setLike(false);
+      console.log('토큰');
+      console.log(token);
     } else {
       setLike(true);
+      const config = {
+        headers: { Authorization: `Bearer ${token}` },
+      };
+      if (token) {
+        var url = 'http://3.34.139.61:8080/api/shops/' + shopId + '/like';
+        axios
+          .post(url, config)
+          .then((response) => {
+            console.log(response);
+          })
+          .catch((error) => {
+            console.log(error);
+          });
+      }
     }
   };
 
-  const [bestInfo, setBestInfo] = useState([
-    {
-      id: 1,
-      name: '팜스발리',
-      star: 0.0,
-      like: true,
-      tags: [
-        {
-          id: 1,
-          name: '포항',
-        },
-        {
-          id: 3,
-          name: '한동대',
-        },
-      ],
-      image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Supreme_pizza.jpg/800px-Supreme_pizza.jpg',
-    },
-    {
-      id: 3,
-      name: '한동대 학관',
-      star: 0.0,
-      like: false,
-      tags: [
-        {
-          id: 1,
-          name: '포항',
-        },
-        {
-          id: 3,
-          name: '한동대',
-        },
-      ],
-      image:
-        'https://mblogthumb-phinf.pstatic.net/MjAxOTAxMTNfMTA0/MDAxNTQ3Mzc5NjQ1MzA2.jBPcIF5Tqd8GIrxEQhLG04tIQi33JGLThx4RQuimNVcg.2Nf25aUFMoCd4CdXBwv4HWg8ugDx0Ym9y9nhmEppNE0g.JPEG.let1997/Screenshot_20190113-204020_Naver_Blog.jpg?type=w800',
-    },
-  ]);
-
   return (
     <>
       {bestList
@@ -92,9 +74,23 @@ export default function BestCard({ data, checked }) {
 
                   <div className="likeBtn">
                     {item.like ? (
-                      <FaHeart className="heart-icon" md={8} size="22" onClick={likeClick} />
+                      <FaHeart
+                        className="heart-icon"
+                        md={8}
+                        size="22"
+                        onClick={(e) => {
+                          likeClick(item.id, e);
+                        }}
+                      />
                     ) : (
-                      <FiHeart className="heart-icon-fi" md={8} size="22" onClick={likeClick} />
+                      <FiHeart
+                        className="heart-icon-fi"
+                        md={8}
+                        size="22"
+                        onClick={(e) => {
+                          likeClick(item.id, e);
+                        }}
+                      />
                     )}
                   </div>
 

diff --git a/FrontEnd/rebon-frontend/src/styles/main.css b/FrontEnd/rebon-frontend/src/styles/main.css
@@ -41,6 +41,7 @@
   font-size: 13px;
   background: rgba(255, 255, 255, 0.9);
   color: #ff6b6c !important;
+  white-space: nowrap;
 }
 
 .searchTitle {
@@ -76,7 +77,7 @@
 
 .titleRow-best {
   position: absolute;
-  top: 230px;
+  top: 220px;
   display: flex;
   margin: 8px 5px;
 }
@@ -88,8 +89,9 @@
 
 .tagRow-best {
   position: absolute;
-  top: 200px;
+  top: 170px;
   margin: 0 10px;
+  width: 11.6rem;
 }
 
 .likeBtn {
@@ -214,7 +216,7 @@
 }
 
 .main-toggle-label {
-  margin: 0 1.3rem 0 0.5rem;
+  margin: 0 1.3rem 0 4rem;
   font-size: 0.8rem;
   color: #a5a9ab;
 }