Skip to content

GitLab

Commit 39c07bff authored by 박상호's avatar 박상호 🎼
Browse files

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

parents c66765f3 ccc8f484
Show whitespace changes
Inline Side-by-side
client/src/App.js
View file @ 39c07bff
......@@ -13,22 +13,18 @@ import Account from './Pages/Account';
import MainNav from './Components/MainNav';
import SubNav from './Components/SubNav';
function App() {
return (
<div>
<Router>
<MainNav />
<SubNav />
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/login" component={Login} />
<Route path="/signup" component={Signup} />
<Route path="/product" component={Product} />
<Route path="/productslist" component={ProductsList} />
<Route path="/product/:productId" component={Product} />
<Route path="/categories/:main" component={ProductsList} />
<Route path="/admin" component={Admin} />
<Route path="/regist" component={ProductRegist} />
<Route path="/shoppingcart" component={ShoppingCart} />
......@@ -38,10 +34,7 @@ function App() {
<Redirect path="/" to="/" />
</Switch>
</Router>
</div>
)
}
export default App;
\ No newline at end of file
client/src/Components/Card.js deleted 100644 → 0
View file @ c66765f3
import React, { useState, useEffect, useRef } from 'react';
function Card() {
return (
<div></div>
)
}
export default Card
\ No newline at end of file
client/src/Components/CartCard.js 0 → 100644
View file @ 39c07bff
import React from 'react'
import { Card, Button, Container, Row, Col } from 'react-bootstrap';
function CartCard(props) {
return (
<>
{props.cart.map((e) => (
<Card>
<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={e.productId.main_imgUrl && `/images/${e.productId.main_imgUrl}`} style={{ width: '20rem' }} />
</Col>
<Col md={6} className="p-2">
<Card.Body>
<input type="image" name={String(e.productId._id)} alt="삭제버튼" src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" className="float-right" onClick={props.deleteCart} />
<Card.Title className="font-weight-bold mt-3">{e.productId.pro_name}</Card.Title>
<Card.Text>가격: {e.productId.price}</Card.Text>
<Card.Text>옵션: {e.sizes}/{e.colors}</Card.Text>
<Card.Text>수량</Card.Text>
<div>
<input type="image" alt="마이너스" src="https://img.icons8.com/ios-glyphs/20/000000/minus-math.png" className="align-middle" onClick={props.minusNum} />
<input type="text" style={{ width: '30px' }} className="text-center align-middle mx-1" placeholder={e.count} value={e.count} readOnly></input>
<input type="image" alt="플러스" src="https://img.icons8.com/ios-glyphs/20/000000/plus-math.png" className="align-middle" onClick={props.plusNum} />
</div>
</Card.Body>
</Col>
</Row>
</Card>
))
}
</>
)
}
export default CartCard
client/src/Components/ListCard.js 0 → 100644
View file @ 39c07bff
import React, { useState, useEffect, useRef } from 'react';
import { Card } from 'react-bootstrap';
function ListCard({ id, name, price, main_img }) {
return (
<Card id={id} className="mt-5" style={{ width: "18rem", margin: "auto" }}>
<Card.Img variant="top" src={main_img && `/images/${main_img}`} style={{ objectFit: "contain", height: "22rem" }} />
<Card.Body>
<Card.Title style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{name}</Card.Title>
<Card.Text>{price} 원</Card.Text>
</Card.Body>
</Card>
)
}
export default ListCard
\ No newline at end of file
client/src/Components/MainNav.js
View file @ 39c07bff
import React from 'react';
import { Navbar, Nav } from 'react-bootstrap';
import logo from '../footprint.svg';
import cart from '../cart.svg';
import option from '../option.svg';
import { handleLogout, isAuthenticated } from '../utils/auth'
import { handleLogout, isAuthenticated } from '../utils/auth';
function MainNav() {
......@@ -12,7 +9,7 @@ function MainNav() {
return (
<Navbar sticky="top" style={{ background: "#CDC5C2" }}>
<Navbar.Brand href="/home" className="text-light">
<img alt="로고" src={logo} width="24" height="24" />
<img alt="로고" src="/icon/footprint.svg" width="24" height="24" />
{' '}KU#
</Navbar.Brand>
<Nav>
......@@ -26,10 +23,10 @@ function MainNav() {
</>
)}
<Nav.Link href="/shoppingcart">
<img alt="카트" src={cart} width="30" height="30" />
<img alt="카트" src="/icon/cart.svg" width="30" height="30" />
</Nav.Link>
<Nav.Link href="/admin">
<img alt="관리자" src={option} width="30" height="30" />
<img alt="관리자" src="/icon/option.svg" width="30" height="30" />
</Nav.Link>
</Nav>
</Navbar>
......
client/src/Components/PaymentCard.js 0 → 100644
View file @ 39c07bff
import React from 'react'
function PaymentCard() {
return (
<Card >
<Row className="mx-1">
<Col className="text-center">
<Card.Img className="img-fluid" variant="top" src="img/asd.jpg" style={{ width: '20rem' }} />
</Col>
<Col md={6} className="p-2">
<Card.Body>
<input type="image" alt="삭제버튼" 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>
<input type="image" alt="마이너스" 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" alt="플러스" src="https://img.icons8.com/ios-glyphs/20/000000/plus-math.png" className="align-middle" onClick={plusNum} />
</div>
</Card.Body>
</Col>
</Row>
</Card>
)
}
export default PaymentCard
client/src/Components/SubNav.js
View file @ 39c07bff
import React, { useState } from 'react';
import { Redirect } from 'react-router-dom';
import { Navbar, Nav, NavDropdown } from 'react-bootstrap';
import React, { useState, useEffect, useRef } from 'react';
import { Link } from 'react-router-dom';
import { Navbar, Nav } from 'react-bootstrap';
import axios from 'axios';
import catchErrors from '../utils/catchErrors';
function SubNav() {
const [toggle, setToggle] = useState({ "dress": false, "outer": false, "top": false, "pants": false, "skirt": false, "training": false, "shoes": false });
function handleMouseEnter(id) {
setToggle({ [id]: true })
}
function handleMouseLeave(id) {
setToggle({ [id]: false })
}
function handleToggle(id) {
setToggle({ [id]: !toggle[`${id}`] })
}
function handleClick(url) {
return <Redirect to={url} />
const [categoriesDiv, setCategoriesDiv] = useState([])
const [error, setError] = useState('')
useEffect(async () => {
try {
const response = await axios.get('/api/categories/main')
let list = []
Object.keys(response.data[0]).forEach((ele) => {
const url = ele.toLowerCase()
list.push(
<Nav.Link as={Link} to={`/categories/${url}`}>{ele}</Nav.Link>
)
})
setCategoriesDiv(list)
} catch (error) {
catchErrors(error, setError)
}
}, [])
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" }}>
<style type="text/css">
{`
.nav-link, .nav-link:hover, .nav-link:active {
color: #91877F;
}
.dropdown-toggle:after {
display: none;
}
.dropdown-menu {
background-color: #91877F;
}
.dropdown-item {
color: #f8f9fa;
}
.dropdown-item:focus, .dropdown-item:hover {
color: #91877F;
}
.dropdown-item:active {
background-color: #f8f9fa;
}
`}
</style>
<Nav>
<NavDropdown title="DRESS" onMouseEnter={() => handleMouseEnter("dress")} onMouseLeave={() => handleMouseLeave("dress")} show={toggle.dress} toggle={() => handleToggle("dress")} onClick={() => handleClick("/dress")}>
<NavDropdown.Item href="/dress/long">LONG DRESS</NavDropdown.Item>
<NavDropdown.Item href="/dress/short">SHORT DRESS</NavDropdown.Item>
<NavDropdown.Item href="/dress/knit">KNIT DRESS</NavDropdown.Item>
<NavDropdown.Item href="/dress/shirt">SHIRT DRESS</NavDropdown.Item>
<NavDropdown.Item href="/dress/pattern">PATTERN DRESS</NavDropdown.Item>
<NavDropdown.Item href="/dress/bustier">BUSTIER DRESS</NavDropdown.Item>
<NavDropdown.Item href="/dress/two-piece">TWO-PIECE DRESS</NavDropdown.Item>
</NavDropdown>
<NavDropdown title="OUTER" onMouseEnter={() => handleMouseEnter("outer")} onMouseLeave={() => handleMouseLeave("outer")} show={toggle.outer} toggle={() => handleToggle("outer")} onClick={() => handleClick("/outer")}>
<NavDropdown.Item href="/outer/padded-jacket">PADDED JACKET</NavDropdown.Item>
<NavDropdown.Item href="/outer/jacket">JACKET</NavDropdown.Item>
<NavDropdown.Item href="/outer/jumper">JUMPER</NavDropdown.Item>
<NavDropdown.Item href="/outer/coat">COAT</NavDropdown.Item>
<NavDropdown.Item href="/outer/fleece">FLEECE</NavDropdown.Item>
<NavDropdown.Item href="/outer/cardigan_vest">CARDIGAN / VEST</NavDropdown.Item>
</NavDropdown>
<NavDropdown title="TOP" onMouseEnter={() => handleMouseEnter("top")} onMouseLeave={() => handleMouseLeave("top")} show={toggle.top} toggle={() => handleToggle("top")} onClick={() => handleClick("/top")}>
<NavDropdown.Item href="/top/knit">KNIT</NavDropdown.Item>
<NavDropdown.Item href="/top/hoody">HOODY</NavDropdown.Item>
<NavDropdown.Item href="/top/blouse">BLOUSE</NavDropdown.Item>
<NavDropdown.Item href="/top/shirt">SHIRT</NavDropdown.Item>
<NavDropdown.Item href="/top/sweatshirt">SWEATSHIRT</NavDropdown.Item>
<NavDropdown.Item href="/top/long-sleeve-shirt">LONG SLEEVE SHIRT</NavDropdown.Item>
<NavDropdown.Item href="/top/short-sleeved-shirt_sleeveless-shirt">SHORT SLEEVE / SLEEVELESS SHIRT</NavDropdown.Item>
</NavDropdown>
<NavDropdown title="PANTS" onMouseEnter={() => handleMouseEnter("pants")} onMouseLeave={() => handleMouseLeave("pants")} show={toggle.pants} toggle={() => handleToggle("pants")} onClick={() => handleClick("/pants")}>
<NavDropdown.Item href="/pants/jeans">JEANS</NavDropdown.Item>
<NavDropdown.Item href="/pants/skinny-jeans">SKINNY JEANS</NavDropdown.Item>
<NavDropdown.Item href="/pants/banding">BANDING PANTS</NavDropdown.Item>
<NavDropdown.Item href="/pants/wide-fit">WIDE-FIT PANTS</NavDropdown.Item>
<NavDropdown.Item href="/pants/boot-cut">BOOT-CUT PANTS</NavDropdown.Item>
<NavDropdown.Item href="/pants/straight-fit">STRAIGHT-FIT PANTS</NavDropdown.Item>
<NavDropdown.Item href="/pants/wide-fit">WIDE-FIT PANTS</NavDropdown.Item>
<NavDropdown.Item href="/pants/shorts">SHORTS</NavDropdown.Item>
<NavDropdown.Item href="/pants/trousers">TROUSERS</NavDropdown.Item>
<NavDropdown.Item href="/pants/leggings">LEGGINGS</NavDropdown.Item>
<NavDropdown.Item href="/pants/jumpsuit_overalls">JUMPSUIT / OVERALLS</NavDropdown.Item>
</NavDropdown>
<NavDropdown title="SKIRT" onMouseEnter={() => handleMouseEnter("skirt")} onMouseLeave={() => handleMouseLeave("skirt")} show={toggle.skirt} toggle={() => handleToggle("skirt")} onClick={() => handleClick("/skirt")}>
<NavDropdown.Item href="/skirt/long">LONG SKIRT</NavDropdown.Item>
<NavDropdown.Item href="/skirt/midi">MIDI SKIRT</NavDropdown.Item>
<NavDropdown.Item href="/skirt/mini">MINI SKIRT</NavDropdown.Item>
</NavDropdown>
<Nav.Item>
<Nav.Link href="/training">TRAINING</Nav.Link>
</Nav.Item>
<NavDropdown title="SHOES" onMouseEnter={() => handleMouseEnter("shoes")} onMouseLeave={() => handleMouseLeave("shoes")} show={toggle.shoes} toggle={() => handleToggle("shoes")} onClick={() => handleClick("/shoes")}>
<NavDropdown.Item href="/skirt/sneakers_slip-on">SNEAKERS / SLIP-ON</NavDropdown.Item>
<NavDropdown.Item href="/skirt/flat_loafer">FLAT / LOAFER</NavDropdown.Item>
<NavDropdown.Item href="/skirt/heel_pump">HEEL / PUMP</NavDropdown.Item>
<NavDropdown.Item href="/skirt/boots">BOOTS</NavDropdown.Item>
<NavDropdown.Item href="/skirt/sandal_slipper">SANDAL / SLIPPER</NavDropdown.Item>
</NavDropdown>
<Nav style={{overflowX: "auto"}}>
{categoriesDiv.map(item => item)}
</Nav>
</Navbar>
)
......
client/src/Pages/Account.js
View file @ 39c07bff
import React, { useEffect, useState } from 'react'
import { Card, Image, Container, Row, Col, Table, Accordion, Button, Form, Modal, Alert } from 'react-bootstrap'
import { Link } from 'react-router-dom';
import person from '../person.svg';
import mypagetiger from '../mypagetiger.svg';
import axios from 'axios'
import catchErrors from '../utils/catchErrors';
import { isAuthenticated } from '../utils/auth';
......@@ -95,7 +93,6 @@ function Account() {
<Container className="px-3">
<h3 className="my-4 mx-3 font-weight-bold">My Page</h3>
<Card md={3} className="p-1 mb-4" style={{ background: '#F7F3F3' }}>
<Row className="p-2">
<Col md={5} className="d-flex align-content-center justify-content-center">
<Button variant="outline-light" onClick={handleShow}>
......@@ -103,7 +100,7 @@ function Account() {
<Image src={account.avatarUrl && `/image/${account.avatarUrl}`} className="img-thumbnail"
roundedCircle style={{ objectFit: "cover", width: "10rem", height: "10rem" }} />
) : (
<Image src={person} className="img-thumbnail"
<Image src="/icon/person.svg" className="img-thumbnail"
roundedCircle style={{ objectFit: "cover", width: "10rem", height: "10rem" }} />
)}
</Button>
......@@ -139,7 +136,7 @@ function Account() {
<Card.Body className="p-2 text-center">
<h4><Link to="/" class="link-warning">
<strong title="홈으로">
<Image src={mypagetiger} width={"30rem"} roundedCircle className="img-thumbnail" >
<Image src="/icon/mypagetiger.svg" width={"30rem"} roundedCircle className="img-thumbnail" >
</Image>KU#
</strong>
</Link>
......@@ -186,12 +183,8 @@ function Account() {
</Table>
</Row>
</Accordion>
</Container >
)
}
export default Account
\ No newline at end of file
client/src/Pages/Admin.js
View file @ 39c07bff
import React from 'react';
import Pagination from '../Components/Pagination';
import search from '../search.svg';
import { Row, Form, FormControl, Button, Card, Container } from 'react-bootstrap';
function Admin() {
......@@ -33,7 +32,7 @@ function Admin() {
<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" />
<img src="icon/search.svg" width="20" height="20" />
</Button>
<Button sm={2} xs={6} type="button" href="/regist" className="ml-1">상품 등록</Button>
</Row>
......
client/src/Pages/Home.js
View file @ 39c07bff
import React, { useState, useEffect, useRef } from 'react';
import ListCard from '../Components/ListCard';
import axios from 'axios';
import catchError from '../utils/catchErrors';
import { Card, Container, Row } from 'react-bootstrap';
function Home() {
const [productlist, setProductlist] = useState([])
const [error, setError] = useState('')
useEffect(() => {
getProductlist()
}, [])
async function getProductlist() {
try {
const response = await axios.get(`/api/product/getproduct`)
console.log(response.data)
setProductlist(response.data)
} catch (error) {
catchError(error, setError)
}
}
return (
<div>
<Container className="my-5">
<div className="my-4">
<h2 style={{ marginRight: "5rem", marginLeft: "3rem", marginBottom: "2rem" }}><u>Best</u></h2>
<Row className="justify-content-center mx-0">
<ListCard productlist={productlist} />
<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 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 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 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 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 my-2" style={{ width: '18rem' }}>
<Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
<Card.Img className="img-fluid" variant="top" src="/icon/asd.jpg" />
<Card.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text>
......@@ -57,42 +43,42 @@ function Home() {
<h2 style={{ marginRight: "5rem", marginLeft: "3rem", 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.Img className="img-fluid" variant="top" src="/icon/asd.jpg" />
<Card.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text>
</Card.Body>
</Card>
<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="/icon/asd.jpg" />
<Card.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text>
</Card.Body>
</Card>
<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="/icon/asd.jpg" />
<Card.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text>
</Card.Body>
</Card>
<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="/icon/asd.jpg" />
<Card.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text>
</Card.Body>
</Card>
<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="/icon/asd.jpg" />
<Card.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text>
</Card.Body>
</Card>
<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="/icon/asd.jpg" />
<Card.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text>
......
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