Skip to content

GitLab

"client/src/images/videobtn.png" did not exist on "529e50deaafce1c14d1d579527e9ce3e2ff56344"
Commit a5f0af34 authored by kusang96's avatar kusang96
Browse files

Merge branch 'ourMaster' of... 

Merge branch 'ourMaster' of https://compmath.korea.ac.kr/gitlab/research/shopping-mall into ourMaster
parents 30e66da0 8f4248c2
Show whitespace changes
Inline Side-by-side
.gitignore 0 → 100644
View file @ a5f0af34
node_modules
\ No newline at end of file
client/.gitignore
View file @ a5f0af34
......@@ -22,4 +22,7 @@ npm-debug.log*
yarn-debug.log*
yarn-error.log*
package-lock.json
.eslintcache
.yarn.lock
client/package.json
View file @ a5f0af34
......@@ -9,6 +9,7 @@
"bootstrap": "^4.5.3",
"react": "^17.0.1",
"react-bootstrap": "^1.4.0",
"react-daum-postcode": "^2.0.2",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
......
client/src/App.js
View file @ a5f0af34
import logo from './logo.svg';
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() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
const [user,setUser]=useState(null);
const authenticated =user !=null;
const login =({id, password}) => setUser(signIn({id,password}));
const logout=()=>setUser(null);
}
export default App;
client/src/Auth.js 0 → 100644
View file @ a5f0af34
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 @ a5f0af34
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 @ a5f0af34
import React, { useState, useEffect, useRef } from 'react';
import MainNav from '../Components/MainNav';
import SubNav from '../Components/SubNav';
function Login() {
import { Link, Redirect } from 'react-router-dom';
import Nav1 from '../Components/MainNav';
import Nav2 from '../Components/SubNav';
import { Form, Col, Container, Button, Row } from 'react-bootstrap';
function Login(){
const [validated,setValidated]=useState(false);
const handleSubmit=(e)=>{
const form =e.currentTarget;
console.log(form)
if(form.checkValidity() === false){
e.preventDefault();
e.stopPropagation();
}
setValidated(true);
}
return (
<div>
<MainNav />
<SubNav />
<Nav1 />
<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 noValidate validated={validated} onSubmit={handleSubmit} className="p-5">
<Form.Group controlId="formBasicId">
<Form.Row>
<Col sm={4} xs={6} as={Form.Label} for="id"> 아이디</Col>
<Col sm={8} xs={12} as={Form.Control}
required
type="text"
id="id"
placeholder="ID"
style={{ width: '160px' }}>
</Col>
<Form.Control.Feedback className="text-center" type="invalid"> 아이디를 입력하세요.</Form.Control.Feedback>
</Form.Row>
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Row>
<Col sm={4} xs={6} as={Form.Label} for="password">비밀번호</Col>
<Col sm={8} xs={12} as={Form.Control}
type="password"
id="password"
placeholder="Password"
style={{ width: '160px' }}
required />
<Form.Control.Feedback className="text-center" type="invalid">
비밀번호를 입력하세요.
</Form.Control.Feedback>
</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>
</Form>
</Col>
</Row>
</Container>
</div>
)
}
......
client/src/Pages/LogoutButton.js 0 → 100644
View file @ a5f0af34
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 @ a5f0af34
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';
function Payment() {
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() {
if (paymentWay.length !== 0) {
setPaymentWay([])
}
......@@ -40,7 +87,6 @@ function Payment() {
function handleClick2() {
if (paymentWay.length !== 0) {
setPaymentWay([])
// paymentWay=[]
}
}
......@@ -49,9 +95,9 @@ function Payment() {
<MainNav />
<SubNav />
<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>
<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>
<Form.Group controlId="formBasicName">
<Form.Label>이름</Form.Label>
......@@ -70,11 +116,18 @@ function Payment() {
</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>
<Col>
<Button className="my-3" style={{ background: "#91877F", borderColor: '#91877F' }} onClick={postClick}>우편번호</Button>
</Col>
</Row>
{post}
</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 >
<Row>
<Col className="text-center align-self-center">
......@@ -90,10 +143,10 @@ function Payment() {
<Card.Title className="font-weight-bold mt-3">제품명</Card.Title>
<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 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>
</Card.Body>
</Col>
......@@ -101,7 +154,7 @@ function Payment() {
</Card>
</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' }}>
<li>
<span className="text-secondary">총 상품금액</span>
......@@ -118,7 +171,7 @@ function Payment() {
</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">
<Button variant="success" onClick={handleClick} >무통장입금</Button>
<Button variant="warning" style={{ color: '#ffffff' }} onClick={handleClick2}>카카오페이</Button>
......
client/src/Pages/ProductsRegist.js
View file @ a5f0af34
import React, { useState, useEffect, useRef } from 'react';
import MainNav from '../Components/MainNav';
import SubNav from '../Components/SubNav';
import Nav1 from '../Components/MainNav';
import Nav2 from '../Components/SubNav';
import { Row, Col, Button, Form, Container } from 'react-bootstrap';
function ProductsRegist() {
function ProductsRegist() {
return (
<div>
<MainNav />
<SubNav />
<Nav1 />
<Nav2 />
<Container>
<Row className="justify-content-md-center">
<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.Group controlId="productNameform">
<Form.Label>상품명</Form.Label>
<Form.Control type="text" placeholder="상품명" />
</Form.Group>
<Form.Group controlId="productAmountform">
<Form.Label>수량</Form.Label>
<Form.Control type="text" placeholder="숫자만 입력해주세요" />
</Form.Group>
<Form.Group controlId="productPriceform">
<Form.Label>가격</Form.Label>
<Form.Control type="text" placeholder="숫자만 입력해주세요" />
</Form.Group>
<Form.Group>
<Form.Label>분류</Form.Label>
<Row>
<Col md={6}>
<Form.Control as="select" placeholder="상위분류">
<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>
</Col>
</Row>
</Form.Group>
<Form.Group controlId="productDescriptionform">
<Form.Label>상품설명</Form.Label>
<Form.Control as="textarea" rows={3} placeholder="상품을 설명해주세요" />
</Form.Group>
<Form.Group>
<Form.Label>대표이미지</Form.Label>
<Form.File id="productImageform" />
</Form.Group>
<Button className="float-right" variant="primary" type="submit" style={{background:'#91877F', borderColor:'#91877F'}}>등록</Button>
</Form>
</Col>
</Row>
</Container>
</div>
)
}
......
client/src/Pages/ShoppingCart.js
View file @ a5f0af34
......@@ -11,9 +11,9 @@ function ShoppingCart() {
<MainNav />
<SubNav />
<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>
<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>
......@@ -22,15 +22,15 @@ function ShoppingCart() {
</Col>
<Col md={6}>
<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" />
<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>
<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>
......@@ -44,22 +44,22 @@ function ShoppingCart() {
</Col>
<Col>
<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" />
<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 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>
</Card.Body>
</Col>
</Row>
</Card>
</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' }}>
<li>
<span className="text-secondary">총 상품금액</span>
......@@ -75,7 +75,7 @@ function ShoppingCart() {
</div>
</div>
<div className="text-center">
<Button className="px-5">결제하기</Button>
<Button className="px-5" style={{ background: "#91877F", borderColor: '#91877F' }} href="/payment">결제하기</Button>
</div>
</Container>
......
client/src/Pages/Signup.js
View file @ a5f0af34
import React, { useState, useEffect, useRef } from 'react';
import { Redirect } from 'react-router-dom';
import MainNav from '../Components/MainNav';
import SubNav from '../Components/SubNav';
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";
function Signup() {
const [address,setAddress] =useState("")
const handleComplete = (data) => {
let fullAddress = data.address;
let extraAddress = "";
return (
<div class="form-container">
<MainNav />
<SubNav />
<form id="form" class="form">
<h1>회원가입</h1>
<div class="form-control">
<label for="id">아이디</label>
<input type="text" id="id" placeholder="아이디를 입력하세요"></input>
console.log(data)
<label for="name">본명</label>
<input type="text" id="name" placeholder="본명을 입력하세요"></input>
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});
<label for="password">비밀번호</label>
<input type="password" id="password" placeholder="비밀번호를 입력하세요"></input>
console.log(fullAddress);
}
<label for="password2">비밀번호 확인</label>
<input type="password" id="password2" placeholder="비밀번호를 한번 더 입력하세요"></input>
const Postcode = () => {
<label for="tel">휴대폰 번호</label>
<input type="text" id="tel" placeholder="휴대폰 번호를 입력하세요"></input>
<label for="add">주소</label>
</div>
</form>
return (
<DaumPostcode
onComplete={handleComplete}
/>
);
}
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;
console.log(form)
if (form.checkValidity() === false) {
e.preventDefault();
e.stopPropagation();
}
setValidated(true);
}
return (
<div>
<Nav1 />
<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 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>
</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>
-
<Form.Control required type="text" id="number2" size="sm" maxlength="1" className="mx-sm-3" style={{ width: '25px' }}></Form.Control>
******
<Form.Control.Feedback type="invalid">주민등록번호를 입력하세요.</Form.Control.Feedback>
</Col>
</Form.Row>
</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>
</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"> 비밀번호를 입력하세요.
</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"> 비밀번호를 한번 더 입력하세요.
</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>
</Form.Row>
</Form.Group>
<Button style={{ background: '#91877F', borderColor: '#91877F' }} type="submit" block>Sign Up</Button>
</Form>
</Col>
</Row>
</Container>
</div>
)
}
......
server/package.json
View file @ a5f0af34
......@@ -12,6 +12,9 @@
"license": "ISC",
"dependencies": {
"express": "^4.17.1",
"mongoose": "^5.11.9",
"nodemon": "^2.0.6",
"validator": "^13.5.2",
"multer": "^1.4.2"
}
}
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