Skip to content

Commit

Permalink
[WEEK2] Feat: Add main page(#3)
Browse files Browse the repository at this point in the history 
Edit main page and first commit.
  • Loading branch information
@GT0122
GT0122 committed Jan 17, 2023
1 parent df54cef commit 1962a90
Show file tree
Hide file tree
Showing 8 changed files with 340 additions and 215 deletions.
1 change: 1 addition & 0 deletions dummy.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{"posts": [{"id": 265527, "title": "마르틴 원목 사이드보드 2colors", "price": 469000, "star": 4.560606060606061, "image": "https://image.ohou.se/image/central_crop/bucketplace-v2-development/uploads-productions-164005418383990925.jpg/2560/2560"}, {"id": 456986, "title": "600ml 스텐 우유 스팀피쳐/눈금형", "price": 9900, "star": 4.777777777777779, "image": "https://image.ohou.se/image/central_crop/bucketplace-v2-development/uploads-productions-159799688511862876.jpg/2560/2560"}, {"id": 118895, "title": "PETALO CHAIR", "price": 0, "star": 4.5, "image": "https://image.ohou.se/image/central_crop/bucketplace-v2-development/uploads-productions-160211994018554394.png/2560/2560"}, {"id": 312929, "title": "스틸 접이식 실내화걸이 3단", "price": 8900, "star": 4.646537842190017, "image": "https://image.ohou.se/image/central_crop/bucketplace-v2-development/uploads-productions-158986131070336023.jpg/2560/2560"}, {"id": 232064, "title": "샤워볼 20g, 40g, 60g", "price": 1800, "star": 4.728155339805825, "image": "https://image.ohou.se/image/central_crop/bucketplace-v2-development/uploads-productions-157914105876069540.jpg/2560/2560"}, {"id": 445798, "title": "우디 싱글헤드타입 침대프레임 패브릭 SS Q K LK EK 맞춤제작", "price": 897000, "star": 5.0, "image": "https://image.ohou.se/image/central_crop/bucketplace-v2-development/uploads-productions-159712998576931440.png/2560/2560"}, {"id": 357961, "title": "라탄 타원 테이블매트", "price": 14000, "star": 4.550819672131149, "image": "https://image.ohou.se/image/central_crop/bucketplace-v2-development/uploads-productions-159160278578441748.jpg/2560/2560"}, {"id": 124697, "title": "[10%쿠폰] 럭스 무타공 비누 받침대", "price": 6900, "star": 4.593406593406592, "image": "https://image.ohou.se/image/central_crop/bucketplace-v2-development/uploads-productions-1558060795170_VZ63.jpg/2560/2560"}, {"id": 227006, "title": "[주말특가]대추나무 천연 옻칠 우드 수저 4인세트", "price": 15900, "star": 4.7827133479212245, "image": "https://image.ohou.se/image/central_crop/bucketplace-v2-development/uploads-openapi-1612782-1669627547285.jpg/2560/2560"}, {"id": 32125, "title": "프리미엄 블루투스 올인원 오디오시스템 모델 L Model L", "price": 2700000, "star": 4.884615384615385, "image": "https://image.ohou.se/image/central_crop/bucketplace-v2-development/uploads-productions-162564216772871795.jpg/2560/2560"}]}
292 changes: 223 additions & 69 deletions frontend/package-lock.json
View file

Large diffs are not rendered by default.

4 changes: 3 additions & 1 deletion frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,14 @@
"@testing-library/jest-dom": "^5.12.0",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"axios": "^1.2.2",
"bootstrap": "^5.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-ratings-declarative": "^3.4.1",
"react-router-dom": "^5.2.0",
"react-router-dom": "^5.3.4",
"react-scripts": "4.0.3",
"swiper": "^6.8.4",
"web-vitals": "^1.1.2"
},
"scripts": {
Expand Down
31 changes: 16 additions & 15 deletions frontend/src/products/Product.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@ function Product(props) {
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
Expand All @@ -25,31 +26,31 @@ function Product(props) {
}

return (
<div className="col">
<div className="card shadow-sm">
<Link to="/products/1" href="!#" replace>
{percentOff}
<div className="card shadow-sm" id={id}>
<a href="#" className="link" target="_blank">
<img
className="card-img-top bg-dark cover"
height="200"
alt=""
src={Image}
src={ Image }
/>
</Link>
</a>
<div className="card-body">
<h5 className="card-title text-center text-dark text-truncate">
Nillkin iPhone X cover
<h5 className="card-title text-center text-dark text-truncate title">
{ name }
</h5>
<p className="card-text text-center text-muted mb-0">{offPrice}</p>
<div className="d-grid d-block">
<button className="btn btn-outline-dark mt-3">
<FontAwesomeIcon icon={["fas", "cart-plus"]} /> Add to cart
<p className="card-text text-center text-muted mb-0 price">{offPrice}</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>
</div>
</div>
</div>
</div>
);
}

export default Product;
export default Product;
4 changes: 2 additions & 2 deletions frontend/src/products/ProductH.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ function ProductH(props) {
const price = 10000;
let percentOff;
let offPrice = `${price}Ks`;

let name = props.name;
if (props.percentOff && props.percentOff > 0) {
percentOff = (
<div
Expand Down Expand Up @@ -41,7 +41,7 @@ function ProductH(props) {
<div className="card-body h-100">
<div className="d-flex flex-column h-100">
<h5 className="card-title text-dark text-truncate mb-1">
Nillkin iPhone X cover
{ name }
</h5>
<span className="card-text text-muted mb-2 flex-shrink-0">
{offPrice}
Expand Down
210 changes: 87 additions & 123 deletions frontend/src/products/ProductList.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,14 @@
import { Link } from "react-router-dom";
import Product from "./Product";
import ProductH from "./ProductH";
import { useState } 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",
Expand All @@ -14,60 +19,9 @@ const categories = [
"Power Banks",
];

const brands = ["Apple", "Samsung", "Google", "HTC"];

const manufacturers = ["HOCO", "Nillkin", "Remax", "Baseus"];

function FilterMenuLeft() {
return (
<ul className="list-group list-group-flush rounded">
<li className="list-group-item d-none d-lg-block">
<h5 className="mt-1 mb-2">Browse</h5>
<div className="d-flex flex-wrap my-2">
{categories.map((v, i) => {
return (
<Link
key={i}
to="/products"
className="btn btn-sm btn-outline-dark rounded-pill me-2 mb-2"
replace
>
{v}
</Link>
);
})}
</div>
</li>
<li className="list-group-item">
<h5 className="mt-1 mb-1">Brands</h5>
<div className="d-flex flex-column">
{brands.map((v, i) => {
return (
<div key={i} className="form-check">
<input className="form-check-input" type="checkbox" />
<label className="form-check-label" htmlFor="flexCheckDefault">
{v}
</label>
</div>
);
})}
</div>
</li>
<li className="list-group-item">
<h5 className="mt-1 mb-1">Manufacturers</h5>
<div className="d-flex flex-column">
{manufacturers.map((v, i) => {
return (
<div key={i} className="form-check">
<input className="form-check-input" type="checkbox" />
<label className="form-check-label" htmlFor="flexCheckDefault">
{v}
</label>
</div>
);
})}
</div>
</li>
<li className="list-group-item">
<h5 className="mt-1 mb-2">Price Range</h5>
<div className="d-grid d-block mb-3">
Expand Down Expand Up @@ -99,6 +53,42 @@ function FilterMenuLeft() {
function ProductList() {
const [viewType, setViewType] = useState({ grid: true });

const date = new Date();
axios.get("http://localhost:4000/posts",
{
"Date":date
})
.then( response => response.data )
.then( data => {
var index = 0;
data.map((d) => {
const product = document.getElementById("product0"+index);
const image = product.getElementsByClassName("cover")[0];
const link = product.getElementsByClassName("link");
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;
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=");
index++;
return 0;
});
})
.catch( error => console.log(error) );

function changeViewType() {
setViewType({
grid: !viewType.grid,
Expand Down Expand Up @@ -182,18 +172,6 @@ function ProductList() {
<div className="col-lg-9">
<div className="d-flex flex-column h-100">
<div className="row mb-3">
<div className="col-lg-3 d-none d-lg-block">
<select
className="form-select"
aria-label="Default select example"
defaultValue=""
>
<option value="">All Models</option>
<option value="1">iPhone X</option>
<option value="2">iPhone Xs</option>
<option value="3">iPhone 11</option>
</select>
</div>
<div className="col-lg-9 col-xl-5 offset-xl-4 d-flex flex-row">
<div className="input-group">
<input
Expand All @@ -206,72 +184,58 @@ function ProductList() {
<FontAwesomeIcon icon={["fas", "search"]} />
</button>
</div>
<button
className="btn btn-outline-dark ms-2 d-none d-lg-inline"
onClick={changeViewType}
>
<FontAwesomeIcon
icon={["fas", viewType.grid ? "th-list" : "th-large"]}
/>
</button>
</div>
</div>
<div
className={
"row row-cols-1 row-cols-md-2 row-cols-lg-2 g-3 mb-4 flex-shrink-0 " +
(viewType.grid ? "row-cols-xl-3" : "row-cols-xl-2")
}
<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) => {
if (viewType.grid) {
return (
<Product key={i} percentOff={i % 2 === 0 ? 15 : null} />
);
}
return (
<ProductH key={i} percentOff={i % 4 === 0 ? 15 : null} />
);
})}
</div>
<div className="d-flex align-items-center mt-auto">
<span className="text-muted small d-none d-md-inline">
Showing 10 of 100
</span>
<nav aria-label="Page navigation example" className="ms-auto">
<ul className="pagination my-0">
<li className="page-item">
<a className="page-link" href="!#">
Previous
</a>
</li>
<li className="page-item">
<a className="page-link" href="!#">
1
</a>
</li>
<li className="page-item active">
<a className="page-link" href="!#">
2
</a>
</li>
<li className="page-item">
<a className="page-link" href="!#">
3
</a>
</li>
<li className="page-item">
<a className="page-link" href="!#">
Next
</a>
</li>
</ul>
</nav>
</div>
{Array.from({ length:10 }, (_, i) =>
<SwiperSlide>
<Product key={i} percentOff={i % 2 === 0 ? 15 : null} name='samsung' id={"product0" + i}/>
</SwiperSlide>
)}
</Swiper>
<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>
<br/>
</div>
</div>
</div>
</div>
);
}

export default ProductList;
export default ProductList;
11 changes: 7 additions & 4 deletions frontend/src/template/Header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,18 @@ function Header() {

function changeNav(event) {
if (openedDrawer) {
setOpenedDrawer(false)
setOpenedDrawer(false);
}
}

return (
<header>
<nav className="navbar fixed-top navbar-expand-lg navbar-light bg-white border-bottom">
<div className="container-fluid">
<button className="navbar-toggler p-0 border-0 ms-3" type="button" onClick={toggleDrawer}>
<span className="navbar-toggler-icon"></span>
</button>

<Link className="navbar-brand" to="/" onClick={changeNav}>
<FontAwesomeIcon
icon={["fab", "bootstrap"]}
Expand Down Expand Up @@ -70,6 +74,8 @@ function Header() {
</li>
</ul>
</li>


</ul>
</div>

Expand All @@ -78,9 +84,6 @@ function Header() {
<FontAwesomeIcon icon={["fas", "shopping-cart"]} />
<span className="ms-3 badge rounded-pill bg-dark">0</span>
</button>
<button className="navbar-toggler p-0 border-0 ms-3" type="button" onClick={toggleDrawer}>
<span className="navbar-toggler-icon"></span>
</button>
</div>
</div>
</nav>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/template/ScrollToTopOnMount.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,4 @@ function ScrollToTopOnMount() {
return null;
}

export default ScrollToTopOnMount;
export default ScrollToTopOnMount;

0 comments on commit 1962a90

Please sign in to comment.