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
61275de9
Commit
61275de9
authored
Jan 08, 2021
by
Jiwon Yoon
Browse files
Merge 및 Nav, 라우터 app.js로 이동
parents
6c4d3ee8
e5447f77
Changes
11
Hide whitespace changes
Inline
Side-by-side
client/src/Pages/Home.js
View file @
61275de9
...
...
@@ -11,7 +11,7 @@ function Home() {
<
SubNav
/>
<
Container
className
=
"
my-5
"
>
<
div
className
=
"
my-4
"
>
<
h2
style
=
{{
marginRight
:
"
5rem
"
,
marginLeft
:
"
5
rem
"
,
marginBottom
:
"
2rem
"
}}
><
u
>
Best
<
/u></
h2
>
<
h2
style
=
{{
marginRight
:
"
5rem
"
,
marginLeft
:
"
3
rem
"
,
marginBottom
:
"
2rem
"
}}
><
u
>
Best
<
/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
=
"
img/asd.jpg
"
/>
...
...
@@ -58,7 +58,7 @@ function Home() {
<
/Row
>
<
/div
>
<
div
className
=
"
my-4
"
>
<
h2
style
=
{{
marginRight
:
"
5rem
"
,
marginLeft
:
"
5
rem
"
,
marginBottom
:
"
2rem
"
,
marginTop
:
"
2rem
"
}}
><
u
>
New
Arrival
<
/u></
h2
>
<
h2
style
=
{{
marginRight
:
"
5rem
"
,
marginLeft
:
"
3
rem
"
,
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
=
"
img/asd.jpg
"
/>
...
...
client/src/Pages/Product
s
Regist.js
→
client/src/Pages/ProductRegist.js
View file @
61275de9
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
Nav
1
from
'
../Components/MainNav
'
;
import
Nav
2
from
'
../Components/SubNav
'
;
import
Main
Nav
from
'
../Components/MainNav
'
;
import
Sub
Nav
from
'
../Components/SubNav
'
;
import
{
Row
,
Col
,
Button
,
Form
,
Container
}
from
'
react-bootstrap
'
;
import
axios
from
'
axios
'
let
list
=
[]
function
ProductsRegist
()
{
const
INIT_PRODUCT
=
{
pro_name
:
''
,
price
:
0
,
stock
:
0
,
main_category
:
''
,
sub_category
:
[],
description
:
''
,
main_image
:
[],
detail_image
:
[]
}
const
[
product
,
setProduct
]
=
useState
(
INIT_PRODUCT
)
const
[
categoryNum
,
setCategoryNum
]
=
useState
(
0
)
const
[
tag
,
setTag
]
=
useState
(
0
)
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
mainCategorys
=
Object
.
keys
(
categorys
)
const
subCategorys
=
Object
.
values
(
categorys
)
const
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
)
}
const
[
product
,
setProduct
]
=
useState
()
function
handleChange
(
event
)
{
const
{
name
,
value
}
=
event
.
target
if
(
event
.
target
.
name
===
"
sub_category
"
)
{
product
[
"
sub_category
"
].
push
(
event
.
target
.
value
)
}
else
{
setProduct
({
...
product
,
[
name
]:
value
})
}
if
(
event
.
target
.
name
===
"
main_category
"
)
{
setCategoryNum
(
event
.
target
.
selectedIndex
)
}
console
.
log
(
"
file=
"
,
event
.
target
.
files
)
console
.
log
(
"
name=
"
,
name
,
"
value=
"
,
value
)
setProduct
({
...
product
,
[
name
]:
value
})
}
async
function
handleSubmit
(
e
)
{
e
.
preventDefault
()
try
{
setError
(
''
)
await
axios
.
post
(
'
/api/products/regist
'
,
{
product
}).
then
(
function
(
res
)
{
console
.
log
(
"
client의 res=
"
,
res
)
})
alert
(
"
상품등록이 완료되었습니다.
"
)
setSuccess
(
true
)
}
catch
(
error
)
{
catchErrors
(
error
,
setError
)
const
formData
=
new
FormData
();
for
(
let
key
of
Object
.
keys
(
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
)
})
}
// }catch(error) {
// catchErrors(error, setError)
// }
// }
if
(
success
)
{
return
<
Redirect
to
=
'
/
'
/>
}
return
(
<
div
>
<
Nav
1
/>
<
Nav
2
/>
<
Container
className
=
"
vh-100
"
>
<
Main
Nav
/>
<
Sub
Nav
/>
<
Container
>
<
Row
className
=
"
justify-content-md-center
"
>
<
Col
md
=
{
8
}
className
=
"
border p-1
"
style
=
{{
background
:
'
#F7F3F3
'
}}
>
<
h2
className
=
"
text-center mt-5 font-weight-bold
"
>
상품등록
<
/h2
>
...
...
client/src/Pages/ProductsList.js
View file @
61275de9
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
,
Form
,
FormControl
,
Button
,
Card
}
from
'
react-bootstrap
'
;
import
{
Container
,
Row
,
Col
,
Form
,
FormControl
,
Button
,
Card
,
Dropdown
}
from
'
react-bootstrap
'
;
function
ProductsList
()
{
const
[
sub
,
setSub
]
=
useState
([
'
PADDED JACKET
'
,
'
JACKET
'
,
'
JUMPER
'
,
'
COAT
'
,
'
FLEECE
'
,
'
CARDIGAN / VEST
'
])
function
handleSubmit
(
e
)
{
e
.
preventDefault
()
}
...
...
@@ -20,29 +19,38 @@ function ProductsList() {
border-color: #CDC5C2;
}
.btn:hover, .btn:active, .btn:focus {
.btn:hover, .btn:active, .btn:focus
, .show>.btn-primary.dropdown-toggle
{
background-color: #91877F;
border-color: #91877F;
}
`
}
<
/style
>
<
MainNav
/>
<
SubNav
/>
<
Container
>
<
Row
className
=
"
mx-0 my-4
"
style
=
{{
flexDirection
:
"
column
"
,
alignItems
:
"
center
"
}}
>
<
h1
style
=
{{
fontSize
:
"
3rem
"
}}
>
OUTER
<
/h1
>
<
Row
>
{
sub
.
map
((
ele
)
=>
(
<
Button
>
ele
<
/Button
>
))}
<
/
Row
>
<
Row
className
=
"
justify-content-center mx-0 my-4
"
>
<
Col
sm
=
{
10
}
>
<
h1
style
=
{{
fontSize
:
"
3rem
"
}}
>
OUTER
<
/h1
>
<
div
>
{
sub
.
map
((
ele
)
=>
(
<
Button
className
=
"
m-1
"
>
{
ele
}
<
/Button
>
))}
<
/div
>
<
/
Col
>
<
/Row
>
<
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
=
"
search px-2
"
>
<
img
src
=
{
search
}
width
=
"
20
"
height
=
"
20
"
/>
<
/Button
>
<
Button
sm
=
{
2
}
xs
=
{
6
}
type
=
"
button
"
href
=
"
/regist
"
className
=
"
ml-1
"
>
상품
등록
<
/Button
>
<
Row
className
=
"
justify-content-between mx-0 my-5
"
>
<
Dropdown
>
<
Dropdown
.
Toggle
>
정렬
<
/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
=
{
handleSubmit
}
className
=
"
justify-content-end mx-0
"
>
<
FormControl
type
=
"
text
"
placeholder
=
"
Search
"
style
=
{{
width
:
"
13rem
"
}}
/
>
<
Button
type
=
"
submit
"
className
=
"
search px-2
"
>
<
img
src
=
{
search
}
width
=
"
20
"
height
=
"
20
"
/>
<
/Button
>
<
Button
sm
=
{
2
}
xs
=
{
6
}
type
=
"
button
"
href
=
"
/regist
"
className
=
"
ml-1
"
>
상품
등록
<
/Button
>
<
/Form
>
<
/Row
>
<
Row
className
=
"
justify-content-start m-5
"
>
<
Card
className
=
"
mt-5
"
style
=
{{
width
:
"
18rem
"
,
margin
:
"
auto
"
}}
>
...
...
client/src/Pages/Signup.js
View file @
61275de9
...
...
@@ -4,6 +4,7 @@ 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
=
{
name
:
''
,
...
...
@@ -44,6 +45,7 @@ function Signup() {
try
{
setError
(
''
)
// const response = await axios.post('/api/user/signup', user)
const
response
=
await
fetch
(
'
/api/users/signup
'
,
{
method
:
'
POST
'
,
headers
:
{
...
...
client/src/index.js
View file @
61275de9
...
...
@@ -7,7 +7,7 @@ import Signup from './Pages/Signup';
import
Product
from
"
./Pages/Product
"
;
import
ProductsList
from
"
./Pages/ProductsList
"
;
import
Admin
from
'
./Pages/Admin
'
;
import
Product
s
Regist
from
'
./Pages/Product
s
Regist
'
;
import
ProductRegist
from
'
./Pages/ProductRegist
'
;
import
ShoppingCart
from
'
./Pages/ShoppingCart
'
;
import
Payment
from
'
./Pages/Payment
'
;
import
reportWebVitals
from
'
./reportWebVitals
'
;
...
...
@@ -24,7 +24,7 @@ ReactDOM.render(
<
Route
path
=
"
/product
"
component
=
{
Product
}
/
>
<
Route
path
=
"
/productslist
"
component
=
{
ProductsList
}
/
>
<
Route
path
=
"
/admin
"
component
=
{
Admin
}
/
>
<
Route
path
=
"
/regist
"
component
=
{
Product
s
Regist
}
/
>
<
Route
path
=
"
/regist
"
component
=
{
ProductRegist
}
/
>
<
Route
path
=
"
/shoppingcart
"
component
=
{
ShoppingCart
}
/
>
<
Route
path
=
"
/payment
"
component
=
{
Payment
}
/
>
<
Route
path
=
"
/account
"
component
=
{
Account
}
/
>
...
...
server/app.js
View file @
61275de9
...
...
@@ -22,7 +22,7 @@ app.use(express.static(path.join(process.cwd(), 'dist')))
// app.use('/', indexRouter);
app
.
use
(
'
/
'
,
kakaopayRoutes
)
app
.
use
(
'
/api/users
'
,
userRouter
)
app
.
use
(
'
/api/product
s
'
,
productRouter
)
app
.
use
(
'
/api/product
'
,
productRouter
)
app
.
listen
(
config
.
port
,
()
=>
{
console
.
info
(
'
Server started on port %s.
'
,
config
.
port
)
...
...
server/controllers/product.controller.js
View file @
61275de9
...
...
@@ -2,7 +2,9 @@ import Product from "../schemas/Product.js";
const
regist
=
async
(
req
,
res
)
=>
{
console
.
log
(
'
req.body=
'
,
req
.
body
)
const
{
pro_name
,
price
,
stock
,
main_category
,
sub_category
,
description
,
main_image
,
detail_image
}
=
req
.
body
.
product
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
...
...
@@ -15,4 +17,4 @@ const regist = async (req, res) => {
}
}
export
default
{
regist
}
\ No newline at end of file
export
default
{
regist
}
\ No newline at end of file
server/controllers/user.controller.js
View file @
61275de9
import
User
from
"
../models/User.js
"
;
import
isLength
from
'
validator/lib/isLength.js
'
import
isLength
from
'
validator/lib/isLength.js
'
;
import
bcrypt
from
'
bcryptjs
'
;
const
signup
=
async
(
req
,
res
)
=>
{
console
.
log
(
req
.
body
)
console
.
log
(
'
req.body.name=
'
,
req
.
body
.
name
)
const
{
name
,
number1
,
number2
,
id
,
password
,
password2
,
tel
}
=
req
.
body
try
{
if
(
!
isLength
(
password
,
{
min
:
8
,
max
:
15
})){
return
res
.
status
(
422
).
json
({
message
:
'
비밀번호는 8-15자리로 입력해주세요.
'
})
if
(
!
isLength
(
password
,
{
min
:
8
,
max
:
15
}))
{
return
res
.
status
(
422
).
json
({
message
:
'
비밀번호는 8-15자리로 입력해주세요.
'
})
}
const
newUser
=
await
new
User
({
// if (!isLength(name, { min: 3, max: 10 })) {
// return res.status(422).send('이름은 3-10자로 입력해주세요.')
// } else if (!isLength(password, { min: 8, max: 15 })){
// return res.status(422).json({message: '비밀번호는 8-15자리로 입력해주세요.'})
// }
// const user = await User.findOne({id})
// if (user) {
// return res.status(422).send(`${id}가 이미 사용중입니다.`)
// }
const
hash
=
await
bcrypt
.
hash
(
password
,
10
)
const
newUser
=
await
new
User
({
name
,
number1
,
number2
,
id
,
password
,
password
:
hash
,
password2
,
tel
}).
save
()
console
.
log
(
newUser
)
res
.
json
(
newUser
)
}
catch
(
error
)
{
console
.
log
(
error
)
res
.
status
(
500
).
json
({
message
:
'
죄송합니다. 다시 입력해 주십시오.
'
})
res
.
status
(
500
).
json
({
message
:
'
죄송합니다. 다시 입력해 주십시오.
'
})
}
}
...
...
@@ -31,4 +42,4 @@ const hello = (req, res) => {
res
.
send
(
'
Hello from users contriller
'
)
}
export
default
{
signup
,
hello
}
\ No newline at end of file
export
default
{
signup
,
hello
}
\ No newline at end of file
server/package.json
View file @
61275de9
...
...
@@ -12,12 +12,13 @@
"author"
:
""
,
"license"
:
"ISC"
,
"dependencies"
:
{
"bcryptjs"
:
"^2.4.3"
,
"cors"
:
"^2.8.5"
,
"express"
:
"^4.17.1"
,
"mongoose"
:
"^5.11.9"
,
"multer"
:
"^1.4.2"
,
"node-fetch"
:
"^2.6.1"
,
"nodemon"
:
"^2.0.6"
,
"validator"
:
"^13.5.2"
,
"multer"
:
"^1.4.2"
"validator"
:
"^13.5.2"
}
}
server/routes/product.routes.js
View file @
61275de9
import
express
from
"
express
"
;
import
path
from
'
path
'
;
import
multer
from
'
multer
'
;
import
productCtrl
from
'
../controllers/product.controller.js
'
;
// process.cwd() + '/client/public/image'
const
router
=
express
.
Router
()
const
upload
=
multer
({
storage
:
multer
.
diskStorage
({
destination
(
req
,
file
,
cb
)
{
cb
(
null
,
'
uploads/
'
);
},
// 저장 경로 변경
filename
(
req
,
file
,
cb
)
{
cb
(
null
,
new
Date
().
valueOf
()
+
path
.
extname
(
file
.
originalname
));
},
// 파일명 변경
}),
});
router
.
route
(
'
/regist
'
)
.
post
(
productCtrl
.
regist
)
// upload.array('main_image'),
export
default
router
\ No newline at end of file
server/schemas/Product.js
View file @
61275de9
...
...
@@ -8,15 +8,15 @@ const ProductSchema = new mongoose.Schema({
required
:
true
,
},
price
:
{
type
:
String
,
type
:
Number
,
required
:
true
,
},
stock
:
{
type
:
String
,
type
:
Number
,
required
:
true
},
purchase
:
{
type
:
String
,
type
:
Number
,
required
:
true
,
default
:
0
},
...
...
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