Skip to content

GitLab

"vscode:/vscode.git/clone" did not exist on "e15228f3e9899a4c3aefd91c354fa0e61c4effbd"
Commit 5b9ea71f authored by Kim, Subin's avatar Kim, Subin
Browse files

Nav&Pagination&AdminPage

parent e8766404
Expand all Hide whitespace changes
Inline Side-by-side
client/.eslintcache
View file @ 5b9ea71f
This diff is collapsed.
client/public/index.html
View file @ 5b9ea71f
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React App</title> <title>KU#</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
......
client/src/Components/MainNav.js
View file @ 5b9ea71f
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import { Navbar, Nav } from 'react-bootstrap'; import { Navbar, Nav } from 'react-bootstrap';
import logo from '../../public/img/footprint.ico'; import logo from '../footprint.ico';
import cart from '../cart.svg'; import cart from '../cart.svg';
import option from '../option.svg'; import option from '../option.svg';
function MainNav() { function MainNav() {
function handleClick() {
alert('로그아웃이 완료되었습니다.')
}
return ( return (
<Navbar bg="dark" variant="dark"> <Navbar fixed="top" bg="dark" variant="dark" style={{position: "sticky"}}>
<Navbar.Brand href="/home"> <Navbar.Brand href="/home">
<img src={logo} width="30" height="30" /> <img src={logo} width="30" height="30" />
{' '}KU# {' '}KU#
...@@ -18,7 +21,7 @@ function MainNav() { ...@@ -18,7 +21,7 @@ function MainNav() {
<Nav.Link href="/shoppingcart"> <Nav.Link href="/shoppingcart">
<img src={cart} width="30" height="30" /> <img src={cart} width="30" height="30" />
</Nav.Link> </Nav.Link>
<Nav.Link onClick={() => { alert('로그아웃이 완료되었습니다.') }}>Logout</Nav.Link> <Nav.Link onClick={() => handleClick()}>Logout</Nav.Link>
<Nav.Link href="/admin/:id"> <Nav.Link href="/admin/:id">
<img src={option} width="30" height="30" /> <img src={option} width="30" height="30" />
</Nav.Link> </Nav.Link>
......
client/src/Components/Pagination.js 0 → 100644
View file @ 5b9ea71f
import React, { useState, useEffect, useRef } from 'react';
import { Pagination } from 'react-bootstrap';
function pagination() {
let active = 1;
let items = [];
for (let number = 1; number <= 5; number++) {
items.push(
<Pagination.Item key={number} active={number === active}>
{number}
</Pagination.Item>,
);
}
return (
<Pagination className="justify-content-center mt-5">{items}</Pagination>
)
}
export default pagination
\ No newline at end of file
client/src/Components/SubNav.js
View file @ 5b9ea71f
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import { Navbar, Nav } from 'react-bootstrap'; import { Redirect } from 'react-router-dom';
import { Nav, NavDropdown } from 'react-bootstrap';
function SubNav() { function SubNav() {
function handleMouseEnter(e) { const [toggle, setToggle] = useState({ "dress": false, "outer": false, "top": false, "pants": false, "skirt": false, "training": false, "shoes": false });
console.log(e.target)
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} />
} }
return ( return (
<Nav> <Nav fixed="top" className="flex-nowrap">
<Nav.Item eventKey="1"> <NavDropdown title="DRESS" onMouseEnter={() => handleMouseEnter("dress")} onMouseLeave={() => handleMouseLeave("dress")} show={toggle.dress} toggle={() => handleToggle("dress")} onClick={() => handleClick("/dress")}>
<Nav.Link href="/dress">DRESS</Nav.Link> <NavDropdown.Item href="/dress/long">LONG DRESS</NavDropdown.Item>
</Nav.Item> <NavDropdown.Item href="/dress/short">SHORT DRESS</NavDropdown.Item>
<Nav.Item eventKey="2"> <NavDropdown.Item href="/dress/knit">KNIT DRESS</NavDropdown.Item>
<Nav.Link href="/outer">OUTER</Nav.Link> <NavDropdown.Item href="/dress/shirt">SHIRT DRESS</NavDropdown.Item>
</Nav.Item> <NavDropdown.Item href="/dress/pattern">PATTERN DRESS</NavDropdown.Item>
<Nav.Item eventKey="3"> <NavDropdown.Item href="/dress/bustier">BUSTIER DRESS</NavDropdown.Item>
<Nav.Link href="/top">TOP</Nav.Link> <NavDropdown.Item href="/dress/two-piece">TWO-PIECE DRESS</NavDropdown.Item>
</Nav.Item> </NavDropdown>
<Nav.Item eventKey="4"> <NavDropdown title="OUTER" onMouseEnter={() => handleMouseEnter("outer")} onMouseLeave={() => handleMouseLeave("outer")} show={toggle.outer} toggle={() => handleToggle("outer")} onClick={() => handleClick("/outer")}>
<Nav.Link href="/bottom">BOTTOM</Nav.Link> <NavDropdown.Item href="/outer/padded-jacket">PADDED JACKET</NavDropdown.Item>
</Nav.Item> <NavDropdown.Item href="/outer/jacket">JACKET</NavDropdown.Item>
<Nav.Item eventKey="5"> <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.Link href="/training">TRAINING</Nav.Link>
</Nav.Item> </Nav.Item>
<Nav.Item eventKey="6"> <NavDropdown title="SHOES" onMouseEnter={() => handleMouseEnter("shoes")} onMouseLeave={() => handleMouseLeave("shoes")} show={toggle.shoes} toggle={() => handleToggle("shoes")} onClick={() => handleClick("/shoes")}>
<Nav.Link href="/inner">INNER</Nav.Link> <NavDropdown.Item href="/skirt/sneakers_slip-on">SNEAKERS / SLIP-ON</NavDropdown.Item>
</Nav.Item> <NavDropdown.Item href="/skirt/flat_loafer">FLAT / LOAFER</NavDropdown.Item>
<Nav.Item eventKey="7"> <NavDropdown.Item href="/skirt/heel_pump">HEEL / PUMP</NavDropdown.Item>
<Nav.Link href="/shoes">SHOES</Nav.Link> <NavDropdown.Item href="/skirt/boots">BOOTS</NavDropdown.Item>
</Nav.Item> <NavDropdown.Item href="/skirt/sandal_slipper">SANDAL / SLIPPER</NavDropdown.Item>
</NavDropdown>
</Nav> </Nav>
) )
} }
......
client/src/Pages/Admin.js
View file @ 5b9ea71f
...@@ -2,6 +2,9 @@ import React, { useState, useEffect, useRef } from 'react'; ...@@ -2,6 +2,9 @@ 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 MainNav from '../Components/MainNav';
import SubNav from '../Components/SubNav'; import SubNav from '../Components/SubNav';
import Pagination from '../Components/Pagination';
import search from '../search.svg';
import { Row, Col, Form, FormControl, Button, CardColumns, Card } from 'react-bootstrap';
function Admin() { function Admin() {
...@@ -9,7 +12,130 @@ function Admin() { ...@@ -9,7 +12,130 @@ function Admin() {
<div> <div>
<MainNav /> <MainNav />
<SubNav /> <SubNav />
<Row className="justify-content-end mt-5 mr-3">
<Col md={4} sm={5} xs={8} as={Form} inline className="justify-content-end">
<FormControl type="text" placeholder="Search" className="mr-1" />
<Button bg="dark" variant="dark" type="submit">Search
{/* <img src={search} className="text-light"/> */}
</Button>
</Col>
<Col sm={2} xs={3} as={Button} variant="dark" type="button" href="/:id/productsregist">상품 등록</Col>
</Row>
<Row className="mt-5 m-auto justify-content-start">
<Card className="m-4" style={{width: "18rem"}}>
<Card.Img variant="top" src="/img/Jimin_(2).jpg" />
<Card.Body>
<Card.Title>케이시앵글부트</Card.Title>
<Card.Text>
재고:
구매자 수:
</Card.Text>
</Card.Body>
</Card>
<Card className="m-4" style={{width: "18rem"}}>
<Card.Img variant="top" src="" />
<Card.Body>
<Card.Title>메리제인플랫(S)</Card.Title>
<Card.Text>
재고:
구매자 수:
</Card.Text>
</Card.Body>
</Card>
<Card className="m-4" style={{width: "18rem"}}>
<Card.Img variant="top" src="" />
<Card.Body>
<Card.Title>케이시앵글부트</Card.Title>
<Card.Text>
재고:
구매자 수:
</Card.Text>
</Card.Body>
</Card>
<Card className="m-4" style={{width: "18rem"}}>
<Card.Img variant="top" src="" />
<Card.Body>
<Card.Title>케이시앵글부트</Card.Title>
<Card.Text>
재고:
구매자 수:
</Card.Text>
</Card.Body>
</Card>
<Card className="m-4" style={{width: "18rem"}}>
<Card.Img variant="top" src="" />
<Card.Body>
<Card.Title>케이시앵글부트</Card.Title>
<Card.Text>
재고:
구매자 수:
</Card.Text>
</Card.Body>
</Card>
<Card className="m-4" style={{width: "18rem"}}>
<Card.Img variant="top" src="" />
<Card.Body>
<Card.Title>케이시앵글부트</Card.Title>
<Card.Text>
재고:
구매자 수:
</Card.Text>
</Card.Body>
</Card>
<Card className="m-4" style={{width: "18rem"}}>
<Card.Img variant="top" src="" />
<Card.Body>
<Card.Title>케이시앵글부트</Card.Title>
<Card.Text>
재고:
구매자 수:
</Card.Text>
</Card.Body>
</Card>
<Card className="m-4" style={{width: "18rem"}}>
<Card.Img variant="top" src="" />
<Card.Body>
<Card.Title>케이시앵글부트</Card.Title>
<Card.Text>
재고:
구매자 수:
</Card.Text>
</Card.Body>
</Card>
<Card className="m-4" style={{width: "18rem"}}>
<Card.Img variant="top" src="" />
<Card.Body>
<Card.Title>케이시앵글부트</Card.Title>
<Card.Text>
재고:
구매자 수:
</Card.Text>
</Card.Body>
</Card>
<Card className="m-4" style={{width: "18rem"}}>
<Card.Img variant="top" src="" />
<Card.Body>
<Card.Title>케이시앵글부트</Card.Title>
<Card.Text>
재고:
구매자 수:
</Card.Text>
</Card.Body>
</Card>
<Card className="m-4" style={{width: "18rem"}}>
<Card.Img variant="top" src="" />
<Card.Body>
<Card.Title>케이시앵글부트</Card.Title>
<Card.Text>
재고:
구매자 수:
</Card.Text>
</Card.Body>
</Card>
</Row>
<Pagination />
</div> </div>
) )
} }
......
client/src/index.js
View file @ 5b9ea71f
...@@ -17,6 +17,7 @@ ReactDOM.render( ...@@ -17,6 +17,7 @@ ReactDOM.render(
<Route exact path="/" component={Home} /> <Route exact path="/" component={Home} />
<Route path="/login" component={Login} /> <Route path="/login" component={Login} />
<Route path="/signup" component={Signup} /> <Route path="/signup" component={Signup} />
<Route path="/admin" component={Admin} />
<Route path="/shoppingcart" component={ShoppingCart} /> <Route path="/shoppingcart" component={ShoppingCart} />
<Redirect path="/" to="/" /> <Redirect path="/" to="/" />
</Switch> </Switch>
......
client/src/search.svg 0 → 100644
View file @ 5b9ea71f
<?xml version="1.0" ?><svg enable-background="new 0 0 32 32" id="Glyph" version="1.1" viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M27.414,24.586l-5.077-5.077C23.386,17.928,24,16.035,24,14c0-5.514-4.486-10-10-10S4,8.486,4,14 s4.486,10,10,10c2.035,0,3.928-0.614,5.509-1.663l5.077,5.077c0.78,0.781,2.048,0.781,2.828,0 C28.195,26.633,28.195,25.367,27.414,24.586z M7,14c0-3.86,3.14-7,7-7s7,3.14,7,7s-3.14,7-7,7S7,17.86,7,14z" id="XMLID_223_"/></svg>
\ No newline at end of file
server/.gitignore 0 → 100644
View file @ 5b9ea71f
node_modules
package-lock.json
\ No newline at end of file
server/app.js
View file @ 5b9ea71f
// const createError = require('http-errors'); // const createError = require('http-errors');
const express = require('express'); const express = require('express');
const path = require('path'); const path = require('path');
const cookieParser = require('cookie-parser'); // const cookieParser = require('cookie-parser');
const logger = require('morgan'); const logger = require('morgan');
const port = 3030; const port = 3030;
const indexRouter = require('./routes/index'); // const indexRouter = require('./routes/index');
const app = express(); const app = express();
connect(); // connect();
// view engine setup // view engine setup
// app.set('views', path.join(__dirname, 'views')); // app.set('views', path.join(__dirname, 'views'));
...@@ -20,7 +20,7 @@ app.use(express.urlencoded({ extended: false })); ...@@ -20,7 +20,7 @@ app.use(express.urlencoded({ extended: false }));
// app.use(cookieParser(process.env.JWT_SECRET)); // app.use(cookieParser(process.env.JWT_SECRET));
app.use(express.static(path.join(__dirname, 'public'))); app.use(express.static(path.join(__dirname, 'public')));
app.use('/', indexRouter); // app.use('/', indexRouter);
app.listen(port, () => console.log(port)); app.listen(port, () => console.log(port));
...@@ -33,7 +33,7 @@ app.use(function(req, res, next) { ...@@ -33,7 +33,7 @@ app.use(function(req, res, next) {
app.use(function(err, req, res, next) { app.use(function(err, req, res, next) {
// set locals, only providing error in development // set locals, only providing error in development
res.locals.message = err.message; res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {}; // res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page // render the error page
res.status(err.status || 500); res.status(err.status || 500);
......
server/package.json 0 → 100644
View file @ 5b9ea71f
{
"name": "server",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.17.1"
}
}
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