Skip to content

Commit

Permalink
[WEEK4] Feat: add detail(#3)
Browse files Browse the repository at this point in the history 
add detail page and edit main page.
  • Loading branch information
@GT0122
GT0122 committed Jan 31, 2023
1 parent 2bacffd commit 6200ff0
Show file tree
Hide file tree
Showing 5 changed files with 147 additions and 115 deletions.
5 changes: 5 additions & 0 deletions frontend/src/bootstrap-custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10721,4 +10721,9 @@ textarea.form-control-lg {
width: 100px;
margin: 0 0 0 auto;
color:#d63384;
}

.category {
width: 100px;
margin: 0 0 0 auto;
}
45 changes: 38 additions & 7 deletions frontend/src/pages/DetailPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,28 +2,58 @@
import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import styled from 'styled-components';
import ItemSwiper from '../products/ItemSwiper';
import axios from 'axios';

// 상세 제품 페이지
function Detail() {
const [ products, setProducts ] = useState([]);
const [ product, setProduct ] = useState([]);
const [ price, setPrice ] = useState(10000);
const [ count, setCount ] = useState(0);
const [ cloud, setCloud ] = useState('#');

const product = products[1]

const item_id = 265527;

useEffect(() => {
const controller = new AbortController()
axios.get('http://34.64.87.78:8000/item/' + item_id)
.then(response => response.data)
.then(data => {
console.log(data)
setProduct(data);
setPrice(data.selling_price);
})
.catch( error => console.log(error) );
axios.get('http://34.64.87.78:8000/item/' + item_id)
.then(response => response.data)
.then(data => {
console.log(data)
setCloud(data.image_url);
})
.catch( error => console.log(error) );
return () => {
controller.abort();
}
}, []);

return (
<>
{product && (
<Container>
<ItemBox>
<ImgBox>
<img src={product.image_url}/>
</ImgBox>
<ItemInfoBox>
<InfoBox>
<p>{product.title}</p>
<h3>{product.title}</h3>
<p>{product.brand}</p>
<small className="category">{ product.category0 }</small>
<br/>
<small className="category">{ product.category1 }</small>
<PriceBox>
<span>
100000
{price}
<small>원</small>
</span>
<CountBox>
Expand All @@ -50,7 +80,7 @@ function Detail() {

<TotalPrice>
<span>
합계 <strong>10394 원</strong>
합계 <strong>{price * count} 원</strong>
</span>
</TotalPrice>
<ButtonBox>
Expand All @@ -60,10 +90,11 @@ function Detail() {
</InfoBox>
</ItemInfoBox>
</ItemBox>
<img src={ cloud }/>
</Container>
)}
</>
);
)
}

const Container = styled.div`
Expand Down
44 changes: 44 additions & 0 deletions frontend/src/products/FilterMenuLeft.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import axios from "axios";
import { useEffect, useState } from "react";

function FilterMenuLeft(props) {
const [ minprice, setMinprice ] = useState(0);
const [ maxprice, setMaxprice ] = useState(0);
const geter = () => {
console.log(props);
props.getting(minprice, maxprice);
}
console.log(props.getting(minprice, maxprice));
return (
<ul className="list-group list-group-flush rounded">
<li className="list-group-item">
<h5 className="mt-1 mb-2">Price Range</h5>
<div className="d-grid d-block mb-3">
<div className="form-floating mb-2">
<input
type="number"
className="form-control min-price"
placeholder="Min"
defaultValue={ minprice }
onChange= {(event)=> setMinprice(event.target.valueAsNumber)}
/>
<label htmlFor="floatingInput">Min Price</label>
</div>
<div className="form-floating mb-2">
<input
type="number"
className="form-control max-price"
placeholder="Max"
defaultValue= { maxprice }
onChange = {(event)=> setMaxprice(event.target.valueAsNumber)}
/>
<label htmlFor="floatingInput">Max Price</label>
</div>
<button className="btn btn-dark apply" onClick={ geter }>Apply</button>
</div>
</li>
</ul>
);
}

export default FilterMenuLeft;
67 changes: 27 additions & 40 deletions frontend/src/products/ItemSwiper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,49 +7,36 @@ import Product from "./Product";
import axios from "axios";

function ItemSwiper(props) {
const [ products, setProducts ] = useState([]);
const products = props.products;
const category = props.category;

useEffect(() => {
const controller = new AbortController()
axios.get("http://localhost:8000", {signal:controller.signal})
.then( response => response.data)
.then( data => {
console.log(data);
setProducts([...products, ...data]);
})
.catch( error => console.log(error) );

return () => {
controller.abort();
}
}, []);

return (
<Swiper
className={ "col-12 swiper swiper" + category }
spaceBetween={0}
slidesPerView={2}
scrollbar={{ draggable: true }}
navigation
pagination={{ clickable: true }}
breakpoints={{
768: {
slidesPerView: 5,
},
}}
id={category}
>
{
products.map((pro, index) => {
return (
<SwiperSlide key={category + index}>
<Product id={pro.id} name={pro.title} price={pro.price} star={pro.star} image={pro.image} category={category + index}/>
</SwiperSlide>
)
})
}
</Swiper>
<>
<Swiper
className={ "col-12 swiper swiper" + category }
spaceBetween={0}
slidesPerView={2}
scrollbar={{ draggable: true }}
navigation
pagination={{ clickable: true }}
breakpoints={{
768: {
slidesPerView: 5,
},
}}
id={category}
>
{
products.map((pro, index) => {
return (
<SwiperSlide key={category + index}>
<Product id={pro.id} name={pro.title} price={pro.price} star={pro.star} image={pro.image} category={category + index}/>
</SwiperSlide>
)
})
}
</Swiper>
</>
);
}

Expand Down
101 changes: 33 additions & 68 deletions frontend/src/products/ProductList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,76 +4,41 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import ScrollToTopOnMount from "../template/ScrollToTopOnMount";
import React from "react";
import axios from "axios";
import FilterMenuLeft from "./FilterMenuLeft";
import ItemSwiper from "./ItemSwiper";

function FilterMenuLeft() {
return (
<ul className="list-group list-group-flush rounded">
<li className="list-group-item">
<h5 className="mt-1 mb-2">Price Range</h5>
<div className="d-grid d-block mb-3">
<div className="form-floating mb-2">
<input
type="number"
className="form-control min-price"
placeholder="Min"
defaultValue="0"
/>
<label htmlFor="floatingInput">Min Price</label>
</div>
<div className="form-floating mb-2">
<input
type="number"
className="form-control max-price"
placeholder="Max"
defaultValue="0"
/>
<label htmlFor="floatingInput">Max Price</label>
</div>
<button className="btn btn-dark apply" onClick={ FilterApply }>Apply</button>
</div>
</li>
</ul>
);
}
function ProductList() {
const [ viewType, setViewType ] = useState({ grid: true });
const [ products, setProducts ] = useState([]);

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 => {
data.map((d, index) => {
const id = d.id;
const title = d.title;
const price = d.price;
var star = ""
for(var i=0; i<d.star-1; i++) {
star += "★";
}
for(var j=0; j<5-d.star; j++) {
star += "☆";
}
const image = d.image;
const elements = document.getElementsByClassName('swiper');
Array.from(elements).map((element) => {
const category = element.id;
console.log(category + index)
const card = element.getElementsByClassName('card' + category + index)[0];
card.getElementsByClassName('link')[0].setAttribute('href', "https://ohou.se/productions/" + id + "/selling?affect_type=StoreHome&affect_id=");
card.getElementsByClassName('title')[0].textContent = title;
card.getElementsByClassName('price')[0].textContent = price;
card.getElementsByClassName('star')[0].textContent = star;
card.getElementsByClassName('cover')[0].setAttribute('src', image);
return 0;
})
useEffect(() => {
const controller = new AbortController()
axios.get("http://localhost:8000", {signal:controller.signal})
.then( response => response.data)
.then( data => {
setProducts(data);
})
})
.catch( error => console.log(error) );
}
.catch( error => console.log(error) );

return () => {
controller.abort();
}
}, []);

function ProductList() {
const [ viewType, setViewType ] = useState({ grid: true });
const applyButton = document.createElement('button');
applyButton.setAttribute('className', "btn btn-dark apply");
applyButton.textContent = 'Apply';

const getProducts = (minprice, maxprice) => {
console.log(1);
axios.get("http://localhost:8000/filter?minp=" + minprice + "&maxp=" + maxprice)
.then( response => response.data )
.then( data => {
console.log('ss');
setProducts(data);
})
.catch( error => console.log(error) );
}

function changeViewType() {
setViewType({
Expand Down Expand Up @@ -126,7 +91,7 @@ function ProductList() {
data-bs-parent="#accordionFilter"
>
<div className="accordion-body p-0">
<FilterMenuLeft />
<FilterMenuLeft getting = { getProducts }/>
</div>
</div>
</div>
Expand Down Expand Up @@ -158,11 +123,11 @@ function ProductList() {
</div>
<h2>용욱님을 위한 추천</h2>
<br/>
<ItemSwiper category="1"></ItemSwiper>
<ItemSwiper category="1" products={ products }></ItemSwiper>
<br/>
<h2>내가 찾는 핸드폰</h2>
<br/>
<ItemSwiper category="2"></ItemSwiper>
<ItemSwiper category="2" products={ products }></ItemSwiper>
<br/>
</div>
</div>
Expand Down

0 comments on commit 6200ff0

Please sign in to comment.