Skip to content

GitLab

Commit 3ba7cf83 authored by kusang96's avatar kusang96
Browse files

Product UI 완성

parent 5f0483b4
Hide whitespace changes
Inline Side-by-side
client/src/Components/Card.js 0 → 100644
View file @ 3ba7cf83
import React, { useState, useEffect, useRef } from 'react';
import { Card } from 'react-bootstrap';
function Card() {
return (
)
}
export default Card
\ No newline at end of file
client/src/Components/SubNav.js
View file @ 3ba7cf83
...@@ -22,7 +22,7 @@ function SubNav() { ...@@ -22,7 +22,7 @@ function SubNav() {
} }
return ( return (
<Navbar sticky="top" className="flex-nowrap" style={{ top: "62px", paddingTop: "0", paddingBottom: "0", backgroundColor: "#fff"}}> <Navbar sticky="top" className="flex-nowrap" style={{ top: "62px", paddingTop: "0", paddingBottom: "0", backgroundColor: "#fff", overflowX: "auto"}}>
<style type="text/css"> <style type="text/css">
{` {`
.nav-link, .nav-link:hover, .nav-link:active { .nav-link, .nav-link:hover, .nav-link:active {
......
client/src/Pages/Admin.js
View file @ 3ba7cf83
...@@ -3,13 +3,17 @@ import MainNav from '../Components/MainNav'; ...@@ -3,13 +3,17 @@ import MainNav from '../Components/MainNav';
import SubNav from '../Components/SubNav'; import SubNav from '../Components/SubNav';
import Pagination from '../Components/Pagination'; import Pagination from '../Components/Pagination';
import search from '../search.svg'; import search from '../search.svg';
import { Row, Col, Form, FormControl, Button, Card, Container } from 'react-bootstrap'; import { Row, Form, FormControl, Button, Card, Container } from 'react-bootstrap';
function Admin() { function Admin() {
function handleClick(e) { function handleClick(e) {
const card = e.target.parentNode.parentNode const card = e.target.parentNode.parentNode
console.log(card)
alert('해당 상품을 성공적으로 삭제하였습니다.') alert('해당 상품을 성공적으로 삭제하였습니다.')
card.remove()
}
function handleSubmit(e) {
e.preventDefault()
} }
return ( return (
...@@ -30,93 +34,93 @@ function Admin() { ...@@ -30,93 +34,93 @@ function Admin() {
<MainNav /> <MainNav />
<SubNav /> <SubNav />
<Container> <Container>
<Row className="justify-content-end mt-5 mb-5"> <Row as={Form} onSubmit={handleSubmit} className="justify-content-end mx-0 my-5">
<FormControl type="text" placeholder="Search" style={{width:"13rem"}} /> <FormControl type="text" placeholder="Search" style={{ width: "13rem" }} />
<Button type="submit" className="px-2"> <Button type="submit" className="px-2">
<img src={search} width="20" height="20" /> <img src={search} width="20" height="20" />
</Button> </Button>
<Button sm={2} xs={6} type="button" href="/regist" className="ml-1">상품 등록</Button> <Button sm={2} xs={6} type="button" href="/regist" className="ml-1">상품 등록</Button>
</Row> </Row>
<Row className="justify-content-start m-5"> <Row className="justify-content-start m-5">
<Card className="my-5" style={{ width: "18rem", margin: "auto" }}> <Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
<Card.Img variant="top" src="https://img.sonyunara.com/files/goods/67460/1607053816_0.jpg" style={{ objectFit: "contain", height: "22rem" }} /> <Card.Img variant="top" src="https://img.sonyunara.com/files/goods/67460/1607053816_0.jpg" style={{ objectFit: "contain", height: "22rem" }} />
<Card.Body> <Card.Body>
<Card.Title>케이시앵글부츠(SH)</Card.Title> <Card.Title>케이시앵글부츠(SH)</Card.Title>
<Card.Text> <Card.Text>
재고: 8<br /> 재고: 8<br />
구매자 수: 10 구매자 수: 10
</Card.Text> </Card.Text>
<Button className="float-right" onClick={(e) => handleClick(e)}>삭제</Button> <Button className="float-right" onClick={(e) => handleClick(e)}>삭제</Button>
</Card.Body> </Card.Body>
</Card> </Card>
<Card className="my-5" style={{ width: "18rem", margin: "auto" }}> <Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
<Card.Img variant="top" src="https://img.sonyunara.com/files/goods/48705/1552562469_0.jpg" style={{ objectFit: "contain", height: "22rem" }} /> <Card.Img variant="top" src="https://img.sonyunara.com/files/goods/48705/1552562469_0.jpg" style={{ objectFit: "contain", height: "22rem" }} />
<Card.Body> <Card.Body>
<Card.Title>메리제인플랫(SH)</Card.Title> <Card.Title>메리제인플랫(SH)</Card.Title>
<Card.Text> <Card.Text>
재고: 20<br /> 재고: 20<br />
구매자 수: 60 구매자 수: 60
</Card.Text> </Card.Text>
<Button className="float-right" onClick={(e) => handleClick(e)}>삭제</Button> <Button className="float-right" onClick={(e) => handleClick(e)}>삭제</Button>
</Card.Body> </Card.Body>
</Card> </Card>
<Card className="my-5" style={{ width: "18rem", margin: "auto" }}> <Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
<Card.Img variant="top" src="https://img.sonyunara.com/files/goods/53386/1567390097_2.jpg" style={{ objectFit: "contain", height: "22rem" }} /> <Card.Img variant="top" src="https://img.sonyunara.com/files/goods/53386/1567390097_2.jpg" style={{ objectFit: "contain", height: "22rem" }} />
<Card.Body> <Card.Body>
<Card.Title>솔티드스니커즈(SH)</Card.Title> <Card.Title>솔티드스니커즈(SH)</Card.Title>
<Card.Text> <Card.Text>
재고: 34<br /> 재고: 34<br />
구매자 수: 5 구매자 수: 5
</Card.Text> </Card.Text>
<Button className="float-right" onClick={(e) => handleClick(e)}>삭제</Button> <Button className="float-right" onClick={(e) => handleClick(e)}>삭제</Button>
</Card.Body> </Card.Body>
</Card> </Card>
<Card className="my-5" style={{ width: "18rem", margin: "auto" }}> <Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
<Card.Img variant="top" src="https://img.sonyunara.com/files/goods/61286/1587540563_0.jpg" style={{ objectFit: "contain", height: "22rem" }} /> <Card.Img variant="top" src="https://img.sonyunara.com/files/goods/61286/1587540563_0.jpg" style={{ objectFit: "contain", height: "22rem" }} />
<Card.Body> <Card.Body>
<Card.Title>버켄슬리퍼(SH)</Card.Title> <Card.Title>버켄슬리퍼(SH)</Card.Title>
<Card.Text> <Card.Text>
재고: 50<br /> 재고: 50<br />
구매자 수: 18 구매자 수: 18
</Card.Text> </Card.Text>
<Button className="float-right" onClick={(e) => handleClick(e)}>삭제</Button> <Button className="float-right" onClick={(e) => handleClick(e)}>삭제</Button>
</Card.Body> </Card.Body>
</Card> </Card>
<Card className="my-5" style={{ width: "18rem", margin: "auto" }}> <Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
<Card.Img variant="top" src="https://hotping.co.kr/web/product/big/202011/b8f4c6471955b80fc3991b7d6df8926a.jpg" style={{ objectFit: "contain", height: "22rem" }} /> <Card.Img variant="top" src="https://hotping.co.kr/web/product/big/202011/b8f4c6471955b80fc3991b7d6df8926a.jpg" style={{ objectFit: "contain", height: "22rem" }} />
<Card.Body> <Card.Body>
<Card.Title>크레센도 하이힐펌프스</Card.Title> <Card.Title>크레센도 하이힐펌프스</Card.Title>
<Card.Text> <Card.Text>
재고: 35<br /> 재고: 35<br />
구매자 수: 70 구매자 수: 70
</Card.Text> </Card.Text>
<Button className="float-right" onClick={(e) => handleClick(e)}>삭제</Button> <Button className="float-right" onClick={(e) => handleClick(e)}>삭제</Button>
</Card.Body> </Card.Body>
</Card> </Card>
<Card className="my-5" style={{ width: "18rem", margin: "auto" }}> <Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
<Card.Img variant="top" src="https://hotping.co.kr/web/product/big/202011/888e4e8d6a2c2e7da385b079151fcba2.jpg" style={{ objectFit: "contain", height: "22rem" }} /> <Card.Img variant="top" src="https://hotping.co.kr/web/product/big/202011/888e4e8d6a2c2e7da385b079151fcba2.jpg" style={{ objectFit: "contain", height: "22rem" }} />
<Card.Body> <Card.Body>
<Card.Title>어텀솔져1cm 스웨이드로퍼</Card.Title> <Card.Title>어텀솔져1cm 스웨이드로퍼</Card.Title>
<Card.Text> <Card.Text>
재고: 40<br /> 재고: 40<br />
구매자 수: 30 구매자 수: 30
</Card.Text> </Card.Text>
<Button className="float-right" onClick={(e) => handleClick(e)}>삭제</Button> <Button className="float-right" onClick={(e) => handleClick(e)}>삭제</Button>
</Card.Body> </Card.Body>
</Card> </Card>
<Card className="my-5" style={{ width: "18rem", margin: "auto" }}> <Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
<Card.Img variant="top" src="https://hotping.co.kr/web/product/big/202007/3308564012eb14e6c11ed621fa7555fb.jpg" style={{ objectFit: "contain", height: "22rem" }} /> <Card.Img variant="top" src="https://hotping.co.kr/web/product/big/202007/3308564012eb14e6c11ed621fa7555fb.jpg" style={{ objectFit: "contain", height: "22rem" }} />
<Card.Body> <Card.Body>
<Card.Title>포웰3.5cm 스니커즈</Card.Title> <Card.Title>포웰3.5cm 스니커즈</Card.Title>
<Card.Text> <Card.Text>
재고: 15<br /> 재고: 15<br />
구매자 수: 50 구매자 수: 50
</Card.Text> </Card.Text>
<Button className="float-right" onClick={(e) => handleClick(e)}>삭제</Button> <Button className="float-right" onClick={(e) => handleClick(e)}>삭제</Button>
</Card.Body> </Card.Body>
</Card> </Card>
</Row> </Row>
<Pagination /> <Pagination />
</Container> </Container>
</div> </div>
......
client/src/Pages/Home.js
View file @ 3ba7cf83
...@@ -5,51 +5,50 @@ import { Card, Container, Row } from 'react-bootstrap'; ...@@ -5,51 +5,50 @@ import { Card, Container, Row } from 'react-bootstrap';
function Home() { function Home() {
return ( return (
<div> <div>
<MainNav /> <MainNav />
<SubNav /> <SubNav />
<Container> <Container className="my-5">
<div className="my-3"> <div className="my-4">
<h3 ><u>Best</u></h3> <h2 style={{ marginRight: "5rem", marginLeft: "5rem", marginBottom: "2rem" }}><u>Best</u></h2>
<Row className="justify-content-center"> <Row className="justify-content-center mx-0">
<Card className="mx-1" style={{ width: '18rem' }}> <Card className="mx-1 my-2" style={{ width: '18rem' }}>
<Card.Img className="img-fluid" variant="top" src="img/asd.jpg" /> <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
<Card.Body> <Card.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title> <Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text> <Card.Text>가격</Card.Text>
</Card.Body> </Card.Body>
</Card> </Card>
<Card className="mx-1" style={{ width: '18rem' }}> <Card className="mx-1 my-2" style={{ width: '18rem' }}>
<Card.Img className="img-fluid" variant="top" src="img/asd.jpg" /> <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
<Card.Body> <Card.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title> <Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text> <Card.Text>가격</Card.Text>
</Card.Body> </Card.Body>
</Card> </Card>
<Card className="mx-1" style={{ width: '18rem' }}> <Card className="mx-1 my-2" style={{ width: '18rem' }}>
<Card.Img className="img-fluid" variant="top" src="img/asd.jpg" /> <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
<Card.Body> <Card.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title> <Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text> <Card.Text>가격</Card.Text>
</Card.Body> </Card.Body>
</Card> </Card>
<Card className="mx-1" style={{ width: '18rem' }}> <Card className="mx-1 my-2" style={{ width: '18rem' }}>
<Card.Img className="img-fluid" variant="top" src="img/asd.jpg" /> <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
<Card.Body> <Card.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title> <Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text> <Card.Text>가격</Card.Text>
</Card.Body> </Card.Body>
</Card> </Card>
<Card className="mx-1" style={{ width: '18rem' }}> <Card className="mx-1 my-2" style={{ width: '18rem' }}>
<Card.Img className="img-fluid" variant="top" src="img/asd.jpg" /> <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
<Card.Body> <Card.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title> <Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text> <Card.Text>가격</Card.Text>
</Card.Body> </Card.Body>
</Card> </Card>
<Card className="mx-1" style={{ width: '18rem' }}> <Card className="mx-1 my-2" style={{ width: '18rem' }}>
<Card.Img className="img-fluid" variant="top" src="img/asd.jpg" /> <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
<Card.Body> <Card.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title> <Card.Title className="font-weight-bold">제품명</Card.Title>
...@@ -58,45 +57,45 @@ function Home() { ...@@ -58,45 +57,45 @@ function Home() {
</Card> </Card>
</Row> </Row>
</div> </div>
<div className="my-3"> <div className="my-4">
<h3><u>New Arrival</u></h3> <h2 style={{ marginRight: "5rem", marginLeft: "5rem", marginBottom: "2rem", marginTop: "2rem" }}><u>New Arrival</u></h2>
<Row className="justify-content-center"> <Row className="justify-content-center mx-0">
<Card className="mx-1" style={{ width: '18rem' }}> <Card className="mx-1 my-2" style={{ width: '18rem' }}>
<Card.Img className="img-fluid" variant="top" src="img/asd.jpg" /> <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
<Card.Body> <Card.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title> <Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text> <Card.Text>가격</Card.Text>
</Card.Body> </Card.Body>
</Card> </Card>
<Card className="mx-1" style={{ width: '18rem' }}> <Card className="mx-1 my-2" style={{ width: '18rem' }}>
<Card.Img className="img-fluid" variant="top" src="img/asd.jpg" /> <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
<Card.Body> <Card.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title> <Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text> <Card.Text>가격</Card.Text>
</Card.Body> </Card.Body>
</Card> </Card>
<Card className="mx-1" style={{ width: '18rem' }}> <Card className="mx-1 my-2" style={{ width: '18rem' }}>
<Card.Img className="img-fluid" variant="top" src="img/asd.jpg" /> <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
<Card.Body> <Card.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title> <Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text> <Card.Text>가격</Card.Text>
</Card.Body> </Card.Body>
</Card> </Card>
<Card className="mx-1" style={{ width: '18rem' }}> <Card className="mx-1 my-2" style={{ width: '18rem' }}>
<Card.Img className="img-fluid" variant="top" src="img/asd.jpg" /> <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
<Card.Body> <Card.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title> <Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text> <Card.Text>가격</Card.Text>
</Card.Body> </Card.Body>
</Card> </Card>
<Card className="mx-1" style={{ width: '18rem' }}> <Card className="mx-1 my-2" style={{ width: '18rem' }}>
<Card.Img className="img-fluid" variant="top" src="img/asd.jpg" /> <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
<Card.Body> <Card.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title> <Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text> <Card.Text>가격</Card.Text>
</Card.Body> </Card.Body>
</Card> </Card>
<Card className="mx-1" style={{ width: '18rem' }}> <Card className="mx-1 my-2" style={{ width: '18rem' }}>
<Card.Img className="img-fluid" variant="top" src="img/asd.jpg" /> <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
<Card.Body> <Card.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title> <Card.Title className="font-weight-bold">제품명</Card.Title>
......
client/src/Pages/Product.js 0 → 100644
View file @ 3ba7cf83
import React, { useState, useEffect, useRef } from 'react';
import MainNav from '../Components/MainNav';
import SubNav from '../Components/SubNav';
import { Row, Col, Form, Card, Button } from 'react-bootstrap';
function Product() {
const [select, setSelect] = useState({ color: "", size: ""})
const [cart, setCart] = useState()
function handleClick(e) {
const box = e.target.parentNode.parentNode
box.style.display = "none"
}
function handleChange(e) {
const { name, value } = e.target
setSelect({ ...select, [name]: value })
}
function listDelete(e) {
e.preventDefault()
const parent = e.target.parentNode
parent.remove()
}
function handleCreate() {
console.log("실행","cart=",cart)
if (cart !== undefined) {
if (cart.color !== "") {
const list = document.getElementById('list')
list.style.borderBottom = "1px solid"
const shopping = document.createElement('div')
shopping.className = "d-flex justify-content-between my-2"
shopping.innerHTML=`${cart.color} / ${cart.size}
<input type="number" min="0" max="10" value="1" style="width: 40px" />
<p style="margin-bottom: 0px">14,000원</p>`
const deleteA = document.createElement('a')
deleteA.innerText = 'X'
deleteA.addEventListener('click', listDelete)
shopping.appendChild(deleteA)
list.appendChild(shopping)
}
}
}
useEffect(() => {
if (Object.keys(select).length == 2) {
setCart({...select})
setSelect({})
}
}, [select])
useEffect(() => {
handleCreate()
}, [cart])
return (
<div>
<style type="text/css">
{`
.btn {
background-color: #CDC5C2;
border-color: #CDC5C2;
}
.btn:hover, .btn:active, .btn:focus {
background-color: #91877F;
border-color: #91877F;
}
`}
</style>
<MainNav />
<SubNav />
<Row className="justify-content-center mt-5 mx-0">
<Col sm={11} md={4}>
<img src="https://img.sonyunara.com/files/goods/65976/1601953605_0.jpg" style={{ objectFit: "contain", width: "100%" }} />
</Col>
<Col sm={11} md={4} className="align-middle mt-4">
<h3 className="mb-4">sop682 리본끈셋원피스</h3>
<h5 className="mb-4">가격 : 14,000원</h5>
<Form style={{ borderBottom: "1px solid" }}>
<Form.Group style={{ borderBottom: "1px solid", paddingBottom: "2rem" }}>
<Form.Label>색상</Form.Label>
<Form.Control as="select" className="mb-2" name="color" defaultValue="옵션 선택" onChange={handleChange}>
<option>옵션선택</option>
<option>브릭레드(스트랩포함)</option>
<option>베이지(스트랩포함)</option>
<option>블랙(스트랩포함)</option>
</Form.Control>
<Form.Label>사이즈</Form.Label>
<Form.Control as="select" className="mb-2" name="size" defaultValue="옵션 선택" onChange={handleChange}>
<option>옵션선택</option>
<option>M</option>
<option>L</option>
<option>XL</option>
<option>FREE</option>
</Form.Control>
</Form.Group>
<div id="list"></div>
<Row className="justify-content-between mx-0 my-3" style={{ width: "100%" }}>
<Col>총 금액</Col>
<Col className="text-right">14,000원</Col>
</Row>
<Row className="justify-content-between mx-0 my-3" style={{ width: "100%" }}>
<Button style={{ width: "49%" }}>장바구니</Button>
<Button style={{ width: "49%" }}>구매하기</Button>
</Row>
</Form>
</Col>
</Row>
<Row className="justify-content-center mt-5 mx-0">
<Col sm={11} md={8}>
<h3 style={{ borderBottom: "1px solid #91877F", paddingBottom: "5px", marginBottom: "1em" }}>설명</h3>
<div></div>
</Col>
</Row>
<Row className="justify-content-center mx-0 pt-3 px-2" style={{ position: "fixed", bottom: "0", width: "100%", backgroundColor: "#fff" }}>
<Col sm={12} md={9}>
<h6 style={{ borderBottom: "1px solid", paddingBottom: "5px", marginBottom: "1em" }}>회원님이 선호할만한 상품 추천
<a className="close float-right" onClick={(e) => handleClick(e)} style={{ fontSize: "1rem" }}>X</a>
</h6>
<Row className="justify-content-space mx-0" style={{ flexWrap: "nowrap", width: "100%", overflowX: "auto" }}>
<Col as={Card} style={{ minWidth: "10rem", marginRight: "1rem" }}>
<Card.Img variant="top" src="https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg" style={{ objectFit: "contain" }} />
<Card.Body className="px-0">
<Card.Title>클로타탄원피스</Card.Title>
<Card.Text>구매자 수: 30</Card.Text>
</Card.Body>
</Col>
<Col as={Card} style={{ minWidth: "10rem", marginRight: "1rem" }}>
<Card.Img variant="top" src="https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg" style={{ objectFit: "contain" }} />
<Card.Body className="px-0">
<Card.Title>클로타탄원피스</Card.Title>
<Card.Text>구매자 수: 30</Card.Text>
</Card.Body>
</Col>
<Col as={Card} style={{ minWidth: "10rem", marginRight: "1rem" }}>
<Card.Img variant="top" src="https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg" style={{ objectFit: "contain" }} />
<Card.Body className="px-0">
<Card.Title>클로타탄원피스</Card.Title>
<Card.Text>구매자 수: 30</Card.Text>
</Card.Body>
</Col>
<Col as={Card} style={{ minWidth: "10rem", marginRight: "1rem" }}>
<Card.Img variant="top" src="https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg" style={{ objectFit: "contain" }} />
<Card.Body className="px-0">
<Card.Title>클로타탄원피스</Card.Title>
<Card.Text>구매자 수: 30</Card.Text>
</Card.Body>
</Col>
</Row>
</Col>
</Row>
</div>
)
}
export default Product
\ No newline at end of file
client/src/Pages/Products.js deleted 100644 → 0
View file @ 5f0483b4
import React, { useState, useEffect, useRef } from 'react';
import MainNav from '../Components/MainNav';
import SubNav from '../Components/SubNav';
import { Row, Col, Form, Card } from 'react-bootstrap';
function Products() {
function handleClick(e) {
const box = e.target.parentNode.parentNode
box.style.display = "none"
}
return (
<div>
{/* <style type="text/css">
{`
.close {
color:
}
`}
</style> */}
<MainNav />
<SubNav />
<Row className="justify-content-center mt-5">
<Col md={4}>
<img src="https://img.sonyunara.com/files/goods/65976/1601953605_0.jpg" style={{ objectFit: "contain", width: "100%" }} />
</Col>
<Col md={4} className="align-middle">
<Form>
<Form.Group>
<Form.Label>옵션</Form.Label>
<Form.Control as="select" defaultValue="옵션 선택">
<option>옵션 선택</option>
<option>브릭레드(스트랩포함)</option>
<option>베이지(스트랩포함)</option>
<option>블랙(스트랩포함)</option>
</Form.Control>
</Form.Group>
</Form>
</Col>
</Row>
<Row className="justify-content-center mt-5">
<Col md={8}>
<h3 style={{ borderBottom: "1px solid #91877F", paddingBottom: "5px", marginBottom: "1em" }}>설명</h3>
<div></div>
</Col>
</Row>
<div className="mx-5 pt-3" style={{ position: "fixed", bottom: "0", backgroundColor: "#fff" }}>
<h6 style={{ borderBottom: "1px solid", paddingBottom: "5px", marginBottom: "1em" }}>회원님이 선호할만한 상품 추천
<a className="close float-right" onClick={(e) => handleClick(e)} style={{ fontSize: "1rem" }}>X</a>
</h6>
<Row className="justify-content-space" style={{ objectFit: "contain", width: "100%" }}>
<Col as={Card} style={{ width: "16rem" }}>
<Card.Img variant="top" src="https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg" style={{ objectFit: "contain", width: "10rem", height: "10rem" }} />
<Card.Body>
<Card.Title>클로타탄원피스</Card.Title>
<Card.Text>구매자 수: 30</Card.Text>
</Card.Body>
</Col>
<Col as={Card} style={{ width: "16rem" }}>
<Card.Img variant="top" src="https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg" style={{ objectFit: "contain", width: "10rem", height: "10rem" }} />
<Card.Body>
<Card.Title>클로타탄원피스</Card.Title>
<Card.Text>구매자 수: 30</Card.Text>
</Card.Body>
</Col>
<Col as={Card} style={{ width: "16rem" }}>
<Card.Img variant="top" src="https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg" style={{ objectFit: "contain", width: "10rem", height: "10rem" }} />
<Card.Body>
<Card.Title>클로타탄원피스</Card.Title>
<Card.Text>구매자 수: 30</Card.Text>
</Card.Body>
</Col>
<Col as={Card} style={{ width: "16rem" }}>
<Card.Img variant="top" src="https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg" style={{ objectFit: "contain", width: "10rem", height: "10rem" }} />
<Card.Body>
<Card.Title>클로타탄원피스</Card.Title>
<Card.Text>구매자 수: 30</Card.Text>
</Card.Body>
</Col>
</Row>
</div>
</div>
)
}
export default Products
\ No newline at end of file
client/src/Pages/ProductsList.js
View file @ 3ba7cf83
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import MainNav from '../Components/MainNav'; import MainNav from '../Components/MainNav';
import SubNav from '../Components/SubNav'; import SubNav from '../Components/SubNav';
import Products from './Products'; import Pagination from '../Components/Pagination';
import search from '../search.svg';
import { Container, Row, Form, FormControl, Button, Card } from 'react-bootstrap';
function ProductsList() { function ProductsList() {
const [sub, setSub] = useState(['PADDED JACKET', 'JACKET', 'JUMPER', 'COAT', 'FLEECE', 'CARDIGAN / VEST'])
function handleSubmit(e) {
e.preventDefault()
}
return ( return (
<div> <div>
<style type="text/css">
{`
.btn {
background-color: #CDC5C2;
border-color: #CDC5C2;
}
.btn:hover, .btn:active, .btn:focus {
background-color: #91877F;
border-color: #91877F;
}
`}
</style>
<MainNav /> <MainNav />
<SubNav /> <SubNav />
<Container>
<Row className="mx-0 my-4" style={{ flexDirection: "column", alignItems: "center" }}>
<h1 style={{fontSize: "3rem"}}>OUTER</h1>
<Row>
{sub.map((ele) => (
<Button>ele</Button>
))}
</Row>
</Row>
<Row as={Form} onSubmit={handleSubmit} className="justify-content-end mx-0 my-5">
<FormControl type="text" placeholder="Search" style={{ width: "13rem" }} />
<Button type="submit" className="search px-2">
<img src={search} width="20" height="20" />
</Button>
<Button sm={2} xs={6} type="button" href="/regist" className="ml-1">상품 등록</Button>
</Row>
<Row className="justify-content-start m-5">
<Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
<Card.Img variant="top" src="https://img.sonyunara.com/files/goods/67460/1607053816_0.jpg" style={{ objectFit: "contain", height: "22rem" }} />
<Card.Body>
<Card.Title>케이시앵글부츠(SH)</Card.Title>
<Card.Text>가격 : 12,000원</Card.Text>
</Card.Body>
</Card>
<Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
<Card.Img variant="top" src="https://img.sonyunara.com/files/goods/48705/1552562469_0.jpg" style={{ objectFit: "contain", height: "22rem" }} />
<Card.Body>
<Card.Title>메리제인플랫(SH)</Card.Title>
<Card.Text>가격 : 12,000원</Card.Text>
</Card.Body>
</Card>
<Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
<Card.Img variant="top" src="https://img.sonyunara.com/files/goods/53386/1567390097_2.jpg" style={{ objectFit: "contain", height: "22rem" }} />
<Card.Body>
<Card.Title>솔티드스니커즈(SH)</Card.Title>
<Card.Text>가격 : 12,000원</Card.Text>
</Card.Body>
</Card>
<Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
<Card.Img variant="top" src="https://img.sonyunara.com/files/goods/61286/1587540563_0.jpg" style={{ objectFit: "contain", height: "22rem" }} />
<Card.Body>
<Card.Title>버켄슬리퍼(SH)</Card.Title>
<Card.Text>가격 : 12,000원</Card.Text>
</Card.Body>
</Card>
<Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
<Card.Img variant="top" src="https://hotping.co.kr/web/product/big/202011/b8f4c6471955b80fc3991b7d6df8926a.jpg" style={{ objectFit: "contain", height: "22rem" }} />
<Card.Body>
<Card.Title>크레센도 하이힐펌프스</Card.Title>
<Card.Text>가격 : 12,000원</Card.Text>
</Card.Body>
</Card>
<Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
<Card.Img variant="top" src="https://hotping.co.kr/web/product/big/202011/888e4e8d6a2c2e7da385b079151fcba2.jpg" style={{ objectFit: "contain", height: "22rem" }} />
<Card.Body>
<Card.Title>어텀솔져1cm 스웨이드로퍼</Card.Title>
<Card.Text>가격 : 12,000원</Card.Text>
</Card.Body>
</Card>
<Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
<Card.Img variant="top" src="https://hotping.co.kr/web/product/big/202007/3308564012eb14e6c11ed621fa7555fb.jpg" style={{ objectFit: "contain", height: "22rem" }} />
<Card.Body>
<Card.Title>포웰3.5cm 스니커즈</Card.Title>
<Card.Text>가격 : 12,000원</Card.Text>
</Card.Body>
</Card>
</Row>
</Container>
<Pagination />
</div> </div>
) )
} }
......
client/src/index.js
View file @ 3ba7cf83
...@@ -4,7 +4,8 @@ import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-d ...@@ -4,7 +4,8 @@ import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-d
import Home from './Pages/Home'; import Home from './Pages/Home';
import Login from './Pages/Login'; import Login from './Pages/Login';
import Signup from './Pages/Signup'; import Signup from './Pages/Signup';
import Product from "./Pages/Products"; import Product from "./Pages/Product";
import ProductsList from "./Pages/ProductsList";
import Admin from './Pages/Admin'; import Admin from './Pages/Admin';
import ProductsRegist from './Pages/ProductsRegist'; import ProductsRegist from './Pages/ProductsRegist';
import ShoppingCart from './Pages/ShoppingCart'; import ShoppingCart from './Pages/ShoppingCart';
...@@ -21,6 +22,7 @@ ReactDOM.render( ...@@ -21,6 +22,7 @@ ReactDOM.render(
<Route path="/login" component={Login} /> <Route path="/login" component={Login} />
<Route path="/signup" component={Signup} /> <Route path="/signup" component={Signup} />
<Route path="/product"component={Product} /> <Route path="/product"component={Product} />
<Route path="/productslist"component={ProductsList} />
<Route path="/admin" component={Admin} /> <Route path="/admin" component={Admin} />
<Route path="/regist" component={ProductsRegist} /> <Route path="/regist" component={ProductsRegist} />
<Route path="/shoppingcart" component={ShoppingCart} /> <Route path="/shoppingcart" component={ShoppingCart} />
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment