Skip to content

Commit

Permalink
Merge pull request #38 from TeamDeli/feature/Search/#24
Browse files Browse the repository at this point in the history 
Feature/search/#24
  • Loading branch information
@ReeseSR
ReeseSR authored Aug 19, 2021
2 parents f217236 + 2dbc27a commit c7c6449
Show file tree
Hide file tree
Showing 8 changed files with 154 additions and 125 deletions.
10 changes: 3 additions & 7 deletions src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@ import Profile from "./pages/Profile";
import Calendar from "./pages/Calendar";
import NavBar from "./components/NavBar/NavBar";
import LandingPage from "./pages/LandingPage/LandingPage";
import ProductsByFunction from "./pages/ProductsByFunction";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import "./App.css";
import "antd/dist/antd.css";


function App() {
return (
<Router>
Expand All @@ -19,19 +19,15 @@ function App() {
exact
path="/calendar"
component={() => <Calendar></Calendar>}
></Route>
></Route>
<Route path="/" exact component={LandingPage}></Route>
<Route
exact
path="/profile"
component={() => <Profile></Profile>}
></Route>
<Route path="/addFriends" exact component={AddFriends}></Route>
<Route
exact
path="/product"
component={() => <Product></Product>}
></Route>
<Route exact path="/product/:id" component={ProductsByFunction}></Route>
</Switch>
</Router>
);
Expand Down
98 changes: 53 additions & 45 deletions src/components/product/ProductInformation.js
View file
Original file line number Diff line number Diff line change
@@ -1,51 +1,59 @@
import { Component } from 'react';
import './ProductInformation.css';
import { Component } from "react";
import "./ProductInformation.css";

class ProductInformation extends Component {
render() {
return (
<div class="content">
{/* 제품 설명 부분 */}
<div class="product">
{/* 사진 부분 */}
<div class="product_pic">
<img src="images/restmb_allidxmake.jpeg" width="300px" height="300px" alt="Product Image"></img>
</div>
{/*설명 부분*/}
<div class="product_info">
<div>
<h2>{this.props.product.name}</h2>
{/*별점: https://melthleeth.tistory.com/entry/HTML-CSS%EB%A1%9C-%EB%B3%84%EC%B0%8D%EA%B8%B0-Star-Rating*/}
<div class="star-ratings">
<div class="star-ratings-fill space-x-2 text-lg"
style={{width: this.props.product.star}}>
<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
</div>
<div class="star-ratings-base space-x-2 text-lg">
<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
</div>
</div>

<p>
{this.props.product.info}
</p>
<p>
{this.props.product.info2}
</p>
<div class="hash_info">
<div class="hash_box">{this.props.product.hash1}</div>
<div class="hash_box">{this.props.product.hash2}</div>
</div>

</div>

</div>
render() {
return (
<div class="content">
{/* 제품 설명 부분 */}
<div class="product">
{/* 사진 부분 */}
<div class="product_pic">
<img
src={this.props.product.imageUrl}
width="300px"
height="300px"
alt="Product Image"
></img>
</div>
{/*설명 부분*/}
<div class="product_info">
<div>
<h2>{this.props.product.productname}</h2>
{/*별점: https://melthleeth.tistory.com/entry/HTML-CSS%EB%A1%9C-%EB%B3%84%EC%B0%8D%EA%B8%B0-Star-Rating*/}
<div class="star-ratings">
<div
class="star-ratings-fill space-x-2 text-lg"
style={{ width: this.props.product.star * 12 }}
>
<span>★</span>
<span>★</span>
<span>★</span>
<span>★</span>
<span>★</span>
</div>
<div class="star-ratings-base space-x-2 text-lg">
<span>★</span>
<span>★</span>
<span>★</span>
<span>★</span>
<span>★</span>
</div>
</div>

<p>{this.props.product.info}</p>
<p>{this.props.product.info2}</p>
<div class="hash_info">
<div class="hash_box">{this.props.product.hash1}</div>
<div class="hash_box">{this.props.product.hash2}</div>
<div class="hash_box">{this.props.product.hash3}</div>
</div>
</div>
</div>
</div>


)
}
</div>
);
}
}

export default ProductInformation;
export default ProductInformation;
71 changes: 49 additions & 22 deletions src/pages/LandingPage/LandingPage.js
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,63 @@
import React, { useEffect, useState } from "react";
import axios from "axios";
import { Col, Card, Row, Button } from "antd";
import { Col, Card, Row, Image } from "antd";
import RadioBox from "./Sections/RadioBox";
import RangeSlider from "./Sections/RangeSlider";
import { sex, ages } from "./Sections/Datas";
import { gender, age } from "./Sections/Datas";

const { Meta } = Card;

const LandingPage = () => {
const [Products, setProducts] = useState([]);

const [Filters, setFilters] = useState({
sex: [],
ages: [],
gender: [],
age: [],
price: [],
});

const getProducts = async () => {
const response = await axios.get("http://localhost:4000/getProducts");
if (response.data.success) {
console.log(response.data);
}
console.log(response.data);
setProducts(response.data);
useEffect(() => {
axios
.get("http://localhost:8000/deli/product/getProducts")
.then((response) => {
if (response.data) {
console.log(response.data);
setProducts(response.data);
} else {
alert("데이터 가져오기에 실패했습니다!");
}
});
}, []);

const getProducts = async (Filters) => {
axios
.post("http://localhost:8000/deli/product/getProducts", Filters)
.then((response) => {
if (response.data) {
console.log(response.data);
setProducts(response.data);
} else {
console.log("데이터 가져오기에 실패했습니다!");
//alert("Failed to fetch product datas");
}
});
};

const renderCards = Products.map((product, index) => {
return (
<Col lg={6} md={8} xs={24}>
<Col lg={6} md={8} xs={24} span={8}>
<Card
hoverable={true}
cover={<img alt="example" src={product.image} />}
key={index}
style={{ width: 300 }}
cover={
<a href={`/product/${product.id}`}>
<Image width={300} src={product.imageUrl} />
</a>
}
>
<Meta
style={{}}
title={product.title}
title={product.productname}
description={`${product.price}원`}
/>
</Card>
Expand Down Expand Up @@ -70,7 +93,11 @@ const LandingPage = () => {
};

const showFilteredWords = () => {
if (Filters.ages.length !== 0 && Filters.sex.length !== 0) {
if (
Filters.age.length !== 0 &&
Filters.gender.length !== 0 &&
Filters.price
) {
return (
<div
style={{
Expand All @@ -79,8 +106,8 @@ const LandingPage = () => {
color: "#fd6f22",
}}
>
'{ages[Filters.ages].name} {sex[Filters.sex].name}'에게 인기있는 선물
중 '{Filters.price[0]}원에서 {Filters.price[1]}원'대의 선물 검색
'{age[Filters.age].name} {gender[Filters.gender].name}'에게 인기있는
선물 중 '{Filters.price[0]}원에서 {Filters.price[1]}원'대의 선물 검색
결과입니다
</div>
);
Expand All @@ -95,13 +122,13 @@ const LandingPage = () => {
<Col lg={12} xs={24}>
<div>성별</div>
<RadioBox
list={sex}
handleFilters={(filters) => handleFilters(filters, "sex")}
list={gender}
handleFilters={(filters) => handleFilters(filters, "gender")}
/>
<span>나이</span>
<RadioBox
list={ages}
handleFilters={(filters) => handleFilters(filters, "ages")}
list={age}
handleFilters={(filters) => handleFilters(filters, "age")}
/>
<span>가격대</span>
<RangeSlider
Expand Down
6 changes: 3 additions & 3 deletions src/pages/LandingPage/Sections/Datas.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
const sex = [
const gender = [
{ _id: 0, name: "남성" },
{ _id: 1, name: "여성" },
];

const ages = [
const age = [
{ _id: 0, name: "10대" },
{ _id: 1, name: "20대" },
{ _id: 2, name: "30대" },
{ _id: 3, name: "40대" },
{ _id: 4, name: "50대" },
];

export { sex, ages };
export { gender, age };
33 changes: 2 additions & 31 deletions src/pages/LandingPage/Sections/RadioBox.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,9 @@
import React, { useState } from "react";
import { Collapse, Radio } from "antd";
import { Radio } from "antd";
import "./RadioBox.css";
import styled from "styled-components";

const { Panel } = Collapse;

function RadioBox(props) {
const [Value, setValue] = useState("0");
const [Value, setValue] = useState(0);

const renderRadioBox = () =>
props.list &&
Expand All @@ -30,30 +27,4 @@ function RadioBox(props) {
);
}

const Item = styled(Radio)`
width: 22px;
height: 22px;
border-radius: 100px;
background: linear-gradient(
to right bottom,
hsl(154, 97%, 62%),
hsl(225, 97%, 62%)
);
position: relative;
&::before {
content: "";
display: inline-block;
width: inherit;
height: inherit;
border-radius: inherit;
background: hsl(0, 0%, 90%);
transform: scale(1.1);
transition: 0.3s;
}
`;

export default RadioBox;
4 changes: 0 additions & 4 deletions src/pages/LandingPage/Sections/RangeSlider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,6 @@ const RangeSlider = (props) => {
}
};

const onAfterChange = (value) => {
console.log("onAfterChange: ", value);
};

return (
<>
<Slider
Expand Down
22 changes: 9 additions & 13 deletions src/pages/Product.js
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,22 @@
import ProductInformation from '../components/product/ProductInformation';
import ProductRecommend from '../components/product/ProductRecommend';
import { Component } from 'react';
import Data from '../kyungmin.json'

class Product extends Component {
import ProductInformation from "../components/product/ProductInformation";
import ProductRecommend from "../components/product/ProductRecommend";
import { Component } from "react";
import Data from "../kyungmin.json";

class Product extends Component {
render() {
return (
<div className="Product">
<ProductInformation
product={Data.products[0]}>
</ProductInformation>
<ProductRecommend
<ProductInformation product={Data.products[0]}></ProductInformation>
<ProductRecommend
recommendProduct1={Data.products[1]}
recommendProduct2={Data.products[2]}
recommendProduct3={Data.products[3]}
recommendProduct4={Data.products[4]}>
</ProductRecommend>
recommendProduct4={Data.products[4]}
></ProductRecommend>
</div>
);
}
}

export default Product;

Loading

0 comments on commit c7c6449

Please sign in to comment.