Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
students
shopping-mall
Commits
8be66ea0
Commit
8be66ea0
authored
Jan 15, 2021
by
Jiwon Yoon
Browse files
Merge branch 'ourMaster' into jiwon
parents
16cfb78c
0912b817
Changes
9
Show whitespace changes
Inline
Side-by-side
client/src/App.js
View file @
8be66ea0
...
...
@@ -13,11 +13,9 @@ import Account from './Pages/Account';
import
MainNav
from
'
./Components/MainNav
'
;
import
SubNav
from
'
./Components/SubNav
'
;
function
App
()
{
return
(
<
div
>
<
Router
>
<
MainNav
/>
<
SubNav
/>
...
...
@@ -25,8 +23,8 @@ function App() {
<
Route
exact
path
=
"
/
"
component
=
{
Home
}
/
>
<
Route
path
=
"
/login
"
component
=
{
Login
}
/
>
<
Route
path
=
"
/signup
"
component
=
{
Signup
}
/
>
<
Route
path
=
"
/product
"
component
=
{
Product
}
/
>
<
Route
path
=
"
/
product/:product
"
component
=
{
ProductsList
}
/
>
<
Route
path
=
"
/product
s/:productId
"
component
=
{
Product
}
/
>
<
Route
path
=
"
/
categories/:main
"
component
=
{
ProductsList
}
/
>
<
Route
path
=
"
/admin
"
component
=
{
Admin
}
/
>
<
Route
path
=
"
/regist
"
component
=
{
ProductRegist
}
/
>
<
Route
path
=
"
/shoppingcart
"
component
=
{
ShoppingCart
}
/
>
...
...
@@ -36,10 +34,7 @@ function App() {
<
Redirect
path
=
"
/
"
to
=
"
/
"
/>
<
/Switch
>
<
/Router
>
<
/div
>
)
}
export
default
App
;
\ No newline at end of file
client/src/Components/ListCard.js
View file @
8be66ea0
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
{
Card
}
from
'
react-bootstrap
'
import
{
Card
}
from
'
react-bootstrap
'
;
function
ListCard
(
props
)
{
function
ListCard
(
{
id
,
name
,
price
,
main_img
}
)
{
return
(
<>
{
props
.
productlist
.
map
((
e
)
=>
(
<
Card
className
=
"
mt-5
"
style
=
{{
width
:
"
18rem
"
,
margin
:
"
auto
"
}}
>
<
Card
.
Img
variant
=
"
top
"
src
=
{
e
.
main_imgUrl
&&
`/images/
${
e
.
main_imgUrl
}
`
}
style
=
{{
objectFit
:
"
contain
"
,
height
:
"
22rem
"
}}
/
>
<
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
>
{
e
.
pro_
name
}
<
/Card.Title
>
<
Card
.
Text
>
{
e
.
price
}
<
/Card.Text
>
<
Card
.
Title
style
=
{{
whiteSpace
:
"
nowrap
"
,
overflow
:
"
hidden
"
,
textOverflow
:
"
ellipsis
"
}}
>
{
name
}
<
/Card.Title
>
<
Card
.
Text
>
{
price
}
원
<
/Card.Text
>
<
/Card.Body
>
<
/Card
>
))}
<
/
>
)
}
...
...
client/src/Components/MainNav.js
View file @
8be66ea0
import
React
from
'
react
'
;
import
{
Navbar
,
Nav
}
from
'
react-bootstrap
'
;
import
{
handleLogout
,
isAuthenticated
}
from
'
../utils/auth
'
import
{
handleLogout
,
isAuthenticated
}
from
'
../utils/auth
'
;
function
MainNav
()
{
const
user
=
isAuthenticated
()
...
...
@@ -8,7 +8,7 @@ function MainNav() {
return
(
<
Navbar
sticky
=
"
top
"
style
=
{{
background
:
"
#CDC5C2
"
}}
>
<
Navbar
.
Brand
href
=
"
/home
"
className
=
"
text-light
"
>
<
img
alt
=
"
로고
"
src
=
"
icon/footprint.svg
"
width
=
"
24
"
height
=
"
24
"
/>
<
img
alt
=
"
로고
"
src
=
"
/
icon/footprint.svg
"
width
=
"
24
"
height
=
"
24
"
/>
{
'
'
}
KU
#
<
/Navbar.Brand
>
<
Nav
>
...
...
@@ -20,10 +20,10 @@ function MainNav() {
<
/
>
)}
<
Nav
.
Link
href
=
"
/shoppingcart
"
>
<
img
alt
=
"
카트
"
src
=
"
icon/cart.svg
"
width
=
"
30
"
height
=
"
30
"
/>
<
img
alt
=
"
카트
"
src
=
"
/
icon/cart.svg
"
width
=
"
30
"
height
=
"
30
"
/>
<
/Nav.Link
>
<
Nav
.
Link
href
=
"
/admin
"
>
<
img
alt
=
"
관리자
"
src
=
"
icon/option.svg
"
width
=
"
30
"
height
=
"
30
"
/>
<
img
alt
=
"
관리자
"
src
=
"
/
icon/option.svg
"
width
=
"
30
"
height
=
"
30
"
/>
<
/Nav.Link
>
<
/Nav
>
<
/Navbar
>
...
...
client/src/Components/SubNav.js
View file @
8be66ea0
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
{
Redirect
}
from
'
react-router-dom
'
;
import
{
Navbar
,
Nav
,
NavDropdown
}
from
'
react-bootstrap
'
;
import
{
Link
}
from
'
react-router-dom
'
;
import
{
Navbar
,
Nav
}
from
'
react-bootstrap
'
;
import
axios
from
'
axios
'
;
import
catchErrors
from
'
../utils/catchErrors
'
;
...
...
@@ -16,7 +16,7 @@ function SubNav() {
Object
.
keys
(
response
.
data
[
0
]).
forEach
((
ele
)
=>
{
const
url
=
ele
.
toLowerCase
()
list
.
push
(
<
Nav
.
Link
href
=
{
`/product
/
${
url
}
`
}
>
{
ele
}
<
/Nav.Link
>
<
Nav
.
Link
as
=
{
Link
}
to
=
{
`/categories
/
${
url
}
`
}
>
{
ele
}
<
/Nav.Link
>
)
})
setCategorysDiv
(
list
)
...
...
client/src/Pages/Home.js
View file @
8be66ea0
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
>
...
...
@@ -12,43 +29,44 @@ function Home() {
<
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
=
"
icon/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
=
"
icon/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
=
"
icon/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
=
"
icon/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
=
"
icon/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
=
"
icon/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
>
...
...
client/src/Pages/Product.js
View file @
8be66ea0
...
...
@@ -16,7 +16,7 @@ const INIT_PRODUCT = {
}
const
preCart
=
[]
function
Product
()
{
function
Product
(
{
match
,
location
}
)
{
const
[
product
,
setProduct
]
=
useState
(
INIT_PRODUCT
)
const
[
cart
,
setCart
]
=
useState
(
INIT_PRODUCT
)
const
[
error
,
setError
]
=
useState
(
''
)
...
...
@@ -63,7 +63,6 @@ function Product() {
}
function
handleCreate
()
{
console
.
log
(
"
실행
"
,
"
cart=
"
,
product
)
// if (product !== undefined) {
// if (product.colors !== "" && product.sizes !== "") {
// cart.push(
...
...
@@ -104,9 +103,13 @@ function Product() {
}
}
// useEffect(() => {
// handleCreate()
// }, [product])
return
(
<
div
>
{
console
.
log
(
car
t
)}
{
console
.
log
(
"
실행
"
,
"
product=
"
,
produc
t
)}
<
style
type
=
"
text/css
"
>
{
`
.btn {
...
...
client/src/Pages/ProductRegist.js
View file @
8be66ea0
...
...
@@ -99,7 +99,7 @@ function ProductsRegist() {
product
[
"
sizes
"
]
=
sizes
const
formData
=
new
FormData
();
for
(
let
key
in
product
)
{
if
(
key
===
"
main_im
gUrl
"
||
key
===
"
detail_im
gUrl
"
)
{
if
(
key
===
"
main_im
age
"
||
key
===
"
detail_im
age
"
)
{
console
.
log
(
product
[
key
][
0
])
formData
.
append
(
key
,
product
[
key
][
0
])
}
else
{
...
...
client/src/Pages/ProductsList.js
View file @
8be66ea0
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
Pagination
from
'
../Components/Pagination
'
;
import
{
Container
,
Row
,
Col
,
Form
,
FormControl
,
Button
,
Card
,
Dropdown
}
from
'
react-bootstrap
'
;
import
{
Link
}
from
'
react-router-dom
'
;
import
ListCard
from
'
../Components/ListCard
'
;
import
Pagination
from
'
../Components/Pagination
'
;
import
axios
from
'
axios
'
;
import
catchError
from
'
../utils/catchErrors
'
import
{
isAuthenticated
}
from
'
../utils/auth
'
import
catchError
from
'
../utils/catchErrors
'
;
import
{
isAuthenticated
}
from
'
../utils/auth
'
;
import
{
Container
,
Row
,
Col
,
Form
,
FormControl
,
Button
,
Dropdown
}
from
'
react-bootstrap
'
;
function
ProductsList
()
{
function
ProductsList
({
match
})
{
const
[
mainCategory
,
setMainCategory
]
=
useState
(
''
)
const
[
sub
,
setSub
]
=
useState
([
'
PADDED JACKET
'
,
'
JACKET
'
,
'
JUMPER
'
,
'
COAT
'
,
'
FLEECE
'
,
'
CARDIGAN / VEST
'
])
const
[
productlist
,
setProductlist
]
=
useState
([])
const
[
error
,
setError
]
=
useState
(
''
)
const
[
category
,
setCategory
]
=
useState
(
'
OUTER
'
)
const
user
=
isAuthenticated
()
//
const user=isAuthenticated()
useEffect
(()
=>
{
getProductlist
(
user
)
},
[
user
])
setMainCategory
(
match
.
params
.
main
.
toUpperCase
())
},
[
match
.
params
.
main
])
useEffect
(()
=>
{
getProductlist
()
},
[
mainCategory
])
// async function getProfile(user){
// console.log(user)
...
...
@@ -28,14 +33,28 @@ function ProductsList() {
// }
// }
function
handleSearch
()
{
}
async
function
handleClick
(
subCategory
)
{
try
{
const
response
=
await
axios
.
get
(
`/api/product/getproduct/
${
subCategory
}
`
)
console
.
log
(
"
response.data=
"
,
response
.
data
)
setProductlist
(
response
.
data
)
}
catch
(
error
)
{
catchError
(
error
,
setError
)
}
}
function
handleSubmit
(
e
)
{
e
.
preventDefault
()
}
async
function
getProductlist
()
{
try
{
const
response
=
await
axios
.
get
(
`/api/product/getproduct/
${
c
ategory
}
`
)
console
.
log
(
response
.
data
)
const
response
=
await
axios
.
get
(
`/api/product/getproduct/
${
mainC
ategory
}
`
)
console
.
log
(
"
response.data=
"
,
response
.
data
)
setProductlist
(
response
.
data
)
}
catch
(
error
)
{
catchError
(
error
,
setError
)
...
...
@@ -44,9 +63,13 @@ function ProductsList() {
return
(
<
div
>
<
style
type
=
"
text/css
"
>
{
`
a, a:hover, a:active {
color: #000;
text-decoration: none;
}
.btn {
background-color: #CDC5C2;
border-color: #CDC5C2;
...
...
@@ -61,14 +84,14 @@ function ProductsList() {
<
Container
>
<
Row
className
=
"
justify-content-center
"
>
<
Col
sm
=
{
10
}
xs
=
{
12
}
>
<
h1
style
=
{{
fontSize
:
"
3rem
"
}}
className
=
"
text-center
"
>
OUTER
<
/h1
>
<
h1
style
=
{{
fontSize
:
"
3rem
"
}}
className
=
"
text-center
"
>
{
mainCategory
}
<
/h1
>
<
div
className
=
"
text-center
"
>
{
sub
.
map
((
ele
)
=>
(
<
Button
className
=
"
m-1
"
>
{
ele
}
<
/Button
>
<
Button
className
=
"
m-1
"
onClick
=
{(
ele
)
=>
handleClick
(
ele
)}
>
{
ele
}
<
/Button
>
))}
<
/div
>
<
/Col
>
<
/Row
>
<
Row
className
=
"
justify-content-end mx-0 my-5
"
>
<
Form
as
=
{
Row
}
onSubmit
=
{
handleSubmit
}
className
=
"
justify-content-end mx-0
"
>
{
/*
<Form as={Row} onSubmit={handleSubmit} className="justify-content-end mx-0">
*/
}
<
Dropdown
>
<
Dropdown
.
Toggle
className
=
"
mx-2
"
>
정렬
<
/Dropdown.Toggle
>
<
Dropdown
.
Menu
>
...
...
@@ -78,16 +101,32 @@ function ProductsList() {
<
Dropdown
.
Item
>
높은가격
<
/Dropdown.Item
>
<
/Dropdown.Menu
>
<
/Dropdown
>
<
Form
as
=
{
Row
}
onSubmit
=
{
handleS
ubmit
}
className
=
"
justify-content-end mx-0
"
>
<
Form
as
=
{
Row
}
onSubmit
=
{
handleS
earch
}
className
=
"
justify-content-end mx-0
"
>
<
FormControl
type
=
"
text
"
placeholder
=
"
Search
"
style
=
{{
width
:
"
13rem
"
}}
/
>
<
Button
type
=
"
submit
"
className
=
"
search px-2
"
>
<
img
src
=
"
icon/search.svg
"
width
=
"
20
"
height
=
"
20
"
/>
<
img
src
=
"
/
icon/search.svg
"
width
=
"
20
"
height
=
"
20
"
/>
<
/Button
>
<
/Form
>
<
/Form
>
{
/*
</Form>
*/
}
<
/Row
>
<
Row
md
=
{
8
}
sm
=
{
12
}
className
=
"
justify-content-start m-2
"
>
<
ListCard
productlist
=
{
productlist
}
/
>
{
productlist
.
map
(
pro
=>
(
<
Link
to
=
{{
pathname
:
`/products/
${
pro
.
_id
}
`
,
state
:
{
id
:
pro
.
_id
,
name
:
pro
.
pro_name
,
price
:
pro
.
price
,
colors
:
pro
.
colors
,
sizes
:
pro
.
sizes
,
description
:
pro
.
description
,
main_img
:
pro
.
main_imgUrl
,
detail_imgs
:
pro
.
detail_imgUrls
}
}}
>
<
ListCard
id
=
{
pro
.
_id
}
name
=
{
pro
.
pro_name
}
price
=
{
pro
.
price
}
main_img
=
{
pro
.
main_imgUrl
}
/
>
<
/Link
>
))}
<
/Row
>
<
/Container
>
{
/* <Pagination postsPerPage={postsPerPage} totalPosts={posts.length} paginate={paginate} /> */
}
...
...
client/src/Pages/ShoppingCart.js
View file @
8be66ea0
...
...
@@ -6,8 +6,6 @@ import catchErrors from '../utils/catchErrors';
import
{
isAuthenticated
}
from
'
../utils/auth
'
import
CartCard
from
'
../Components/CartCard
'
;
function
ShoppingCart
()
{
const
[
num
,
setNum
]
=
useState
()
const
[
error
,
setError
]
=
useState
(
''
)
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment