Skip to content

GitLab

Commit 7a918c31 authored by 박상호's avatar 박상호 🎼
Browse files

1-6

parents 9c17ddca 3ba7cf83
Hide whitespace changes
Inline Side-by-side
.env
View file @ 7a918c31
BROWSER=none
PORT=4000
MONGO_URI=mongodb://localhost/
\ No newline at end of file
MONGO_URI=mongodb://localhost/shopping-mall
\ No newline at end of file
client/.gitignore
View file @ 7a918c31
......@@ -24,5 +24,6 @@ yarn-error.log*
package-lock.json
.eslintcache
debug.log
.yarn.lock
client/package.json
View file @ 7a918c31
......@@ -6,6 +6,7 @@
"@testing-library/jest-dom": "^5.11.6",
"@testing-library/react": "^11.2.2",
"@testing-library/user-event": "^12.6.0",
"axios": "^0.21.1",
"bootstrap": "^4.5.3",
"react": "^17.0.1",
"react-bootstrap": "^1.4.0",
......@@ -38,5 +39,6 @@
"last 1 firefox version",
"last 1 safari version"
]
}
},
"proxy": "http://localhost:3001"
}
client/src/Components/Card.js 0 → 100644
View file @ 7a918c31
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/MainNav.js
View file @ 7a918c31
......@@ -7,7 +7,7 @@ import option from '../option.svg';
function MainNav() {
function handleClick() {
alert('로그아웃이 완료되었습니다.')
window.location.href ="/"
window.location.href="/home"
}
return (
......
client/src/Components/SubNav.js
View file @ 7a918c31
......@@ -22,7 +22,7 @@ function SubNav() {
}
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">
{`
.nav-link, .nav-link:hover, .nav-link:active {
......
client/src/Pages/Account.js 0 → 100644
View file @ 7a918c31
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 @ 7a918c31
......@@ -3,13 +3,17 @@ import MainNav from '../Components/MainNav';
import SubNav from '../Components/SubNav';
import Pagination from '../Components/Pagination';
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 handleClick(e) {
const card = e.target.parentNode.parentNode
console.log(card)
alert('해당 상품을 성공적으로 삭제하였습니다.')
card.remove()
}
function handleSubmit(e) {
e.preventDefault()
}
return (
......@@ -29,95 +33,95 @@ function Admin() {
</style>
<MainNav />
<SubNav />
<Row className="justify-content-end mt-5 mr-3 mb-5">
<Col as={Form} inline className="justify-content-end">
<FormControl type="text" placeholder="Search" className="mr-1" />
<Container>
<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="px-2">
<img src={search} width="20" height="20" />
</Button>
</Col>
<Col sm={2} xs={3} as={Button} type="button" href="/regist">상품 등록</Col>
</Row>
<Row className="justify-content-start m-5">
<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.Body>
<Card.Title>케이시앵글부츠(SH)</Card.Title>
<Card.Text>
재고: 8<br />
<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>
재고: 8<br />
구매자 수: 10
</Card.Text>
<Button className="float-right" onClick={(e) => handleClick(e)}>삭제</Button>
</Card.Body>
</Card>
<Card className="my-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>
재고: 20<br />
<Button className="float-right" onClick={(e) => handleClick(e)}>삭제</Button>
</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>
재고: 20<br />
구매자 수: 60
</Card.Text>
<Button className="float-right" onClick={(e) => handleClick(e)}>삭제</Button>
</Card.Body>
</Card>
<Card className="my-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>
재고: 34<br />
<Button className="float-right" onClick={(e) => handleClick(e)}>삭제</Button>
</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>
재고: 34<br />
구매자 수: 5
</Card.Text>
<Button className="float-right" onClick={(e) => handleClick(e)}>삭제</Button>
</Card.Body>
</Card>
<Card className="my-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>
재고: 50<br />
<Button className="float-right" onClick={(e) => handleClick(e)}>삭제</Button>
</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>
재고: 50<br />
구매자 수: 18
</Card.Text>
<Button className="float-right" onClick={(e) => handleClick(e)}>삭제</Button>
</Card.Body>
</Card>
<Card className="my-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>
재고: 35<br />
<Button className="float-right" onClick={(e) => handleClick(e)}>삭제</Button>
</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>
재고: 35<br />
구매자 수: 70
</Card.Text>
<Button className="float-right" onClick={(e) => handleClick(e)}>삭제</Button>
</Card.Body>
</Card>
<Card className="my-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>
재고: 40<br />
<Button className="float-right" onClick={(e) => handleClick(e)}>삭제</Button>
</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>
재고: 40<br />
구매자 수: 30
</Card.Text>
<Button className="float-right" onClick={(e) => handleClick(e)}>삭제</Button>
</Card.Body>
</Card>
<Card className="my-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>
재고: 15<br />
<Button className="float-right" onClick={(e) => handleClick(e)}>삭제</Button>
</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>
재고: 15<br />
구매자 수: 50
</Card.Text>
<Button className="float-right" onClick={(e) => handleClick(e)}>삭제</Button>
</Card.Body>
</Card>
</Row>
<Pagination />
<Button className="float-right" onClick={(e) => handleClick(e)}>삭제</Button>
</Card.Body>
</Card>
</Row>
<Pagination />
</Container>
</div>
)
......
client/src/Pages/Home.js
View file @ 7a918c31
......@@ -5,51 +5,50 @@ import { Card, Container, Row } from 'react-bootstrap';
function Home() {
return (
<div>
<MainNav />
<SubNav />
<Container>
<div className="my-3">
<h3 ><u>Best</u></h3>
<Row className="justify-content-center">
<Card className="mx-1" style={{ width: '18rem' }}>
<Container className="my-5">
<div className="my-4">
<h2 style={{ marginRight: "5rem", marginLeft: "5rem", marginBottom: "2rem" }}><u>Best</u></h2>
<Row className="justify-content-center mx-0">
<Card className="mx-1 my-2" style={{ width: '18rem' }}>
<Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
<Card.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text>
</Card.Body>
</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.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text>
</Card.Body>
</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.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text>
</Card.Body>
</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.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text>
</Card.Body>
</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.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text>
</Card.Body>
</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.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title>
......@@ -58,45 +57,45 @@ function Home() {
</Card>
</Row>
</div>
<div className="my-3">
<h3><u>New Arrival</u></h3>
<Row className="justify-content-center">
<Card className="mx-1" style={{ width: '18rem' }}>
<div className="my-4">
<h2 style={{ marginRight: "5rem", marginLeft: "5rem", marginBottom: "2rem", marginTop: "2rem" }}><u>New Arrival</u></h2>
<Row className="justify-content-center mx-0">
<Card className="mx-1 my-2" style={{ width: '18rem' }}>
<Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
<Card.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text>
</Card.Body>
</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.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text>
</Card.Body>
</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.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text>
</Card.Body>
</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.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text>
</Card.Body>
</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.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text>
</Card.Body>
</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.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title>
......
client/src/Pages/Login.js
View file @ 7a918c31
......@@ -11,7 +11,7 @@ function Login() {
const handleSubmit = (e) => {
const form = e.currentTarget;
console.log(form)
if (form.checkValidity() === false) {
if (form.checkValidity() === false) { //checkValidity 는 입력 요소에 유효한 데이터가 포함되어 있는지 확인
e.preventDefault();
e.stopPropagation();
}
......
client/src/Pages/Payment.js
View file @ 7a918c31
......@@ -2,7 +2,8 @@ import React, { useState, useEffect, useRef } from 'react';
import MainNav from '../Components/MainNav';
import SubNav from '../Components/SubNav';
import DaumPostcode from "react-daum-postcode";
import { Container, Card, Row, Col, Button, Form } from 'react-bootstrap';
import { Container, Card, Row, Col, Button, Form, FormGroup } from 'react-bootstrap';
import { Redirect } from 'react-router-dom';
function Payment() {
......@@ -11,6 +12,9 @@ function Payment() {
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) {
......@@ -19,20 +23,20 @@ function Payment() {
else {
setPost(
<div>
<DaumPostcode style={postCodeStyle} onComplete={handleComplete} />
<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 +=
......@@ -40,46 +44,49 @@ function Payment() {
}
fullAddress += extraAddress !== "" ? ` (${extraAddress})` : "";
}
setIsZoneCode(data.zonecode);
setIsAddress(fullAddress);
setIsPostOpen(false);
};
setAddress({ full: fullAddress, zone: data.zonecode });
console.log(fullAddress);
}
const postCodeStyle = {
display: "block",
// display: "block",
position: "absolute",
// top: "50%",
width: "400px",
height: "500px",
padding: "7px",
zIndex: "1000"
};
function handleClick() {
if (paymentWay.length !== 0) {
setPaymentWay([])
}
else {
const a = (
<div>
<Form>
<Form.Group controlId="exampleForm.ControlSelect1">
<Form.Label>입금은행</Form.Label>
<Form.Control as="select" placeholder="입금은행을 선택하세요.">
<option>농협 / 352-0559-2528-83 / 김수빈</option>
<option>우리은행 / 0000-000-000000 / 이재연</option>
<option>국민은행 / 111111-11-111111 / 윤대기</option>
</Form.Control>
</Form.Group>
<Form.Group controlId="formName">
<Form.Label>입금자</Form.Label>
<Form.Control type="email" placeholder="윤지원" />
</Form.Group>
<Form.Group controlId="formDay">
<Form.Label>입금예정일</Form.Label>
<Form.Control type="date" />
</Form.Group>
</Form>
</div>)
<Row className="justify-content-md-center">
<Col md={6} className="border m-5 p-5">
<Form>
<Form.Group controlId="exampleForm.ControlSelect1">
<Form.Label>입금은행</Form.Label>
<Form.Control as="select" placeholder="입금은행을 선택하세요.">
<option>농협 / 352-0559-2528-83 / 김수빈</option>
<option>우리은행 / 0000-000-000000 / 이재연</option>
<option>국민은행 / 111111-11-111111 / 윤대기</option>
</Form.Control>
</Form.Group>
<Form.Group controlId="formName">
<Form.Label>입금자</Form.Label>
<Form.Control type="email" placeholder="윤지원" />
</Form.Group>
<Form.Group controlId="formDay">
<Form.Label>입금예정일</Form.Label>
<Form.Control type="date" />
</Form.Group>
</Form>
</Col>
</Row>)
setPaymentWay(a)
}
}
......@@ -90,6 +97,54 @@ 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 (
<div>
<MainNav />
......@@ -98,55 +153,84 @@ function Payment() {
<h3 className="my-5 font-weight-bold text-center">주문/결제</h3>
<div>
<h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>주문자 정보</h5>
<Form>
<Form.Group controlId="formBasicName">
<Form.Label>이름</Form.Label>
<Form.Control type="text" placeholder="윤지원" />
</Form.Group>
<Form.Group controlId="formBasicEmail">
<Form.Label>이메일</Form.Label>
<Form.Control type="email" placeholder="jiwon5393@naver.com" />
</Form.Group>
<Form.Group controlId="formBasicTel">
<Form.Label>휴대전화</Form.Label>
<Form.Control type="tel" placeholder="010-0000-0000" />
</Form.Group>
</Form>
<Row className="justify-content-md-center">
<Col md={4}>
<Form>
<Form.Group controlId="formBasicName">
<Form.Label>이름</Form.Label>
<Form.Control type="text" placeholder="윤지원" />
</Form.Group>
<Form.Group controlId="formBasicEmail">
<Form.Label>이메일</Form.Label>
<Form.Control type="email" placeholder="jiwon5393@naver.com" />
</Form.Group>
<Form.Group controlId="formBasicTel">
<Form.Label>휴대전화</Form.Label>
<Form.Control type="tel" placeholder="010-0000-0000" />
</Form.Group>
</Form>
</Col>
</Row>
</div>
<div>
<h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>배송지 정보</h5>
<Row>
<Col>
<Button className="my-3" style={{ background: "#91877F", borderColor: '#91877F' }} onClick={postClick}>우편번호</Button>
<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>
{post}
</div>
<div>
<h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>주문상품정보</h5>
<Card >
<Row>
<Col className="text-center align-self-center">
<input className="" type="checkbox" id="exampleCheck1"></input>
<Row className="mx-1">
<Col xs={2} sm={2} className="text-center my-auto">
<input className="" type="checkbox" id="exampleCheck1" />
</Col>
<Col>
<Col className="text-center">
<Card.Img className="img-fluid" variant="top" src="img/asd.jpg" style={{ width: '20rem' }} />
</Col>
<Col>
<Col md={6} className="p-2">
<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.Text>가격</Card.Text>
<Card.Text>옵션</Card.Text>
<div className="align-items-center" >
<input type="image" src="https://img.icons8.com/ios-glyphs/20/000000/minus-math.png" />
<input type="text" placeholder="1" style={{ width: '30px' }} className="text-center align-middle mx-1" readOnly></input>
<input type="image" src="https://img.icons8.com/ios-glyphs/20/000000/plus-math.png" />
<Card.Text>수량</Card.Text>
<div>
<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="text-center align-middle mx-1" placeholder="1" value={num} readOnly></input>
<input type="image" src="https://img.icons8.com/ios-glyphs/20/000000/plus-math.png" className="align-middle" onClick={plusNum} />
</div>
</Card.Body>
</Col>
......@@ -172,12 +256,14 @@ function Payment() {
<div>
<h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>결제수단</h5>
<div className="text-center">
<Button variant="success" onClick={handleClick} >무통장입금</Button>
<Button variant="warning" style={{ color: '#ffffff' }} onClick={handleClick2}>카카오페이</Button>
<div className="text-center mt-5">
<Button variant="success" className="align-top" onClick={handleClick} >무통장입금</Button>
<input type="image" src="img/payment_icon_yellow_small.png" onClick={kakaopay} />
</div>
{paymentWay}
</div>
<div className="text-center">
<Button className="px-5" style={{ background: "#91877F", borderColor: '#91877F' }} href="/account" block>결제완료</Button>
</div>
</Container>
</div>
......
client/src/Pages/Product.js 0 → 100644
View file @ 7a918c31
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 @ 9c17ddca
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 @ 7a918c31
import React, { useState, useEffect, useRef } from 'react';
import MainNav from '../Components/MainNav';
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() {
const [sub, setSub] = useState(['PADDED JACKET', 'JACKET', 'JUMPER', 'COAT', 'FLEECE', 'CARDIGAN / VEST'])
function handleSubmit(e) {
e.preventDefault()
}
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 />
<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>
)
}
......
client/src/Pages/ProductsRegist.js
View file @ 7a918c31
......@@ -2,58 +2,81 @@ import React, { useState, useEffect, useRef } from 'react';
import Nav1 from '../Components/MainNav';
import Nav2 from '../Components/SubNav';
import { Row, Col, Button, Form, Container } from 'react-bootstrap';
import axios from 'axios'
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 (
<div>
{console.log(product)}
<Nav1 />
<Nav2 />
<Container>
<Row className="justify-content-md-center">
<Col md={6} className="border m-5 p-3" style={{background:'#F7F3F3'}}>
<Col md={6} className="border m-5 p-3" style={{ background: '#F7F3F3' }}>
<h2 className="text-center mt-5 font-weight-bold">상품등록</h2>
<Form className="p-5">
<Form className="p-5" onSubmit={handleSubmit}>
<Form.Group controlId="productNameform">
<Form.Label>상품명</Form.Label>
<Form.Control type="text" placeholder="상품명" />
<Form.Control type="text" name="pro_name" placeholder="상품명" onChange={handleChange} />
</Form.Group>
<Form.Group controlId="productAmountform">
<Form.Label>수량</Form.Label>
<Form.Control type="text" placeholder="숫자만 입력해주세요" />
<Form.Label>재고</Form.Label>
<Form.Control type="text" name="stock" placeholder="숫자만 입력해주세요" onChange={handleChange} />
</Form.Group>
<Form.Group controlId="productPriceform">
<Form.Label>가격</Form.Label>
<Form.Control type="text" placeholder="숫자만 입력해주세요" />
<Form.Control type="text" name="price" placeholder="숫자만 입력해주세요" onChange={handleChange} />
</Form.Group>
<Form.Group>
<Form.Label>분류</Form.Label>
<Row>
<Col md={6}>
<Form.Control as="select" placeholder="상위분류">
<Form.Control as="select" name="main_category" placeholder="상위분류" onChange={handleChange}>
<option>Pants</option>
<option>Skirt</option>
<option>Outer</option>
</Form.Control>
</Col>
<Col md={6}>
<Form.Control as="select" placeholder="하위분류">
<option>긴바지</option>
<option>반바지</option>
<option>청바지</option>
<Form.Control as="select" name="sub_category" placeholder="하위분류" onChange={handleChange}>
<option>JEANS</option>
<option>SKINNY JEANS</option>
<option>BANDING PANTS</option>
</Form.Control>
</Col>
</Row>
</Form.Group>
<Form.Group controlId="productDescriptionform">
<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.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>
<Button className="float-right" variant="primary" type="submit" style={{background:'#91877F', borderColor:'#91877F'}}>등록</Button>
<Button className="float-right" variant="primary" type="submit" style={{ background: '#91877F', borderColor: '#91877F' }}>등록</Button>
</Form>
</Col>
</Row>
......
client/src/Pages/ShoppingCart.js
View file @ 7a918c31
......@@ -6,6 +6,25 @@ import { Card, Button, Container, Row, Col } from 'react-bootstrap';
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 (
<div>
<MainNav />
......@@ -14,52 +33,32 @@ function ShoppingCart() {
<h3 className="my-5 font-weight-bold text-center">장바구니</h3>
<div>
<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>
<input type="image" 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>
<input type="image" src="https://img.icons8.com/ios-glyphs/20/000000/minus-math.png" />
<input type="text" placeholder="1" style={{ width: '30px' }} className="text-center align-middle mx-1" readOnly></input>
<input type="image" src="https://img.icons8.com/ios-glyphs/20/000000/plus-math.png" />
</div>
</Card.Body>
</Col>
</Row>
</Card>
<Card>
<Row>
<Col>
<input className="mx-5" type="checkbox" id="exampleCheck1"></input>
<Row className="mx-1">
<Col xs={2} sm={2} className="text-center my-auto">
<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' }} />
</Col>
<Col>
<Col md={6} className="p-2">
<Card.Body>
<input type="image" 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.Text>가격</Card.Text>
<Card.Text>옵션</Card.Text>
<Card.Text>수량</Card.Text>
<div className="align-items-center" >
<input type="image" src="https://img.icons8.com/ios-glyphs/20/000000/minus-math.png" />
<input type="text" placeholder="1" style={{ width: '30px' }} className="text-center align-middle mx-1" readOnly></input>
<input type="image" src="https://img.icons8.com/ios-glyphs/20/000000/plus-math.png" />
<div>
<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="text-center align-middle mx-1" placeholder="1" value={num} readOnly></input>
<input type="image" src="https://img.icons8.com/ios-glyphs/20/000000/plus-math.png" className="align-middle" onClick={plusNum} />
</div>
</Card.Body>
</Col>
</Row>
</Card>
</div>
<div className="p-5 m-5" style={{background:'#F7F3F3'}}>
<div className="p-5 m-5" style={{ background: '#F7F3F3' }}>
<ul className="pl-0" style={{ listStyle: 'none' }}>
<li>
<span className="text-secondary">총 상품금액</span>
......@@ -75,7 +74,7 @@ function ShoppingCart() {
</div>
</div>
<div className="text-center">
<Button className="px-5" style={{ background: "#91877F", borderColor: '#91877F' }} href="/payment">결제하기</Button>
<Button className="px-5" style={{ background: "#91877F", borderColor: '#91877F' }} href="/payment" block>결제하기</Button>
</div>
</Container>
......
client/src/Pages/Signup.js
View file @ 7a918c31
......@@ -2,78 +2,61 @@ import React, { useState, useEffect, useRef } from 'react';
import { Redirect } from 'react-router-dom';
import Nav1 from '../Components/MainNav';
import Nav2 from '../Components/SubNav';
import { Form, Col, Container, Button, Row } from 'react-bootstrap';
import DaumPostcode from "react-daum-postcode";
import { Form, Col, Container, Button, Row, Alert } from 'react-bootstrap'
import FormCheckInput from 'react-bootstrap/esm/FormCheckInput';
const INIT_USER = {
name: '',
number: '',
id: '',
password: '',
password2: '',
tel: ''
}
function Signup() {
const [address,setAddress] =useState("")
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 Postcode = () => {
return (
<DaumPostcode
onComplete={handleComplete}
/>
);
const [user, setUser] = useState(true)
//const [disabled, setDisabled] = useState(true)
const [error, setError] = useState('')
//useEffect(() => {
// const isUser = Object.values(user).every(el => Boolean(el))
// isUser ? setDisabled(false) : setDisabled(true)
//}, user)
function handleChange(event) {
const { name, value } = event.target
setUser({ ...user, [name]: value })
}
const [post, setPost] = useState([]);
function postClick() {
if (post.length !== 0) {
setPost([])
} else {
setPost(
<div>
<DaumPostcode style={postCodeStyle} onComplete={handleComplete} />
</div>
)
}
}
const postCodeStyle = {
position: "absolute",
width: "400px",
height: "500px",
padding: "7px",
};
const [validated, setValidated] = useState(false);
const handleSubmit = (e) => {
const form = e.currentTarget;
async function handleSubmit(event) {
event.preventDefault()
const form = event.currentTarget;
console.log(form)
if (form.checkValidity() === false) {
e.preventDefault();
e.stopPropagation();
event.preventDefault();
event.stopPropagation();
}
setValidated(true);
console.log(user)
try {
setError('')
const response = await fetch('/api/users/signup', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(user)
})
const data = await response.json()
console.log(data)
} catch (error) {
console.log(error)
setError('다시 시도하세요.')
}
}
return (
......@@ -81,32 +64,50 @@ function Signup() {
<Nav1 />
<Nav2 />
<Container className="my-5">
{error && <Alert variant='danger'>
{error}
</Alert>}
<Row className="justify-content-center">
<Col md={6} xs={10} className="border" style={{ background: '#F7F3F3' }}>
<h2 className="text-center mt-5">Sign Up</h2>
<Form noValidate validated={validated} onSubmit={handleSubmit} className="p-5">
<Form
noValidate validated={validated}
onSubmit={handleSubmit}
className="p-5">
<Form.Group controlId="formBasicName">
<Form.Row>
<Form.Label for="name">이 름</Form.Label>
<Col>
<Form.Control
required
type="text" id="name"
size="sm" placeholder="" className="mx-sm-3">
</Form.Control>
<Form.Control.Feedback type="invalid">이름을 입력하세요. </Form.Control.Feedback>
</Col>
<Col sm={4} xs={6} as={Form.Label} for="id">이 름</Col>
<Col sm={8} xs={12} as={Form.Control}
required type="text"
name="name"
placeholder="Name"
style={{ width: '160px' }}
value={user.name}
onChange={handleChange} />
<Form.Control.Feedback type="invalid">이름을 입력하세요. </Form.Control.Feedback>
</Form.Row>
</Form.Group>
<Form.Group controlId="formBasicNumber">
<Form.Row>
<Form.Label for="number">주민등록번호</Form.Label>
<Col as={Row}>
<Form.Control required type="text" id="number1" size="sm" maxlength="6" className="mx-sm-3" style={{ width: '120px' }}></Form.Control>
<Col sm={4} xs={6} as={Form.Label} for="number">주민등록번호</Col>
<Col as={Row} sm={8} xs={10} >
<Form.Control
required type="text"
name="number1"
maxlength="6"
className="mx-2" style={{ width: '17 0px' }}
value={user.number1}
onChange={handleChange}>
</Form.Control>
-
<Form.Control required type="text" id="number2" size="sm" maxlength="1" className="mx-sm-3" style={{ width: '25px' }}></Form.Control>
<Form.Control
required type="text"
name="number2"
maxlength="1" className="mx-3"
style={{ width: '50px' }}
value={user.number2}
onChange={handleChange}>
</Form.Control>
******
<Form.Control.Feedback type="invalid">주민등록번호를 입력하세요.</Form.Control.Feedback>
</Col>
......@@ -114,64 +115,66 @@ function Signup() {
</Form.Group>
<Form.Group controlId="formBasicId">
<Form.Row>
<Form.Label for="id">아이디</Form.Label>
<Col>
<Form.Control required type="text" id="id" size="sm" placeholder="ID" className="mx-sm-3"></Form.Control>
<Form.Control.Feedback type="invalid"> 아이디를 입력하세요.</Form.Control.Feedback>
</Col>
<Col sm={4} xs={6} as={Form.Label} for="id">아이디</Col>
<Col sm={8} xs={12} as={Form.Control}
required
type="text"
name="id"
placeholder="ID"
style={{ width: '160px' }}
value={user.id}
onChange={handleChange} />
<Form.Control.Feedback type="invalid"> 아이디를 입력하세요.</Form.Control.Feedback>
</Form.Row>
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Row>
<Form.Label for="password">비밀번호</Form.Label>
<Col>
<Form.Control required type="password" id="password" size="sm" placeholder="Password" aria-describedby="passwordHelpBlock" className="mx-sm-3"></Form.Control>
<Form.Text id="password" muted> 8-15자로 입력해주세요.</Form.Text>
<Form.Control.Feedback type="invalid"> 비밀번호를 입력하세요.
<Col sm={4} xs={6} as={Form.Label} for="password">비밀번호</Col>
<Col sm={8} xs={12} as={Form.Control}
type="password"
name="password"
placeholder="Password"
style={{ width: '160px' }}
value={user.password}
required
onChange={handleChange} />
<Form.Control.Feedback className="text-center" type="invalid">
비밀번호를 입력하세요.
</Form.Control.Feedback>
</Col>
</Form.Row>
</Form.Group>
<Form.Group controlId="formBasicPassword2">
<Form.Row>
<Form.Label for="password2">비밀번호 확인</Form.Label>
<Col>
<Form.Control required type="password" id="password2" size="sm" placeholder="" className="mx-sm-3"></Form.Control>
<Form.Control.Feedback type="invalid"> 비밀번호를 한번 더 입력하세요.
<Col sm={4} xs={6} as={Form.Label} for="password">비밀번호 확인</Col>
<Col sm={8} xs={12} as={Form.Control}
type="password"
name="password2"
placeholder="Password"
style={{ width: '160px' }}
value={user.password2}
required
onChange={handleChange} />
<Form.Control.Feedback type="invalid"> 비밀번호를 한번 더 입력하세요.
</Form.Control.Feedback>
</Col>
</Form.Row>
</Form.Group>
<Form.Group controlId="formBasicTel">
<Form.Row>
<Form.Label for="tel">휴대전화</Form.Label>
<Col>
<Form.Control required type="text" id="tel" size="sm" placeholder="" className="mx-sm-3"></Form.Control>
<Form.Control.Feedback type="invalid"> 휴대전화를 입력하세요. </Form.Control.Feedback>
</Col>
</Form.Row>
</Form.Group>
<Form.Group controlId="formBasicAdd">
<Form.Row>
{console.log("address=", address)}
<Form.Label className="mx-3">주 소</Form.Label>
<Form.Control required type="text" id="add" size="sm " style={{ width: '120px' }} value={address.zone} disabled={(address.zone == null) ? false : true} ></Form.Control>
<Button size="sm" style={{ background: '#91877F', borderColor: '#91877F' }} className="mx-3" type="button" onClick={postClick}>주소 찾기</Button>
{post}
<Form.Control required type="text" id="add" size="sm " value={address.full} disabled={(address.zone == null) ? false : true} className="mx-3"style={{width:'330px'}}></Form.Control>
<Form.Control required type="text" id="add2" size="sm" placeholder="상세주소" className="mx-sm-3"></Form.Control>
<Form.Control.Feedback type="invalid" > 상세 주소를 입력하세요. </Form.Control.Feedback>
<Col sm={4} xs={6} as={Form.Label} for="tel">휴대전화</Col>
<Col sm={8} xs={12} as={Form.Control}
required
type="text"
name="tel"
size="sm" style={{ width: '160px' }}
value={user.tel}
onChange={handleChange} />
<Form.Control.Feedback type="invalid"> 휴대전화를 입력하세요. </Form.Control.Feedback>
</Form.Row>
</Form.Group>
<Button style={{ background: '#91877F', borderColor: '#91877F' }} type="submit" block>Sign Up</Button>
<Button
style={{ background: '#91877F', borderColor: '#91877F' }} type="submit" block>
Sign Up
</Button>
</Form>
</Col>
</Row>
......
client/src/index.js
View file @ 7a918c31
......@@ -4,14 +4,15 @@ import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-d
import Home from './Pages/Home';
import Login from './Pages/Login';
import Signup from './Pages/Signup';
import Product from "./Pages/Products";
import ProductsList from './Pages/ProductsList';
import Product from "./Pages/Product";
import ProductsList from "./Pages/ProductsList";
import Admin from './Pages/Admin';
import ProductsRegist from './Pages/ProductsRegist';
import ShoppingCart from './Pages/ShoppingCart';
import Payment from './Pages/Payment';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css';
import Account from './Pages/Account';
ReactDOM.render(
<React.StrictMode>
......@@ -22,10 +23,13 @@ ReactDOM.render(
<Route path="/signup" component={Signup} />
<Route path="/list" component={ProductsList} />
<Route path="/product"component={Product} />
<Route path="/productslist"component={ProductsList} />
<Route path="/admin" component={Admin} />
<Route path="/regist" component={ProductsRegist} />
<Route path="/shoppingcart" component={ShoppingCart} />
<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="/" />
</Switch>
</Router>
......
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