Skip to content

GitLab

Commit e375b38f authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

Merge branch 'jaeyeon' into jiwon

parents 3cc651ae c0b9c068
Show whitespace changes
Inline Side-by-side
.gitignore 0 → 100644
View file @ e375b38f
node_modules
\ No newline at end of file
client/package-lock.json
View file @ e375b38f
...@@ -12340,6 +12340,27 @@ ...@@ -12340,6 +12340,27 @@
"warning": "^4.0.3" "warning": "^4.0.3"
} }
}, },
"react-daum-postcode": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/react-daum-postcode/-/react-daum-postcode-2.0.2.tgz",
"integrity": "sha512-K1ScGNJeIk8lUqGf3mSn3flD1zJ+PmH1G54FplHxywlyKp8uG/+xrP1VEgDHKYBFJtpuiHvIUaJDFAh8m8zX9g==",
"requires": {
"prop-types": "^15.6.2",
"react": "^16.4.2"
},
"dependencies": {
"react": {
"version": "16.14.0",
"resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
"integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
"requires": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1",
"prop-types": "^15.6.2"
}
}
}
},
"react-dev-utils": { "react-dev-utils": {
"version": "11.0.1", "version": "11.0.1",
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.1.tgz", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.1.tgz",
......
client/package.json
View file @ e375b38f
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
"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",
"react-daum-postcode": "^2.0.2",
"react-dom": "^17.0.1", "react-dom": "^17.0.1",
"react-router-dom": "^5.2.0", "react-router-dom": "^5.2.0",
"react-scripts": "4.0.1", "react-scripts": "4.0.1",
......
client/src/App.js
View file @ e375b38f
import logo from './logo.svg'; import logo from './logo.svg';
import './App.css'; import './App.css';
import { Button } from 'react-bootstrap';
import { Router } from 'react-router-dom';
import Login from './Login'
import LogoutButton from './LogoutButton'
import {signIn} from './auth'
function App() { function App() {
return ( const [user,setUser]=useState(null);
<div className="App">
<header className="App-header"> const authenticated =user !=null;
<img src={logo} className="App-logo" alt="logo" />
<p> const login =({id, password}) => setUser(signIn({id,password}));
Edit <code>src/App.js</code> and save to reload.
</p> const logout=()=>setUser(null);
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
} }
export default App; export default App;
client/src/Auth.js 0 → 100644
View file @ e375b38f
const users=[
{ id:'wodus', password:'123'},
{id:'kim', password:'456'},
]
export function signIn({id,password}){
const user=users.find(user=>user.id===id && user.password===password);
if (user===undefined) throw new Error();
return user;
}
\ No newline at end of file
client/src/AuthRoute.js 0 → 100644
View file @ e375b38f
import React from 'react'
import {Route, Redirect} from "react-router-dom"
function AuthRoute({})
\ No newline at end of file
client/src/Pages/Login.js
View file @ e375b38f
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import MainNav from '../Components/MainNav'; import Nav1 from '../Components/MainNav';
import SubNav from '../Components/SubNav'; import Nav2 from '../Components/SubNav';
function Login() { import { Form, Col, Container, Button, Row } from 'react-bootstrap'
import { Link, Redirect } from 'react-router-dom'
function Login(){
return ( return (
<div> <div>
<MainNav /> <Nav1 />
<SubNav /> <Nav2 />
<Container className="my-5">
<Row className="justify-content-center">
<Col md={5} xs={10} className="border" style={{ background: '#F7F3F3' }}>
<h3 className="text-center mt-5">Login</h3>
<Form className="p-5">
<Form.Group controlId="formBasicId">
<Form.Row>
<Form.Label for="id">아이디</Form.Label>
<Col>
<Form.Control
// type="text"
// id="id"
// value={id}
// onChange={({ target: { value } }) => user.d(value)}
className="mx-sm-3" size="sm" placeholder="ID">
</Form.Control>
</Col>
</Form.Row>
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Row>
<Form.Label for="password">비밀번호</Form.Label>
<Col>
<Form.Control
// type="password"
// id="password"
// value={password}
// onChange={({ target: { value } }) => user.password(value)}
className="mx-sm-3" size="sm" placeholder="Password"></Form.Control>
</Col>
</Form.Row>
</Form.Group>
<Button style={{ background: '#91877F', borderColor: '#91877F' }} type="submit" block>Login</Button>
<div className="loginLine">
<Link to="/signup" style={{ color: '#91877F' }} >회원이 아니십니까?</Link>
</div> </div>
</Form>
</Col>
</Row>
</Container>
</div>
) )
} }
......
client/src/Pages/LogoutButton.js 0 → 100644
View file @ e375b38f
import React from 'react'
import {withRouter} from 'react-router-dom'
function LogoutButton({logout,history}){
const handleClick = () =>{
logout()
history.push("/")
}
return <button onClick={handleClick}>Logout</button>
}
export default withRouter(LogoutButton)
\ No newline at end of file
client/src/Pages/Payment.js
View file @ e375b38f
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 DaumPostcode from "react-daum-postcode";
import { Container, Card, Row, Col, Button, Form } from 'react-bootstrap'; import { Container, Card, Row, Col, Button, Form } from 'react-bootstrap';
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([])
function postClick() {
if (post.length !== 0) {
setPost([])
}
else {
setPost(
<div>
<DaumPostcode style={postCodeStyle} onComplete={handleComplete} />
</div>
)
}
}
const handleComplete = (data) => {
let fullAddress = data.address;
let extraAddress = "";
if (data.addressType === "R") {
if (data.bname !== "") {
extraAddress += data.bname;
}
if (data.buildingName !== "") {
extraAddress +=
extraAddress !== "" ? `, ${data.buildingName}` : data.buildingName;
}
fullAddress += extraAddress !== "" ? ` (${extraAddress})` : "";
}
setIsZoneCode(data.zonecode);
setIsAddress(fullAddress);
setIsPostOpen(false);
};
const postCodeStyle = {
display: "block",
position: "absolute",
// top: "50%",
width: "400px",
height: "500px",
padding: "7px",
};
function handleClick() { function handleClick() {
if (paymentWay.length !== 0) { if (paymentWay.length !== 0) {
setPaymentWay([]) setPaymentWay([])
} }
...@@ -70,6 +117,8 @@ function Payment() { ...@@ -70,6 +117,8 @@ function Payment() {
<div> <div>
<h5 className="bg-light font-weight-bold py-3 border-top border-bottom text-center">배송지 정보</h5> <h5 className="bg-light font-weight-bold py-3 border-top border-bottom text-center">배송지 정보</h5>
<Button onClick={postClick}>우편번호</Button>
{post}
</div> </div>
<div> <div>
......
client/src/Pages/ShoppingCart.js
View file @ e375b38f
...@@ -75,7 +75,7 @@ function ShoppingCart() { ...@@ -75,7 +75,7 @@ function ShoppingCart() {
</div> </div>
</div> </div>
<div className="text-center"> <div className="text-center">
<Button className="px-5" style={{background:"#91877F", borderColor:'#91877F'}}>결제하기</Button> <Button className="px-5" style={{background:"#91877F", borderColor:'#91877F'}} href="/payment">결제하기</Button>
</div> </div>
</Container> </Container>
......
client/src/Pages/Signup.js
View file @ e375b38f
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import { Redirect } from 'react-router-dom'; import { Redirect } from 'react-router-dom';
import MainNav from '../Components/MainNav'; import Nav1 from '../Components/MainNav';
import SubNav from '../Components/SubNav'; import Nav2 from '../Components/SubNav';
import { Form, Col, Container, Button, Row } from 'react-bootstrap'
import FormCheckInput from 'react-bootstrap/esm/FormCheckInput';
function Signup() { function Signup() {
return ( return (
<div class="form-container"> <div>
<MainNav />
<SubNav />
<form id="form" class="form">
<h1>회원가입</h1>
<div class="form-control">
<label for="id">아이디</label>
<input type="text" id="id" placeholder="아이디를 입력하세요"></input>
<label for="name">본명</label> <Nav1 />
<input type="text" id="name" placeholder="본명을 입력하세요"></input> <Nav2 />
<Container className="my-5">
<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 className="p-5">
<Form.Group controlId="formBasicName">
<Form.Row>
<Form.Label for="name">이 름</Form.Label>
<Col>
<Form.Control type="text" id="name" size="sm" placeholder="" className="mx-sm-3"></Form.Control>
</Col>
</Form.Row>
</Form.Group>
<label for="password">비밀번호</label> <Form.Group controlId="formBasicNumber">
<input type="password" id="password" placeholder="비밀번호를 입력하세요"></input> <Form.Row>
<Form.Label for="number">주민등록번호</Form.Label>
<label for="password2">비밀번호 확인</label> <Col as={Row}>
<input type="password" id="password2" placeholder="비밀번호를 한번 더 입력하세요"></input> <Form.Control type="text" id="number1" size="sm" maxlength="6" className="mx-sm-3" style={{ width: '120px' }}></Form.Control>
-
<Form.Control type="text" id="number2" size="sm" maxlength="1" className="mx-sm-3" style={{ width: '25px' }}></Form.Control>
******
</Col>
</Form.Row>
</Form.Group>
<Form.Group controlId="formBasicId">
<Form.Row>
<Form.Label for="id">아이디</Form.Label>
<label for="tel">휴대폰 번호</label> <Col>
<input type="text" id="tel" placeholder="휴대폰 번호를 입력하세요"></input> <Form.Control type="text" id="id" size="sm" placeholder="ID" className="mx-sm-3"></Form.Control>
</Col>
</Form.Row>
</Form.Group>
<label for="add">주소</label> <Form.Group controlId="formBasicPassword">
</div> <Form.Row>
</form> <Form.Label for="password">비밀번호</Form.Label>
<Col>
<Form.Control 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>
</Col>
</Form.Row>
</Form.Group>
<Form.Group controlId="formBasicPassword2">
<Form.Row>
<Form.Label for="password2">비밀번호 확인</Form.Label>
<Col>
<Form.Control type="password" id="password2" size="sm" placeholder="" className="mx-sm-3"></Form.Control>
</Col>
</Form.Row>
</Form.Group>
<Form.Group controlId="formBasicTel">
<Form.Row>
<Form.Label for="tel">휴대전화</Form.Label>
<Col>
<Form.Control type="text" id="tel" size="sm" placeholder="" className="mx-sm-3"></Form.Control>
</Col>
</Form.Row>
</Form.Group>
<Form.Group controlId="formBasicAdd">
<Form.Row>
<Form.Label>주 소</Form.Label>
<Col>
<Form.Control type="text" id="add" size="sm" placeholder="상세주소" className="mx-sm-3"></Form.Control>
</Col>
</Form.Row>
</Form.Group>
<Button style={{background:'#91877F', borderColor:'#91877F'}} type="submit" block>Sign Up</Button>
</Form>
</Col>
</Row>
</Container>
</div> </div>
) )
......
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