Skip to content

GitLab

Commit 0da1ed33 authored by 이재연's avatar 이재연
Browse files

Merge remote-tracking branch 'origin/ourMaster' into jaeyeon

parents 814fb4cf 3ba7cf83
Hide whitespace changes
Inline Side-by-side
client/.gitignore
View file @ 0da1ed33
...@@ -22,4 +22,8 @@ npm-debug.log* ...@@ -22,4 +22,8 @@ npm-debug.log*
yarn-debug.log* yarn-debug.log*
yarn-error.log* yarn-error.log*
package-lock.json package-lock.json
.eslintcache
\ No newline at end of file .eslintcache
debug.log
.yarn.lock
client/debug.log deleted 100644 → 0
View file @ 814fb4cf
[0102/195101.790:ERROR:directory_reader_win.cc(43)] FindFirstFile: 지정된 경로를 찾을 수 없습니다. (0x3)
[0104/152743.507:ERROR:directory_reader_win.cc(43)] FindFirstFile: 지정된 경로를 찾을 수 없습니다. (0x3)
client/package.json
View file @ 0da1ed33
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
"@testing-library/jest-dom": "^5.11.6", "@testing-library/jest-dom": "^5.11.6",
"@testing-library/react": "^11.2.2", "@testing-library/react": "^11.2.2",
"@testing-library/user-event": "^12.6.0", "@testing-library/user-event": "^12.6.0",
"axios": "^0.21.1",
"bootstrap": "^4.5.3", "bootstrap": "^4.5.3",
"react": "^17.0.1", "react": "^17.0.1",
"react-bootstrap": "^1.4.0", "react-bootstrap": "^1.4.0",
...@@ -39,5 +40,5 @@ ...@@ -39,5 +40,5 @@
"last 1 safari version" "last 1 safari version"
] ]
}, },
"proxy":"http://localhost:3001" "proxy": "http://localhost:3001"
} }
client/src/Components/Card.js 0 → 100644
View file @ 0da1ed33
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 @ 0da1ed33
...@@ -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", overflowX: "auto" }}> <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/Account.js 0 → 100644
View file @ 0da1ed33
import React from 'react'
import MainNav from '../Components/MainNav'
import SubNav from '../Components/SubNav'
function Account() {
return (
<div>
<MainNav />
<SubNav />
<h5>마이페이지</h5>
</div>
)
}
export default Account
client/src/Pages/Admin.js
View file @ 0da1ed33
...@@ -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 } 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 (
...@@ -29,95 +33,95 @@ function Admin() { ...@@ -29,95 +33,95 @@ function Admin() {
</style> </style>
<MainNav /> <MainNav />
<SubNav /> <SubNav />
<Row className="justify-content-end mt-5 mr-3 mb-5"> <Container>
<Col as={Form} inline className="justify-content-end"> <Row as={Form} onSubmit={handleSubmit} className="justify-content-end mx-0 my-5">
<FormControl type="text" placeholder="Search" className="mr-1" /> <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>
</Col> <Button sm={2} xs={6} type="button" href="/regist" className="ml-1">상품 등록</Button>
<Col sm={2} xs={3} as={Button} type="button" href="/regist">상품 등록</Col> </Row>
</Row> <Row className="justify-content-start m-5">
<Row className="justify-content-start m-5"> <Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
<Card className="my-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>
</div> </div>
) )
......
client/src/Pages/Home.js
View file @ 0da1ed33
...@@ -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/Login.js
View file @ 0da1ed33
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import { Link, Redirect } from 'react-router-dom';
import Nav1 from '../Components/MainNav'; import Nav1 from '../Components/MainNav';
import Nav2 from '../Components/SubNav'; import Nav2 from '../Components/SubNav';
import { Form, Col, Container, Button, Row } from 'react-bootstrap' import { Form, Col, Container, Button, Row } from 'react-bootstrap';
import { Link, Redirect } from 'react-router-dom'
function Login(){ function Login(){
...@@ -21,14 +21,10 @@ function Login(){ ...@@ -21,14 +21,10 @@ function Login(){
<Nav1 /> <Nav1 />
<Nav2 /> <Nav2 />
<Container className="my-5"> <Container className="my-5">
<Row className="justify-content-center"> <Row className="justify-content-center">
<Col md={5} xs={10} className="border" style={{ background: '#F7F3F3' }}> <Col md={5} xs={10} className="border" style={{ background: '#F7F3F3' }}>
<h3 className="text-center mt-5">Login</h3> <h3 className="text-center mt-5">Login</h3>
<Form noValidate validated={validated} onSubmit={handleSubmit} className="p-5"> <Form noValidate validated={validated} onSubmit={handleSubmit} className="p-5">
<Form.Group controlId="formBasicId"> <Form.Group controlId="formBasicId">
<Form.Row> <Form.Row>
<Col sm={4} xs={6} as={Form.Label} for="id"> 아이디</Col> <Col sm={4} xs={6} as={Form.Label} for="id"> 아이디</Col>
...@@ -64,14 +60,8 @@ function Login(){ ...@@ -64,14 +60,8 @@ function Login(){
</Form> </Form>
</Col> </Col>
</Row> </Row>
</Container> </Container>
</div> </div>
) )
} }
......
client/src/Pages/Payment.js
View file @ 0da1ed33
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 { Container, Card, Row, Col, Button, Form } from 'react-bootstrap'; import DaumPostcode from "react-daum-postcode";
import { Container, Card, Row, Col, Button, Form, FormGroup } from 'react-bootstrap';
import { Redirect } from 'react-router-dom';
function Payment() { function Payment() {
const [paymentWay, setPaymentWay] = useState([]) const [paymentWay, setPaymentWay] = useState([])
const [isAddress, setIsAddress] = useState("");
const [isZoneCode, setIsZoneCode] = useState();
const [isPostOpen, setIsPostOpen] = useState();
const [post, setPost] = useState([])
const [redirect, setRedirect] = useState(null)
const [address, setAddress] = useState("")
const [num, setNum] = useState(0)
function postClick() {
if (post.length !== 0) {
setPost([])
}
else {
setPost(
<div>
<DaumPostcode style={postCodeStyle} onComplete={handleComplete} autoClose={true} />
</div>
)
}
}
const handleComplete = (data) => {
let fullAddress = data.address;
let extraAddress = "";
console.log(data)
if (data.addressType === "R") {
if (data.bname !== "") {
extraAddress += data.bname;
console.log(extraAddress)
}
if (data.buildingName !== "") {
extraAddress +=
extraAddress !== "" ? `, ${data.buildingName}` : data.buildingName;
}
fullAddress += extraAddress !== "" ? ` (${extraAddress})` : "";
}
setAddress({ full: fullAddress, zone: data.zonecode });
console.log(fullAddress);
}
const postCodeStyle = {
// display: "block",
position: "absolute",
width: "400px",
height: "500px",
padding: "7px",
zIndex: "1000"
};
function handleClick() { function handleClick() {
if (paymentWay.length !== 0) { if (paymentWay.length !== 0) {
...@@ -13,26 +64,29 @@ function Payment() { ...@@ -13,26 +64,29 @@ function Payment() {
} }
else { else {
const a = ( const a = (
<div> <Row className="justify-content-md-center">
<Form> <Col md={6} className="border m-5 p-5">
<Form.Group controlId="exampleForm.ControlSelect1"> <Form>
<Form.Label>입금은행</Form.Label> <Form.Group controlId="exampleForm.ControlSelect1">
<Form.Control as="select" placeholder="입금은행을 선택하세요."> <Form.Label>입금은행</Form.Label>
<option>농협 / 352-0559-2528-83 / 김수빈</option> <Form.Control as="select" placeholder="입금은행을 선택하세요.">
<option>우리은행 / 0000-000-000000 / 이재연</option> <option>농협 / 352-0559-2528-83 / 김수빈</option>
<option>국민은행 / 111111-11-111111 / 윤대기</option> <option>우리은행 / 0000-000-000000 / 이재연</option>
</Form.Control> <option>국민은행 / 111111-11-111111 / 윤대기</option>
</Form.Group> </Form.Control>
<Form.Group controlId="formName"> </Form.Group>
<Form.Label>입금자</Form.Label> <Form.Group controlId="formName">
<Form.Control type="email" placeholder="윤지원" /> <Form.Label>입금자</Form.Label>
</Form.Group> <Form.Control type="email" placeholder="윤지원" />
<Form.Group controlId="formDay"> </Form.Group>
<Form.Label>입금예정일</Form.Label> <Form.Group controlId="formDay">
<Form.Control type="date" /> <Form.Label>입금예정일</Form.Label>
</Form.Group> <Form.Control type="date" />
</Form> </Form.Group>
</div>) </Form>
</Col>
</Row>)
setPaymentWay(a) setPaymentWay(a)
} }
} }
...@@ -43,56 +97,140 @@ function Payment() { ...@@ -43,56 +97,140 @@ function Payment() {
} }
} }
async function kakaopay() {
const response = await fetch('/api/kakaopay/test/single', {
method: "POST",
headers: {
'Content-type': 'application/json'
},
body: JSON.stringify({
cid: 'TC0ONETIME',
partner_order_id: 'partner_order_id',
partner_user_id: 'partner_user_id',
item_name: '앙고라 반목 폴라 베이직 모헤어 니트 (T)',
quantity: 1,
total_amount: 22000,
vat_amount: 200,
tax_free_amount: 0,
approval_url: 'http://localhost:3000/kakaopay/success',
fail_url: 'http://localhost:3000/kakaopay/fail',
cancel_url: 'http://localhost:3000/kakaopay/cancel',
})
})
const data = await response.json()
console.log(data)
window.location.href = data.redirect_url
// setRedirect(data.redirect_url)
}
function plusNum() {
setNum(num + 1)
}
function minusNum() {
if (num === 0) {
setNum(0)
}
else {
setNum(num - 1)
}
}
function deleteCart() {
//장바구니 DB에서 해당 항목 삭제
console.log('카트에 담긴 항목을 삭제했습니다.')
}
if (redirect) {
console.log(redirect)
return <Redirect to={'/kakao'} />
}
return ( return (
<div> <div>
<MainNav /> <MainNav />
<SubNav /> <SubNav />
<Container> <Container>
<h3 className="my-5 font-weight-bold text-center" style={{ color: '#F2A400' }}>주문/결제</h3> <h3 className="my-5 font-weight-bold text-center">주문/결제</h3>
<div> <div>
<h5 className="bg-light font-weight-bold py-3 border-top border-bottom text-center">주문자 정보</h5> <h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>주문자 정보</h5>
<Form> <Row className="justify-content-md-center">
<Form.Group controlId="formBasicName"> <Col md={4}>
<Form.Label>이름</Form.Label> <Form>
<Form.Control type="text" placeholder="윤지원" /> <Form.Group controlId="formBasicName">
</Form.Group> <Form.Label>이름</Form.Label>
<Form.Group controlId="formBasicEmail"> <Form.Control type="text" placeholder="윤지원" />
<Form.Label>이메일</Form.Label> </Form.Group>
<Form.Control type="email" placeholder="jiwon5393@naver.com" /> <Form.Group controlId="formBasicEmail">
</Form.Group> <Form.Label>이메일</Form.Label>
<Form.Group controlId="formBasicTel"> <Form.Control type="email" placeholder="jiwon5393@naver.com" />
<Form.Label>휴대전화</Form.Label> </Form.Group>
<Form.Control type="tel" placeholder="010-0000-0000" /> <Form.Group controlId="formBasicTel">
</Form.Group> <Form.Label>휴대전화</Form.Label>
</Form> <Form.Control type="tel" placeholder="010-0000-0000" />
</Form.Group>
</Form>
</Col>
</Row>
</div> </div>
<div> <div>
<h5 className="bg-light font-weight-bold py-3 border-top border-bottom text-center">배송지 정보</h5> <h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>받는사람 정보</h5>
<Row className="justify-content-center">
<Col md={8}>
<Form>
<Form.Group>
<Form.Label>이름</Form.Label>
<Form.Control></Form.Control>
</Form.Group>
<Form.Group controlId="formBasicAdd">
<Form.Label>주소</Form.Label>
<Form.Row>
<Col xs={4} sm={4}>
<Form.Control type="text" id="add" value={address.zone} disabled={(address.zone == null) ? false : true} placeholder="우편번호" required ></Form.Control>
</Col>
<Col >
<Button style={{ background: '#91877F', borderColor: '#91877F' }} className="mx-1" onClick={postClick}>우편번호</Button>
{post}
</Col>
</Form.Row>
<Form.Row>
<Col>
<Form.Control type="text" id="add1" value={address.full} disabled={(address.zone == null) ? false : true} placeholder="주소" required></Form.Control>
<Form.Control type="text" id="add2" placeholder="상세주소" required></Form.Control>
<Form.Control.Feedback type="invalid" > 상세 주소를 입력하세요. </Form.Control.Feedback>
</Col>
</Form.Row>
</Form.Group>
<Form.Group>
<Form.Label>휴대전화</Form.Label>
<Form.Control></Form.Control>
</Form.Group>
</Form>
</Col>
</Row>
</div> </div>
<div> <div>
<h5 className="bg-light font-weight-bold py-3 border-top border-bottom text-center">주문상품정보</h5> <h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>주문상품정보</h5>
<Card > <Card >
<Row> <Row className="mx-1">
<Col className="text-center align-self-center"> <Col xs={2} sm={2} className="text-center my-auto">
<input className="" type="checkbox" id="exampleCheck1"></input> <input className="" type="checkbox" id="exampleCheck1" />
</Col> </Col>
<Col> <Col className="text-center">
<Card.Img className="img-fluid" variant="top" src="img/asd.jpg" style={{ width: '20rem' }} /> <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" style={{ width: '20rem' }} />
</Col> </Col>
<Col> <Col md={6} className="p-2">
<Card.Body> <Card.Body>
<img src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" className="float-right" /> <input type="image" src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" className="float-right" onClick={deleteCart} />
<Card.Title className="font-weight-bold mt-3">제품명</Card.Title> <Card.Title className="font-weight-bold mt-3">제품명</Card.Title>
<Card.Text>가격</Card.Text> <Card.Text>가격</Card.Text>
<Card.Text>옵션</Card.Text> <Card.Text>옵션</Card.Text>
<Card.Text>수량</Card.Text>
<div> <div>
<Button variant="outline-dark" size="sm">-</Button> <input type="image" src="https://img.icons8.com/ios-glyphs/20/000000/minus-math.png" className="align-middle" onClick={minusNum} />
<input type="text" style={{ width: '30px' }} className="align-middle mx-1" readOnly></input> <input type="text" style={{ width: '30px' }} className="text-center align-middle mx-1" placeholder="1" value={num} readOnly></input>
<Button variant="outline-dark" size="sm">+</Button> <input type="image" src="https://img.icons8.com/ios-glyphs/20/000000/plus-math.png" className="align-middle" onClick={plusNum} />
</div> </div>
</Card.Body> </Card.Body>
</Col> </Col>
...@@ -100,7 +238,7 @@ function Payment() { ...@@ -100,7 +238,7 @@ function Payment() {
</Card> </Card>
</div> </div>
<div className="bg-light p-5 m-5"> <div className="p-5 m-5" style={{ background: '#F7F3F3' }}>
<ul className="pl-0" style={{ listStyle: 'none' }}> <ul className="pl-0" style={{ listStyle: 'none' }}>
<li> <li>
<span className="text-secondary">총 상품금액</span> <span className="text-secondary">총 상품금액</span>
...@@ -117,13 +255,15 @@ function Payment() { ...@@ -117,13 +255,15 @@ function Payment() {
</div> </div>
<div> <div>
<h5 className="bg-light font-weight-bold py-3 border-top border-bottom text-center">결제수단</h5> <h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>결제수단</h5>
<div className="text-center"> <div className="text-center mt-5">
<Button variant="success" onClick={handleClick} >무통장입금</Button> <Button variant="success" className="align-top" onClick={handleClick} >무통장입금</Button>
<Button variant="warning" style={{ color: '#ffffff' }} onClick={handleClick2}>카카오페이</Button> <input type="image" src="img/payment_icon_yellow_small.png" onClick={kakaopay} />
</div> </div>
{paymentWay} {paymentWay}
</div>
<div className="text-center">
<Button className="px-5" style={{ background: "#91877F", borderColor: '#91877F' }} href="/account" block>결제완료</Button>
</div> </div>
</Container> </Container>
</div> </div>
......
client/src/Pages/Product.js 0 → 100644
View file @ 0da1ed33
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 @ 814fb4cf
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() {
return (
<div>
<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="m-5">
<h6 style={{ borderBottom: "1px solid", paddingBottom: "5px", marginBottom: "1em" }}>회원님이 선호할만한 상품 추천</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" />
<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" />
<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" />
<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" />
<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 @ 0da1ed33
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/Pages/ProductsRegist.js
View file @ 0da1ed33
...@@ -2,58 +2,81 @@ import React, { useState, useEffect, useRef } from 'react'; ...@@ -2,58 +2,81 @@ import React, { useState, useEffect, useRef } from 'react';
import Nav1 from '../Components/MainNav'; import Nav1 from '../Components/MainNav';
import Nav2 from '../Components/SubNav'; import Nav2 from '../Components/SubNav';
import { Row, Col, Button, Form, Container } from 'react-bootstrap'; import { Row, Col, Button, Form, Container } from 'react-bootstrap';
import axios from 'axios'
function ProductsRegist() { function ProductsRegist() {
const [product, setProduct] = useState()
function handleChange(event) {
const { name, value } = event.target
setProduct({ ...product, [name]: value })
}
function handleSubmit(e) {
e.preventDefault()
axios.post('/api/products/regist', {
product
}).then(function(res) {
console.log("client의 res=", res)
})
}
return ( return (
<div> <div>
{console.log(product)}
<Nav1 /> <Nav1 />
<Nav2 /> <Nav2 />
<Container> <Container>
<Row className="justify-content-md-center"> <Row className="justify-content-md-center">
<Col md={6} className="border m-5 p-3"> <Col md={6} className="border m-5 p-3" style={{ background: '#F7F3F3' }}>
<Form > <h2 className="text-center mt-5 font-weight-bold">상품등록</h2>
<Form className="p-5" onSubmit={handleSubmit}>
<Form.Group controlId="productNameform"> <Form.Group controlId="productNameform">
<Form.Label>상품명</Form.Label> <Form.Label>상품명</Form.Label>
<Form.Control type="text" placeholder="상품명" /> <Form.Control type="text" name="pro_name" placeholder="상품명" onChange={handleChange} />
</Form.Group> </Form.Group>
<Form.Group controlId="productAmountform"> <Form.Group controlId="productAmountform">
<Form.Label>수량</Form.Label> <Form.Label>재고</Form.Label>
<Form.Control type="text" placeholder="숫자만 입력해주세요" /> <Form.Control type="text" name="stock" placeholder="숫자만 입력해주세요" onChange={handleChange} />
</Form.Group> </Form.Group>
<Form.Group controlId="productPriceform"> <Form.Group controlId="productPriceform">
<Form.Label>가격</Form.Label> <Form.Label>가격</Form.Label>
<Form.Control type="text" placeholder="숫자만 입력해주세요" /> <Form.Control type="text" name="price" placeholder="숫자만 입력해주세요" onChange={handleChange} />
</Form.Group> </Form.Group>
<Form.Group> <Form.Group>
<Form.Label>분류</Form.Label> <Form.Label>분류</Form.Label>
<Row> <Row>
<Col md={6}> <Col md={6}>
<Form.Control as="select" placeholder="상위분류"> <Form.Control as="select" name="main_category" placeholder="상위분류" onChange={handleChange}>
<option>Pants</option> <option>Pants</option>
<option>Skirt</option> <option>Skirt</option>
<option>Outer</option> <option>Outer</option>
</Form.Control> </Form.Control>
</Col> </Col>
<Col md={6}> <Col md={6}>
<Form.Control as="select" placeholder="하위분류"> <Form.Control as="select" name="sub_category" placeholder="하위분류" onChange={handleChange}>
<option>긴바지</option> <option>JEANS</option>
<option>반바지</option> <option>SKINNY JEANS</option>
<option>청바지</option> <option>BANDING PANTS</option>
</Form.Control> </Form.Control>
</Col> </Col>
</Row> </Row>
</Form.Group> </Form.Group>
<Form.Group controlId="productDescriptionform"> <Form.Group controlId="productDescriptionform">
<Form.Label>상품설명</Form.Label> <Form.Label>상품설명</Form.Label>
<Form.Control as="textarea" rows={3} placeholder="상품을 설명해주세요" /> <Form.Control as="textarea" name="description" rows={3} placeholder="상품을 설명해주세요" onChange={handleChange} />
</Form.Group> </Form.Group>
<Form.Group> <Form.Group>
<Form.Label>대표이미지</Form.Label> <Form.Label>대표이미지</Form.Label>
<Form.File id="productImageform" /> <Form.File id="productImageform" name="main_image" onChange={handleChange} />
</Form.Group>
<Form.Group>
<Form.Label>상세이미지</Form.Label>
<Form.File id="productImageform" name="detail_image" onChange={handleChange} />
</Form.Group> </Form.Group>
<Button className="float-right" variant="primary" type="submit">등록</Button> <Button className="float-right" variant="primary" type="submit" style={{ background: '#91877F', borderColor: '#91877F' }}>등록</Button>
</Form> </Form>
</Col> </Col>
</Row> </Row>
......
client/src/Pages/ShoppingCart.js
View file @ 0da1ed33
...@@ -6,60 +6,59 @@ import { Card, Button, Container, Row, Col } from 'react-bootstrap'; ...@@ -6,60 +6,59 @@ import { Card, Button, Container, Row, Col } from 'react-bootstrap';
function ShoppingCart() { function ShoppingCart() {
const [num, setNum] = useState(0)
function plusNum() {
setNum(num + 1)
}
function minusNum() {
if (num === 0) {
setNum(0)
}
else {
setNum(num - 1)
}
}
function deleteCart() {
//장바구니 DB에서 해당 항목 삭제
console.log('카트에 담긴 항목을 삭제했습니다.')
}
return ( return (
<div> <div>
<MainNav /> <MainNav />
<SubNav /> <SubNav />
<div className="justify-content-center"> <Container className="justify-content-center">
<h3 className="my-5 font-weight-bold text-center" style={{ color: '#F2A400' }}>장바구니</h3> <h3 className="my-5 font-weight-bold text-center">장바구니</h3>
<div> <div>
<h4 className="bg-light font-weight-bold py-3 border-top border-bottom text-center">주문상품정보</h4> <h4 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>주문상품정보</h4>
<Card >
<Row>
<Col>
<input className="mx-5" type="checkbox" id="exampleCheck1"></input>
<Card.Img className="img-fluid" variant="top" src="img/asd.jpg" style={{ width: '20rem' }} />
</Col>
<Col md={6}>
<Card.Body>
<img src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" className="float-right" />
<Card.Title className="font-weight-bold mt-3">제품명</Card.Title>
<Card.Text>가격</Card.Text>
<Card.Text>옵션</Card.Text>
<Card.Text>수량</Card.Text>
<div>
<Button variant="outline-dark" size="sm">-</Button>
<input type="text" style={{ width: '30px' }} className="align-middle mx-1" readOnly></input>
<Button variant="outline-dark" size="sm">+</Button>
</div>
</Card.Body>
</Col>
</Row>
</Card>
<Card> <Card>
<Row> <Row className="mx-1">
<Col> <Col xs={2} sm={2} className="text-center my-auto">
<input className="mx-5" type="checkbox" id="exampleCheck1"></input> <input className="" type="checkbox" id="exampleCheck1" />
</Col>
<Col className="text-center">
<Card.Img className="img-fluid" variant="top" src="img/asd.jpg" style={{ width: '20rem' }} /> <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" style={{ width: '20rem' }} />
</Col> </Col>
<Col> <Col md={6} className="p-2">
<Card.Body> <Card.Body>
<img src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" className="float-right" /> <input type="image" src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" className="float-right" onClick={deleteCart} />
<Card.Title className="font-weight-bold mt-3">제품명</Card.Title> <Card.Title className="font-weight-bold mt-3">제품명</Card.Title>
<Card.Text>가격</Card.Text> <Card.Text>가격</Card.Text>
<Card.Text>옵션</Card.Text> <Card.Text>옵션</Card.Text>
<Card.Text>수량</Card.Text> <Card.Text>수량</Card.Text>
<div> <div>
<Button variant="outline-dark" size="sm">-</Button> <input type="image" src="https://img.icons8.com/ios-glyphs/20/000000/minus-math.png" className="align-middle" onClick={minusNum} />
<input type="text" style={{ width: '30px' }} className="align-middle mx-1" readOnly></input> <input type="text" style={{ width: '30px' }} className="text-center align-middle mx-1" placeholder="1" value={num} readOnly></input>
<Button variant="outline-dark" size="sm">+</Button> <input type="image" src="https://img.icons8.com/ios-glyphs/20/000000/plus-math.png" className="align-middle" onClick={plusNum} />
</div> </div>
</Card.Body> </Card.Body>
</Col> </Col>
</Row> </Row>
</Card> </Card>
</div> </div>
<div className="bg-light p-5 m-5"> <div className="p-5 m-5" style={{ background: '#F7F3F3' }}>
<ul className="pl-0" style={{ listStyle: 'none' }}> <ul className="pl-0" style={{ listStyle: 'none' }}>
<li> <li>
<span className="text-secondary">총 상품금액</span> <span className="text-secondary">총 상품금액</span>
...@@ -75,9 +74,9 @@ function ShoppingCart() { ...@@ -75,9 +74,9 @@ function ShoppingCart() {
</div> </div>
</div> </div>
<div className="text-center"> <div className="text-center">
<Button className="px-5">결제하기</Button> <Button className="px-5" style={{ background: "#91877F", borderColor: '#91877F' }} href="/payment" block>결제하기</Button>
</div> </div>
</div> </Container>
</div> </div>
) )
......
client/src/Pages/Signup.js
View file @ 0da1ed33
...@@ -4,7 +4,6 @@ import Nav1 from '../Components/MainNav'; ...@@ -4,7 +4,6 @@ import Nav1 from '../Components/MainNav';
import Nav2 from '../Components/SubNav'; import Nav2 from '../Components/SubNav';
import { Form, Col, Container, Button, Row, Alert } from 'react-bootstrap' import { Form, Col, Container, Button, Row, Alert } from 'react-bootstrap'
import FormCheckInput from 'react-bootstrap/esm/FormCheckInput'; import FormCheckInput from 'react-bootstrap/esm/FormCheckInput';
import DaumPostcode from "react-daum-postcode";
const INIT_USER = { const INIT_USER = {
name: '', name: '',
...@@ -62,7 +61,6 @@ function Signup() { ...@@ -62,7 +61,6 @@ function Signup() {
return ( return (
<div> <div>
<Nav1 /> <Nav1 />
<Nav2 /> <Nav2 />
<Container className="my-5"> <Container className="my-5">
...@@ -72,18 +70,13 @@ function Signup() { ...@@ -72,18 +70,13 @@ function Signup() {
<Row className="justify-content-center"> <Row className="justify-content-center">
<Col md={6} xs={10} className="border" style={{ background: '#F7F3F3' }}> <Col md={6} xs={10} className="border" style={{ background: '#F7F3F3' }}>
<h2 className="text-center mt-5">Sign Up</h2> <h2 className="text-center mt-5">Sign Up</h2>
<Form <Form
noValidate validated={validated} noValidate validated={validated}
onSubmit={handleSubmit} onSubmit={handleSubmit}
className="p-5"> className="p-5">
<Form.Group controlId="formBasicName"> <Form.Group controlId="formBasicName">
<Form.Row> <Form.Row>
<Col sm={4} xs={6} as={Form.Label} for="id">이 름</Col> <Col sm={4} xs={6} as={Form.Label} for="id">이 름</Col>
<Col sm={8} xs={12} as={Form.Control} <Col sm={8} xs={12} as={Form.Control}
required type="text" required type="text"
name="name" name="name"
...@@ -91,15 +84,12 @@ function Signup() { ...@@ -91,15 +84,12 @@ function Signup() {
style={{ width: '160px' }} style={{ width: '160px' }}
value={user.name} value={user.name}
onChange={handleChange} /> onChange={handleChange} />
<Form.Control.Feedback type="invalid">이름을 입력하세요. </Form.Control.Feedback> <Form.Control.Feedback type="invalid">이름을 입력하세요. </Form.Control.Feedback>
</Form.Row> </Form.Row>
</Form.Group> </Form.Group>
<Form.Group controlId="formBasicNumber"> <Form.Group controlId="formBasicNumber">
<Form.Row> <Form.Row>
<Col sm={4} xs={6} as={Form.Label} for="number">주민등록번호</Col> <Col sm={4} xs={6} as={Form.Label} for="number">주민등록번호</Col>
<Col as={Row} sm={8} xs={10} > <Col as={Row} sm={8} xs={10} >
<Form.Control <Form.Control
required type="text" required type="text"
...@@ -121,13 +111,11 @@ function Signup() { ...@@ -121,13 +111,11 @@ function Signup() {
****** ******
<Form.Control.Feedback type="invalid">주민등록번호를 입력하세요.</Form.Control.Feedback> <Form.Control.Feedback type="invalid">주민등록번호를 입력하세요.</Form.Control.Feedback>
</Col> </Col>
</Form.Row> </Form.Row>
</Form.Group> </Form.Group>
<Form.Group controlId="formBasicId"> <Form.Group controlId="formBasicId">
<Form.Row> <Form.Row>
<Col sm={4} xs={6} as={Form.Label} for="id">아이디</Col> <Col sm={4} xs={6} as={Form.Label} for="id">아이디</Col>
<Col sm={8} xs={12} as={Form.Control} <Col sm={8} xs={12} as={Form.Control}
required required
type="text" type="text"
...@@ -139,7 +127,6 @@ function Signup() { ...@@ -139,7 +127,6 @@ function Signup() {
<Form.Control.Feedback type="invalid"> 아이디를 입력하세요.</Form.Control.Feedback> <Form.Control.Feedback type="invalid"> 아이디를 입력하세요.</Form.Control.Feedback>
</Form.Row> </Form.Row>
</Form.Group> </Form.Group>
<Form.Group controlId="formBasicPassword"> <Form.Group controlId="formBasicPassword">
<Form.Row> <Form.Row>
<Col sm={4} xs={6} as={Form.Label} for="password">비밀번호</Col> <Col sm={4} xs={6} as={Form.Label} for="password">비밀번호</Col>
...@@ -156,7 +143,6 @@ function Signup() { ...@@ -156,7 +143,6 @@ function Signup() {
</Form.Control.Feedback> </Form.Control.Feedback>
</Form.Row> </Form.Row>
</Form.Group> </Form.Group>
<Form.Group controlId="formBasicPassword2"> <Form.Group controlId="formBasicPassword2">
<Form.Row> <Form.Row>
<Col sm={4} xs={6} as={Form.Label} for="password">비밀번호 확인</Col> <Col sm={4} xs={6} as={Form.Label} for="password">비밀번호 확인</Col>
...@@ -172,11 +158,9 @@ function Signup() { ...@@ -172,11 +158,9 @@ function Signup() {
</Form.Control.Feedback> </Form.Control.Feedback>
</Form.Row> </Form.Row>
</Form.Group> </Form.Group>
<Form.Group controlId="formBasicTel"> <Form.Group controlId="formBasicTel">
<Form.Row> <Form.Row>
<Col sm={4} xs={6} as={Form.Label} for="tel">휴대전화</Col> <Col sm={4} xs={6} as={Form.Label} for="tel">휴대전화</Col>
<Col sm={8} xs={12} as={Form.Control} <Col sm={8} xs={12} as={Form.Control}
required required
type="text" type="text"
...@@ -187,22 +171,15 @@ function Signup() { ...@@ -187,22 +171,15 @@ function Signup() {
<Form.Control.Feedback type="invalid"> 휴대전화를 입력하세요. </Form.Control.Feedback> <Form.Control.Feedback type="invalid"> 휴대전화를 입력하세요. </Form.Control.Feedback>
</Form.Row> </Form.Row>
</Form.Group> </Form.Group>
<Button <Button
style={{ background: '#91877F', borderColor: '#91877F' }} type="submit" block> style={{ background: '#91877F', borderColor: '#91877F' }} type="submit" block>
Sign Up Sign Up
</Button> </Button>
</Form> </Form>
</Col> </Col>
</Row> </Row>
</Container> </Container>
</div> </div>
) )
} }
......
client/src/index.js
View file @ 0da1ed33
...@@ -4,13 +4,15 @@ import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-d ...@@ -4,13 +4,15 @@ 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';
import Payment from './Pages/Payment'; import Payment from './Pages/Payment';
import reportWebVitals from './reportWebVitals'; import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/css/bootstrap.min.css';
import Account from './Pages/Account';
ReactDOM.render( ReactDOM.render(
<React.StrictMode> <React.StrictMode>
...@@ -20,10 +22,13 @@ ReactDOM.render( ...@@ -20,10 +22,13 @@ 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} />
<Route path="/payment" component={Payment} /> <Route path="/payment" component={Payment} />
<Route path="/account" component={Account}/>
<Route path='/kakao' component={() => {window.location.href='https://compmath.korea.ac.kr'; return null;}}/>
<Redirect path="/" to="/" /> <Redirect path="/" to="/" />
</Switch> </Switch>
</Router> </Router>
......
server/app.js
View file @ 0da1ed33
import express from 'express' import express from 'express';
// import bodyParser from "body-parser";
import connectDb from './schemas/index.js' import connectDb from './schemas/index.js'
import userRouter from "./routes/user.routes.js"; import userRouter from "./routes/user.routes.js";
import productRouter from './routes/product.routes.js';
import path from 'path'
import kakaopayRoutes from './routes/kakaopay.routes.js'
import config from './config.js'
import cors from 'cors'
connectDb() connectDb()
// const createError = require('http-errors');
// const express = require('express');
// const path = require('path');
// const cookieParser = require('cookie-parser');
// const logger = require('morgan');
// const port = 3030;
// const indexRouter = require('./routes/index');
const app = express(); const app = express();
// connect();
// view engine setup
// app.set('views', path.join(__dirname, 'views'));
// app.set('view engine', 'pug');
// app.use(logger('dev'));
app.use(express.json()); app.use(express.json());
// app.use(express.urlencoded({ extended: false })); app.use(cors())
// app.use(cookieParser(process.env.JWT_SECRET));
// app.use(express.static(path.join(__dirname, 'public')));
// app.use('/', indexRouter); app.use(express.static(path.join(process.cwd(), 'dist')))
// app.use(bodyParser.urlencoded({ extended: true }))
// app.listen(port, () => console.log(port));
app.listen(3001, () => console.log('Listenning'));
// app.use('/', indexRouter);
app.use('/', kakaopayRoutes)
app.use('/api/users',userRouter) app.use('/api/users',userRouter)
app.use('/api/products', productRouter)
// catch 404 and forward to error handler app.listen(config.port, () => {
// app.use(function(req, res, next) { console.info('Server started on port %s.', config.port)
// next(createError(404)); })
// });
// error handler
// app.use(function(err, req, res, next) {
// set locals, only providing error in development
// res.locals.message = err.message;
// res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
// res.status(err.status || 500);
// res.render('error');
// });
// module.exports = app;
\ No newline at end of file
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