[WEEK2] Feat: Add like button(#3)

main page include like button.
boostcampaitech4lv23recsys1 · Jan 19, 2023 · 8495614 · 8495614
1 parent 296bf79
commit 8495614
Show file tree

Hide file tree

Showing 8 changed files with 228 additions and 17,326 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
-RecBole/
+RecBole/
+fastapi_test/
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -6,8 +6,8 @@
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
     "@fortawesome/free-brands-svg-icons": "^5.15.3",
-    "@fortawesome/free-regular-svg-icons": "^5.15.3",
-    "@fortawesome/free-solid-svg-icons": "^5.15.3",
+    "@fortawesome/free-regular-svg-icons": "^5.15.4",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.14",
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/react": "^11.2.7",

diff --git a/frontend/src/bootstrap-custom.css b/frontend/src/bootstrap-custom.css
@@ -3987,9 +3987,7 @@ textarea.form-control-lg {
     display: flex !important;
     flex-basis: auto;
   }
-  .navbar-expand-sm .navbar-toggler {
-    display: none;
-  }
+
 }
 @media (min-width: 768px) {
   .navbar-expand-md {
@@ -4039,9 +4037,6 @@ textarea.form-control-lg {
     display: flex !important;
     flex-basis: auto;
   }
-  .navbar-expand-lg .navbar-toggler {
-    display: none;
-  }
 }
 @media (min-width: 1200px) {
   .navbar-expand-xl {
@@ -4065,9 +4060,6 @@ textarea.form-control-lg {
     display: flex !important;
     flex-basis: auto;
   }
-  .navbar-expand-xl .navbar-toggler {
-    display: none;
-  }
 }
 @media (min-width: 1400px) {
   .navbar-expand-xxl {
@@ -4091,9 +4083,6 @@ textarea.form-control-lg {
     display: flex !important;
     flex-basis: auto;
   }
-  .navbar-expand-xxl .navbar-toggler {
-    display: none;
-  }
 }
 .navbar-expand {
   flex-wrap: nowrap;
@@ -4116,9 +4105,6 @@ textarea.form-control-lg {
   display: flex !important;
   flex-basis: auto;
 }
-.navbar-expand .navbar-toggler {
-  display: none;
-}
 
 .navbar-light .navbar-brand {
   color: rgba(0, 0, 0, 0.9);
@@ -10731,3 +10717,8 @@ textarea.form-control-lg {
 }
 
 /*# sourceMappingURL=bootstrap-custom.css.map */
+.like {
+  width: 100px;
+  margin: 0 0 0 auto;
+  color:#d63384;
+}
diff --git a/frontend/src/pages/Register.js b/frontend/src/pages/Register.js
@@ -131,6 +131,8 @@ function Join(){
                             Sign Up
                         </Button>
                     </div>
+
+                    <br/>
                 </Form>
             </Container>
         </div>

diff --git a/frontend/src/products/ItemSwiper.js b/frontend/src/products/ItemSwiper.js
@@ -0,0 +1,33 @@
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/swiper.min.css";
+import "swiper/components/navigation/navigation.min.css";
+import SwiperCore, { Navigation } from "swiper";
+import Product from "./Product";
+
+function ItemSwiper(props) {
+    const category = props.category;
+
+    return (
+      <Swiper
+        className="col-12"
+        spaceBetween={0}
+        slidesPerView={2}
+        scrollbar={{ draggable: true }}
+        navigation
+        pagination={{ clickable: true }}
+        breakpoints={{
+          768: {
+            slidesPerView: 5,
+          },
+        }}
+      >
+        {Array.from({ length:10 }, (_, i) => 
+        <SwiperSlide key={category + i}>
+          <Product name='samsung' id={"product" + category + i}/>
+        </SwiperSlide>
+        )}
+      </Swiper>
+    );
+}
+
+export default ItemSwiper;
diff --git a/frontend/src/products/Product.js b/frontend/src/products/Product.js
@@ -1,29 +1,28 @@
 import Image from "../nillkin-case-1.jpg";
 import { Link } from "react-router-dom";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useState } from "react";
+import axios from "axios";
+
 
 function Product(props) {
+  var [clicked, setClicked] = useState(false);
+
+  const handleClick = () => {
+    const heart = document.getElementById("like"+id).getElementsByTagName("path")[0];
+    if(clicked) {
+      heart.setAttribute("d", "M458.4 64.3C400.6 15.7 311.3 23 256 79.3 200.7 23 111.4 15.6 53.6 64.3-21.6 127.6-10.6 230.8 43 285.5l175.4 178.7c10 10.2 23.4 15.9 37.6 15.9 14.3 0 27.6-5.6 37.6-15.8L469 285.6c53.5-54.7 64.7-157.9-10.6-221.3zm-23.6 187.5L259.4 430.5c-2.4 2.4-4.4 2.4-6.8 0L77.2 251.8c-36.5-37.2-43.9-107.6 7.3-150.7 38.9-32.7 98.9-27.8 136.5 10.5l35 35.7 35-35.7c37.8-38.5 97.8-43.2 136.5-10.6 51.1 43.1 43.5 113.9 7.3 150.8z");
+      axios.post("http://localhost:4000/posts?productId=" + id);
+      clicked = false;
+    } else {
+      heart.setAttribute("d", "M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z");
+      clicked = true;
+    }
+  };
+
   const price = 10000;
-  let percentOff;
-  let offPrice = `${price}Ks`;
   let name = props.name;
   let id = props.id;
-  if (props.percentOff && props.percentOff > 0) {
-    percentOff = (
-      <div
-        className="badge bg-dim py-2 text-white position-absolute"
-        style={{ top: "0.5rem", right: "0.5rem" }}
-      >
-        {props.percentOff}% OFF
-      </div>
-    );
-
-    offPrice = (
-      <>
-        <del>{price}Ks</del> {price - (props.percentOff * price) / 100}Ks
-      </>
-    );
-  }
 
   return (
       <div className="card shadow-sm" id={id}>
@@ -39,14 +38,10 @@ function Product(props) {
           <h5 className="card-title text-center text-dark text-truncate title">
             { name }
           </h5>
-          <p className="card-text text-center text-muted mb-0 price">{offPrice}</p>
+          <p className="card-text text-center text-muted mb-0 price">{ price }</p>
           <p className="card-text text-center text-muted mb-0 star"></p>
           <div className="d-grid d-block text-center">
-            <a href="#" className="link" target="_blank">
-            <button className="btn btn-outline-dark mt-3"> 
-              <FontAwesomeIcon icon={["fas", "cart-plus"]} /> Go to Buy
-            </button>
-            </a>
+              <FontAwesomeIcon icon={["far", "heart"]} id={"like"+id} onClick={handleClick} className={"like"}/>
           </div>
         </div>
       </div>

diff --git a/frontend/src/products/ProductList.js b/frontend/src/products/ProductList.js
@@ -1,23 +1,10 @@
 import { Link } from "react-router-dom";
-import Product from "./Product";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import ScrollToTopOnMount from "../template/ScrollToTopOnMount";
 import React from "react";
 import axios from "axios";
-import { Swiper, SwiperSlide } from "swiper/react";
-import "swiper/swiper.min.css";
-import "swiper/components/navigation/navigation.min.css";
-import SwiperCore, { Navigation } from "swiper";
-
-const categories = [
-  "All Products",
-  "Phones & Tablets",
-  "Cases & Covers",
-  "Screen Guards",
-  "Cables & Chargers",
-  "Power Banks",
-];
+import ItemSwiper from "./ItemSwiper";
 
 function FilterMenuLeft() {
   return (
@@ -27,44 +14,84 @@ function FilterMenuLeft() {
         <div className="d-grid d-block mb-3">
           <div className="form-floating mb-2">
             <input
-              type="text"
-              className="form-control"
+              type="number"
+              className="form-control min-price"
               placeholder="Min"
-              defaultValue="100000"
+              defaultValue="0"
             />
             <label htmlFor="floatingInput">Min Price</label>
           </div>
           <div className="form-floating mb-2">
             <input
-              type="text"
-              className="form-control"
+              type="number"
+              className="form-control max-price"
               placeholder="Max"
-              defaultValue="500000"
+              defaultValue="0"
             />
             <label htmlFor="floatingInput">Max Price</label>
           </div>
-          <button className="btn btn-dark">Apply</button>
+          <button className="btn btn-dark apply" onClick={ FilterApply }>Apply</button>
         </div>
       </li>
     </ul>
   );
 }
 
+function FilterApply() {
+  const min = document.getElementsByClassName("min-price")[1].valueAsNumber;
+  const max = document.getElementsByClassName("max-price")[1].valueAsNumber;
+  axios.get("http://localhost:8000/filter?minp=" + min + "&maxp=" + max)
+  .then( response => response.data )
+  .then( data => { 
+    var index = 0;
+    var ids = [];
+    var titles = [];
+    var prices = [];
+    var starss = [];
+    var urls = [];
+    data.map((d) => {
+      const product = document.getElementById("product1"+index);
+      const image = product.getElementsByClassName("cover")[0];
+      const link = product.getElementsByClassName("link")[0];
+      const star = d.star;
+      const price = d.price;
+      const title = d.title;
+      const url = d.image;
+      const id = d.id;
+      var stars = "";
+      for(var i = 1; i < star; i++) {
+        stars += "★";
+      }
+      for(var j = 0; j < 5 - stars.length; j++) {
+        stars += "☆";
+      }
+      product.getElementsByClassName("title")[0].textContent = title;
+      product.getElementsByClassName("price")[0].textContent = price;
+      product.getElementsByClassName("star")[0].textContent = stars;
+      starss.push(stars);
+      // image.setAttribute("src", url);
+      link.setAttribute("href", "https://ohou.se/productions/" + id + "/selling?affect_type=StoreHome&affect_id=");
+      index++;
+      return 0;
+    });
+    console.log(starss);
+  })
+  .catch( error => console.log(error) );
+}
+
 function ProductList() {
   const [viewType, setViewType] = useState({ grid: true });
 
   const date = new Date();
-  axios.get("http://localhost:4000/posts",
-  {
-      "Date":date
-  })
+  axios.get("http://localhost:8000"
+  )
   .then( response => response.data )
-  .then( data => {
+  .then( data => {  
     var index = 0;
     data.map((d) => {
-      const product = document.getElementById("product0"+index);
+      const product = document.getElementById("product1"+index);
       const image = product.getElementsByClassName("cover")[0];
-      const link = product.getElementsByClassName("link");
+      const link = product.getElementsByClassName("link")[0];
       const star = d.star;
       const price = d.price;
       const title = d.title;
@@ -81,8 +108,7 @@ function ProductList() {
       product.getElementsByClassName("price")[0].textContent = price;
       product.getElementsByClassName("star")[0].textContent = stars;
       image.setAttribute("src", url);
-      link[0].setAttribute("href", "https://ohou.se/productions/" + id + "/selling?affect_type=StoreHome&affect_id=");
-      link[1].setAttribute("href", "https://ohou.se/productions/" + id + "/selling?affect_type=StoreHome&affect_id=");
+      link.setAttribute("href", "https://ohou.se/productions/" + id + "/selling?affect_type=StoreHome&affect_id=");
       index++;
       return 0;
     });
@@ -115,23 +141,7 @@ function ProductList() {
         </ol>
       </nav>
 
-      <div className="h-scroller d-block d-lg-none">
-        <nav className="nav h-underline">
-          {categories.map((v, i) => {
-            return (
-              <div key={i} className="h-link me-2">
-                <Link
-                  to="/products"
-                  className="btn btn-sm btn-outline-dark rounded-pill"
-                  replace
-                >
-                  {v}
-                </Link>
-              </div>
-            );
-          })}
-        </nav>
-      </div>
+      <br/>
 
       <div className="row mb-3 d-block d-lg-none">
         <div className="col-12">
@@ -187,49 +197,12 @@ function ProductList() {
               </div>
             </div>
             <h2>용욱님을 위한 추천</h2>
-            <div className="test"></div>
             <br/>
-            <Swiper
-              className="col-12"
-              spaceBetween={0}
-              slidesPerView={2}
-              scrollbar={{ draggable: true }}
-              navigation
-              pagination={{ clickable: true }}
-              breakpoints={{
-                768: {
-                  slidesPerView: 5,
-                },
-              }}
-            >
-              {Array.from({ length:10 }, (_, i) => 
-              <SwiperSlide>
-                <Product key={i} percentOff={i % 2 === 0 ? 15 : null} name='samsung' id={"product0" + i}/>
-              </SwiperSlide>
-              )}
-            </Swiper>
+            <ItemSwiper category="1"></ItemSwiper>
             <br/>
             <h2>내가 찾는 핸드폰</h2>
             <br/>
-            <Swiper
-              className="col-12"
-              spaceBetween={0}
-              slidesPerView={2}
-              scrollbar={{ draggable: true }}
-              navigation
-              pagination={{ clickable: true }}
-              breakpoints={{
-                768: {
-                  slidesPerView: 5,
-                },
-              }}
-            >
-            {Array.from({ length:10 }, (_, i) => 
-            <SwiperSlide>
-              <Product key={i} percentOff={i % 2 === 0 ? 15 : null} name='samsung' className={"product1" + i}/>
-            </SwiperSlide>
-            )}
-            </Swiper>
+            <ItemSwiper category="2"></ItemSwiper>
             <br/>
           </div>
         </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -131,6 +131,8 @@ function Join(){ @@
                                 Sign Up
                             </Button>
                         </div>
+                        <br/>
                     </Form>
                 </Container>
             </div>
@@ Expand Down @@