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
0912b817
Commit
0912b817
authored
Jan 15, 2021
by
kusang96
Browse files
Merge remote-tracking branch 'origin/jiwon' into kimpen
parents
be0a7340
cbd30cd3
Changes
20
Hide whitespace changes
Inline
Side-by-side
client/src/App.js
View file @
0912b817
...
...
@@ -13,33 +13,28 @@ import Account from './Pages/Account';
import
MainNav
from
'
./Components/MainNav
'
;
import
SubNav
from
'
./Components/SubNav
'
;
function
App
()
{
return
(
<
div
>
<
Router
>
<
Router
>
<
MainNav
/>
<
SubNav
/>
<
Switch
>
<
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
=
"
/admin
"
component
=
{
Admin
}
/
>
<
Route
path
=
"
/regist
"
component
=
{
ProductRegist
}
/
>
<
Route
path
=
"
/shoppingcart
"
component
=
{
ShoppingCart
}
/
>
<
Route
path
=
"
/payment
"
component
=
{
Payment
}
/
>
<
Route
path
=
"
/account
"
component
=
{
Account
}
/
>
<
Route
path
=
'
/kakao
'
component
=
{()
=>
{
window
.
location
.
href
=
'
https://compmath.korea.ac.kr
'
;
return
null
;
}}
/
>
<
Redirect
path
=
"
/
"
to
=
"
/
"
/>
<
/Switch
>
<
/Router
>
<
/div
>
<
Switch
>
<
Route
exact
path
=
"
/
"
component
=
{
Home
}
/
>
<
Route
path
=
"
/login
"
component
=
{
Login
}
/
>
<
Route
path
=
"
/signup
"
component
=
{
Signup
}
/
>
<
Route
path
=
"
/products/:productId
"
component
=
{
Product
}
/
>
<
Route
path
=
"
/categories/:main
"
component
=
{
ProductsList
}
/
>
<
Route
path
=
"
/admin
"
component
=
{
Admin
}
/
>
<
Route
path
=
"
/regist
"
component
=
{
ProductRegist
}
/
>
<
Route
path
=
"
/shoppingcart
"
component
=
{
ShoppingCart
}
/
>
<
Route
path
=
"
/payment
"
component
=
{
Payment
}
/
>
<
Route
path
=
"
/account
"
component
=
{
Account
}
/
>
<
Route
path
=
'
/kakao
'
component
=
{()
=>
{
window
.
location
.
href
=
'
https://compmath.korea.ac.kr
'
;
return
null
;
}}
/
>
<
Redirect
path
=
"
/
"
to
=
"
/
"
/>
<
/Switch
>
<
/Router
>
)
}
export
default
App
;
export
default
App
;
\ No newline at end of file
client/src/Components/Card.js
deleted
100644 → 0
View file @
be0a7340
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
function
card
(
props
)
{
const
[
card
,
setCard
]
=
useState
([...
props
])
return
(
<
Card
className
=
"
mt-5
"
>
<
Card
.
Img
varient
=
"
top
"
src
=
{}
style
=
{{
objectFit
:
"
contain
"
,
height
:
"
22rem
"
}}
><
/Card.Img
>
<
Card
.
Body
>
<
Card
.
Title
><
/Card.Title
>
<
Card
.
Text
><
/Card.Text
>
<
Card
.
Text
><
/Card.Text
>
<
/Card.Body
>
<
/Card
>
)
}
export
default
card
\ No newline at end of file
client/src/Components/CartCard.js
0 → 100644
View file @
0912b817
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_image
&&
`/images/
${
e
.
productId
.
main_image
}
`
}
style
=
{{
width
:
'
20rem
'
}}
/
>
<
/Col
>
<
Col
md
=
{
6
}
className
=
"
p-2
"
>
<
Card
.
Body
>
<
input
type
=
"
image
"
name
=
{
String
(
e
.
_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 @
0912b817
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 @
0912b817
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 @
0912b817
...
...
@@ -16,7 +16,7 @@ function SubNav() {
Object
.
keys
(
response
.
data
[
0
]).
forEach
((
ele
)
=>
{
const
url
=
ele
.
toLowerCase
()
list
.
push
(
<
Nav
.
Link
as
=
{
Link
}
to
=
{
`/
product
/
${
url
}
`
}
>
{
ele
}
<
/Nav.Link
>
<
Nav
.
Link
as
=
{
Link
}
to
=
{
`/
categories
/
${
url
}
`
}
>
{
ele
}
<
/Nav.Link
>
)
})
setCategorysDiv
(
list
)
...
...
client/src/Pages/Home.js
View file @
0912b817
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 @
0912b817
...
...
@@ -3,32 +3,57 @@ import React, { useState, useEffect, useRef } from 'react';
import
{
Row
,
Col
,
Form
,
Card
,
Button
}
from
'
react-bootstrap
'
;
import
catchErrors
from
'
../utils/catchErrors
'
;
function
Product
()
{
const
[
product
,
setProduct
]
=
useState
()
const
[
select
,
setSelect
]
=
useState
({
color
:
""
,
size
:
""
})
const
[
cart
,
setCart
]
=
useState
()
const
[
error
,
setError
]
=
useState
(
''
)
const
INIT_PRODUCT
=
{
pro_name
:
'
스키니진
'
,
price
:
12000
,
count
:
1
,
main_category
:
'
PANTS
'
,
sub_category
:
[
'
SKINNY JEANS
'
],
sizes
:
[
'
L
'
,
'
M
'
],
colors
:
[
'
연청
'
,
'
진청
'
],
main_image
:
"
a8f4d63ead77717f940a2b27deb707a6
"
,
productId
:
"
5ffda03428faf35de8319360
"
}
const
preCart
=
[]
function
Product
({
match
,
location
})
{
const
[
product
,
setProduct
]
=
useState
(
INIT_PRODUCT
)
const
[
cart
,
setCart
]
=
useState
(
INIT_PRODUCT
)
const
[
error
,
setError
]
=
useState
(
''
)
const
[
selected
,
setSelected
]
=
useState
({
sizes
:
false
,
colors
:
false
})
const
[
n
,
setN
]
=
useState
(
1
)
async
function
getProduct
(
user
){
console
.
log
(
user
)
try
{
const
response
=
await
axios
.
get
(
'
/api/product/productone
'
)
setProduct
(
response
.
data
)
console
.
log
(
response
.
data
)
}
catch
(
error
)
{
catchErrors
(
error
,
setError
)
useEffect
(()
=>
{
if
(
selected
.
sizes
===
true
&&
selected
.
colors
===
true
)
{
pushOptions
()
console
.
log
(
preCart
)
}
}
},
[
cart
])
function
handleClick
(
e
)
{
const
box
=
e
.
target
.
parentNode
.
parentNode
box
.
style
.
display
=
"
none
"
}
function
pushOptions
()
{
preCart
.
push
(
cart
)
selected
.
sizes
=
false
selected
.
colors
=
false
setN
(
n
+
1
)
}
function
handleChange
(
e
)
{
const
{
name
,
value
}
=
e
.
target
setSelect
({
...
select
,
[
name
]:
value
})
if
(
e
.
target
.
name
===
"
sizes
"
)
{
setCart
({
...
cart
,
[
name
]:
value
})
selected
.
sizes
=
true
}
else
if
(
e
.
target
.
name
===
"
colors
"
)
{
setCart
({
...
cart
,
[
name
]:
value
})
selected
.
colors
=
true
}
// setCart({ ...cart, [name]: value })
// handleCreate()
}
function
listDelete
(
e
)
{
...
...
@@ -38,60 +63,54 @@ function Product() {
}
function
handleCreate
()
{
console
.
log
(
"
실행
"
,
"
cart=
"
,
cart
)
if
(
cart
!==
undefined
)
{
if
(
cart
.
color
!==
""
)
{
const
list
=
document
.
getElementById
(
'
list
'
)
list
.
style
.
borderBottom
=
"
1px solid
"
const
shopping
=
document
.
createElement
(
'
div
'
)
shopping
.
className
=
"
d-flex justify-content-between my-2
"
shopping
.
innerHTML
=
`
${
cart
.
color
}
/
${
cart
.
size
}
<input type="number" min="0" max="10" value="1" style="width: 40px" />
<p style="margin-bottom: 0px">14,000원</p>`
const
deleteA
=
document
.
createElement
(
'
a
'
)
deleteA
.
innerText
=
'
X
'
deleteA
.
addEventListener
(
'
click
'
,
listDelete
)
shopping
.
appendChild
(
deleteA
)
list
.
appendChild
(
shopping
)
}
}
// if (product !== undefined) {
// if (product.colors !== "" && product.sizes !== "") {
// cart.push(
// <div className="d-flex justify-content-between my-2" >
// <p>{product.color} {product.size} </p>
// <input name="count" type="number" min="0" max="10" style="width: 40px" onChange={handleChange} />
// <p style="margin-bottom: 0px">{product.price}</p>
// </div>
// )
// const list = document.getElementById('list')
// list.style.borderBottom = "1px solid"
// const shopping = document.createElement('div')
// shopping.className = "d-flex justify-content-between my-2"
// shopping.innerHTML = `${product.color} / ${product.size}
// <input type="number" min="0" max="10" value="1" style="width: 40px" />
// <p style="margin-bottom: 0px">14,000원</p>`
// const deleteA = document.createElement('a')
// deleteA.innerText = 'X'
// deleteA.addEventListener('click', listDelete)
// shopping.appendChild(deleteA)
// list.appendChild(shopping)
// }
// }
}
async
function
addCart
()
{
// color, size, count, product
Object
Id(productlist에서 props), userId(로컬) 를 보내줌
// color, size, count, productId(productlist에서 props), userId(로컬) 를 보내줌
try
{
// setError('')
const
response
=
await
axios
.
post
(
'
/api/addcart
'
,
{
userId
:
"
jiwon5393
"
,
productObjectId
:
"
5ff7fd63d41cae4ecce51dd1
"
,
color
:
"
red
"
,
size
:
"
free
"
,
count
:
"
1
"
const
response
=
await
axios
.
put
(
'
/api/cart/addcart
'
,
{
userId
:
localStorage
.
getItem
(
'
loginStatus
'
),
productId
:
"
a8f4d63ead77717f940a2b27deb707a6
"
,
products
:
preCart
})
console
.
log
(
response
)
}
catch
(
error
){
//
catchErrors(error, setError)
}
catch
(
error
)
{
catchErrors
(
error
,
setError
)
}
alert
(
"
상품등록이 완료되었습니다.
"
)
}
useEffect
(()
=>
{
if
(
Object
.
keys
(
select
).
length
==
2
)
{
setCart
({
...
select
})
setSelect
({})
}
},
[
select
])
useEffect
(()
=>
{
handleCreate
()
getProduct
()
},
[
cart
])
// useEffect(() => {
// handleCreate()
// }, [product])
return
(
<
div
>
{
/* {getProduct} */
}
{
console
.
log
(
"
실행
"
,
"
product=
"
,
product
)
}
<
style
type
=
"
text/css
"
>
{
`
.btn {
...
...
@@ -115,22 +134,23 @@ function Product() {
<
Form
style
=
{{
borderBottom
:
"
1px solid
"
}}
>
<
Form
.
Group
style
=
{{
borderBottom
:
"
1px solid
"
,
paddingBottom
:
"
2rem
"
}}
>
<
Form
.
Label
>
색상
<
/Form.Label
>
<
Form
.
Control
as
=
"
select
"
className
=
"
mb-2
"
name
=
"
color
"
defaultValue
=
"
옵션 선택
"
onChange
=
{
handleChange
}
>
<
Form
.
Control
as
=
"
select
"
className
=
"
mb-2
"
name
=
"
color
s
"
defaultValue
=
"
옵션 선택
"
onChange
=
{
handleChange
}
>
<
option
>
옵션선택
<
/option
>
<
option
>
브릭레드
(
스트랩포함
)
<
/option
>
<
option
>
베이지
(
스트랩포함
)
<
/option
>
<
option
>
블랙
(
스트랩포함
)
<
/option
>
{
product
.
colors
.
map
((
e
)
=>
(
<
option
>
{
e
}
<
/option
>
))}
<
/Form.Control
>
<
Form
.
Label
>
사이즈
<
/Form.Label
>
<
Form
.
Control
as
=
"
select
"
className
=
"
mb-2
"
name
=
"
size
"
defaultValue
=
"
옵션 선택
"
onChange
=
{
handleChange
}
>
<
Form
.
Control
as
=
"
select
"
className
=
"
mb-2
"
name
=
"
size
s
"
defaultValue
=
"
옵션 선택
"
onChange
=
{
handleChange
}
>
<
option
>
옵션선택
<
/option
>
<
option
>
M
<
/option
>
<
option
>
L
<
/option
>
<
option
>
XL
<
/option
>
<
option
>
FREE
<
/option
>
{
product
.
sizes
.
map
((
e
)
=>
(
<
option
>
{
e
}
<
/option
>
))}
<
/Form.Control
>
<
/Form.Group
>
<
div
id
=
"
list
"
><
/div
>
{
preCart
.
map
((
e
)
=>
(
<
div
>
{
e
.
colors
}
/{e.sizes}</
div
>
))}
<
Row
className
=
"
justify-content-between mx-0 my-3
"
style
=
{{
width
:
"
100%
"
}}
>
<
Col
>
총
금액
<
/Col
>
<
Col
className
=
"
text-right
"
>
14
,
000
원
<
/Col
>
...
...
client/src/Pages/ProductRegist.js
View file @
0912b817
...
...
@@ -98,18 +98,18 @@ function ProductsRegist() {
}
product
[
"
sizes
"
]
=
sizes
const
formData
=
new
FormData
();
for
(
const
key
in
product
)
{
console
.
log
(
"
product[key]=
"
,
product
[
key
])
if
(
key
==
"
main_image
"
||
key
==
"
detail_image
"
)
{
for
(
const
file
of
product
[
key
])
{
formData
.
append
(
key
,
file
)
}
for
(
let
key
in
product
)
{
if
(
key
===
"
main_image
"
||
key
===
"
detail_image
"
)
{
console
.
log
(
product
[
key
][
0
])
formData
.
append
(
key
,
product
[
key
][
0
])
}
else
{
formData
.
append
(
key
,
product
[
key
])
}
}
try
{
const
response
=
await
axios
.
post
(
'
/api/product/regist
'
,
formData
)
const
response
=
axios
.
post
(
'
/api/product/regist
'
,
formData
)
// setSuccess(true)
console
.
log
(
response
)
}
catch
(
error
)
{
catchErrors
(
error
,
setError
)
}
...
...
client/src/Pages/ProductsList.js
View file @
0912b817
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
{
Link
}
from
'
react-router-dom
'
;
import
ListCard
from
'
../Components/ListCard
'
;
import
Pagination
from
'
../Components/Pagination
'
;
import
{
Container
,
Row
,
Col
,
Form
,
FormControl
,
Button
,
Card
,
Dropdown
}
from
'
react-bootstrap
'
;
import
axios
from
'
axios
'
;
import
catchError
from
'
../utils/catchErrors
'
;
import
{
isAuthenticated
}
from
'
../utils/auth
'
;
import
{
Container
,
Row
,
Col
,
Form
,
FormControl
,
Button
,
Dropdown
}
from
'
react-bootstrap
'
;
function
ProductsList
(
props
)
{
const
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
(
''
)
// useEffect(() => {
// getProfile(user)
// }, [user])
// const user=isAuthenticated()
useEffect
(()
=>
{
setMainCategory
(
match
.
params
.
main
.
toUpperCase
())
},
[
match
.
params
.
main
])
useEffect
(()
=>
{
getProductlist
()
},
[
mainCategory
])
// async function getProfile(user){
// console.log(user)
...
...
@@ -20,15 +33,43 @@ function ProductsList(props) {
// }
// }
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/
${
mainCategory
}
`
)
console
.
log
(
"
response.data=
"
,
response
.
data
)
setProductlist
(
response
.
data
)
}
catch
(
error
)
{
catchError
(
error
,
setError
)
}
}
return
(
<
div
>
{
console
.
log
(
"
match.params=
"
,
props
.
match
.
params
.
product
)}
<
style
type
=
"
text/css
"
>
{
`
a, a:hover, a:active {
color: #000;
text-decoration: none;
}
.btn {
background-color: #CDC5C2;
border-color: #CDC5C2;
...
...
@@ -43,14 +84,14 @@ function ProductsList(props) {
<
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-
betwe
en mx-0 my-5
"
>
<
Form
as
=
{
Row
}
onSubmit
=
{
handleSubmit
}
className
=
"
justify-content-end mx-0
"
>
<
Row
className
=
"
justify-content-en
d
mx-0 my-5
"
>
{
/*
<Form as={Row} onSubmit={handleSubmit} className="justify-content-end mx-0">
*/
}
<
Dropdown
>
<
Dropdown
.
Toggle
className
=
"
mx-2
"
>
정렬
<
/Dropdown.Toggle
>
<
Dropdown
.
Menu
>
...
...
@@ -60,64 +101,32 @@ function ProductsList(props) {
<
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
"
>
<
Card
className
=
"
mt-5
"
style
=
{{
width
:
"
18rem
"
,
margin
:
"
auto
"
}}
>
<
Card
.
Img
variant
=
"
top
"
src
=
"
https://img.sonyunara.com/files/goods/67460/1607053816_0.jpg
"
style
=
{{
objectFit
:
"
contain
"
,
height
:
"
22rem
"
}}
/
>
<
Card
.
Body
>
<
Card
.
Title
>
케이시앵글부츠
(
SH
)
<
/Card.Title
>
<
Card
.
Text
>
가격
:
12
,
000
원
<
/Card.Text
>
<
/Card.Body
>
<
/Card
>
<
Card
className
=
"
mt-5
"
style
=
{{
width
:
"
18rem
"
,
margin
:
"
auto
"
}}
>
<
Card
.
Img
variant
=
"
top
"
src
=
"
https://img.sonyunara.com/files/goods/48705/1552562469_0.jpg
"
style
=
{{
objectFit
:
"
contain
"
,
height
:
"
22rem
"
}}
/
>
<
Card
.
Body
>
<
Card
.
Title
>
메리제인플랫
(
SH
)
<
/Card.Title
>
<
Card
.
Text
>
가격
:
12
,
000
원
<
/Card.Text
>
<
/Card.Body
>
<
/Card
>
<
Card
className
=
"
mt-5
"
style
=
{{
width
:
"
18rem
"
,
margin
:
"
auto
"
}}
>
<
Card
.
Img
variant
=
"
top
"
src
=
"
https://img.sonyunara.com/files/goods/53386/1567390097_2.jpg
"
style
=
{{
objectFit
:
"
contain
"
,
height
:
"
22rem
"
}}
/
>
<
Card
.
Body
>
<
Card
.
Title
>
솔티드스니커즈
(
SH
)
<
/Card.Title
>
<
Card
.
Text
>
가격
:
12
,
000
원
<
/Card.Text
>
<
/Card.Body
>
<
/Card
>
<
Card
className
=
"
mt-5
"
style
=
{{
width
:
"
18rem
"
,
margin
:
"
auto
"
}}
>
<
Card
.
Img
variant
=
"
top
"
src
=
"
https://img.sonyunara.com/files/goods/61286/1587540563_0.jpg
"
style
=
{{
objectFit
:
"
contain
"
,
height
:
"
22rem
"
}}
/
>
<
Card
.
Body
>
<
Card
.
Title
>
버켄슬리퍼
(
SH
)
<
/Card.Title
>
<
Card
.
Text
>
가격
:
12
,
000
원
<
/Card.Text
>
<
/Card.Body
>
<
/Card
>
<
Card
className
=
"
mt-5
"
style
=
{{
width
:
"
18rem
"
,
margin
:
"
auto
"
}}
>
<
Card
.
Img
variant
=
"
top
"
src
=
"
https://hotping.co.kr/web/product/big/202011/b8f4c6471955b80fc3991b7d6df8926a.jpg
"
style
=
{{
objectFit
:
"
contain
"
,
height
:
"
22rem
"
}}
/
>
<
Card
.
Body
>
<
Card
.
Title
>
크레센도
하이힐펌프스
<
/Card.Title
>
<
Card
.
Text
>
가격
:
12
,
000
원
<
/Card.Text
>
<
/Card.Body
>
<
/Card
>
<
Card
className
=
"
mt-5
"
style
=
{{
width
:
"
18rem
"
,
margin
:
"
auto
"
}}
>
<
Card
.
Img
variant
=
"
top
"
src
=
"
https://hotping.co.kr/web/product/big/202011/888e4e8d6a2c2e7da385b079151fcba2.jpg
"
style
=
{{
objectFit
:
"
contain
"
,
height
:
"
22rem
"
}}
/
>
<
Card
.
Body
>
<
Card
.
Title
>
어텀솔져1cm
스웨이드로퍼
<
/Card.Title
>
<
Card
.
Text
>
가격
:
12
,
000
원
<
/Card.Text
>
<
/Card.Body
>
<
/Card
>
<
Card
className
=
"
mt-5
"
style
=
{{
width
:
"
18rem
"
,
margin
:
"
auto
"
}}
>
<
Card
.
Img
variant
=
"
top
"
src
=
"
https://hotping.co.kr/web/product/big/202007/3308564012eb14e6c11ed621fa7555fb.jpg
"
style
=
{{
objectFit
:
"
contain
"
,
height
:
"
22rem
"
}}
/
>
<
Card
.
Body
>
<
Card
.
Title
>
포웰3
.
5
cm
스니커즈
<
/Card.Title
>
<
Card
.
Text
>
가격
:
12
,
000
원
<
/Card.Text
>
<
/Card.Body
>
<
/Card
>
{
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 @
0912b817
...
...
@@ -2,9 +2,19 @@ import React, { useState, useEffect, useRef } from 'react';
import
{
Redirect
}
from
'
react-router-dom
'
;
import
{
Card
,
Button
,
Container
,
Row
,
Col
}
from
'
react-bootstrap
'
;
import
axios
from
'
axios
'
;
import
catchErrors
from
'
../utils/catchErrors
'
;
import
{
isAuthenticated
}
from
'
../utils/auth
'
import
CartCard
from
'
../Components/CartCard
'
;
function
ShoppingCart
()
{
const
[
num
,
setNum
]
=
useState
(
0
)
const
[
error
,
setError
]
=
useState
(
''
)
const
[
cart
,
setCart
]
=
useState
()
const
user
=
isAuthenticated
()
useEffect
(()
=>
{
getCart
()
},
[
user
])
function
plusNum
()
{
setNum
(
num
+
1
)
...
...
@@ -18,46 +28,41 @@ function ShoppingCart() {
}
}
function
deleteCart
()
{
async
function
deleteCart
(
e
)
{
//장바구니 DB에서 해당 항목 삭제
console
.
log
(
e
.
target
.
name
)
try
{
const
response
=
await
axios
.
post
(
'
/api/cart/deletecart
'
,
{
cartId
:
e
.
target
.
name
})
console
.
log
(
response
.
data
)
}
catch
(
error
)
{
catchErrors
(
error
,
setError
)
}
console
.
log
(
'
카트에 담긴 항목을 삭제했습니다.
'
)
}
// async function getCart(){
// const response = await axios.get('/')
// }
async
function
getCart
()
{
// const userId= localStorage.getItem('loginStatus')
try
{
const
response
=
await
axios
.
get
(
`/api/cart/showcart/
${
user
}
`
)
console
.
log
(
response
.
data
)
setCart
(
response
.
data
)
}
catch
(
error
)
{
catchErrors
(
error
,
setError
)
}
}
return
(
<
div
>
{
/* {getCart} */
}
{
/* {getCart()} */
}
{
/* {console.log(user)} */
}
{
/* {console.log(cart)} */
}
<
Container
className
=
"
justify-content-center
"
>
<
h3
className
=
"
my-5 font-weight-bold text-center
"
>
장바구니
<
/h3
>
<
div
>
<
h4
className
=
"
font-weight-bold py-3 border-top border-bottom text-center
"
style
=
{{
background
:
'
#F7F3F3
'
}}
>
주문상품정보
<
/h4
>
<
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
=
"
icon/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
>
{
cart
?
<
CartCard
cart
=
{
cart
}
deleteCart
=
{
deleteCart
}
minusNum
=
{
minusNum
}
plusNum
=
{
plusNum
}
num
=
{
num
}
/>:<div></
div
>
}
<
/div
>
<
div
className
=
"
p-5 m-5
"
style
=
{{
background
:
'
#F7F3F3
'
}}
>
<
ul
className
=
"
pl-0
"
style
=
{{
listStyle
:
'
none
'
}}
>
...
...
client/src/Pages/Signup.js
View file @
0912b817
...
...
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
import
axios
from
'
axios
'
import
{
Form
,
Col
,
Container
,
Button
,
Row
,
Alert
}
from
'
react-bootstrap
'
import
catchErrors
from
'
../utils/catchErrors
'
import
{
Redirect
}
from
'
react-router-dom
'
;
const
INIT_USER
=
{
name
:
''
,
...
...
@@ -13,9 +14,9 @@ const INIT_USER = {
}
function
Signup
()
{
const
[
user
,
setUser
]
=
useState
(
''
)
const
[
user
,
setUser
]
=
useState
(
INIT_USER
)
const
[
error
,
setError
]
=
useState
(
''
)
const
[
success
,
setSuccess
]
=
useState
(
false
)
const
[
validated
,
setValidated
]
=
useState
(
false
);
function
handleChange
(
event
)
{
...
...
@@ -26,7 +27,6 @@ function Signup() {
async
function
handleSubmit
(
event
)
{
event
.
preventDefault
()
const
form
=
event
.
currentTarget
;
console
.
log
(
form
)
if
(
form
.
checkValidity
()
===
false
)
{
event
.
preventDefault
();
event
.
stopPropagation
();
...
...
@@ -38,13 +38,14 @@ function Signup() {
setError
(
''
)
const
response
=
await
axios
.
post
(
'
/api/users/signup
'
,
user
)
console
.
log
(
response
.
data
)
setSuccess
(
true
)
}
catch
(
error
)
{
catchErrors
(
error
,
setError
)
}
}
}
function
checkPassword
(
event
)
{
const
p1
=
user
.
password
const
p2
=
user
.
password2
...
...
@@ -60,132 +61,136 @@ function Signup() {
}
}
if
(
success
)
{
alert
(
'
회원가입 되었습니다.
'
)
return
<
Redirect
to
=
'
/login
'
/>
}
return
(
<
div
>
{
console
.
log
(
user
)}
<
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
>
{
error
&&
<
Alert
variant
=
'
danger
'
>
{
error
}
<
/Alert>
}
<
Form
noValidate
validated
=
{
validated
}
onSubmit
=
{
handleSubmit
}
className
=
"
p-5
"
>
<
Form
.
Group
controlId
=
"
formBasicName
"
>
<
Form
.
Row
>
<
Col
sm
=
{
4
}
xs
=
{
6
}
as
=
{
Form
.
Label
}
for
=
"
id
"
>
이
름
<
/Col
>
<
Col
sm
=
{
8
}
xs
=
{
12
}
as
=
{
Form
.
Control
}
return
(
<
div
>
<
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
>
{
error
&&
<
Alert
variant
=
'
danger
'
>
{
error
}
<
/Alert>
}
<
Form
noValidate
validated
=
{
validated
}
onSubmit
=
{
handleSubmit
}
className
=
"
p-5
"
>
<
Form
.
Group
controlId
=
"
formBasicName
"
>
<
Form
.
Row
>
<
Col
sm
=
{
4
}
xs
=
{
6
}
as
=
{
Form
.
Label
}
for
=
"
id
"
>
이
름
<
/Col
>
<
Col
sm
=
{
8
}
xs
=
{
12
}
as
=
{
Form
.
Control
}
required
type
=
"
text
"
name
=
"
name
"
placeholder
=
"
Name
"
style
=
{{
width
:
'
160px
'
}}
value
=
{
user
.
name
}
onChange
=
{
handleChange
}
/
>
<
Form
.
Control
.
Feedback
type
=
"
invalid
"
>
이름을
입력하세요
.
<
/Form.Control.Feedback
>
<
/Form.Row
>
<
/Form.Group
>
<
Form
.
Group
controlId
=
"
formBasicNumber
"
>
<
Form
.
Row
>
<
Col
sm
=
{
4
}
xs
=
{
6
}
as
=
{
Form
.
Label
}
for
=
"
number
"
>
주민등록번호
<
/Col
>
<
Col
as
=
{
Row
}
sm
=
{
8
}
xs
=
{
10
}
>
<
Form
.
Control
required
type
=
"
text
"
name
=
"
name
"
placeholder
=
"
Name
"
style
=
{{
width
:
'
160px
'
}}
value
=
{
user
.
name
}
onChange
=
{
handleChange
}
/
>
<
Form
.
Control
.
Feedback
type
=
"
invalid
"
>
이름을
입력하세요
.
<
/Form.Control.Feedback
>
<
/Form.Row
>
<
/Form.Group
>
<
Form
.
Group
controlId
=
"
formBasicNumber
"
>
<
Form
.
Row
>
<
Col
sm
=
{
4
}
xs
=
{
6
}
as
=
{
Form
.
Label
}
for
=
"
number
"
>
주민등록번호
<
/Col
>
<
Col
as
=
{
Row
}
sm
=
{
8
}
xs
=
{
10
}
>
<
Form
.
Control
required
type
=
"
text
"
name
=
"
number1
"
maxlength
=
"
6
"
className
=
"
mx-2
"
style
=
{{
width
:
'
17 0px
'
}}
value
=
{
user
.
number1
}
onChange
=
{
handleChange
}
>
<
/Form.Control
>
name
=
"
number1
"
maxlength
=
"
6
"
className
=
"
mx-2
"
style
=
{{
width
:
'
17 0px
'
}}
value
=
{
user
.
number1
}
onChange
=
{
handleChange
}
>
<
/Form.Control
>
-
<
Form
.
Control
required
type
=
"
text
"
name
=
"
number2
"
maxlength
=
"
1
"
className
=
"
mx-3
"
style
=
{{
width
:
'
50px
'
}}
value
=
{
user
.
number2
}
onChange
=
{
handleChange
}
>
<
/Form.Control
>
required
type
=
"
text
"
name
=
"
number2
"
maxlength
=
"
1
"
className
=
"
mx-3
"
style
=
{{
width
:
'
50px
'
}}
value
=
{
user
.
number2
}
onChange
=
{
handleChange
}
>
<
/Form.Control
>
******
<
Form
.
Control
.
Feedback
type
=
"
invalid
"
>
주민등록번호를
입력하세요
.
<
/Form.Control.Feedback
>
<
/Col
>
<
/Form.Row
>
<
/Form.Group
>
<
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
"
name
=
"
id
"
placeholder
=
"
ID
"
style
=
{{
width
:
'
160px
'
}}
value
=
{
user
.
id
}
onChange
=
{
handleChange
}
/
>
<
Form
.
Control
.
Feedback
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
"
name
=
"
password
"
placeholder
=
"
Password
"
style
=
{{
width
:
'
160px
'
}}
value
=
{
user
.
password
}
required
onChange
=
{
handleChange
}
/
>
<
Form
.
Control
.
Feedback
className
=
"
text-center
"
type
=
"
invalid
"
>
비밀번호를
입력하세요
.
<
/Col
>
<
/Form.Row
>
<
/Form.Group
>
<
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
"
name
=
"
id
"
placeholder
=
"
ID
"
style
=
{{
width
:
'
160px
'
}}
value
=
{
user
.
id
}
onChange
=
{
handleChange
}
/
>
<
Form
.
Control
.
Feedback
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
"
name
=
"
password
"
placeholder
=
"
Password
"
style
=
{{
width
:
'
160px
'
}}
value
=
{
user
.
password
}
required
onChange
=
{
handleChange
}
/
>
<
Form
.
Control
.
Feedback
className
=
"
text-center
"
type
=
"
invalid
"
>
비밀번호를
입력하세요
.
<
/Form.Control.Feedback
>
<
/Form.Row
>
<
/Form.Group
>
<
Form
.
Group
controlId
=
"
formBasicPassword2
"
>
<
Form
.
Row
>
<
Col
sm
=
{
4
}
xs
=
{
6
}
as
=
{
Form
.
Label
}
for
=
"
password
"
>
비밀번호
확인
<
/Col
>
<
Col
sm
=
{
8
}
xs
=
{
12
}
as
=
{
Form
.
Control
}
type
=
"
password
"
name
=
"
password2
"
placeholder
=
"
Password
"
style
=
{{
width
:
'
160px
'
}}
value
=
{
user
.
password2
}
required
onChange
=
{
handleChange
}
/
>
<
Form
.
Control
.
Feedback
type
=
"
invalid
"
>
비밀번호를
한번
더
입력하세요
.
<
/Form.Row
>
<
/Form.Group
>
<
Form
.
Group
controlId
=
"
formBasicPassword2
"
>
<
Form
.
Row
>
<
Col
sm
=
{
4
}
xs
=
{
6
}
as
=
{
Form
.
Label
}
for
=
"
password
"
>
비밀번호
확인
<
/Col
>
<
Col
sm
=
{
8
}
xs
=
{
12
}
as
=
{
Form
.
Control
}
type
=
"
password
"
name
=
"
password2
"
placeholder
=
"
Password
"
style
=
{{
width
:
'
160px
'
}}
value
=
{
user
.
password2
}
required
onChange
=
{
handleChange
}
/
>
<
Form
.
Control
.
Feedback
type
=
"
invalid
"
>
비밀번호를
한번
더
입력하세요
.
<
/Form.Control.Feedback
>
<
/Form.Row
>
<
/Form.Group
>
<
Form
.
Group
controlId
=
"
formBasicTel
"
>
<
Form
.
Row
>
<
Col
sm
=
{
4
}
xs
=
{
6
}
as
=
{
Form
.
Label
}
for
=
"
tel
"
>
휴대전화
<
/Col
>
<
Col
sm
=
{
8
}
xs
=
{
12
}
as
=
{
Form
.
Control
}
required
type
=
"
text
"
name
=
"
tel
"
size
=
"
sm
"
style
=
{{
width
:
'
160px
'
}}
value
=
{
user
.
tel
}
onChange
=
{
handleChange
}
/
>
<
Form
.
Control
.
Feedback
type
=
"
invalid
"
>
휴대전화를
입력하세요
.
<
/Form.Control.Feedback
>
<
/Form.Row
>
<
/Form.Group
>
<
Button
style
=
{{
background
:
'
#91877F
'
,
borderColor
:
'
#91877F
'
}}
type
=
"
submit
"
block
onClick
=
{
checkPassword
}
>
Sign
Up
<
/Form.Row
>
<
/Form.Group
>
<
Form
.
Group
controlId
=
"
formBasicTel
"
>
<
Form
.
Row
>
<
Col
sm
=
{
4
}
xs
=
{
6
}
as
=
{
Form
.
Label
}
for
=
"
tel
"
>
휴대전화
<
/Col
>
<
Col
sm
=
{
8
}
xs
=
{
12
}
as
=
{
Form
.
Control
}
required
type
=
"
text
"
name
=
"
tel
"
size
=
"
sm
"
style
=
{{
width
:
'
160px
'
}}
value
=
{
user
.
tel
}
onChange
=
{
handleChange
}
/
>
<
Form
.
Control
.
Feedback
type
=
"
invalid
"
>
휴대전화를
입력하세요
.
<
/Form.Control.Feedback
>
<
/Form.Row
>
<
/Form.Group
>
<
Button
style
=
{{
background
:
'
#91877F
'
,
borderColor
:
'
#91877F
'
}}
type
=
"
submit
"
block
onClick
=
{
checkPassword
}
>
Sign
Up
<
/Button
>
<
/Form
>
<
/Col
>
<
/Row
>
<
/Container
>
<
/div
>
)
<
/Form
>
<
/Col
>
<
/Row
>
<
/Container
>
<
/div
>
)
}
export
default
Signup
\ No newline at end of file
server/app.js
View file @
0912b817
...
...
@@ -24,6 +24,7 @@ app.use(express.json())
app
.
use
(
cors
())
app
.
use
(
express
.
static
(
path
.
join
(
process
.
cwd
(),
'
dist
'
)))
// app.use(bodyParser.urlencoded({ extended: true }))
app
.
use
(
'
/images
'
,
express
.
static
(
'
uploads/
'
))
// app.use('/', indexRouter);
app
.
use
(
'
/
'
,
kakaopayRoutes
)
...
...
@@ -31,7 +32,7 @@ app.use('/api/categorys',categoryRouter)
app
.
use
(
'
/api/users
'
,
userRouter
)
app
.
use
(
'
/api/auth
'
,
authRouter
)
app
.
use
(
'
/api/product
'
,
productRouter
)
app
.
use
(
'
/api/
add
cart
'
,
cartRouter
)
app
.
use
(
'
/api/cart
'
,
cartRouter
)
app
.
listen
(
config
.
port
,
()
=>
{
console
.
info
(
'
Server started on port %s.
'
,
config
.
port
)
...
...
server/controllers/cart.controller.js
View file @
0912b817
import
Cart
from
"
../schemas/Cart.js
"
;
import
Product
from
'
../schemas/Product.js
'
const
cart
=
async
(
req
,
res
)
=>
{
const
{
userId
,
productObjectId
,
color
,
size
,
count
}
=
req
.
body
// console.log('req.body=', req.body)
// const {userId, productObjectId, }
// const { user, pro_name, price, main_image } = req.body
// color, size, count, productObjectId(productlist에서 props), userId(로컬)
const
addcart
=
async
(
req
,
res
)
=>
{
// console.log(req.body)
const
{
userId
,
products
}
=
req
.
body
try
{
const
product
=
await
Product
.
find
({
_id
:
productObjectId
})
if
(
product
)
{
// console.log(product)
const
{
pro_name
,
price
,
main_image
}
=
product
[
0
]
const
products
=
{
productObjectId
,
color
,
size
,
count
,
pro_name
,
price
,
main_image
}
// console.log(products)
const
newCart
=
await
new
Cart
({
userId
,
products
}).
save
()
console
.
log
(
newCart
)
res
.
json
(
newCart
)
const
cart
=
await
Cart
.
findOne
({
userId
:
userId
})
console
.
log
(
cart
)
// const newProduct = { products: products }
// const newProduct = {...newProduct}
// console.log(newProduct)
console
.
log
(
products
)
await
Cart
.
updateOne
(
{
_id
:
cart
.
_id
},
// { $addToSet: { products: newProduct } }
{
$set
:
{
products
:
products
}}
)
res
.
status
(
200
).
send
(
'
Cart updated
'
)
}
// const newCart = await new Cart({
// user, pro_name, price, stock, main_category, sub_category, main_image
// }).save()
// const asdf = await Cart.find({ user })
// console.log(newCart)
// res.json(newCart)
}
catch
(
error
)
{
console
.
log
(
error
)
res
.
status
(
500
).
send
(
'
죄송합니다. 다시 입력해 주십시오.
'
)
}
}
// try {
// const user = await
// User.findById(id)
// if (!user) {
// console.log(error)
// res.status(404).send('사용자를 찾을 수 없습니다')
// }
// req.profile = user
// next()
// } catch (error) {
// console.log(error)
// res.status(500).send('사용자 아이디 실패')
// }
const
showcart
=
async
(
req
,
res
)
=>
{
// const {userId} = req.body
// console.log(req.cart)
// console.log(req.id)
try
{
const
cart
=
await
Cart
.
findOne
({
userId
:
req
.
id
}).
populate
({
path
:
'
products.productId
'
,
model
:
'
Product
'
})
res
.
status
(
200
).
json
(
cart
.
products
)
}
catch
(
error
)
{
console
.
log
(
error
)
res
.
status
(
500
).
send
(
'
쇼핑카트를 불러오지 못했습니다.
'
)
}
}
export
default
{
cart
}
\ No newline at end of file
const
deletecart
=
async
(
req
,
res
)
=>
{
console
.
log
(
req
.
body
)
const
{
cartId
}
=
req
.
body
try
{
await
Cart
.
remove
({
_id
:
cartId
})
res
.
send
(
"
삭제완료
"
)
// res.json()
}
catch
(
error
)
{
console
.
log
(
error
)
res
.
status
(
500
).
send
(
'
해당 카트를 삭제하지 못했습니다.
'
)
}
}
const
userById
=
async
(
req
,
res
,
next
,
id
)
=>
{
try
{
const
cart
=
await
Cart
.
findOne
({
userId
:
id
})
if
(
!
cart
)
{
res
.
status
(
404
).
send
(
"
사용자를 찾을 수 없습니다.
"
)
}
req
.
cart
=
cart
req
.
id
=
id
next
()
}
catch
(
error
)
{
res
.
status
(
500
).
send
(
"
사용자 아이디 검색 실패
"
)
}
}
export
default
{
addcart
,
showcart
,
deletecart
,
userById
}
\ No newline at end of file
server/controllers/product.controller.js
View file @
0912b817
...
...
@@ -29,4 +29,25 @@ const regist = async (req, res) => {
}
}
export
default
{
imageUpload
,
regist
}
\ No newline at end of file
const
getlist
=
(
req
,
res
)
=>
{
try
{
res
.
json
(
req
.
productslist
)
}
catch
(
error
)
{
res
.
status
(
500
).
send
(
'
상품을 불러오지 못했습니다.
'
)
}
}
const
categoryId
=
async
(
req
,
res
,
next
,
category
)
=>
{
try
{
const
productslist
=
await
Product
.
find
({
main_category
:
category
})
if
(
!
productslist
)
{
res
.
status
(
404
).
send
(
'
상품을 찾을 수 없습니다.
'
)
}
req
.
productslist
=
productslist
next
()
}
catch
(
error
)
{
res
.
status
(
500
).
send
(
'
상품을 불러오지 못했습니다.
'
)
}
}
export
default
{
imageUpload
,
regist
,
categoryId
,
getlist
}
\ No newline at end of file
server/controllers/user.controller.js
View file @
0912b817
import
Cart
from
"
../schemas/Cart.js
"
;
import
User
from
"
../schemas/User.js
"
;
import
isLength
from
'
validator/lib/isLength.js
'
;
import
bcrypt
from
'
bcryptjs
'
;
const
signup
=
async
(
req
,
res
)
=>
{
console
.
log
(
req
.
body
)
const
{
name
,
number1
,
number2
,
id
,
password
,
tel
}
=
req
.
body
console
.
log
(
req
.
body
)
try
{
if
(
!
isLength
(
password
,
{
min
:
8
,
max
:
15
})){
if
(
!
isLength
(
password
,
{
min
:
8
,
max
:
15
}))
{
return
res
.
status
(
422
).
send
(
'
비밀번호는 8-15자리로 입력해주세요.
'
)
}
const
user
=
await
User
.
findOne
({
id
})
if
(
user
){
const
user
=
await
User
.
findOne
({
id
})
if
(
user
)
{
return
res
.
status
(
422
).
send
(
`
${
id
}
가 이미 사용중입니다.`
)
}
const
hash
=
await
bcrypt
.
hash
(
password
,
10
)
const
hash
=
await
bcrypt
.
hash
(
password
,
10
)
const
newUser
=
await
new
User
({
const
newUser
=
await
new
User
({
name
,
number1
,
number2
,
id
,
password
:
hash
,
password
:
hash
,
tel
,
}).
save
()
await
new
Cart
({
userId
:
newUser
.
_id
}).
save
()
console
.
log
(
newUser
)
res
.
json
(
newUser
)
...
...
server/routes/auth.routes.js
View file @
0912b817
...
...
@@ -6,7 +6,7 @@ const router = express.Router()
router
.
route
(
'
/login
'
)
.
post
(
authCtrl
.
login
)
router
.
route
(
'
/logout
'
)
router
.
route
(
'
/logout
'
)
.
get
(
authCtrl
.
logout
)
export
default
router
\ No newline at end of file
server/routes/cart.routes.js
View file @
0912b817
...
...
@@ -4,8 +4,16 @@ import cartCtrl from '../controllers/cart.controller.js';
const
router
=
express
.
Router
()
router
.
route
(
'
/
'
)
.
p
os
t
(
cartCtrl
.
cart
)
// .get()
router
.
route
(
'
/
addcart
'
)
.
p
u
t
(
cartCtrl
.
add
cart
)
// .get()
router
.
route
(
'
/showcart/:userId
'
)
.
get
(
cartCtrl
.
showcart
)
router
.
param
(
'
userId
'
,
cartCtrl
.
userById
)
router
.
route
(
'
/deletecart
'
)
.
post
(
cartCtrl
.
deletecart
)
export
default
router
\ No newline at end of file
server/routes/product.routes.js
View file @
0912b817
...
...
@@ -6,8 +6,10 @@ const router = express.Router()
router
.
route
(
'
/regist
'
)
.
post
(
productCtrl
.
imageUpload
,
productCtrl
.
regist
)
// router.route('/productone')
// .get(productCtrl.getProduct)
router
.
route
(
'
/getproduct/:category
'
)
.
get
(
productCtrl
.
getlist
)
router
.
param
(
'
category
'
,
productCtrl
.
categoryId
)
export
default
router
\ No newline at end of file
server/schemas/Cart.js
View file @
0912b817
import
mongoose
from
'
mongoose
'
const
{
String
,
Number
,
Array
,
ObjectId
}
=
mongoose
.
Schema
.
Types
const
productschema
=
new
mongoose
.
Schema
({
pro_name
:
{
type
:
String
,
required
:
true
},
price
:{
type
:
Number
,
required
:
true
},
main_image
:
{
type
:
String
,
required
:
true
},
color
:{
type
:
String
,
required
:
true
},
size
:{
type
:
String
,
required
:
true
},
productObjectId
:
{
type
:
ObjectId
,
required
:
true
}
})
const
CartSchema
=
new
mongoose
.
Schema
({
userId
:
{
type
:
String
,
// required: true
type
:
ObjectId
,
ref
:
'
User
'
},
products
:
{
type
:
[
productschema
],
required
:
true
products
:
{
type
:
[
{
count
:
{
type
:
Number
,
default
:
1
},
productId
:
{
type
:
ObjectId
,
ref
:
'
Product
'
},
sizes
:
{
type
:
String
},
colors
:
{
type
:
String
}
}
]
}
},
{
timestamps
:
true
})
export
default
mongoose
.
models
.
Cart
||
mongoose
.
model
(
'
Cart
'
,
CartSchema
)
\ No newline at end of file
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