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
43450898
Commit
43450898
authored
Jan 20, 2021
by
Jiwon Yoon
Browse files
Merge branch 'ourMaster' into jiwon
parents
28a4a95f
22e80f26
Changes
18
Hide whitespace changes
Inline
Side-by-side
client/src/App.js
View file @
43450898
...
...
@@ -24,6 +24,7 @@ function App() {
<
Route
path
=
"
/login
"
component
=
{
Login
}
/
>
<
Route
path
=
"
/signup
"
component
=
{
Signup
}
/
>
<
Route
path
=
"
/product/:productId
"
component
=
{
Product
}
/
>
<
Route
path
=
"
/categories/:main/:sub
"
component
=
{
ProductsList
}
/
>
<
Route
path
=
"
/categories/:main
"
component
=
{
ProductsList
}
/
>
<
Route
path
=
"
/admin
"
component
=
{
Admin
}
/
>
<
Route
path
=
"
/regist
"
component
=
{
ProductRegist
}
/
>
...
...
client/src/Components/ListCard.js
View file @
43450898
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
{
Card
}
from
'
react-bootstrap
'
;
import
{
Card
,
Button
}
from
'
react-bootstrap
'
;
function
ListCard
({
id
,
name
,
price
,
main_img
})
{
function
handleDelete
(
e
)
{
const
card
=
e
.
target
.
parentNode
.
parentNode
alert
(
'
해당 상품을 성공적으로 삭제하였습니다.
'
)
card
.
remove
()
}
return
(
<
Card
id
=
{
id
}
className
=
"
m
t-5
"
style
=
{{
width
:
"
18rem
"
,
margin
:
"
auto
"
}}
>
<
Card
id
=
{
id
}
className
=
"
m
-3
"
style
=
{{
width
:
"
18rem
"
}}
>
<
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
>
<
Button
className
=
"
float-right
"
onClick
=
{
handleDelete
}
>
삭제
<
/Button
>
<
/Card.Body
>
<
/Card
>
)
}
}
export
default
ListCard
\ No newline at end of file
client/src/Components/SubNav.js
View file @
43450898
...
...
@@ -8,7 +8,6 @@ function SubNav() {
const
[
categoriesDiv
,
setCategoriesDiv
]
=
useState
([])
const
[
error
,
setError
]
=
useState
(
''
)
useEffect
(
async
()
=>
{
try
{
const
response
=
await
axios
.
get
(
'
/api/categories/main
'
)
...
...
@@ -17,6 +16,7 @@ function SubNav() {
const
url
=
ele
.
toLowerCase
()
list
.
push
(
<
Nav
.
Link
as
=
{
Link
}
to
=
{
`/categories/
${
url
}
`
}
>
{
ele
}
<
/Nav.Link
>
//categories/${SubNav.url}/&{url}
)
})
setCategoriesDiv
(
list
)
...
...
@@ -34,7 +34,7 @@ function SubNav() {
}
`
}
<
/style
>
<
Nav
style
=
{{
overflowX
:
"
auto
"
}}
>
<
Nav
style
=
{{
overflowX
:
"
auto
"
}}
>
{
categoriesDiv
.
map
(
item
=>
item
)}
<
/Nav
>
<
/Navbar
>
...
...
client/src/Pages/Account.js
View file @
43450898
import
React
,
{
useEffect
,
useState
}
from
'
react
'
import
{
Card
,
Image
,
Container
,
Row
,
Col
,
Table
,
Accordion
,
Button
,
Form
,
Modal
,
Alert
}
from
'
react-bootstrap
'
import
{
Link
}
from
'
react-router-dom
'
;
import
axios
from
'
axios
'
import
catchError
s
from
'
../utils/catchErrors
'
;
import
axios
from
'
axios
'
;
import
catchError
from
'
../utils/catchErrors
'
;
import
{
isAuthenticated
}
from
'
../utils/auth
'
;
const
INIT_ACCOUNT
=
{
...
...
@@ -10,13 +10,12 @@ const INIT_ACCOUNT = {
avatarUrl
:
''
}
function
Account
()
{
const
[
account
,
setAccount
]
=
useState
(
INIT_ACCOUNT
)
const
[
show
,
setShow
]
=
useState
(
false
);
const
[
error
,
setError
]
=
useState
(
""
)
const
userId
=
isAuthenticated
()
async
function
getUsername
(
user
)
{
// console.log("tlg")
try
{
...
...
@@ -24,7 +23,7 @@ function Account() {
setAccount
(
response
.
data
)
// console.log('555555555', response.data);
}
catch
(
error
)
{
catchError
s
(
error
,
setError
)
catchError
(
error
,
setError
)
// console.log('error2222', error)
}
}
...
...
@@ -33,13 +32,6 @@ function Account() {
getUsername
(
userId
)
},
[
userId
])
const
[
show
,
setShow
]
=
useState
(
false
);
const
handleClose
=
()
=>
setShow
(
false
)
const
handleShow
=
()
=>
setShow
(
true
)
const
handleChange
=
(
event
)
=>
{
const
{
name
,
value
,
files
}
=
event
.
target
if
(
files
)
{
...
...
@@ -63,7 +55,7 @@ function Account() {
window
.
location
.
reload
()
}
}
catch
(
error
)
{
catchError
s
(
error
,
setError
)
catchError
(
error
,
setError
)
}
setShow
(
false
)
}
...
...
@@ -81,30 +73,37 @@ function Account() {
window
.
location
.
reload
()
}
}
catch
(
error
)
{
catchError
s
(
error
,
setError
)
catchError
(
error
,
setError
)
}
}
else
{
alert
(
"
파일을 선택해주세요.
"
)
}
}
}
return
(
<
Container
className
=
"
px-3
"
>
<
style
type
=
"
text/css
"
>
{
`
a, a:hover, a:active {
color: #91877F;
text-decoration-color: #91877F;
}
`
}
<
/style
>
<
h3
className
=
"
my-4 mx-3 font-weight-bold
"
>
My
Page
<
/h3
>
<
Card
md
=
{
3
}
className
=
"
p-1 mb-4
"
style
=
{{
background
:
'
#F7F3F3
'
}}
>
<
Row
className
=
"
p-2
"
>
<
Col
md
=
{
5
}
className
=
"
d-flex align-content-center justify-content-center
"
>
<
Button
variant
=
"
outline-light
"
onClick
=
{
handleShow
}
>
<
Button
variant
=
"
outline-light
"
onClick
=
{
()
=>
setShow
(
true
)
}
>
{
account
.
avatarUrl
?
(
<
Image
src
=
{
account
.
avatarUrl
&&
`/image/
${
account
.
avatarUrl
}
`
}
className
=
"
img-thumbnail
"
<
Image
src
=
{
account
.
avatarUrl
&&
`/image
s
/
${
account
.
avatarUrl
}
`
}
className
=
"
img-thumbnail
"
roundedCircle
style
=
{{
objectFit
:
"
cover
"
,
width
:
"
10rem
"
,
height
:
"
10rem
"
}}
/
>
)
:
(
<
Image
src
=
"
/icon/person.svg
"
className
=
"
img-thumbnail
"
roundedCircle
style
=
{{
objectFit
:
"
cover
"
,
width
:
"
10rem
"
,
height
:
"
10rem
"
}}
/
>
)}
<
/Button
>
<
Modal
show
=
{
show
}
onHide
=
{
handleClo
se
}
>
<
Modal
show
=
{
show
}
onHide
=
{
()
=>
setShow
(
fal
se
)
}
>
<
Modal
.
Header
closeButton
>
<
Modal
.
Title
>
이미지를
변경하시겠습니까
?
<
/Modal.Title
>
<
/Modal.Header
>
...
...
@@ -118,8 +117,8 @@ function Account() {
className
=
"
d-flex justify-content-start
"
><
small
>
기본이미지로
<
/small></
Button
>
{
/* 기본이미지로 보내기 */
}
<
/Col
>
<
Button
variant
=
"
secondary
"
onClick
=
{
handleClo
se
}
>
취소
<
/Button
>
<
Button
variant
=
"
primary
"
type
=
"
submit
"
onClick
=
{
handleClo
se
}
>
저장
<
/Button
>
<
Button
variant
=
"
secondary
"
onClick
=
{
()
=>
setShow
(
fal
se
)
}
>
취소
<
/Button
>
<
Button
variant
=
"
primary
"
type
=
"
submit
"
onClick
=
{
()
=>
setShow
(
fal
se
)
}
>
저장
<
/Button
>
<
/Modal.Footer
>
<
/Form
>
<
/Modal
>
...
...
@@ -134,15 +133,15 @@ function Account() {
<
/Row
>
<
Row
className
=
"
px-3
"
>
<
Card
.
Body
className
=
"
p-2 text-center
"
>
<
h4
><
Link
to
=
"
/
"
class
=
"
link-warning
"
>
<
h4
><
Link
to
=
"
/
"
>
<
strong
title
=
"
홈으로
"
>
<
Image
src
=
"
/icon/mypagetiger.svg
"
width
=
{
"
30rem
"
}
roundedCircle
className
=
"
img-thumbnail
"
>
<
/Image>KU
#
<
/strong
>
<
/strong
>
<
/Link
>
{
/* 홈페이지로 돌아가기 */
}
를
방문해주신
<
em
>
{
account
.
name
}
<
/em> 님,<br></
br
>
진심으로
환영합니다
!
즐거운
쇼핑
되세요
.
<
/h4
>
를
방문해주신
<
em
>
{
account
.
name
}
<
/em> 님,<br /
>
진심으로
환영합니다
!
즐거운
쇼핑
되세요
.
<
/h4
>
<
/Card.Body
>
<
/Row
>
<
Row
className
=
"
mr-1 text-muted d-flex justify-content-end
"
>
...
...
client/src/Pages/Admin.js
View file @
43450898
import
React
from
'
react
'
;
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
{
Redirect
}
from
'
react-router-dom
'
;
import
ListCard
from
'
../Components/ListCard
'
;
import
Pagination
from
'
../Components/Pagination
'
;
import
axios
from
'
axios
'
;
import
{
isAdmin
}
from
"
../utils/auth
"
;
import
catchError
from
'
../utils/catchErrors
'
;
import
{
Row
,
Form
,
FormControl
,
Button
,
Card
,
Container
}
from
'
react-bootstrap
'
;
function
Admin
()
{
function
handleClick
(
e
)
{
const
card
=
e
.
target
.
parentNode
.
parentNode
alert
(
'
해당 상품을 성공적으로 삭제하였습니다.
'
)
card
.
remove
()
const
[
productlist
,
setProductlist
]
=
useState
([])
const
[
error
,
setError
]
=
useState
(
''
)
const
role
=
isAdmin
()
useEffect
(()
=>
{
getProductlist
()
},
[])
async
function
getProductlist
()
{
try
{
const
response
=
await
axios
.
get
(
`/api/product/getproduct/all`
)
console
.
log
(
"
response.data=
"
,
response
.
data
)
setProductlist
(
response
.
data
)
}
catch
(
error
)
{
catchError
(
error
,
setError
)
}
}
function
handleSearch
()
{
}
function
handleSubmit
(
e
)
{
e
.
preventDefault
()
}
if
(
!
role
)
{
alert
(
'
죄송합니다.접근 권한이 없습니다.
'
)
return
<
Redirect
to
=
"
/
"
/>
}
return
(
<
div
>
<
Container
>
<
style
type
=
"
text/css
"
>
{
`
.btn {
...
...
@@ -28,97 +54,20 @@ function Admin() {
}
`
}
<
/style
>
<
Container
>
<
Row
as
=
{
Form
}
onSubmit
=
{
handleSubmit
}
className
=
"
justify-content-end mx-0 my-5
"
>
<
FormControl
type
=
"
text
"
placeholder
=
"
Search
"
style
=
{{
width
:
"
13rem
"
}}
/
>
<
Button
type
=
"
submit
"
className
=
"
px-2
"
>
<
img
src
=
"
icon/search.svg
"
width
=
"
20
"
height
=
"
20
"
/>
<
/Button
>
<
Button
sm
=
{
2
}
xs
=
{
6
}
type
=
"
button
"
href
=
"
/regist
"
className
=
"
ml-1
"
>
상품
등록
<
/Button
>
<
/Row
>
<
Row
className
=
"
justify-content-start m-5
"
>
<
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
>
재고
:
8
<
br
/>
구매자
수
:
10
<
/Card.Text
>
<
Button
className
=
"
float-right
"
onClick
=
{(
e
)
=>
handleClick
(
e
)}
>
삭제
<
/Button
>
<
/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
>
재고
:
20
<
br
/>
구매자
수
:
60
<
/Card.Text
>
<
Button
className
=
"
float-right
"
onClick
=
{(
e
)
=>
handleClick
(
e
)}
>
삭제
<
/Button
>
<
/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
>
재고
:
34
<
br
/>
구매자
수
:
5
<
/Card.Text
>
<
Button
className
=
"
float-right
"
onClick
=
{(
e
)
=>
handleClick
(
e
)}
>
삭제
<
/Button
>
<
/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
>
재고
:
50
<
br
/>
구매자
수
:
18
<
/Card.Text
>
<
Button
className
=
"
float-right
"
onClick
=
{(
e
)
=>
handleClick
(
e
)}
>
삭제
<
/Button
>
<
/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
>
재고
:
35
<
br
/>
구매자
수
:
70
<
/Card.Text
>
<
Button
className
=
"
float-right
"
onClick
=
{(
e
)
=>
handleClick
(
e
)}
>
삭제
<
/Button
>
<
/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
>
재고
:
40
<
br
/>
구매자
수
:
30
<
/Card.Text
>
<
Button
className
=
"
float-right
"
onClick
=
{(
e
)
=>
handleClick
(
e
)}
>
삭제
<
/Button
>
<
/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
>
재고
:
15
<
br
/>
구매자
수
:
50
<
/Card.Text
>
<
Button
className
=
"
float-right
"
onClick
=
{(
e
)
=>
handleClick
(
e
)}
>
삭제
<
/Button
>
<
/Card.Body
>
<
/Card
>
<
/Row
>
<
Pagination
/>
<
/Container
>
<
/div
>
<
Row
as
=
{
Form
}
onSubmit
=
{
handleSubmit
}
className
=
"
justify-content-end mx-0 my-5
"
>
<
FormControl
type
=
"
text
"
placeholder
=
"
Search
"
style
=
{{
width
:
"
13rem
"
}}
/
>
<
Button
type
=
"
submit
"
className
=
"
px-2
"
>
<
img
src
=
"
icon/search.svg
"
width
=
"
20
"
height
=
"
20
"
/>
<
/Button
>
<
Button
sm
=
{
2
}
xs
=
{
6
}
type
=
"
button
"
href
=
"
/regist
"
className
=
"
ml-1
"
>
상품
등록
<
/Button
>
<
/Row
>
<
Row
className
=
"
justify-content-center m-5
"
>
{
productlist
.
map
(
pro
=>
(
<
ListCard
id
=
{
pro
.
_id
}
name
=
{
pro
.
pro_name
}
price
=
{
pro
.
price
}
main_img
=
{
pro
.
main_imgUrl
}
/
>
))}
<
/Row
>
<
Pagination
/>
<
/Container
>
)
}
...
...
client/src/Pages/Home.js
View file @
43450898
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
{
Link
}
from
'
react-router-dom
'
;
import
ListCard
from
'
../Components/ListCard
'
;
import
axios
from
'
axios
'
;
import
catchError
from
'
../utils/catchErrors
'
;
import
{
Card
,
Container
,
Row
}
from
'
react-bootstrap
'
;
import
{
Container
,
Row
}
from
'
react-bootstrap
'
;
function
Home
()
{
const
[
productlist
,
setProductlist
]
=
useState
([])
const
INIT_PRODUCT
=
{
bestProduct
:
[],
newProduct
:
[],
}
const
[
productlist
,
setProductlist
]
=
useState
(
INIT_PRODUCT
)
const
[
error
,
setError
]
=
useState
(
''
)
useEffect
(()
=>
{
...
...
@@ -16,78 +21,67 @@ function Home() {
async
function
getProductlist
()
{
try
{
const
response
=
await
axios
.
get
(
`/api/product/getproduct`
)
console
.
log
(
response
.
data
)
setProductlist
(
response
.
data
)
console
.
log
(
"
res=
"
,
response
.
data
)
setProductlist
(
{
bestProduct
:
response
.
data
.
bestProduct
,
newProduct
:
response
.
data
.
newProduct
}
)
}
catch
(
error
)
{
catchError
(
error
,
setError
)
}
}
return
(
<
div
>
<
Container
className
=
"
my-5
"
>
<
div
className
=
"
my-4
"
>
<
h2
style
=
{{
marginRight
:
"
5rem
"
,
marginLeft
:
"
3rem
"
,
marginBottom
:
"
2rem
"
}}
><
u
>
Best
<
/u></
h2
>
<
Row
className
=
"
justify-content-center mx-0
"
>
<
ListCard
productlist
=
{
productlist
}
/
>
<
Card
className
=
"
mx-1 my-2
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
/icon/asd.jpg
"
/>
<
Card
.
Body
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
/Card.Body
>
<
/Card
>
<
/Row
>
<
/div
>
<
div
className
=
"
my-4
"
>
<
h2
style
=
{{
marginRight
:
"
5rem
"
,
marginLeft
:
"
3rem
"
,
marginBottom
:
"
2rem
"
,
marginTop
:
"
2rem
"
}}
><
u
>
New
Arrival
<
/u></
h2
>
<
Row
className
=
"
justify-content-center mx-0
"
>
<
Card
className
=
"
mx-1 my-2
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
/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
.
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
.
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
.
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
.
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
.
Body
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
/Card.Body
>
<
/Card
>
<
/Row
>
<
/div
>
<
/Container
>
<
/div
>
<
Container
>
<
style
type
=
"
text/css
"
>
{
`
a, a:hover, a:active {
color: #000;
text-decoration: none;
`
}
<
/style
>
<
div
className
=
"
my-4
"
>
<
h2
style
=
{{
marginRight
:
"
5rem
"
,
marginLeft
:
"
3rem
"
,
marginBottom
:
"
2rem
"
}}
><
u
>
Best
<
/u></
h2
>
<
Row
className
=
"
justify-content-center mx-0
"
>
{
productlist
.
bestProduct
.
map
(
pro
=>
(
<
Link
to
=
{{
pathname
:
`/product/
${
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
>
<
/div
>
<
div
className
=
"
my-4
"
>
<
h2
style
=
{{
marginRight
:
"
5rem
"
,
marginLeft
:
"
3rem
"
,
marginBottom
:
"
2rem
"
,
marginTop
:
"
2rem
"
}}
><
u
>
New
Arrival
<
/u></
h2
>
<
Row
className
=
"
justify-content-center mx-0
"
>
{
productlist
.
newProduct
.
map
(
pro
=>
(
<
Link
to
=
{{
pathname
:
`/product/
${
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
>
<
/div
>
<
/Container
>
)
}
...
...
client/src/Pages/Login.js
View file @
43450898
...
...
@@ -21,7 +21,6 @@ function Login() {
function
handleChange
(
event
)
{
const
{
name
,
value
}
=
event
.
target
setUser
({
...
user
,
[
name
]:
value
})
}
async
function
handleSubmit
(
event
)
{
...
...
@@ -47,8 +46,6 @@ function Login() {
window
.
location
.
href
=
'
/
'
}
return
(
<
Container
className
=
"
my-5
"
>
<
Row
className
=
"
justify-content-center
"
>
...
...
client/src/Pages/ProductRegist.js
View file @
43450898
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
{
Redirect
}
from
'
react-router-dom
'
;
import
{
Row
,
Col
,
Button
,
Form
,
Container
,
Alert
}
from
'
react-bootstrap
'
;
import
{
Row
,
Col
,
Button
,
Form
,
Container
,
Alert
,
Spinner
}
from
'
react-bootstrap
'
;
import
axios
from
'
axios
'
;
import
catchErrors
from
'
../utils/catchErrors
'
;
...
...
@@ -23,13 +23,17 @@ function ProductsRegist() {
}
const
[
categories
,
setCategories
]
=
useState
({
0
:
[],
1
:
[[]]
})
const
[
product
,
setProduct
]
=
useState
(
INIT_PRODUCT
)
const
[
categoryNum
,
setCategoryNum
]
=
useState
(
0
)
const
[
categoryNum
,
setCategoryNum
]
=
useState
(
''
)
const
[
tag
,
setTag
]
=
useState
(
0
)
const
[
subCate
,
setSubCate
]
=
useState
(
''
)
const
[
color
,
setColor
]
=
useState
({})
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
[
disabled
,
setDisabled
]
=
useState
(
true
)
const
[
loading
,
setLoading
]
=
useState
(
false
)
const
selectRef
=
useRef
(
null
)
const
colorRef
=
useRef
(
null
)
useEffect
(
async
()
=>
{
try
{
...
...
@@ -41,28 +45,37 @@ function ProductsRegist() {
}
},
[])
function
addCategory
()
{
list
.
push
(
<
div
>
<
span
name
=
{
subCate
}
>
{
product
[
"
main_category
"
]}
/ {subCate} </
span
>
<
input
name
=
{
subCate
}
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
)
console
.
log
(
list
)
useEffect
(()
=>
{
const
isProduct
=
Object
.
values
(
product
).
every
(
el
=>
{
console
.
log
(
"
el=
"
,
el
);
Boolean
(
el
)
})
isProduct
?
setDisabled
(
false
)
:
setDisabled
(
true
)
},
[
product
])
function
addCategory
(
e
)
{
if
(
selectRef
.
current
.
value
===
''
)
{
alert
(
'
하위 분류를 반드시 선택해 주세요.
'
)
}
else
{
list
.
push
(
<
div
>
<
span
name
=
{
subCate
}
>
{
product
[
"
main_category
"
]}
/ {subCate} </
span
>
<
input
name
=
{
subCate
}
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
)
selectRef
.
current
.
selectedIndex
=
0
}
}
function
deleteCategory
(
e
)
{
e
.
target
.
parentNode
.
remove
()
const
index
=
product
[
"
sub_category
"
].
findIndex
((
item
)
=>
{
return
item
===
e
.
target
.
name
})
const
index
=
product
[
"
sub_category
"
].
findIndex
((
item
)
=>
{
return
item
===
e
.
target
.
name
})
product
[
"
sub_category
"
].
splice
(
index
,
1
)
setSubCate
(
''
)
console
.
log
(
product
[
"
sub_category
"
].
length
)
}
function
handleCategory
(
e
)
{
const
{
name
,
value
}
=
e
.
target
if
(
e
.
target
.
name
===
"
main_category
"
)
{
setCategoryNum
(
e
.
target
.
selectedIndex
-
1
)
const
{
name
,
value
,
selectedIndex
}
=
e
.
target
if
(
name
===
"
main_category
"
)
{
setCategoryNum
(
selectedIndex
-
1
)
}
if
(
name
===
"
sub_category
"
)
{
product
[
name
].
push
(
value
)
...
...
@@ -70,7 +83,6 @@ function ProductsRegist() {
}
else
{
setProduct
({
...
product
,
[
name
]:
value
})
}
console
.
log
(
value
)
}
function
handleCheckBox
(
e
)
{
...
...
@@ -85,15 +97,16 @@ function ProductsRegist() {
<
input
name
=
{
subCate
}
type
=
"
image
"
src
=
"
https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png
"
className
=
"
float-right align-middle
"
onClick
=
{
deleteColor
}
/
>
<
/div
>
)
setColor
({})
colorRef
.
current
.
value
=
''
setProduct
({
...
product
,
"
colors
"
:
preColors
})
}
function
deleteColor
(
e
)
{
// console.log("e.name=",e.target.name)
e
.
target
.
parentNode
.
remove
()
product
[
"
colors
"
].
splice
(
e
.
name
,
1
)
setColor
({})
console
.
log
(
product
)
//
setColor({})
//
console.log(product)
}
function
handleColor
(
e
)
{
...
...
@@ -102,13 +115,11 @@ function ProductsRegist() {
function
handleChange
(
event
)
{
const
{
name
,
value
,
files
}
=
event
.
target
console
.
log
(
"
event.target.name=
"
,
name
,
"
event.target.value=
"
,
value
)
if
(
files
)
{
setProduct
({
...
product
,
[
name
]:
files
})
}
else
{
setProduct
({
...
product
,
[
name
]:
value
})
}
}
async
function
handleSubmit
(
e
)
{
...
...
@@ -123,7 +134,7 @@ function ProductsRegist() {
console
.
log
(
product
)
const
formData
=
new
FormData
();
for
(
let
key
in
product
)
{
if
(
key
===
"
main_image
"
||
key
===
"
detail_image
"
)
{
if
(
key
===
"
main_image
"
||
key
===
"
detail_image
"
)
{
formData
.
append
(
key
,
product
[
key
][
0
])
}
else
if
(
key
===
"
sizes
"
||
key
===
"
colors
"
){
for
(
let
i
=
0
;
i
<
product
[
key
].
length
;
i
++
){
...
...
@@ -135,15 +146,20 @@ function ProductsRegist() {
}
}
try
{
setLoading
(
true
)
setError
(
''
)
const
response
=
await
axios
.
post
(
'
/api/product/regist
'
,
formData
)
console
.
log
(
response
)
setSuccess
(
true
)
}
catch
(
error
)
{
catchErrors
(
error
,
setError
)
}
finally
{
setLoading
(
false
)
}
}
if
(
success
)
{
alert
(
'
상품 등록을 완료하였습니다.
'
)
return
<
Redirect
to
=
'
/admin
'
/>
}
...
...
@@ -178,11 +194,11 @@ function ProductsRegist() {
<
/Form.Control
>
<
/Col
>
<
Col
md
=
{
6
}
>
<
Form
.
Control
as
=
"
select
"
name
=
"
sub_category
"
onChange
=
{
handleCategory
}
disabled
=
{
product
[
"
main_category
"
]
===
"
TRAINING
"
}
>
<
Form
.
Control
as
=
"
select
"
ref
=
{
selectRef
}
name
=
"
sub_category
"
onChange
=
{
handleCategory
}
>
<
option
value
=
""
>
하위분류
<
/option
>
{
categories
[
1
][
categoryNum
].
map
((
sub
)
=>
(
{
(
categoryNum
===
''
)
?
''
:
(
categories
[
1
][
categoryNum
].
map
((
sub
)
=>
(
<
option
value
=
{
sub
}
>
{
sub
}
<
/option
>
))}
))
)
}
<
/Form.Control
>
<
/Col
>
<
Col
>
...
...
@@ -193,18 +209,37 @@ function ProductsRegist() {
<
/Form.Group
>
<
Form
.
Group
>
<
Form
.
Label
>
사이즈
<
/Form.Label
>
<
Form
.
Check
type
=
"
checkbox
"
name
=
"
sizes
"
label
=
"
Free
"
value
=
"
Free
"
onChange
=
{
handleCheckBox
}
/
>
<
Form
.
Check
type
=
"
checkbox
"
name
=
"
sizes
"
label
=
"
XL
"
value
=
"
XL
"
onChange
=
{
handleCheckBox
}
/
>
<
Form
.
Check
type
=
"
checkbox
"
name
=
"
sizes
"
label
=
"
L
"
value
=
"
L
"
onChange
=
{
handleCheckBox
}
/
>
<
Form
.
Check
type
=
"
checkbox
"
name
=
"
sizes
"
label
=
"
M
"
value
=
"
M
"
onChange
=
{
handleCheckBox
}
/
>
<
Form
.
Check
type
=
"
checkbox
"
name
=
"
sizes
"
label
=
"
S
"
value
=
"
S
"
onChange
=
{
handleCheckBox
}
/
>
<
Form
.
Check
type
=
"
checkbox
"
name
=
"
sizes
"
label
=
"
XS
"
value
=
"
XS
"
onChange
=
{
handleCheckBox
}
/
>
<
Row
>
<
Col
>
<
Form
.
Check
type
=
"
checkbox
"
name
=
"
sizes
"
label
=
"
210
"
value
=
"
210
"
onChange
=
{
handleCheckBox
}
/
>
<
Form
.
Check
type
=
"
checkbox
"
name
=
"
sizes
"
label
=
"
215
"
value
=
"
215
"
onChange
=
{
handleCheckBox
}
/
>
<
Form
.
Check
type
=
"
checkbox
"
name
=
"
sizes
"
label
=
"
220
"
value
=
"
220
"
onChange
=
{
handleCheckBox
}
/
>
<
Form
.
Check
type
=
"
checkbox
"
name
=
"
sizes
"
label
=
"
225
"
value
=
"
225
"
onChange
=
{
handleCheckBox
}
/
>
<
Form
.
Check
type
=
"
checkbox
"
name
=
"
sizes
"
label
=
"
230
"
value
=
"
230
"
onChange
=
{
handleCheckBox
}
/
>
<
Form
.
Check
type
=
"
checkbox
"
name
=
"
sizes
"
label
=
"
235
"
value
=
"
235
"
onChange
=
{
handleCheckBox
}
/
>
<
Form
.
Check
type
=
"
checkbox
"
name
=
"
sizes
"
label
=
"
240
"
value
=
"
240
"
onChange
=
{
handleCheckBox
}
/
>
<
Form
.
Check
type
=
"
checkbox
"
name
=
"
sizes
"
label
=
"
245
"
value
=
"
245
"
onChange
=
{
handleCheckBox
}
/
>
<
Form
.
Check
type
=
"
checkbox
"
name
=
"
sizes
"
label
=
"
250
"
value
=
"
250
"
onChange
=
{
handleCheckBox
}
/
>
<
Form
.
Check
type
=
"
checkbox
"
name
=
"
sizes
"
label
=
"
255
"
value
=
"
255
"
onChange
=
{
handleCheckBox
}
/
>
<
Form
.
Check
type
=
"
checkbox
"
name
=
"
sizes
"
label
=
"
260
"
value
=
"
260
"
onChange
=
{
handleCheckBox
}
/
>
<
Form
.
Check
type
=
"
checkbox
"
name
=
"
sizes
"
label
=
"
265
"
value
=
"
265
"
onChange
=
{
handleCheckBox
}
/
>
<
Form
.
Check
type
=
"
checkbox
"
name
=
"
sizes
"
label
=
"
270
"
value
=
"
270
"
onChange
=
{
handleCheckBox
}
/
>
<
/Col
>
<
Col
>
<
Form
.
Check
type
=
"
checkbox
"
name
=
"
sizes
"
label
=
"
FREE
"
value
=
"
FREE
"
onChange
=
{
handleCheckBox
}
/
>
<
Form
.
Check
type
=
"
checkbox
"
name
=
"
sizes
"
label
=
"
XL
"
value
=
"
XL
"
onChange
=
{
handleCheckBox
}
/
>
<
Form
.
Check
type
=
"
checkbox
"
name
=
"
sizes
"
label
=
"
L
"
value
=
"
L
"
onChange
=
{
handleCheckBox
}
/
>
<
Form
.
Check
type
=
"
checkbox
"
name
=
"
sizes
"
label
=
"
M
"
value
=
"
M
"
onChange
=
{
handleCheckBox
}
/
>
<
Form
.
Check
type
=
"
checkbox
"
name
=
"
sizes
"
label
=
"
S
"
value
=
"
S
"
onChange
=
{
handleCheckBox
}
/
>
<
Form
.
Check
type
=
"
checkbox
"
name
=
"
sizes
"
label
=
"
XS
"
value
=
"
XS
"
onChange
=
{
handleCheckBox
}
/
>
<
/Col
>
<
/Row
>
<
/Form.Group
>
<
Form
.
Group
>
<
Form
.
Label
>
색상
<
/Form.Label
>
<
Row
>
<
Col
md
=
{
10
}
>
<
Form
.
Control
as
=
"
textarea
"
rows
=
{
1
}
name
=
"
colors
"
placeholder
=
"
색상
"
onChange
=
{
handleColor
}
/
>
<
Form
.
Control
as
=
"
input
"
ref
=
{
colorRef
}
name
=
"
colors
"
placeholder
=
"
색상
"
onChange
=
{
handleColor
}
/
>
<
/Col
>
<
Col
>
<
Button
className
=
"
float-right
"
style
=
{{
background
:
'
#91877F
'
,
borderColor
:
'
#91877F
'
}}
onClick
=
{
addColor
}
>
추가
<
/Button
>
...
...
@@ -212,7 +247,6 @@ function ProductsRegist() {
<
/Row
>
{
colorHtml
.
map
((
element
)
=>
element
)}
<
/Form.Group
>
<
Form
.
Group
controlId
=
"
productDescriptionform
"
>
<
Form
.
Label
>
상품설명
<
/Form.Label
>
<
Form
.
Control
as
=
"
textarea
"
name
=
"
description
"
rows
=
{
3
}
placeholder
=
"
상품을 설명해주세요
"
onChange
=
{
handleChange
}
/
>
...
...
@@ -225,7 +259,9 @@ function ProductsRegist() {
<
Form
.
Label
>
상세이미지
<
/Form.Label
>
<
Form
.
File
id
=
"
productImageform
"
name
=
"
detail_image
"
onChange
=
{
handleChange
}
/
>
<
/Form.Group
>
<
Button
className
=
"
float-right
"
type
=
"
submit
"
style
=
{{
background
:
'
#91877F
'
,
borderColor
:
'
#91877F
'
}}
>
등록
<
/Button
>
<
Button
type
=
"
submit
"
style
=
{{
background
:
'
#91877F
'
,
borderColor
:
'
#91877F
'
}}
block
>
{
loading
&&
<
Spinner
as
=
'
span
'
animation
=
'
border
'
size
=
'
sm
'
role
=
'
status
'
aria
-
hidden
=
'
true
'
/>
}{
'
'
}
등록
<
/Button
>
<
/Form
>
<
/Col
>
<
/Row
>
...
...
client/src/Pages/ProductsList.js
View file @
43450898
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
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
{
Container
,
Row
,
Col
,
Form
,
FormControl
,
Button
,
Dropdown
}
from
'
react-bootstrap
'
;
import
catchErrors
from
'
../utils/catchErrors
'
;
import
{
Container
,
Row
,
Col
,
Form
,
FormControl
,
Button
,
Dropdown
,
ButtonGroup
}
from
'
react-bootstrap
'
;
function
ProductsList
({
match
})
{
const
[
mainCategory
,
setMainCategory
]
=
useState
(
match
.
params
.
main
.
toUpperCase
())
const
[
subcategory
,
setSubcategory
]
=
useState
([])
const
[
productlist
,
setProductlist
]
=
useState
([])
const
[
sub
,
setSub
]
=
useState
([])
const
[
error
,
setError
]
=
useState
(
''
)
// const user=isAuthenticated()
useEffect
(()
=>
{
setMainCategory
(
match
.
params
.
main
.
toUpperCase
())
},
[
match
.
params
.
main
])
useEffect
(()
=>
{
getSubsCategories
()
getSubsCategories
(
[]
)
getProductlist
()
},
[
mainCategory
])
useEffect
(()
=>
{
setMainCategory
(
match
.
params
.
main
.
toUpperCase
())
},
[
match
.
params
.
main
])
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) {
// catchErrors(error, setError)
// }
// }
// function handleSubmit(e) {
// e.preventDefault()
// }
async
function
getSubsCategories
()
{
async
function
getSubsCategories
([])
{
try
{
const
response
=
await
axios
.
get
(
`/api/categories/sub/
${
mainCategory
}
`
)
console
.
log
(
"
sub
"
,
response
.
data
)
setSubcategory
(
response
.
data
)
setSubcategory
(
Object
.
values
(
response
.
data
)[
0
])
console
.
log
(
"
response data=
"
,
response
.
data
)
console
.
log
(
"
object value=
"
,
Object
.
values
(
response
.
data
));
}
catch
(
error
)
{
catchError
(
error
,
setError
)
catchError
(
error
,
setError
)
}
}
...
...
@@ -59,29 +43,14 @@ function ProductsList({ match }) {
const
response
=
await
axios
.
get
(
`/api/product/getproduct/
${
mainCategory
}
`
)
console
.
log
(
"
response.data=
"
,
response
.
data
)
setProductlist
(
response
.
data
)
}
catch
(
error
)
{
catchError
(
error
,
setError
)
}
}
function
handleClick
(
e
){
e
.
preventDefault
()
return
getsubproductlist
()
}
async
function
getsubproductlist
(){
try
{
const
response
=
await
axios
.
get
(
`/api/product/getproduct/
${
subcategory
}
`
)
console
.
log
(
"
response.data sub=
"
,
response
.
data
)
setProductlist
(
response
.
data
)
}
catch
(
error
)
{
catchError
s
(
error
,
setError
)
catchError
(
error
,
setError
)
}
}
return
(
<
div
>
{
console
.
log
(
"
main=
"
,
mainCategory
)}
<
style
type
=
"
text/css
"
>
{
`
a, a:hover, a:active {
...
...
@@ -101,36 +70,36 @@ function ProductsList({ match }) {
`
}
<
/style
>
<
Container
>
<
Row
className
=
"
justify-content-center
"
>
<
Row
className
=
"
justify-content-center
"
>
<
Col
sm
=
{
10
}
xs
=
{
12
}
>
<
h1
style
=
{{
fontSize
:
"
3rem
"
}}
className
=
"
text-center
"
>
{
mainCategory
}
<
/h1
>
<
div
className
=
"
text-center
"
>
{
subcategory
.
map
((
ele
)
=>
(
<
Button
className
=
"
m-1
"
onClick
=
{(
ele
)
=>
handleClick
(
ele
)}
>
{
ele
}
<
/Button
>
))}
<
/div
>
<
div
className
=
"
text-center
"
>
<
ButtonGroup
className
=
"
d-flex flex-wrap
"
variant
=
"
outline-light secondary
"
>
{
subcategory
.
map
(
el
=>
(
<
Button
className
=
"
m-1
"
variant
=
"
secondary
"
>
{
el
}
<
/Button>
))
}
<
/ButtonGroup
>
<
/div
>
<
/Col
>
<
/Row
>
<
Row
className
=
"
justify-content-end 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
>
<
Dropdown
.
Item
>
인기상품
<
/Dropdown.Item
>
<
Dropdown
.
Item
>
신상품
<
/Dropdown.Item
>
<
Dropdown
.
Item
>
낮은가격
<
/Dropdown.Item
>
<
Dropdown
.
Item
>
높은가격
<
/Dropdown.Item
>
<
/Dropdown.Menu
>
<
/Dropdown
>
<
Form
as
=
{
Row
}
onSubmit
=
{
handleSearch
}
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
"
/>
<
/Button
>
<
/Form
>
{
/* </Form> */
}
<
Dropdown
>
<
Dropdown
.
Toggle
className
=
"
mx-2
"
>
정렬
<
/Dropdown.Toggle
>
<
Dropdown
.
Menu
>
<
Dropdown
.
Item
>
인기상품
<
/Dropdown.Item
>
<
Dropdown
.
Item
>
신상품
<
/Dropdown.Item
>
<
Dropdown
.
Item
>
낮은가격
<
/Dropdown.Item
>
<
Dropdown
.
Item
>
높은가격
<
/Dropdown.Item
>
<
/Dropdown.Menu
>
<
/Dropdown
>
<
Form
as
=
{
Row
}
onSubmit
=
{
handleSearch
}
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
"
/>
<
/Button
>
<
/Form
>
<
/Row
>
<
Row
md
=
{
8
}
sm
=
{
12
}
className
=
"
justify-content-
start
m-2
"
>
<
Row
md
=
{
8
}
sm
=
{
12
}
className
=
"
justify-content-
center
m-2
"
>
{
productlist
.
map
(
pro
=>
(
<
Li
nk
to
=
{{
<
Li
stCard
as
=
{
Link
}
id
=
{
pro
.
_id
}
name
=
{
pro
.
pro_name
}
price
=
{
pro
.
price
}
main_img
=
{
pro
.
main_imgUrl
}
to
=
{{
pathname
:
`/product/
${
pro
.
_id
}
`
,
state
:
{
id
:
pro
.
_id
,
...
...
@@ -142,13 +111,10 @@ function ProductsList({ match }) {
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} /> */
}
<
/div
>
)
}
...
...
client/src/utils/auth.js
View file @
43450898
import
axios
from
"
axios
"
import
axios
from
"
axios
"
;
export
function
handleLogin
({
userId
,
role
,
name
}){
localStorage
.
setItem
(
'
id
'
,
userId
)
localStorage
.
setItem
(
'
role
'
,
role
)
localStorage
.
setItem
(
'
name
'
,
name
)
export
function
handleLogin
({
userId
,
role
,
name
,
tel
})
{
localStorage
.
setItem
(
'
id
'
,
userId
)
localStorage
.
setItem
(
'
role
'
,
role
)
localStorage
.
setItem
(
'
name
'
,
name
)
localStorage
.
setItem
(
'
tel
'
,
tel
)
}
export
async
function
handleLogout
(){
localStorage
.
removeItem
(
'
id
'
)
localStorage
.
removeItem
(
'
role
'
)
localStorage
.
removeItem
(
'
name
'
)
export
async
function
handleLogout
()
{
localStorage
.
clear
()
await
axios
.
get
(
'
/api/auth/logout
'
)
window
.
location
.
href
=
'
/
'
}
export
function
isAuthenticated
(){
const
userId
=
localStorage
.
getItem
(
'
id
'
)
if
(
userId
){
export
function
isAuthenticated
()
{
const
userId
=
localStorage
.
getItem
(
'
id
'
)
if
(
userId
)
{
return
userId
}
else
{
return
false
return
false
}
}
export
function
isAdmin
()
{
const
role
=
localStorage
.
getItem
(
'
role
'
)
if
(
role
===
'
admin
'
)
{
return
true
}
else
{
return
false
}
}
\ No newline at end of file
server/controllers/auth.controller.js
View file @
43450898
...
...
@@ -7,7 +7,7 @@ const login = async (req, res) => {
const
{
id
,
password
}
=
req
.
body
console
.
log
(
id
,
password
)
try
{
const
user
=
await
User
.
findOne
({
id
}).
select
(
'
password role name
'
)
const
user
=
await
User
.
findOne
({
id
}).
select
(
'
password role name
tel
'
)
console
.
log
(
'
u=
'
,
user
)
if
(
!
user
)
{
return
res
.
status
(
404
).
send
(
`
${
id
}
가 존재하지 않습니다.`
)
...
...
@@ -23,7 +23,7 @@ const login = async (req, res) => {
httpOnly
:
true
,
secure
:
config
.
env
===
'
production
'
})
res
.
json
({
userId
:
user
.
_id
,
role
:
user
.
role
,
name
:
user
.
name
})
res
.
json
({
userId
:
user
.
_id
,
role
:
user
.
role
,
name
:
user
.
name
,
tel
:
user
.
tel
})
}
else
{
res
.
status
(
401
).
send
(
'
비밀번호가 일치하지 않습니다.
'
)
...
...
server/controllers/category.controller.js
View file @
43450898
import
Category
from
"
../schemas/Category.js
"
;
const
getCategory
=
async
(
req
,
res
)
=>
{
console
.
log
(
"
dsadd=
"
)
try
{
const
category
=
await
Category
.
find
({},
{
_id
:
0
})
const
category
=
await
Category
.
find
({},
{
_id
:
0
})
console
.
log
(
"
main=
"
,
category
);
res
.
json
(
category
)
}
catch
(
error
)
{
console
.
log
(
error
)
...
...
@@ -11,16 +11,60 @@ const getCategory = async (req, res) => {
}
}
const
getSubCategory
=
(
req
,
res
)
=>
{
const
getSubCategory
=
async
(
req
,
res
)
=>
{
console
.
log
(
"
req.params=
"
,
req
.
params
);
const
{
sub
}
=
req
.
params
try
{
const
subcategory
=
await
Category
.
findOne
({},
{
_id
:
0
}).
select
(
`
${
sub
}
`
)
console
.
log
(
"
sub=
"
,
subcategory
);
res
.
json
(
subcategory
);
}
catch
(
error
)
{
res
.
status
(
500
).
send
(
'
카테고리를 불러오지 못했습니다.
'
)
}
}
const
getsubId
=
(
req
,
res
,
next
,
sub
)
=>
{
// const subcategory = await category.find({"Dress"})
console
.
log
(
'
sub=
'
,
sub
)
const
getToHome
=
async
(
res
,
req
)
=>
{
try
{
const
bestProduct
=
await
Product
.
find
({}).
sort
({
purchase
:
1
}).
limit
(
6
)
const
newProduct
=
await
Product
.
find
({}).
sort
({
createdAt
:
-
1
}).
limit
(
6
)
console
.
log
(
"
best=
"
,
bestProduct
)
console
.
log
(
"
new=
"
,
newProduct
)
res
.
json
(
bestProduct
,
newProduct
)
}
catch
{
res
.
status
(
500
).
send
(
'
상품을 불러오지 못했습니다.
'
)
}
}
const
getsubId
=
async
(
req
,
res
,
next
,
ele
)
=>
{
try
{
const
sub
=
await
Category
.
find
({
ele
})
if
(
!
sub
)
{
res
.
status
(
404
).
send
(
'
카테고리가 존재하지 않습니다.
'
)
}
req
.
category
=
sub
req
.
subcategory
=
sub
next
()
}
catch
(
error
)
{
console
.
log
(
error
);
res
.
status
(
500
).
send
(
'
카테고리를 불러오지 못했습니다.
'
)
}
next
()
}
// const userById = async (req, res, next, id) => {
// try {
// const user = await User.findById(id)
// if (!user) {
// res.status(404).send('사용자를 찾을 수 없습니다')
// }
// req.account = user
// next()
// } catch (error) {
// console.log(error);
// res.status(500).send('사용자 아이디 검색 실패')
// }
// }
export
default
{
getCategory
,
getsubId
,
getSubCategory
}
\ No newline at end of file
export
default
{
getCategory
,
getsubId
,
getSubCategory
,
getToHome
}
\ No newline at end of file
server/controllers/product.controller.js
View file @
43450898
...
...
@@ -6,10 +6,10 @@ const upload = multer({ dest: 'uploads/' })
const
imageUpload
=
upload
.
fields
([
{
name
:
'
main_image
'
},
{
name
:
'
detail_image
'
}
])
])
const
regist
=
async
(
req
,
res
)
=>
{
console
.
log
(
"
req.body=
"
,
req
.
body
)
console
.
log
(
"
req.body=
"
,
req
.
body
)
try
{
const
{
pro_name
,
price
,
stock
,
main_category
,
sub_category
,
description
,
colors
,
sizes
}
=
req
.
body
const
main_img
=
req
.
files
[
'
main_image
'
][
0
]
...
...
@@ -29,30 +29,38 @@ const regist = async (req, res) => {
}
}
const
getToHome
=
async
(
re
s
,
re
q
)
=>
{
const
getToHome
=
async
(
re
q
,
re
s
)
=>
{
try
{
const
bestProduct
=
await
Product
.
find
({}).
sort
({
purchase
:
1
}).
limit
(
6
)
const
bestProduct
=
await
Product
.
find
({}).
sort
({
purchase
:
-
1
}).
limit
(
6
)
const
newProduct
=
await
Product
.
find
({}).
sort
({
createdAt
:
-
1
}).
limit
(
6
)
console
.
log
(
"
best=
"
,
bestProduct
)
console
.
log
(
"
new=
"
,
newProduct
)
res
.
json
(
bestProduct
,
newProduct
)
console
.
log
(
"
best=
"
,
bestProduct
)
console
.
log
(
"
new=
"
,
newProduct
)
res
.
json
(
{
bestProduct
,
newProduct
}
)
}
catch
{
res
.
status
(
500
).
send
(
'
상품을 불러오지 못했습니다.
'
)
}
}
const
get
list
=
(
req
,
res
)
=>
{
const
get
All
=
async
(
req
,
res
)
=>
{
try
{
res
.
json
(
req
.
productslist
)
const
productslist
=
await
Product
.
find
({}).
sort
({
createdAt
:
-
1
})
res
.
json
(
productslist
)
}
catch
(
error
)
{
res
.
status
(
500
).
send
(
'
상품을 불러오지 못했습니다.
'
)
}
}
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
})
const
productslist
=
await
Product
.
find
({
main_category
:
category
})
if
(
!
productslist
)
{
res
.
status
(
404
).
send
(
'
상품을 찾을 수 없습니다.
'
)
}
...
...
@@ -63,16 +71,17 @@ const categoryId = async (req, res, next, category) => {
}
}
const
subgetlist
=
(
req
,
res
)
=>
{
try
{
const
subgetlist
=
(
req
,
res
)
=>
{
try
{
res
.
json
(
req
.
subproductslist
)
}
catch
(
error
){
}
catch
(
error
)
{
res
.
status
(
500
).
send
(
'
상품을 불러오지 못했습니다.
'
)
}
}
const
subcategoryId
=
async
(
req
,
res
,
next
,
subcategory
)
=>
{
try
{
const
subproductslist
=
await
Product
.
find
({
sub_category
:
subcategory
})
const
subproductslist
=
await
Product
.
find
({
sub_category
:
subcategory
})
if
(
!
subproductslist
)
{
res
.
status
(
404
).
send
(
'
상품을 찾을 수 없습니다.
'
)
}
...
...
@@ -83,4 +92,4 @@ const subcategoryId = async (req, res, next, subcategory) => {
}
}
export
default
{
imageUpload
,
regist
,
categoryId
,
getlist
,
subcategoryId
,
subgetlist
,
getToHome
}
export
default
{
imageUpload
,
regist
,
getToHome
,
getAll
,
categoryId
,
getlist
,
subcategoryId
,
subgetlist
}
\ No newline at end of file
server/controllers/user.controller.js
View file @
43450898
...
...
@@ -6,15 +6,6 @@ import multer from "multer";
const
uploadimg
=
multer
({
dest
:
'
uploads/
'
});
const
getUser
=
async
(
req
,
res
)
=>
{
try
{
const
user
=
await
User
.
findOne
({
_id
:
req
.
id
})
res
.
json
(
user
)
}
catch
(
error
)
{
res
.
status
(
500
).
send
(
'
사용자 정보를 불러올 수 없습니다.
'
)
}
}
const
imgUpload
=
uploadimg
.
fields
([
{
name
:
'
avatar
'
,
maxCount
:
1
}
])
...
...
@@ -31,7 +22,6 @@ const userById = async (req, res, next, id) => {
res
.
status
(
404
).
send
(
'
사용자를 찾을 수 없습니다
'
)
}
req
.
account
=
user
req
.
id
=
id
next
()
}
catch
(
error
)
{
console
.
log
(
error
);
...
...
@@ -41,9 +31,7 @@ const userById = async (req, res, next, id) => {
const
signup
=
async
(
req
,
res
)
=>
{
const
{
name
,
number1
,
number2
,
id
,
password
,
tel
}
=
req
.
body
console
.
log
(
req
.
body
)
try
{
if
(
!
isLength
(
password
,
{
min
:
8
,
max
:
15
}))
{
...
...
@@ -96,4 +84,4 @@ const update = async (req, res) => {
}
}
export
default
{
getUser
,
signup
,
username
,
imgUpload
,
userById
,
update
}
\ No newline at end of file
export
default
{
signup
,
username
,
imgUpload
,
userById
,
update
}
\ No newline at end of file
server/routes/category.routes.js
View file @
43450898
...
...
@@ -9,6 +9,6 @@ router.route('/main')
router
.
route
(
'
/sub/:sub
'
)
.
get
(
categoryCtrl
.
getSubCategory
)
router
.
param
(
'
sub
'
,
categoryCtrl
.
getsubId
)
//
router.param('sub',categoryCtrl.getsubId)
export
default
router
\ No newline at end of file
server/routes/product.routes.js
View file @
43450898
...
...
@@ -10,6 +10,9 @@ router.route('/regist')
router
.
route
(
'
/getproduct
'
)
.
get
(
productCtrl
.
getToHome
)
router
.
route
(
'
/getproduct/all
'
)
.
get
(
productCtrl
.
getAll
)
router
.
route
(
'
/getproduct/:category
'
)
.
get
(
productCtrl
.
getlist
)
...
...
server/routes/user.routes.js
View file @
43450898
...
...
@@ -10,10 +10,6 @@ router.route('/account/:userId')
.
get
(
userCtrl
.
username
)
.
put
(
userCtrl
.
imgUpload
,
userCtrl
.
update
)
router
.
route
(
'
/getuser/:userId
'
)
.
get
(
userCtrl
.
getUser
)
router
.
param
(
'
userId
'
,
userCtrl
.
userById
)
export
default
router
\ No newline at end of file
server/schemas/Product.js
View file @
43450898
...
...
@@ -21,11 +21,11 @@ const ProductSchema = new mongoose.Schema({
default
:
0
},
sizes
:
{
type
:
Array
,
type
:
[
String
]
,
required
:
true
},
colors
:
{
type
:
Array
,
type
:
[
String
]
,
required
:
true
},
main_category
:
{
...
...
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