From 4d28e1ba398ed817dc3f45020f8eb6ec3570795d Mon Sep 17 00:00:00 2001 From: Gyeongtae Date: Tue, 7 Feb 2023 16:58:53 +0900 Subject: [PATCH] [WEEK4] Feat: Edit filter, swiper(#3) Recolor filterMenu and Edit swiper navigation. --- frontend/package-lock.json | 42 ++++++++++++++++++ frontend/package.json | 2 + frontend/src/bootstrap-custom.css | 15 ++++++- frontend/src/pages/DetailPage.js | 53 ++++++++++++++++++----- frontend/src/products/FilterBudgetLeft.js | 10 ++--- frontend/src/products/FilterMenuLeft.js | 1 - frontend/src/products/ItemSwiper.js | 8 ++++ frontend/src/products/ProductList.js | 13 +++--- 8 files changed, 119 insertions(+), 25 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 00f7ba5..8663ca8 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -38,6 +38,8 @@ "react-router-dom": "^5.3.4", "react-scripts": "^5.0.1", "redux": "^4.2.0", + "sass": "^1.58.0", + "scss": "^0.2.4", "stream": "^0.0.2", "styled-components": "^5.3.6", "swiper": "^6.8.4", @@ -9950,6 +9952,11 @@ "url": "https://opencollective.com/immer" } }, + "node_modules/immutable": { + "version": "4.2.4", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.4.tgz", + "integrity": "sha512-WDxL3Hheb1JkRN3sQkyujNlL/xRjAo3rJtaU5xeufUauG66JdMr32bLj4gF+vWl84DIA3Zxw7tiAjneYzRRw+w==" + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -13394,6 +13401,14 @@ "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz", "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==" }, + "node_modules/ometa": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/ometa/-/ometa-0.2.2.tgz", + "integrity": "sha512-LZuoK/yjU3FvrxPjUXUlZ1bavCfBPqauA7fsNdwi+AVhRdyk2IzgP3JRnevvjzQ6fKHdUw8YISshf53FmpHrng==", + "engines": { + "node": ">= 0.2.0" + } + }, "node_modules/on-finished": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz", @@ -16725,6 +16740,22 @@ "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz", "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA==" }, + "node_modules/sass": { + "version": "1.58.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.58.0.tgz", + "integrity": "sha512-PiMJcP33DdKtZ/1jSjjqVIKihoDc6yWmYr9K/4r3fVVIEDAluD0q7XZiRKrNJcPK3qkLRF/79DND1H5q1LBjgg==", + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/sass-loader": { "version": "12.6.0", "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz", @@ -16804,6 +16835,17 @@ "url": "https://opencollective.com/webpack" } }, + "node_modules/scss": { + "version": "0.2.4", + "resolved": "https://registry.npmjs.org/scss/-/scss-0.2.4.tgz", + "integrity": "sha512-4u8V87F+Q/upVhUmhPnB4C1R11xojkRkWjExL2v0CX2EXTg18VrKd+9JWoeyCp2VEMdSpJsyAvVU+rVjogh51A==", + "dependencies": { + "ometa": "0.2.2" + }, + "engines": { + "node": ">= 0.2.0" + } + }, "node_modules/select-hose": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index b35b052..4d9314a 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -34,6 +34,8 @@ "react-router-dom": "^5.3.4", "react-scripts": "^5.0.1", "redux": "^4.2.0", + "sass": "^1.58.0", + "scss": "^0.2.4", "stream": "^0.0.2", "styled-components": "^5.3.6", "swiper": "^6.8.4", diff --git a/frontend/src/bootstrap-custom.css b/frontend/src/bootstrap-custom.css index 03fb996..120928c 100644 --- a/frontend/src/bootstrap-custom.css +++ b/frontend/src/bootstrap-custom.css @@ -10765,9 +10765,18 @@ textarea.form-control-lg { text-align: center; } -#cloudCon { +#cloudConPrev { text-align: center; } + +#cloudConNext { + text-align: center; +} + +.wordcloud { + width: 100%; +} + .historys { display: grid; row-gap: 10px; @@ -10805,4 +10814,8 @@ textarea.form-control-lg { color: #ff6161 !important; fill: #ff6161 !important; stroke: #ff6161 !important; +} + +.swiper-button-disabled { + visibility: hidden; } \ No newline at end of file diff --git a/frontend/src/pages/DetailPage.js b/frontend/src/pages/DetailPage.js index c3a5cab..8522198 100644 --- a/frontend/src/pages/DetailPage.js +++ b/frontend/src/pages/DetailPage.js @@ -21,7 +21,8 @@ function Detail() { useEffect(() => { const controller = new AbortController(); - ReactDOM.render(<>
loading, document.getElementById('cloudCon')); + ReactDOM.render(<>
loading, document.getElementById('cloudConPrev')); + // ReactDOM.render(<>
loading, document.getElementById('cloudConNext')); axios.get("http://34.64.87.78:8000/wishes/" + localStorage.getItem("token")) .then(response => response.data) .then(data => { @@ -37,7 +38,7 @@ function Detail() { }) .catch( error => console.log(error) ); - axios.post(`http://115.85.181.95:30002/recommend/similar/item?item_id=${item_id}&top_k=10`) + axios.post(`http://115.85.181.95:30003/recommend/similar/item?item_id=${item_id}&top_k=10`) .then(response => response.data) .then(data => { setSimilar(data); @@ -46,16 +47,28 @@ function Detail() { axios({ method:'GET', - url:`http://115.85.181.95:30002/wordcloud/?item_id=${item_id}&split=${5}`, + url:`http://115.85.181.95:30003/wordcloud/?item_id=${item_id}&split=${5}&label=${2}`, // responseType:'blob' }) .then(response => response.data) .then(data => { - const Example = ({ data }) => wordcloud - ReactDOM.render(, document.getElementById('cloudCon')) + const Example = ({ data }) => wordcloudPrev + ReactDOM.render(, document.getElementById('cloudConPrev')) }) .catch( error => console.log(error) ); + // axios({ + // method:'GET', + // url:`http://115.85.181.95:30003/wordcloud/?item_id=${item_id}&split=${5}&label=${2}`, + // // responseType:'blob' + // }) + // .then(response => response.data) + // .then(data => { + // const Example = ({ data }) => wordcloudNext + // ReactDOM.render(, document.getElementById('cloudConNext')) + // }) + // .catch( error => console.log(error) ); + return () => { controller.abort(); @@ -63,18 +76,33 @@ function Detail() { }, [item_id]); const onClickButton = (value) => { - setActivated(value) - ReactDOM.render(<>
, document.getElementById('cloudCon')); + setActivated(value); + ReactDOM.render(<>
loading, document.getElementById('cloudConPrev')); + // ReactDOM.render(<>
loading, document.getElementById('cloudConNext')); + axios({ method:'GET', - url:`http://115.85.181.95:30002/wordcloud/?item_id=${item_id}&split=${value}`, + url:`http://115.85.181.95:30003/wordcloud/?item_id=${item_id}&split=${value}&label=${2}`, }) .then(response => response.data) .then(data => { - const Example = ({ data }) => wordcloud - ReactDOM.render(, document.getElementById('cloudCon')) + const Example = ({ data }) => wordcloudPrev + ReactDOM.render(, document.getElementById('cloudConPrev')) }) .catch( error => console.log(error) ); + + // axios({ + // method:'GET', + // url:`http://115.85.181.95:30003/wordcloud/?item_id=${item_id}&split=${0}&label=${1}`, + // // responseType:'blob' + // }) + // .then(response => response.data) + // .then(data => { + // const Example = ({ data }) => wordcloudNext + // ReactDOM.render(, document.getElementById('cloudConNext')) + // }) + // .catch( error => console.log(error) ); + axios.post('http://localhost:8000/review/'+item_id, wishProducts) .then(response => response.data) .then(data => setAvg(data)) @@ -130,6 +158,7 @@ function Detail() {
+ {[5, 4, 3, 2, 1].map( (i) =>{ return ( ) })} +
-
+
+ {/*
*/}

유사한 물품


diff --git a/frontend/src/products/FilterBudgetLeft.js b/frontend/src/products/FilterBudgetLeft.js index 7d8ad1f..b5db8c8 100644 --- a/frontend/src/products/FilterBudgetLeft.js +++ b/frontend/src/products/FilterBudgetLeft.js @@ -26,15 +26,15 @@ function FilterBudgetLeft({ getFilter }) { { categories.map((cat,index) => { return ( <> - @@ -42,9 +42,9 @@ function FilterBudgetLeft({ getFilter }) { })}
+ - ); diff --git a/frontend/src/products/FilterMenuLeft.js b/frontend/src/products/FilterMenuLeft.js index fbc1de2..48f805f 100644 --- a/frontend/src/products/FilterMenuLeft.js +++ b/frontend/src/products/FilterMenuLeft.js @@ -67,7 +67,6 @@ function FilterMenuLeft({ getFilter }) { - ); diff --git a/frontend/src/products/ItemSwiper.js b/frontend/src/products/ItemSwiper.js index 4470828..c432d70 100644 --- a/frontend/src/products/ItemSwiper.js +++ b/frontend/src/products/ItemSwiper.js @@ -5,12 +5,18 @@ import SwiperCore, { Navigation } from "swiper"; import Product from "./Product"; import { useState, useEffect } from "react"; +import "swiper/swiper.scss"; +import "swiper/components/navigation/navigation.scss"; +import "swiper/components/pagination/pagination.scss"; + function ItemSwiper(props) { const [ clicked, setClicked ] = useState([]) const wishProducts = props.wishProducts; const products = props.products; const field = props.field; + SwiperCore.use([Navigation]); + useEffect(() => { const temp = [] Array.from(products).map((product) => { @@ -19,6 +25,8 @@ function ItemSwiper(props) { setClicked(temp) }, [wishProducts]) + console.log(document.getElementsByClassName('swiper')[0]) + return ( <> response.data) .then(data => { setWishProducts(data); - axios.post("http://115.85.181.95:30002/recommend/personal?top_k=10", {'input_list':data, 'filters':filter}) + axios.post("http://115.85.181.95:30003/recommend/personal?top_k=10&user_id=" + logintoken, {'input_list':data, 'filters':filter}) .then( response => response.data) .then( data => { setProducts(data); }) .catch( error => console.log(error) ); - console.log(wishProducts); }) .catch((error) => console.log(error)); @@ -52,14 +51,14 @@ function ProductList() { }) .catch((error) => console.log(error)); - axios.post(`http://115.85.181.95:30002/recommend/normal?k=10`, filter) + axios.post(`http://115.85.181.95:30003/recommend/normal?k=10`, filter) .then( response => response.data) .then( data => { setTotals(data); }) .catch( error => console.log(error) ); - axios.post(`http://115.85.181.95:30002/recommend/similar/user?user_id=${logintoken}&top_k=10`, filter) + axios.post(`http://115.85.181.95:30003/recommend/similar/user?user_id=${logintoken}&top_k=10`, filter) .then( response => response.data) .then( data => { setSimusers(data); @@ -92,7 +91,7 @@ function ProductList() { .then(response => response.data) .then(data => { setWishProducts(data); - axios.post(`http://115.85.181.95:30002/recommend/personal?top_k=10`, {'input_list':data, 'filters':d}) + axios.post(`http://115.85.181.95:30003/recommend/personal?top_k=10`, {'input_list':data, 'filters':d}) .then( response => response.data ) .then( data => { setProducts(data); @@ -102,14 +101,14 @@ function ProductList() { .catch( error => console.log(error) ); - axios.post(`http://115.85.181.95:30002/recommend/normal?k=10`, d) + axios.post(`http://115.85.181.95:30003/recommend/normal?k=10`, d) .then( response => response.data ) .then( data => { setTotals(data); }) .catch( error => console.log(error) ); - axios.post(`http://115.85.181.95:30002/recommend/similar/user?user_id=${logintoken}&top_k=10`, d) + axios.post(`http://115.85.181.95:30003/recommend/similar/user?user_id=${logintoken}&top_k=10`, d) .then( response => response.data ) .then( data => { setSimusers(data);