Skip to content

Commit

Permalink
[WEEK4] Feat: category filter in main(#3)
Browse files Browse the repository at this point in the history 
Category buttons to filter items create in main page.
  • Loading branch information
@GT0122
GT0122 committed Feb 1, 2023
2 parents d70779a + 63a83a2 commit 074d5cf
Show file tree
Hide file tree
Showing 9 changed files with 87 additions and 113 deletions.
2 changes: 1 addition & 1 deletion frontend/src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,4 +43,4 @@ function App() {
);
}

export default App;
export default App;
8 changes: 8 additions & 0 deletions frontend/src/bootstrap-custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10726,4 +10726,12 @@ textarea.form-control-lg {
.category {
width: 100px;
margin: 0 0 0 auto;
}

.category_deactivate {
background-color: #cacaca;
}

.category_activate {
background-color: #ff6f61;
}
101 changes: 42 additions & 59 deletions frontend/src/pages/DetailPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,13 @@ import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import ItemSwiper from '../products/ItemSwiper';
import axios from 'axios';
import StarRate from '../products/StarRate';
import { useParams } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import StarRate from '../products/StarRate';

// 상세 제품 페이지
function Detail() {
const [ product, setProduct ] = useState([]);
const [ count, setCount ] = useState(0);
const [ cloud, setCloud ] = useState('#');
const [ similar, setSimilar ] = useState([]);
var [clicked, setClicked] = useState(false);

Expand All @@ -37,71 +35,69 @@ function Detail() {
setProduct(data);
})
.catch( error => console.log(error) );
axios.get('http://localhost:8000/item/' + item_id)
.then(response => response.data)
.then(data => {
setCloud(data.img_main);
})
.catch( error => console.log(error) );
axios.get(`http://115.85.181.95:30002/recommend/similar/item?item_id=${item_id}&top_k=10`)
.then(response => response.data)
.then(data => {
console.log(data);
setSimilar(data);
})
.catch( error => console.log(error) );
return () => {
controller.abort();
}
}, []);
}, []);

