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
3ba7cf83
Commit
3ba7cf83
authored
Jan 06, 2021
by
kusang96
Browse files
Product UI 완성
parent
5f0483b4
Changes
8
Show whitespace changes
Inline
Side-by-side
client/src/Components/Card.js
0 → 100644
View file @
3ba7cf83
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
{
Card
}
from
'
react-bootstrap
'
;
function
Card
()
{
return
(
)
}
export
default
Card
\ No newline at end of file
client/src/Components/SubNav.js
View file @
3ba7cf83
...
...
@@ -22,7 +22,7 @@ function SubNav() {
}
return
(
<
Navbar
sticky
=
"
top
"
className
=
"
flex-nowrap
"
style
=
{{
top
:
"
62px
"
,
paddingTop
:
"
0
"
,
paddingBottom
:
"
0
"
,
backgroundColor
:
"
#fff
"
}}
>
<
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 {
...
...
client/src/Pages/Admin.js
View file @
3ba7cf83
...
...
@@ -3,13 +3,17 @@ import MainNav from '../Components/MainNav';
import
SubNav
from
'
../Components/SubNav
'
;
import
Pagination
from
'
../Components/Pagination
'
;
import
search
from
'
../search.svg
'
;
import
{
Row
,
Col
,
Form
,
FormControl
,
Button
,
Card
,
Container
}
from
'
react-bootstrap
'
;
import
{
Row
,
Form
,
FormControl
,
Button
,
Card
,
Container
}
from
'
react-bootstrap
'
;
function
Admin
()
{
function
handleClick
(
e
)
{
const
card
=
e
.
target
.
parentNode
.
parentNode
console
.
log
(
card
)
alert
(
'
해당 상품을 성공적으로 삭제하였습니다.
'
)
card
.
remove
()
}
function
handleSubmit
(
e
)
{
e
.
preventDefault
()
}
return
(
...
...
@@ -30,15 +34,15 @@ function Admin() {
<
MainNav
/>
<
SubNav
/>
<
Container
>
<
Row
className
=
"
justify-content-end m
t-5
m
b
-5
"
>
<
FormControl
type
=
"
text
"
placeholder
=
"
Search
"
style
=
{{
width
:
"
13rem
"
}}
/
>
<
Row
as
=
{
Form
}
onSubmit
=
{
handleSubmit
}
className
=
"
justify-content-end m
x-0
m
y
-5
"
>
<
FormControl
type
=
"
text
"
placeholder
=
"
Search
"
style
=
{{
width
:
"
13rem
"
}}
/
>
<
Button
type
=
"
submit
"
className
=
"
px-2
"
>
<
img
src
=
{
search
}
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
=
"
m
y
-5
"
style
=
{{
width
:
"
18rem
"
,
margin
:
"
auto
"
}}
>
<
Card
className
=
"
m
t
-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
>
...
...
@@ -49,7 +53,7 @@ function Admin() {
<
Button
className
=
"
float-right
"
onClick
=
{(
e
)
=>
handleClick
(
e
)}
>
삭제
<
/Button
>
<
/Card.Body
>
<
/Card
>
<
Card
className
=
"
m
y
-5
"
style
=
{{
width
:
"
18rem
"
,
margin
:
"
auto
"
}}
>
<
Card
className
=
"
m
t
-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
>
...
...
@@ -60,7 +64,7 @@ function Admin() {
<
Button
className
=
"
float-right
"
onClick
=
{(
e
)
=>
handleClick
(
e
)}
>
삭제
<
/Button
>
<
/Card.Body
>
<
/Card
>
<
Card
className
=
"
m
y
-5
"
style
=
{{
width
:
"
18rem
"
,
margin
:
"
auto
"
}}
>
<
Card
className
=
"
m
t
-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
>
...
...
@@ -71,7 +75,7 @@ function Admin() {
<
Button
className
=
"
float-right
"
onClick
=
{(
e
)
=>
handleClick
(
e
)}
>
삭제
<
/Button
>
<
/Card.Body
>
<
/Card
>
<
Card
className
=
"
m
y
-5
"
style
=
{{
width
:
"
18rem
"
,
margin
:
"
auto
"
}}
>
<
Card
className
=
"
m
t
-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
>
...
...
@@ -82,7 +86,7 @@ function Admin() {
<
Button
className
=
"
float-right
"
onClick
=
{(
e
)
=>
handleClick
(
e
)}
>
삭제
<
/Button
>
<
/Card.Body
>
<
/Card
>
<
Card
className
=
"
m
y
-5
"
style
=
{{
width
:
"
18rem
"
,
margin
:
"
auto
"
}}
>
<
Card
className
=
"
m
t
-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
>
...
...
@@ -93,7 +97,7 @@ function Admin() {
<
Button
className
=
"
float-right
"
onClick
=
{(
e
)
=>
handleClick
(
e
)}
>
삭제
<
/Button
>
<
/Card.Body
>
<
/Card
>
<
Card
className
=
"
m
y
-5
"
style
=
{{
width
:
"
18rem
"
,
margin
:
"
auto
"
}}
>
<
Card
className
=
"
m
t
-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
>
...
...
@@ -104,7 +108,7 @@ function Admin() {
<
Button
className
=
"
float-right
"
onClick
=
{(
e
)
=>
handleClick
(
e
)}
>
삭제
<
/Button
>
<
/Card.Body
>
<
/Card
>
<
Card
className
=
"
m
y
-5
"
style
=
{{
width
:
"
18rem
"
,
margin
:
"
auto
"
}}
>
<
Card
className
=
"
m
t
-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
>
...
...
client/src/Pages/Home.js
View file @
3ba7cf83
...
...
@@ -5,51 +5,50 @@ import { Card, Container, Row } from 'react-bootstrap';
function
Home
()
{
return
(
<
div
>
<
MainNav
/>
<
SubNav
/>
<
Container
>
<
div
className
=
"
my-
3
"
>
<
h
3
><
u
>
Best
<
/u></
h
3
>
<
Row
className
=
"
justify-content-center
"
>
<
Card
className
=
"
mx-1
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Container
className
=
"
my-5
"
>
<
div
className
=
"
my-
4
"
>
<
h
2
style
=
{{
marginRight
:
"
5rem
"
,
marginLeft
:
"
5rem
"
,
marginBottom
:
"
2rem
"
}}
><
u
>
Best
<
/u></
h
2
>
<
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
"
/>
<
Card
.
Body
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
/Card.Body
>
<
/Card
>
<
Card
className
=
"
mx-1
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
className
=
"
mx-1
my-2
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
img/asd.jpg
"
/>
<
Card
.
Body
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
/Card.Body
>
<
/Card
>
<
Card
className
=
"
mx-1
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
className
=
"
mx-1
my-2
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
img/asd.jpg
"
/>
<
Card
.
Body
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
/Card.Body
>
<
/Card
>
<
Card
className
=
"
mx-1
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
className
=
"
mx-1
my-2
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
img/asd.jpg
"
/>
<
Card
.
Body
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
/Card.Body
>
<
/Card
>
<
Card
className
=
"
mx-1
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
className
=
"
mx-1
my-2
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
img/asd.jpg
"
/>
<
Card
.
Body
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
/Card.Body
>
<
/Card
>
<
Card
className
=
"
mx-1
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
className
=
"
mx-1
my-2
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
img/asd.jpg
"
/>
<
Card
.
Body
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
...
...
@@ -58,45 +57,45 @@ function Home() {
<
/Card
>
<
/Row
>
<
/div
>
<
div
className
=
"
my-
3
"
>
<
h
3
><
u
>
New
Arrival
<
/u></
h
3
>
<
Row
className
=
"
justify-content-center
"
>
<
Card
className
=
"
mx-1
"
style
=
{{
width
:
'
18rem
'
}}
>
<
div
className
=
"
my-
4
"
>
<
h
2
style
=
{{
marginRight
:
"
5rem
"
,
marginLeft
:
"
5rem
"
,
marginBottom
:
"
2rem
"
,
marginTop
:
"
2rem
"
}}
><
u
>
New
Arrival
<
/u></
h
2
>
<
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
"
/>
<
Card
.
Body
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
/Card.Body
>
<
/Card
>
<
Card
className
=
"
mx-1
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
className
=
"
mx-1
my-2
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
img/asd.jpg
"
/>
<
Card
.
Body
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
/Card.Body
>
<
/Card
>
<
Card
className
=
"
mx-1
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
className
=
"
mx-1
my-2
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
img/asd.jpg
"
/>
<
Card
.
Body
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
/Card.Body
>
<
/Card
>
<
Card
className
=
"
mx-1
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
className
=
"
mx-1
my-2
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
img/asd.jpg
"
/>
<
Card
.
Body
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
/Card.Body
>
<
/Card
>
<
Card
className
=
"
mx-1
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
className
=
"
mx-1
my-2
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
img/asd.jpg
"
/>
<
Card
.
Body
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
/Card.Body
>
<
/Card
>
<
Card
className
=
"
mx-1
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
className
=
"
mx-1
my-2
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
img/asd.jpg
"
/>
<
Card
.
Body
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
...
...
client/src/Pages/Product.js
0 → 100644
View file @
3ba7cf83
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
'
;
function
Product
()
{
const
[
select
,
setSelect
]
=
useState
({
color
:
""
,
size
:
""
})
const
[
cart
,
setCart
]
=
useState
()
function
handleClick
(
e
)
{
const
box
=
e
.
target
.
parentNode
.
parentNode
box
.
style
.
display
=
"
none
"
}
function
handleChange
(
e
)
{
const
{
name
,
value
}
=
e
.
target
setSelect
({
...
select
,
[
name
]:
value
})
}
function
listDelete
(
e
)
{
e
.
preventDefault
()
const
parent
=
e
.
target
.
parentNode
parent
.
remove
()
}
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
)
}
}
}
useEffect
(()
=>
{
if
(
Object
.
keys
(
select
).
length
==
2
)
{
setCart
({...
select
})
setSelect
({})
}
},
[
select
])
useEffect
(()
=>
{
handleCreate
()
},
[
cart
])
return
(
<
div
>
<
style
type
=
"
text/css
"
>
{
`
.btn {
background-color: #CDC5C2;
border-color: #CDC5C2;
}
.btn:hover, .btn:active, .btn:focus {
background-color: #91877F;
border-color: #91877F;
}
`
}
<
/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%
"
}}
/
>
<
/Col
>
<
Col
sm
=
{
11
}
md
=
{
4
}
className
=
"
align-middle mt-4
"
>
<
h3
className
=
"
mb-4
"
>
sop682
리본끈셋원피스
<
/h3
>
<
h5
className
=
"
mb-4
"
>
가격
:
14
,
000
원
<
/h5
>
<
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
}
>
<
option
>
옵션선택
<
/option
>
<
option
>
브릭레드
(
스트랩포함
)
<
/option
>
<
option
>
베이지
(
스트랩포함
)
<
/option
>
<
option
>
블랙
(
스트랩포함
)
<
/option
>
<
/Form.Control
>
<
Form
.
Label
>
사이즈
<
/Form.Label
>
<
Form
.
Control
as
=
"
select
"
className
=
"
mb-2
"
name
=
"
size
"
defaultValue
=
"
옵션 선택
"
onChange
=
{
handleChange
}
>
<
option
>
옵션선택
<
/option
>
<
option
>
M
<
/option
>
<
option
>
L
<
/option
>
<
option
>
XL
<
/option
>
<
option
>
FREE
<
/option
>
<
/Form.Control
>
<
/Form.Group
>
<
div
id
=
"
list
"
><
/div
>
<
Row
className
=
"
justify-content-between mx-0 my-3
"
style
=
{{
width
:
"
100%
"
}}
>
<
Col
>
총
금액
<
/Col
>
<
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
style
=
{{
width
:
"
49%
"
}}
>
구매하기
<
/Button
>
<
/Row
>
<
/Form
>
<
/Col
>
<
/Row
>
<
Row
className
=
"
justify-content-center mt-5 mx-0
"
>
<
Col
sm
=
{
11
}
md
=
{
8
}
>
<
h3
style
=
{{
borderBottom
:
"
1px solid #91877F
"
,
paddingBottom
:
"
5px
"
,
marginBottom
:
"
1em
"
}}
>
설명
<
/h3
>
<
div
><
/div
>
<
/Col
>
<
/Row
>
<
Row
className
=
"
justify-content-center mx-0 pt-3 px-2
"
style
=
{{
position
:
"
fixed
"
,
bottom
:
"
0
"
,
width
:
"
100%
"
,
backgroundColor
:
"
#fff
"
}}
>
<
Col
sm
=
{
12
}
md
=
{
9
}
>
<
h6
style
=
{{
borderBottom
:
"
1px solid
"
,
paddingBottom
:
"
5px
"
,
marginBottom
:
"
1em
"
}}
>
회원님이
선호할만한
상품
추천
<
a
className
=
"
close float-right
"
onClick
=
{(
e
)
=>
handleClick
(
e
)}
style
=
{{
fontSize
:
"
1rem
"
}}
>
X
<
/a
>
<
/h6
>
<
Row
className
=
"
justify-content-space mx-0
"
style
=
{{
flexWrap
:
"
nowrap
"
,
width
:
"
100%
"
,
overflowX
:
"
auto
"
}}
>
<
Col
as
=
{
Card
}
style
=
{{
minWidth
:
"
10rem
"
,
marginRight
:
"
1rem
"
}}
>
<
Card
.
Img
variant
=
"
top
"
src
=
"
https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg
"
style
=
{{
objectFit
:
"
contain
"
}}
/
>
<
Card
.
Body
className
=
"
px-0
"
>
<
Card
.
Title
>
클로타탄원피스
<
/Card.Title
>
<
Card
.
Text
>
구매자
수
:
30
<
/Card.Text
>
<
/Card.Body
>
<
/Col
>
<
Col
as
=
{
Card
}
style
=
{{
minWidth
:
"
10rem
"
,
marginRight
:
"
1rem
"
}}
>
<
Card
.
Img
variant
=
"
top
"
src
=
"
https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg
"
style
=
{{
objectFit
:
"
contain
"
}}
/
>
<
Card
.
Body
className
=
"
px-0
"
>
<
Card
.
Title
>
클로타탄원피스
<
/Card.Title
>
<
Card
.
Text
>
구매자
수
:
30
<
/Card.Text
>
<
/Card.Body
>
<
/Col
>
<
Col
as
=
{
Card
}
style
=
{{
minWidth
:
"
10rem
"
,
marginRight
:
"
1rem
"
}}
>
<
Card
.
Img
variant
=
"
top
"
src
=
"
https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg
"
style
=
{{
objectFit
:
"
contain
"
}}
/
>
<
Card
.
Body
className
=
"
px-0
"
>
<
Card
.
Title
>
클로타탄원피스
<
/Card.Title
>
<
Card
.
Text
>
구매자
수
:
30
<
/Card.Text
>
<
/Card.Body
>
<
/Col
>
<
Col
as
=
{
Card
}
style
=
{{
minWidth
:
"
10rem
"
,
marginRight
:
"
1rem
"
}}
>
<
Card
.
Img
variant
=
"
top
"
src
=
"
https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg
"
style
=
{{
objectFit
:
"
contain
"
}}
/
>
<
Card
.
Body
className
=
"
px-0
"
>
<
Card
.
Title
>
클로타탄원피스
<
/Card.Title
>
<
Card
.
Text
>
구매자
수
:
30
<
/Card.Text
>
<
/Card.Body
>
<
/Col
>
<
/Row
>
<
/Col
>
<
/Row
>
<
/div
>
)
}
export
default
Product
\ No newline at end of file
client/src/Pages/Products.js
deleted
100644 → 0
View file @
5f0483b4
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
MainNav
from
'
../Components/MainNav
'
;
import
SubNav
from
'
../Components/SubNav
'
;
import
{
Row
,
Col
,
Form
,
Card
}
from
'
react-bootstrap
'
;
function
Products
()
{
function
handleClick
(
e
)
{
const
box
=
e
.
target
.
parentNode
.
parentNode
box
.
style
.
display
=
"
none
"
}
return
(
<
div
>
{
/* <style type="text/css">
{`
.close {
color:
}
`}
</style> */
}
<
MainNav
/>
<
SubNav
/>
<
Row
className
=
"
justify-content-center mt-5
"
>
<
Col
md
=
{
4
}
>
<
img
src
=
"
https://img.sonyunara.com/files/goods/65976/1601953605_0.jpg
"
style
=
{{
objectFit
:
"
contain
"
,
width
:
"
100%
"
}}
/
>
<
/Col
>
<
Col
md
=
{
4
}
className
=
"
align-middle
"
>
<
Form
>
<
Form
.
Group
>
<
Form
.
Label
>
옵션
<
/Form.Label
>
<
Form
.
Control
as
=
"
select
"
defaultValue
=
"
옵션 선택
"
>
<
option
>
옵션
선택
<
/option
>
<
option
>
브릭레드
(
스트랩포함
)
<
/option
>
<
option
>
베이지
(
스트랩포함
)
<
/option
>
<
option
>
블랙
(
스트랩포함
)
<
/option
>
<
/Form.Control
>
<
/Form.Group
>
<
/Form
>
<
/Col
>
<
/Row
>
<
Row
className
=
"
justify-content-center mt-5
"
>
<
Col
md
=
{
8
}
>
<
h3
style
=
{{
borderBottom
:
"
1px solid #91877F
"
,
paddingBottom
:
"
5px
"
,
marginBottom
:
"
1em
"
}}
>
설명
<
/h3
>
<
div
><
/div
>
<
/Col
>
<
/Row
>
<
div
className
=
"
mx-5 pt-3
"
style
=
{{
position
:
"
fixed
"
,
bottom
:
"
0
"
,
backgroundColor
:
"
#fff
"
}}
>
<
h6
style
=
{{
borderBottom
:
"
1px solid
"
,
paddingBottom
:
"
5px
"
,
marginBottom
:
"
1em
"
}}
>
회원님이
선호할만한
상품
추천
<
a
className
=
"
close float-right
"
onClick
=
{(
e
)
=>
handleClick
(
e
)}
style
=
{{
fontSize
:
"
1rem
"
}}
>
X
<
/a
>
<
/h6
>
<
Row
className
=
"
justify-content-space
"
style
=
{{
objectFit
:
"
contain
"
,
width
:
"
100%
"
}}
>
<
Col
as
=
{
Card
}
style
=
{{
width
:
"
16rem
"
}}
>
<
Card
.
Img
variant
=
"
top
"
src
=
"
https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg
"
style
=
{{
objectFit
:
"
contain
"
,
width
:
"
10rem
"
,
height
:
"
10rem
"
}}
/
>
<
Card
.
Body
>
<
Card
.
Title
>
클로타탄원피스
<
/Card.Title
>
<
Card
.
Text
>
구매자
수
:
30
<
/Card.Text
>
<
/Card.Body
>
<
/Col
>
<
Col
as
=
{
Card
}
style
=
{{
width
:
"
16rem
"
}}
>
<
Card
.
Img
variant
=
"
top
"
src
=
"
https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg
"
style
=
{{
objectFit
:
"
contain
"
,
width
:
"
10rem
"
,
height
:
"
10rem
"
}}
/
>
<
Card
.
Body
>
<
Card
.
Title
>
클로타탄원피스
<
/Card.Title
>
<
Card
.
Text
>
구매자
수
:
30
<
/Card.Text
>
<
/Card.Body
>
<
/Col
>
<
Col
as
=
{
Card
}
style
=
{{
width
:
"
16rem
"
}}
>
<
Card
.
Img
variant
=
"
top
"
src
=
"
https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg
"
style
=
{{
objectFit
:
"
contain
"
,
width
:
"
10rem
"
,
height
:
"
10rem
"
}}
/
>
<
Card
.
Body
>
<
Card
.
Title
>
클로타탄원피스
<
/Card.Title
>
<
Card
.
Text
>
구매자
수
:
30
<
/Card.Text
>
<
/Card.Body
>
<
/Col
>
<
Col
as
=
{
Card
}
style
=
{{
width
:
"
16rem
"
}}
>
<
Card
.
Img
variant
=
"
top
"
src
=
"
https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg
"
style
=
{{
objectFit
:
"
contain
"
,
width
:
"
10rem
"
,
height
:
"
10rem
"
}}
/
>
<
Card
.
Body
>
<
Card
.
Title
>
클로타탄원피스
<
/Card.Title
>
<
Card
.
Text
>
구매자
수
:
30
<
/Card.Text
>
<
/Card.Body
>
<
/Col
>
<
/Row
>
<
/div
>
<
/div
>
)
}
export
default
Products
\ No newline at end of file
client/src/Pages/ProductsList.js
View file @
3ba7cf83
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
MainNav
from
'
../Components/MainNav
'
;
import
SubNav
from
'
../Components/SubNav
'
;
import
Products
from
'
./Products
'
;
import
Pagination
from
'
../Components/Pagination
'
;
import
search
from
'
../search.svg
'
;
import
{
Container
,
Row
,
Form
,
FormControl
,
Button
,
Card
}
from
'
react-bootstrap
'
;
function
ProductsList
()
{
const
[
sub
,
setSub
]
=
useState
([
'
PADDED JACKET
'
,
'
JACKET
'
,
'
JUMPER
'
,
'
COAT
'
,
'
FLEECE
'
,
'
CARDIGAN / VEST
'
])
function
handleSubmit
(
e
)
{
e
.
preventDefault
()
}
return
(
<
div
>
<
style
type
=
"
text/css
"
>
{
`
.btn {
background-color: #CDC5C2;
border-color: #CDC5C2;
}
.btn:hover, .btn:active, .btn:focus {
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
>
<
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
>
<
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
>
가격
:
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
>
<
/Row
>
<
/Container
>
<
Pagination
/>
<
/div
>
)
}
...
...
client/src/index.js
View file @
3ba7cf83
...
...
@@ -4,7 +4,8 @@ import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-d
import
Home
from
'
./Pages/Home
'
;
import
Login
from
'
./Pages/Login
'
;
import
Signup
from
'
./Pages/Signup
'
;
import
Product
from
"
./Pages/Products
"
;
import
Product
from
"
./Pages/Product
"
;
import
ProductsList
from
"
./Pages/ProductsList
"
;
import
Admin
from
'
./Pages/Admin
'
;
import
ProductsRegist
from
'
./Pages/ProductsRegist
'
;
import
ShoppingCart
from
'
./Pages/ShoppingCart
'
;
...
...
@@ -21,6 +22,7 @@ ReactDOM.render(
<
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
=
{
ProductsRegist
}
/
>
<
Route
path
=
"
/shoppingcart
"
component
=
{
ShoppingCart
}
/
>
...
...
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