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
9cb2f58f
Commit
9cb2f58f
authored
Jan 11, 2021
by
박상호
🎼
Browse files
Merge remote-tracking branch 'origin/jiwon' into who
parents
b4f920ff
78f4f056
Changes
23
Hide whitespace changes
Inline
Side-by-side
client/src/App.js
View file @
9cb2f58f
import
logo
from
'
./logo.svg
'
;
import
'
./App.css
'
;
import
{
Button
}
from
'
react-bootstrap
'
;
import
{
Router
}
from
'
react-router-dom
'
;
import
Login
from
'
./Login
'
import
LogoutButton
from
'
./LogoutButton
'
import
{
signIn
}
from
'
./auth
'
import
{
BrowserRouter
as
Router
,
Route
,
Redirect
,
Switch
}
from
'
react-router-dom
'
;
import
Home
from
'
./Pages/Home
'
;
import
Login
from
'
./Pages/Login
'
;
import
Signup
from
'
./Pages/Signup
'
;
import
Product
from
"
./Pages/Product
"
;
import
ProductsList
from
"
./Pages/ProductsList
"
;
import
Admin
from
'
./Pages/Admin
'
;
import
ProductRegist
from
'
./Pages/ProductRegist
'
;
import
ShoppingCart
from
'
./Pages/ShoppingCart
'
;
import
Payment
from
'
./Pages/Payment
'
;
import
Account
from
'
./Pages/Account
'
;
import
MainNav
from
'
./Components/MainNav
'
;
import
SubNav
from
'
./Components/SubNav
'
;
function
App
()
{
const
[
user
,
setUser
]
=
useState
(
null
);
const
authenticated
=
user
!=
null
;
const
login
=
({
id
,
password
})
=>
setUser
(
signIn
({
id
,
password
}));
const
logout
=
()
=>
setUser
(
null
);
// const [user,setUser]=useState(null);
// const authenticated =user !=null;
// const login =({id, password}) => setUser(signIn({id,password}));
// const logout=()=>setUser(null);
return
(
<
div
>
<
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
=
"
/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
>
)
}
...
...
client/src/Components/Card.js
0 → 100644
View file @
9cb2f58f
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
function
Card
()
{
return
(
<
div
><
/div
>
)
}
export
default
Card
\ No newline at end of file
client/src/Components/MainNav.js
View file @
9cb2f58f
...
...
@@ -13,18 +13,18 @@ function MainNav() {
return
(
<
Navbar
sticky
=
"
top
"
style
=
{{
background
:
"
#CDC5C2
"
}}
>
<
Navbar
.
Brand
href
=
"
/home
"
className
=
"
text-light
"
>
<
img
src
=
{
logo
}
width
=
"
24
"
height
=
"
24
"
/>
<
img
alt
=
"
로고
"
src
=
{
logo
}
width
=
"
24
"
height
=
"
24
"
/>
{
'
'
}
KU
#
<
/Navbar.Brand
>
<
Nav
className
=
"
justify-content-end
"
>
<
Nav
className
=
"
float-right
"
>
<
Nav
.
Link
className
=
"
text-light
"
href
=
"
/login
"
>
Login
<
/Nav.Link
>
<
Nav
.
Link
className
=
"
text-light
"
href
=
"
/signup
"
>
Signup
<
/Nav.Link
>
<
Nav
.
Link
href
=
"
/shoppingcart
"
>
<
img
src
=
{
cart
}
width
=
"
30
"
height
=
"
30
"
/>
<
img
alt
=
"
카트
"
src
=
{
cart
}
width
=
"
30
"
height
=
"
30
"
/>
<
/Nav.Link
>
<
Nav
.
Link
className
=
"
text-light
"
onClick
=
{()
=>
handleClick
()}
>
Logout
<
/Nav.Link
>
<
Nav
.
Link
href
=
"
/admin
"
>
<
img
src
=
{
option
}
width
=
"
30
"
height
=
"
30
"
/>
<
img
alt
=
"
관리자
"
src
=
{
option
}
width
=
"
30
"
height
=
"
30
"
/>
<
/Nav.Link
>
<
/Nav
>
<
/Navbar
>
...
...
client/src/Components/SubNav.js
View file @
9cb2f58f
...
...
@@ -22,7 +22,7 @@ function SubNav() {
}
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
"
,
overflowX
:
"
auto
"
}}
>
<
style
type
=
"
text/css
"
>
{
`
.nav-link, .nav-link:hover, .nav-link:active {
...
...
@@ -50,6 +50,7 @@ function SubNav() {
}
`
}
<
/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
>
...
...
client/src/Pages/Account.js
View file @
9cb2f58f
import
React
from
'
react
'
import
MainNav
from
'
../Components/MainNav
'
import
SubNav
from
'
../Components/SubNav
'
function
Account
()
{
return
(
<
div
>
<
MainNav
/>
<
SubNav
/>
<
h5
>
마이페이지
<
/h5
>
<
/div
>
)
...
...
client/src/Pages/Admin.js
View file @
9cb2f58f
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
MainNav
from
'
../Components/MainNav
'
;
import
SubNav
from
'
../Components/SubNav
'
;
import
Pagination
from
'
../Components/Pagination
'
;
import
search
from
'
../search.svg
'
;
import
{
Row
,
Form
,
FormControl
,
Button
,
Card
,
Container
}
from
'
react-bootstrap
'
;
...
...
@@ -31,8 +29,6 @@ function Admin() {
}
`
}
<
/style
>
<
MainNav
/>
<
SubNav
/>
<
Container
>
<
Row
as
=
{
Form
}
onSubmit
=
{
handleSubmit
}
className
=
"
justify-content-end mx-0 my-5
"
>
<
FormControl
type
=
"
text
"
placeholder
=
"
Search
"
style
=
{{
width
:
"
13rem
"
}}
/
>
...
...
client/src/Pages/Home.js
View file @
9cb2f58f
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
MainNav
from
'
../Components/MainNav
'
;
import
SubNav
from
'
../Components/SubNav
'
;
import
{
Card
,
Container
,
Row
}
from
'
react-bootstrap
'
;
function
Home
()
{
return
(
<
div
>
<
MainNav
/>
<
SubNav
/>
<
Container
className
=
"
my-5
"
>
<
div
className
=
"
my-4
"
>
<
h2
style
=
{{
marginRight
:
"
5rem
"
,
marginLeft
:
"
3rem
"
,
marginBottom
:
"
2rem
"
}}
><
u
>
Best
<
/u></
h2
>
...
...
client/src/Pages/Login.js
View file @
9cb2f58f
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
{
Link
,
Redirect
}
from
'
react-router-dom
'
;
import
Nav1
from
'
../Components/MainNav
'
;
import
Nav2
from
'
../Components/SubNav
'
;
import
{
Form
,
Col
,
Container
,
Button
,
Row
}
from
'
react-bootstrap
'
;
function
Login
()
{
...
...
@@ -21,8 +19,7 @@ function Login() {
return
(
<
div
>
<
Nav1
/>
<
Nav2
/>
<
Container
className
=
"
my-5
"
>
<
Row
className
=
"
justify-content-center
"
>
<
Col
md
=
{
5
}
xs
=
{
10
}
className
=
"
border
"
style
=
{{
background
:
'
#F7F3F3
'
}}
>
...
...
client/src/Pages/Payment.js
View file @
9cb2f58f
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
MainNav
from
'
../Components/MainNav
'
;
import
SubNav
from
'
../Components/SubNav
'
;
import
DaumPostcode
from
"
react-daum-postcode
"
;
import
{
Container
,
Card
,
Row
,
Col
,
Button
,
Form
,
FormGroup
}
from
'
react-bootstrap
'
;
import
{
Redirect
}
from
'
react-router-dom
'
;
...
...
@@ -112,9 +110,9 @@ function Payment() {
total_amount
:
22000
,
vat_amount
:
200
,
tax_free_amount
:
0
,
approval_url
:
'
http://localhost:3000/
kakaopay/success
'
,
fail_url
:
'
http://localhost:3000/
kakaopay/fail
'
,
cancel_url
:
'
http://localhost:3000/kakaopay/
cancel
'
,
approval_url
:
'
http://localhost:3000/
account
'
,
fail_url
:
'
http://localhost:3000/
shoppingcart
'
,
cancel_url
:
'
http://localhost:3000/kakaopay/
payment
'
,
})
})
const
data
=
await
response
.
json
()
...
...
@@ -147,8 +145,6 @@ function Payment() {
return
(
<
div
>
<
MainNav
/>
<
SubNav
/>
<
Container
>
<
h3
className
=
"
my-5 font-weight-bold text-center
"
>
주문
/
결제
<
/h3
>
<
div
>
...
...
@@ -222,15 +218,15 @@ function Payment() {
<
/Col
>
<
Col
md
=
{
6
}
className
=
"
p-2
"
>
<
Card
.
Body
>
<
input
type
=
"
image
"
src
=
"
https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png
"
className
=
"
float-right
"
onClick
=
{
deleteCart
}
/
>
<
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
"
src
=
"
https://img.icons8.com/ios-glyphs/20/000000/minus-math.png
"
className
=
"
align-middle
"
onClick
=
{
minusNum
}
/
>
<
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
"
src
=
"
https://img.icons8.com/ios-glyphs/20/000000/plus-math.png
"
className
=
"
align-middle
"
onClick
=
{
plusNum
}
/
>
<
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
>
...
...
@@ -258,7 +254,7 @@ function Payment() {
<
h5
className
=
"
font-weight-bold py-3 border-top border-bottom text-center
"
style
=
{{
background
:
'
#F7F3F3
'
}}
>
결제수단
<
/h5
>
<
div
className
=
"
text-center mt-5
"
>
<
Button
variant
=
"
success
"
className
=
"
align-top
"
onClick
=
{
handleClick
}
>
무통장입금
<
/Button
>
<
input
type
=
"
image
"
src
=
"
img/payment_icon_yellow_small.png
"
onClick
=
{
kakaopay
}
/
>
<
input
type
=
"
image
"
alt
=
"
카카오페이결제
"
src
=
"
img/payment_icon_yellow_small.png
"
onClick
=
{
kakaopay
}
/
>
<
/div
>
{
paymentWay
}
<
/div
>
...
...
client/src/Pages/Product.js
View file @
9cb2f58f
import
axios
from
'
axios
'
;
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
MainNav
from
'
../Components/MainNav
'
;
import
SubNav
from
'
../Components/SubNav
'
;
import
{
Row
,
Col
,
Form
,
Card
,
Button
}
from
'
react-bootstrap
'
;
import
catchErrors
from
'
../utils/catchErrors
'
;
function
Product
()
{
const
[
select
,
setSelect
]
=
useState
({
color
:
""
,
size
:
""
})
const
[
select
,
setSelect
]
=
useState
({
color
:
""
,
size
:
""
})
const
[
cart
,
setCart
]
=
useState
()
const
[
error
,
setError
]
=
useState
(
''
)
function
handleClick
(
e
)
{
const
box
=
e
.
target
.
parentNode
.
parentNode
...
...
@@ -24,14 +25,14 @@ function Product() {
}
function
handleCreate
()
{
console
.
log
(
"
실행
"
,
"
cart=
"
,
cart
)
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
}
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
'
)
...
...
@@ -43,9 +44,29 @@ function Product() {
}
}
async
function
addCart
()
{
// color, size, count, productObjectId(productlist에서 props), userId(로컬) 를 보내줌
try
{
// setError('')
const
response
=
await
axios
.
post
(
'
/api/addcart
'
,
{
userId
:
"
jiwon5393
"
,
productObjectId
:
"
5ff7fd63d41cae4ecce51dd1
"
,
color
:
"
red
"
,
size
:
"
free
"
,
count
:
"
1
"
})
console
.
log
(
response
)
}
catch
(
error
){
// catchErrors(error, setError)
}
alert
(
"
상품등록이 완료되었습니다.
"
)
}
useEffect
(()
=>
{
if
(
Object
.
keys
(
select
).
length
==
2
)
{
setCart
({...
select
})
setCart
({
...
select
})
setSelect
({})
}
},
[
select
])
...
...
@@ -69,8 +90,6 @@ function Product() {
}
`
}
<
/style
>
<
MainNav
/>
<
SubNav
/>
<
Row
className
=
"
justify-content-center mt-5 mx-0
"
>
<
Col
sm
=
{
11
}
md
=
{
4
}
>
<
img
src
=
"
https://img.sonyunara.com/files/goods/65976/1601953605_0.jpg
"
style
=
{{
objectFit
:
"
contain
"
,
width
:
"
100%
"
}}
/
>
...
...
@@ -102,7 +121,7 @@ function Product() {
<
Col
className
=
"
text-right
"
>
14
,
000
원
<
/Col
>
<
/Row
>
<
Row
className
=
"
justify-content-between mx-0 my-3
"
style
=
{{
width
:
"
100%
"
}}
>
<
Button
style
=
{{
width
:
"
49%
"
}}
>
장바구니
<
/Button
>
<
Button
onClick
=
{
addCart
}
style
=
{{
width
:
"
49%
"
}}
>
장바구니
<
/Button
>
<
Button
style
=
{{
width
:
"
49%
"
}}
>
구매하기
<
/Button
>
<
/Row
>
<
/Form
>
...
...
client/src/Pages/ProductRegist.js
View file @
9cb2f58f
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
MainNav
from
'
../Components/MainNav
'
;
import
SubNav
from
'
../Components/SubNav
'
;
import
{
Row
,
Col
,
Button
,
Form
,
Container
}
from
'
react-bootstrap
'
;
import
axios
from
'
axios
'
import
catchErrors
from
'
../utils/catchErrors
'
;
import
{
Redirect
}
from
'
react-router-dom
'
;
let
color
=
{}
let
colors
=
[]
let
addedcolors
=
[]
let
list
=
[]
function
ProductsRegist
()
{
const
[
product
,
setProduct
]
=
useState
()
const
INIT_PRODUCT
=
{
pro_name
:
''
,
price
:
0
,
stock
:
0
,
main_category
:
''
,
sub_category
:
[],
size
:
[],
color
:
[],
description
:
''
,
main_image
:
[],
detail_image
:
[]
}
const
categorys
=
{
"
DRESS
"
:
[
"
LONG DRESS
"
,
"
SHORT DRESS
"
,
"
KNIT DRESS
"
,
"
SHIRT DRESS
"
,
"
PATTERN DRESS
"
,
"
BUSTIER DRESS
"
,
"
TWO-PIECE DRESS
"
],
"
OUTER
"
:
[
"
PADDED JACKET
"
,
"
JACKET
"
,
"
JUMPER
"
,
"
COAT
"
,
"
FLEECE
"
,
"
CARDIGAN / VEST
"
],
"
TOP
"
:
[
"
KNIT
"
,
"
HOODY
"
,
"
BLOUSE
"
,
"
SHIRT
"
,
"
SWEATSHIRT
"
,
"
LONG SLEEVE SHIRT
"
,
"
SHORT SLEEVE / SLEEVELESS SHIRT
"
],
"
PANTS
"
:
[
"
JEANS
"
,
"
SKINNY JEANS
"
,
"
BANDING PANTS
"
,
"
WIDE-FIT PANTS
"
,
"
BOOT-CUT PANTS
"
,
"
STRAIGHT-FIT PANTS
"
,
"
SHORTS
"
,
"
TROUSERS
"
,
"
LEGGINGS
"
,
"
JUMPSUIT / OVERALLS
"
],
"
SKIRT
"
:
[
"
LONG SKIRT
"
,
"
MIDI SKIRT
"
,
"
MINI SKIRT
"
],
"
TRAINING
"
:
[],
"
SHOES
"
:
[
"
SNEAKERS / SLIP-ON
"
,
"
FLAT / LOAFER
"
,
"
HEEL / PUMP
"
,
"
BOOTS
"
,
"
SANDAL / SLIPPER
"
]
}
const
[
product
,
setProduct
]
=
useState
(
INIT_PRODUCT
)
const
[
categoryNum
,
setCategoryNum
]
=
useState
(
0
)
const
[
tag
,
setTag
]
=
useState
(
0
)
const
[
error
,
setError
]
=
useState
(
''
)
const
[
success
,
setSuccess
]
=
useState
(
false
)
const
[
checked
,
setChecked
]
=
useState
({
"
Free
"
:
false
,
"
XL
"
:
false
,
"
L
"
:
false
,
"
M
"
:
false
,
"
S
"
:
false
,
"
XS
"
:
false
})
const
mainCategorys
=
Object
.
keys
(
categorys
)
const
subCategorys
=
Object
.
values
(
categorys
)
function
addCategory
()
{
console
.
log
(
product
)
list
.
push
(
<
div
>
<
span
i
=
{
tag
}
>
{
product
[
"
main_category
"
]}
/ {product
[
"sub_category"
][
tag
]
}</
span
>
<
input
type
=
"
image
"
src
=
"
https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png
"
className
=
"
float-right align-middle
"
onClick
=
{
deleteCategory
}
/
>
<
/div>
)
setTag
(
tag
+
1
)
}
function
deleteCategory
(
e
)
{
const
categ
=
e
.
target
.
parentNode
categ
.
remove
()
product
[
"
sub_category
"
].
splice
(
e
.
target
.
parentNode
.
firstElementChild
.
getAttribute
(
"
i
"
),
1
)
console
.
log
(
product
)
}
function
handleCheckBox
(
e
)
{
setChecked
({
...
checked
,
[
e
.
target
.
value
]:
!
checked
[
`
${
e
.
target
.
value
}
`
]
})
}
function
addColor
()
{
addedcolors
.
push
(
<
div
>
{
color
[
"
color
"
]}
<
/div
>
)
if
(
product
.
color
)
{
setProduct
({
...
product
,
[
color
]:
colors
})
}
else
{
setProduct
({
...
product
,
"
color
"
:
colors
})
}
}
function
handleChange
(
event
)
{
const
{
name
,
value
}
=
event
.
target
console
.
log
(
"
file=
"
,
event
.
target
.
files
)
console
.
log
(
"
name=
"
,
name
,
"
value=
"
,
value
)
setProduct
({
...
product
,
[
name
]:
value
})
if
(
event
.
target
.
name
===
"
sub_category
"
)
{
product
[
"
sub_category
"
].
push
(
event
.
target
.
value
)
}
else
if
(
event
.
target
.
name
===
"
color
"
)
{
color
[
event
.
target
.
name
]
=
event
.
target
.
value
// console.log(color)
}
else
{
setProduct
({
...
product
,
[
name
]:
value
})
}
if
(
event
.
target
.
name
===
"
main_category
"
)
{
setCategoryNum
(
event
.
target
.
selectedIndex
-
1
)
}
}
function
handleSubmit
(
e
)
{
async
function
handleSubmit
(
e
)
{
e
.
preventDefault
()
const
sizes
=
[]
for
(
let
[
key
,
value
]
of
Object
.
entries
(
checked
))
{
if
(
value
===
true
)
{
sizes
.
push
(
key
)
}
}
product
[
"
size
"
].
push
(
sizes
)
const
formData
=
new
FormData
();
for
(
let
key
of
Object
.
keys
(
product
)
)
{
for
(
let
key
in
product
)
{
formData
.
append
(
key
,
product
[
key
])
}
console
.
log
(
"
formData=
"
,
formData
)
axios
.
post
(
'
/api/product/regist
'
,{
data
:
formData
}).
then
(
function
(
res
)
{
console
.
log
(
"
client의 res=
"
,
res
)
})
console
.
log
(
"
formData=
"
,
formData
)
console
.
log
(
product
)
try
{
const
response
=
axios
.
post
(
'
/api/product/regist
'
,
{
data
:
formData
})
setSuccess
(
true
)
console
.
log
(
response
)
}
catch
(
error
)
{
catchErrors
(
error
,
setError
)
}
}
if
(
success
)
{
return
<
Redirect
to
=
'
/
'
/>
}
return
(
<
div
>
{
console
.
log
(
product
)}
<
MainNav
/>
<
SubNav
/>
<
Container
>
<
Row
className
=
"
justify-content-md-center
"
>
<
Col
md
=
{
6
}
className
=
"
border
m-5
p-
3
"
style
=
{{
background
:
'
#F7F3F3
'
}}
>
<
Col
md
=
{
8
}
className
=
"
border p-
1
"
style
=
{{
background
:
'
#F7F3F3
'
}}
>
<
h2
className
=
"
text-center mt-5 font-weight-bold
"
>
상품등록
<
/h2
>
<
Form
className
=
"
p-5
"
onSubmit
=
{
handleSubmit
}
>
<
Form
.
Group
controlId
=
"
productNameform
"
>
...
...
@@ -52,22 +137,53 @@ function ProductsRegist() {
<
Form
.
Group
>
<
Form
.
Label
>
분류
<
/Form.Label
>
<
Row
>
<
Col
md
=
{
6
}
>
<
Form
.
Control
as
=
"
select
"
name
=
"
main_category
"
placeholder
=
"
상위분류
"
onChange
=
{
handleChange
}
>
<
option
>
Pants
<
/option
>
<
option
>
Skirt
<
/option
>
<
option
>
Outer
<
/option
>
<
Col
md
=
{
4
}
>
<
Form
.
Control
as
=
"
select
"
name
=
"
main_category
"
onChange
=
{
handleChange
}
>
<
option
value
=
""
>
상위분류
<
/option
>
{
mainCategorys
.
map
((
main
)
=>
(
<
option
value
=
{
main
}
>
{
main
}
<
/option
>
))}
<
/Form.Control
>
<
/Col
>
<
Col
md
=
{
6
}
>
<
Form
.
Control
as
=
"
select
"
name
=
"
sub_category
"
placeholder
=
"
하위분류
"
onChange
=
{
handleChange
}
>
<
option
>
JEANS
<
/option
>
<
option
>
SKINNY
JEANS
<
/option
>
<
option
>
BANDING
PANTS
<
/option
>
<
Form
.
Control
as
=
"
select
"
name
=
"
sub_category
"
onChange
=
{
handleChange
}
>
<
option
value
=
""
>
하위분류
<
/option
>
{
subCategorys
[
categoryNum
].
map
((
sub
)
=>
(
<
option
value
=
{
sub
}
>
{
sub
}
<
/option
>
))}
<
/Form.Control
>
<
/Col
>
<
Col
>
<
Button
className
=
"
float-right
"
style
=
{{
background
:
'
#91877F
'
,
borderColor
:
'
#91877F
'
}}
onClick
=
{
addCategory
}
>
추가
<
/Button
>
<
/Col
>
<
/Row
>
{
list
.
map
((
element
)
=>
element
)}
<
/Form.Group
>
<
Form
.
Group
>
<
Form
.
Label
>
사이즈
<
/Form.Label
>
{
/* {console.log(checked)} */
}
<
Form
.
Check
type
=
"
checkbox
"
name
=
"
size
"
label
=
"
Free
"
value
=
"
Free
"
onChange
=
{
handleCheckBox
}
/
>
<
Form
.
Check
type
=
"
checkbox
"
name
=
"
size
"
label
=
"
XL
"
value
=
"
XL
"
onChange
=
{
handleCheckBox
}
/
>
<
Form
.
Check
type
=
"
checkbox
"
name
=
"
size
"
label
=
"
L
"
value
=
"
L
"
onChange
=
{
handleCheckBox
}
/
>
<
Form
.
Check
type
=
"
checkbox
"
name
=
"
size
"
label
=
"
M
"
value
=
"
M
"
onChange
=
{
handleCheckBox
}
/
>
<
Form
.
Check
type
=
"
checkbox
"
name
=
"
size
"
label
=
"
S
"
value
=
"
S
"
onChange
=
{
handleCheckBox
}
/
>
<
Form
.
Check
type
=
"
checkbox
"
name
=
"
size
"
label
=
"
XS
"
value
=
"
XS
"
onChange
=
{
handleCheckBox
}
/
>
<
/Form.Group
>
<
Form
.
Group
>
<
Form
.
Label
>
색상
<
/Form.Label
>
<
Row
>
<
Col
md
=
{
10
}
>
<
Form
.
Control
as
=
"
textarea
"
rows
=
{
1
}
name
=
"
color
"
placeholder
=
"
색상
"
onChange
=
{
handleChange
}
/
>
<
/Col
>
<
Col
>
<
Button
className
=
"
float-right
"
style
=
{{
background
:
'
#91877F
'
,
borderColor
:
'
#91877F
'
}}
onClick
=
{
addColor
}
>
추가
<
/Button
>
<
/Col
>
<
/Row
>
{
addedcolors
.
map
((
element
)
=>
element
)}
<
/Form.Group
>
<
Form
.
Group
controlId
=
"
productDescriptionform
"
>
<
Form
.
Label
>
상품설명
<
/Form.Label
>
<
Form
.
Control
as
=
"
textarea
"
name
=
"
description
"
rows
=
{
3
}
placeholder
=
"
상품을 설명해주세요
"
onChange
=
{
handleChange
}
/
>
...
...
@@ -80,7 +196,7 @@ function ProductsRegist() {
<
Form
.
Label
>
상세이미지
<
/Form.Label
>
<
Form
.
File
id
=
"
productImageform
"
name
=
"
detail_image
"
onChange
=
{
handleChange
}
/
>
<
/Form.Group
>
<
Button
className
=
"
float-right
"
variant
=
"
primary
"
type
=
"
submit
"
style
=
{{
background
:
'
#91877F
'
,
borderColor
:
'
#91877F
'
}}
>
등록
<
/Button
>
<
Button
className
=
"
float-right
"
type
=
"
submit
"
style
=
{{
background
:
'
#91877F
'
,
borderColor
:
'
#91877F
'
}}
>
등록
<
/Button
>
<
/Form
>
<
/Col
>
<
/Row
>
...
...
client/src/Pages/ProductsList.js
View file @
9cb2f58f
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
MainNav
from
'
../Components/MainNav
'
;
import
SubNav
from
'
../Components/SubNav
'
;
import
Pagination
from
'
../Components/Pagination
'
;
import
search
from
'
../search.svg
'
;
import
{
Container
,
Row
,
Col
,
Form
,
FormControl
,
Button
,
Card
,
Dropdown
}
from
'
react-bootstrap
'
;
...
...
@@ -27,8 +25,6 @@ function ProductsList() {
}
`
}
<
/style
>
<
MainNav
/>
<
SubNav
/>
<
Container
>
<
Row
className
=
"
justify-content-center mx-0 my-4
"
>
<
Col
sm
=
{
10
}
>
...
...
client/src/Pages/ShoppingCart.js
View file @
9cb2f58f
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
{
Redirect
}
from
'
react-router-dom
'
;
import
MainNav
from
'
../Components/MainNav
'
;
import
SubNav
from
'
../Components/SubNav
'
;
import
{
Card
,
Button
,
Container
,
Row
,
Col
}
from
'
react-bootstrap
'
;
import
axios
from
'
axios
'
;
function
ShoppingCart
()
{
...
...
@@ -25,10 +24,13 @@ function ShoppingCart() {
console
.
log
(
'
카트에 담긴 항목을 삭제했습니다.
'
)
}
// async function getCart(){
// const response = await axios.get('/')
// }
return
(
<
div
>
<
MainNav
/>
<
SubNav
/>
{
/* {getCart} */
}
<
Container
className
=
"
justify-content-center
"
>
<
h3
className
=
"
my-5 font-weight-bold text-center
"
>
장바구니
<
/h3
>
<
div
>
...
...
@@ -43,15 +45,15 @@ function ShoppingCart() {
<
/Col
>
<
Col
md
=
{
6
}
className
=
"
p-2
"
>
<
Card
.
Body
>
<
input
type
=
"
image
"
src
=
"
https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png
"
className
=
"
float-right
"
onClick
=
{
deleteCart
}
/
>
<
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
"
src
=
"
https://img.icons8.com/ios-glyphs/20/000000/minus-math.png
"
className
=
"
align-middle
"
onClick
=
{
minusNum
}
/
>
<
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
"
src
=
"
https://img.icons8.com/ios-glyphs/20/000000/plus-math.png
"
className
=
"
align-middle
"
onClick
=
{
plusNum
}
/
>
<
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
>
...
...
client/src/Pages/Signup.js
View file @
9cb2f58f
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
{
Redirect
}
from
'
react-router-dom
'
;
import
Nav1
from
'
../Components/MainNav
'
;
import
Nav2
from
'
../Components/SubNav
'
;
import
{
Form
,
Col
,
Container
,
Button
,
Row
,
Alert
}
from
'
react-bootstrap
'
import
FormCheckInput
from
'
react-bootstrap/esm/FormCheckInput
'
;
import
axios
from
'
axios
'
;
const
INIT_USER
=
{
...
...
@@ -63,8 +60,6 @@ function Signup() {
return
(
<
div
>
<
Nav1
/>
<
Nav2
/>
<
Container
className
=
"
my-5
"
>
{
error
&&
<
Alert
variant
=
'
danger
'
>
{
error
}
...
...
client/src/index.js
View file @
9cb2f58f
import
React
from
'
react
'
;
import
ReactDOM
from
'
react-dom
'
;
import
{
BrowserRouter
as
Router
,
Route
,
Redirect
,
Switch
}
from
'
react-router-dom
'
;
import
Home
from
'
./Pages/Home
'
;
import
Login
from
'
./Pages/Login
'
;
import
Signup
from
'
./Pages/Signup
'
;
import
Product
from
"
./Pages/Product
"
;
import
ProductsList
from
"
./Pages/ProductsList
"
;
import
Admin
from
'
./Pages/Admin
'
;
import
ProductRegist
from
'
./Pages/ProductRegist
'
;
import
ShoppingCart
from
'
./Pages/ShoppingCart
'
;
import
Payment
from
'
./Pages/Payment
'
;
import
reportWebVitals
from
'
./reportWebVitals
'
;
import
'
bootstrap/dist/css/bootstrap.min.css
'
;
import
Account
from
'
./Pages/Account
'
;
import
Mypage
from
'
./Pages/Mypage
'
import
App
from
'
./App
'
;
ReactDOM
.
render
(
<
React
.
StrictMode
>
<
Router
>
<
Switch
>
<
Route
exact
path
=
"
/
"
component
=
{
Home
}
/
>
<
Route
path
=
"
/login
"
component
=
{
Login
}
/
>
<
Route
path
=
"
/signup
"
component
=
{
Signup
}
/
>
<
Route
path
=
"
/list
"
component
=
{
ProductsList
}
/
>
<
Route
path
=
"
/product
"
component
=
{
Product
}
/
>
<
Route
path
=
"
/productslist
"
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
;}}
/
>
<
Route
path
=
'
/mypage
'
component
=
{
Mypage
}
/
>
<
Redirect
path
=
"
/
"
to
=
"
/
"
/>
<
/Switch
>
<
/Router
>
<
App
/>
<
/React.StrictMode>
,
document
.
getElementById
(
'
root
'
)
);
...
...
client/src/utils/catchErrors.js
0 → 100644
View file @
9cb2f58f
// import React from 'react'
function
catchErrors
(
error
,
displayError
)
{
let
errorMsg
if
(
error
.
response
){
errorMsg
=
error
.
response
.
data
console
.
log
(
errorMsg
)
}
else
if
(
error
.
request
){
errorMsg
=
error
.
request
console
.
log
(
errorMsg
)
}
else
{
errorMsg
=
error
.
message
console
.
log
(
errorMsg
)
}
displayError
(
errorMsg
)
}
export
default
catchErrors
server/app.js
View file @
9cb2f58f
...
...
@@ -3,6 +3,7 @@ import express from 'express';
import
connectDb
from
'
./schemas/index.js
'
import
userRouter
from
"
./routes/user.routes.js
"
;
import
productRouter
from
'
./routes/product.routes.js
'
;
import
cartRouter
from
'
./routes/cart.routes.js
'
;
import
path
from
'
path
'
import
kakaopayRoutes
from
'
./routes/kakaopay.routes.js
'
import
config
from
'
./config.js
'
...
...
@@ -23,6 +24,7 @@ app.use(express.static(path.join(process.cwd(), 'dist')))
app
.
use
(
'
/
'
,
kakaopayRoutes
)
app
.
use
(
'
/api/users
'
,
userRouter
)
app
.
use
(
'
/api/product
'
,
productRouter
)
app
.
use
(
'
/api/addcart
'
,
cartRouter
)
app
.
listen
(
config
.
port
,
()
=>
{
console
.
info
(
'
Server started on port %s.
'
,
config
.
port
)
...
...
server/controllers/cart.controller.js
0 → 100644
View file @
9cb2f58f
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(로컬)
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 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('사용자 아이디 실패')
// }
}
export
default
{
cart
}
\ No newline at end of file
server/controllers/product.controller.js
View file @
9cb2f58f
...
...
@@ -2,14 +2,11 @@ import Product from "../schemas/Product.js";
const
regist
=
async
(
req
,
res
)
=>
{
console
.
log
(
'
req.body=
'
,
req
.
body
)
console
.
log
(
'
req.data=
'
,
req
.
data
)
console
.
log
(
'
req.body.data=
'
,
req
.
body
.
data
)
const
{
pro_name
,
price
,
stock
,
main_category
,
sub_category
,
description
,
main_image
,
detail_image
}
=
req
.
body
try
{
const
newProduct
=
await
new
Product
({
pro_name
,
price
,
stock
,
main_category
,
sub_category
,
description
,
main_image
,
detail_image
}).
save
()
console
.
log
(
newProduct
)
res
.
json
(
newProduct
)
}
catch
(
error
)
{
console
.
log
(
error
)
...
...
server/routes/cart.routes.js
0 → 100644
View file @
9cb2f58f
import
express
from
"
express
"
;
import
cartCtrl
from
'
../controllers/cart.controller.js
'
;
const
router
=
express
.
Router
()
router
.
route
(
'
/
'
)
.
post
(
cartCtrl
.
cart
)
// .get()
export
default
router
\ No newline at end of file
Prev
1
2
Next
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