return (
<>
{product && (
<Container>
<ItemBox>
<ImgBox>
<img src={product.img_main}/>
<img src={product.img_main} alt="상품 이미지"/>
</ImgBox>
<ItemInfoBox>
<InfoBox>
<h3>{product.title}</h3>
<p>{product.brand}</p>
<small>{product.brand}</small>
<h1>{product.title}</h1>
<StarRate star = {product.review_avg} />
<div style={{"marginTop": "13px"}}>{product.wish_count} 명이 찜 했어요!</div>
<hr></hr>
<small className="category">{ product.category0 }</small>
<br/>
<small className="category">{ product.category1 }</small>
<StarRate star={ product.review_avg } id={ item_id }/>



<PriceBox>
<span>
<small>판매가 </small>
{[product.selling_price].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
<small>원</small>
</span>
</PriceBox>

<DeliveryBox>
<span>
<small> + 배송비 </small>
{[product.delivery_fee].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
<small>원</small>
</span>
</DeliveryBox>

<TotalPrice>
<span>
<span>배송비 포함 <strong>{(product.selling_price + product.delivery_fee).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}</strong>원</span>
</span>
</TotalPrice>
<ButtonBox>
<FontAwesomeIcon icon={["far", "heart"]} id={ `like${item_id}`} onClick={ handleClick } className={"like"}/>
<CartBtn>
<FontAwesomeIcon icon={["far", "heart"]} id={ `like${item_id}`} onClick={ handleClick } className={"like"}/>
</CartBtn>
<BuyBtn onClick={() => {window.open('https://ohou.se/productions/' + item_id)}}>오늘의집에서 보기</BuyBtn>
</ButtonBox>

</InfoBox>
</ItemInfoBox>
</ItemBox>
<br/>
<h3>유사한 물품</h3>
<br/>
<ItemSwiper products={ similar } category='3'/>
<ItemSwiper products={ similar } field='4'/>
</Container>
)}
</>
Expand All @@ -122,11 +118,11 @@ const ItemBox = styled.div`
`;

const ImgBox = styled.div`
min-width: 609px;
min-width: 500px;
cursor: default;
& img {
width: 609px;
height: 407px;
width: 500px;
height: 500px;
min-height: 230px;
border: none;
vertical-align: middle;
Expand All @@ -153,56 +149,24 @@ const InfoBox = styled.div`
}
`;
const PriceBox = styled.div`
margin-top: 40px;
display: flex;
& span {
font-size: 24px;
line-height: 24px;
font-weight: bold;
width: 100%;
& small {
font-size: 14px;
margin-left: 2px;
font-weight: bold;
}
}
`;
const DeliveryBox = styled.div`
marginTop: 60px;
display: flex;
text-align: right;
& span {
font-size: 20px;
font-size: 24px;
line-height: 24px;
font-weight: bold;
width: 100%;
& small {
font-size: 14px;
margin-left: 2px;
font-weight: bold;
}
}
`;

const CountBox = styled.div`
display: flex;
width: 100%;
justify-content: flex-end;
align-items: center;
& button {
width: 28px;
height: 28px;
padding: 0;
margin: 0 10px;
border: 1px solid rgb(236, 236, 236);
cursor: pointer;
overflow: visible;
background: rgb(255, 255, 255);
outline: none;
}
`;
const TotalPrice = styled.div`
padding: 16px 0;
margin-top: 150px;
text-align: right;
& span {
font-size: 14px;
Expand All @@ -212,6 +176,25 @@ const TotalPrice = styled.div`
margin-left: 7px;
}
}
& small {
font-size: 16px;
margin-left: 2px;
font-weight: bold;
}
`;
const DeliveryBox = styled.div`
display: flex;
text-align: right;
& span {
font-size: 20px;
line-height: 24px;
font-weight: bold;
width: 100%;
& small {
font-size: 14px;
margin-left: 2px;
}
}
`;
const ButtonBox = styled.div`
display: flex;
Expand Down
2 changes: 2 additions & 0 deletions frontend/src/pages/Login.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,9 @@ function Login(){
}),
}).then((res) => {
if(res.ok) {
console.log(res.statusText)
sessionStorage.setItem("loginEmail", email)
window.open(`#/products`, '_self')
}
else {
alert("아이디 혹은 비밀번호가 틀렸습니다.")
Expand Down
37 changes: 17 additions & 20 deletions frontend/src/products/FilterMenuLeft.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,10 @@ import { useState } from "react";

function FilterMenuLeft({ getFilter }) {
const [ minprice, setMinprice ] = useState(0);
const [ maxprice, setMaxprice ] = useState(0);
const [ category, setCategory ] = useState('가구');
const [ style, setStyle ] = useState('모던');
const [ maxprice, setMaxprice ] = useState(1000000);
const [ category, setCategory ] = useState([]);
const categories = ['가구', '주방용품', '수납·정리', '생활용품', '패브릭', '가전·디지털', '공구·DIY', '데코·식물', '인테리어시공',
'조명', '캠핑·레저', '생필품', '유아·아동', '반려동물', '식품', '렌탈'];
const styles = ['모던', '빈티지&레트로', '북유럽', '내추럴', '러블리&로맨틱', '미니멀&심플', '유니크&믹스매치', '한국&아시아',
'프렌치&프로방스', '클래식&앤틱', '인더스트리얼'];

return (
<ul className="list-group list-group-flush rounded">
Expand Down Expand Up @@ -36,24 +33,24 @@ function FilterMenuLeft({ getFilter }) {
<label htmlFor="floatingInput">Max Price</label>
</div>
<h5 className="mt-1 mb-2">Category</h5>
<select onChange={(event) => setCategory(categories[event.target.options.selectedIndex])}>
{ categories.map((cat) => {
return (
<option key={ cat }>{ cat }</option>
)
return (
<button value={ cat } className='category_deactivate' onClick={ (event) => {
const ca = event.target.value;
const click = event.target.className;
console.log(click, category)
if(click === 'category_activate') {
setCategory(category.filter(c => c !== ca));
event.target.className = 'category_deactivate';
} else {
setCategory([...category, ca]);
event.target.className = 'category_activate';
}
} }>{ cat }</button>
)
})}
</select>
<br/>
<h5 className="mt-1 mb-2">Style</h5>
<select onChange={(event) => setStyle(styles[event.target.options.selectedIndex])}>
{ styles.map((st) => {
return (
<option key={ st }>{ st }</option>
)
})}
</select>
<br/>
<button className="btn btn-dark apply" onClick={ () => getFilter(minprice, maxprice, category, style) }>Apply</button>
<button className="btn btn-dark apply" onClick={ () => getFilter(minprice, maxprice, category) }>Apply</button>
</div>
</li>
</ul>
Expand Down
11 changes: 4 additions & 7 deletions frontend/src/products/ItemSwiper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,8 @@ import SwiperCore, { Navigation } from "swiper";
import Product from "./Product";

function ItemSwiper(props) {
const products = [];
const products = props.products;
const field = props.field;
for(var k in props.products) {
products.push(props.products[k])
}

return (
<>
Expand All @@ -28,10 +25,10 @@ function ItemSwiper(props) {
id={field}
>
{
products.map((product) => {
products.map((product, index) => {
return (
<SwiperSlide key={field + k}>
<Product product={ product } field={field + k}/>
<SwiperSlide key={field + index}>
<Product product={ product } field={field + index}/>
</SwiperSlide>
)
})
Expand Down
12 changes: 6 additions & 6 deletions frontend/src/products/Product.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,12 @@ function Product(props) {
};

const product = props.product;
const id = product[0];
const name = product[4];
const price = product[3];
const star = product[5];
const Image = product[1];
const brand = product[6];
const id = product.item_ids;
const name = product.titles;
const price = product.selling_prices;
const star = product.star_avgs;
const Image = product.img_urls;
const brand = product.brands;
const field = props.field;

return (
Expand Down
23 changes: 5 additions & 18 deletions frontend/src/products/ProductList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,20 +14,19 @@ function ProductList() {

useEffect(() => {
const controller = new AbortController()
axios.get("http://localhost:8000", {signal:controller.signal})
axios.post("http://115.85.181.95:30002/recommend/personal?top_k=10", [201149], {signal:controller.signal})
.then( response => response.data)
.then( data => {
console.log(data);
setProducts(data);
})
.catch( error => console.log(error) );
axios.get(`http://localhost:8000`, {signal:controller.signal})
axios.post(`http://115.85.181.95:30002/recommend/normal?k=10`, {signal:controller.signal})
.then( response => response.data)
.then( data => {
setTotals(data);
})
.catch( error => console.log(error) );
axios.get("http://localhost:8000", {signal:controller.signal})
axios.get(`http://115.85.181.95:30002/recommend/similar/user?user_id=${11}&top_k=10`, {signal:controller.signal})
.then( response => response.data)
.then( data => {
setSimusers(data);
Expand All @@ -43,25 +42,13 @@ function ProductList() {
applyButton.setAttribute('className', "btn btn-dark apply");
applyButton.textContent = 'Apply';

function getFilter(minprice, maxprice, category, style) {
axios.post(`http://localhost:8000/filter?minp=${minprice}&maxp=${maxprice}&category=${category}`, [style])
.then( response => response.data )
.then( data => {
setProducts(data);
})
.catch( error => console.log(error) );
axios.post(`http://localhost:8000/filter?minp=${minprice}&maxp=${maxprice}&category=${category}`, [style])
function getFilter(minprice, maxprice, category) {
axios.post(`http://115.85.181.95:30002/recommend/normal?k=10&minp=${minprice}&maxp=${maxprice}`, category)
.then( response => response.data )
.then( data => {
setTotals(data);
})
.catch( error => console.log(error) );
axios.post(`http://localhost:8000/filter?minp=${minprice}&maxp=${maxprice}&category=${category}`, [style])
.then( response => response.data )
.then( data => {
setSimusers(data);
})
.catch( error => console.log(error) );
}

return (
Expand Down
Loading

0 comments on commit 074d5cf

Please sign in to comment.