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
butter-studio
Commits
c42e9ffb
Commit
c42e9ffb
authored
Jul 24, 2021
by
한규민
Browse files
Merge branch 'master' into gyumin
parents
6aa99cb4
fdd2a316
Changes
69
Hide whitespace changes
Inline
Side-by-side
client/src/components/BoxOffice/BoxOffice.js
View file @
c42e9ffb
import
axios
from
"
axios
"
import
{
baseUrl
}
from
'
../../utils/baseUrl.js
'
import
{
useState
,
useEffect
}
from
"
react
"
import
styles
from
"
./box-office.module.scss
"
import
movieApi
from
'
../../apis/movie.api.js
'
import
"
./box-office.module.css
"
const
BoxOffice
=
()
=>
{
const
[
TMDB_TopRated_Data
,
setTMDB_TopRated_Data
]
=
useState
()
useEffect
(()
=>
{
getTMDB_TopRated
()
let
items
=
document
.
querySelectorAll
(
'
.carousel-item
'
)
console
.
log
(
"
item
"
,
items
)
//
getTMDB_TopRated()
let
items
=
document
.
querySelectorAll
(
'
.carousel
.carousel
-item
'
)
//
console.log("item", items)
items
.
forEach
((
el
)
=>
{
const
minPerSlide
=
4
let
next
=
el
.
nextElementSibling
for
(
let
i
=
1
;
i
<
minPerSlide
;
i
++
)
{
if
(
!
next
)
{
// wrap carousel by using first child
next
=
items
[
0
]
}
let
cloneChild
=
next
.
cloneNode
(
true
)
...
...
@@ -24,18 +24,95 @@ const BoxOffice = () => {
},
[])
async
function
getTMDB_TopRated
()
{
const
category
=
"
popular
"
try
{
const
response
=
await
axios
.
get
(
`
${
baseUrl
}
/api/movie`
)
console
.
log
(
response
.
data
)
setTMDB_TopRated_Data
(
response
.
data
)
const
data
=
await
movieApi
.
getMoviesfromTM
(
category
)
console
.
log
(
data
)
setTMDB_TopRated_Data
(
data
)
}
catch
(
error
)
{
console
.
log
(
error
)
}
}
return
(
<
div
className
=
"
container text-center my-3
"
>
{
console
.
log
(
typeof
(
TMDB_TopRated_Data
))}
{
console
.
log
(
TMDB_TopRated_Data
)}
<
div
className
=
"
container text-center my-3
"
>
<
h2
className
=
"
font-weight-light
"
>
Bootstrap
Multi
Slide
Carousel
<
/h2
>
<
div
className
=
"
row mx-auto my-auto justify-content-center
"
>
<
div
id
=
"
recipeCarousel
"
className
=
"
carousel slide
"
data
-
bs
-
ride
=
"
carousel
"
>
<
div
className
=
"
carousel-inner
"
role
=
"
listbox
"
>
<
div
className
=
"
carousel-item active
"
>
<
div
className
=
"
col-md-3
"
>
<
div
className
=
"
card
"
>
<
div
className
=
"
card-img
"
>
<
img
src
=
"
//via.placeholder.com/500x400/31f?text=1
"
className
=
"
img-fluid
"
/>
<
/div
>
<
div
className
=
"
card-img-overlay
"
>
Slide
1
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
div
className
=
"
carousel-item
"
>
<
div
className
=
"
col-md-3
"
>
<
div
className
=
"
card
"
>
<
div
className
=
"
card-img
"
>
<
img
src
=
"
//via.placeholder.com/500x400/e66?text=2
"
className
=
"
img-fluid
"
/>
<
/div
>
<
div
className
=
"
card-img-overlay
"
>
Slide
2
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
div
className
=
"
carousel-item
"
>
<
div
className
=
"
col-md-3
"
>
<
div
className
=
"
card
"
>
<
div
className
=
"
card-img
"
>
<
img
src
=
"
//via.placeholder.com/500x400/7d2?text=3
"
className
=
"
img-fluid
"
/>
<
/div
>
<
div
className
=
"
card-img-overlay
"
>
Slide
3
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
div
className
=
"
carousel-item
"
>
<
div
className
=
"
col-md-3
"
>
<
div
className
=
"
card
"
>
<
div
className
=
"
card-img
"
>
<
img
src
=
"
//via.placeholder.com/500x400?text=4
"
className
=
"
img-fluid
"
/>
<
/div
>
<
div
className
=
"
card-img-overlay
"
>
Slide
4
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
div
className
=
"
carousel-item
"
>
<
div
className
=
"
col-md-3
"
>
<
div
className
=
"
card
"
>
<
div
className
=
"
card-img
"
>
<
img
src
=
"
//via.placeholder.com/500x400/aba?text=5
"
className
=
"
img-fluid
"
/>
<
/div
>
<
div
className
=
"
card-img-overlay
"
>
Slide
5
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
div
className
=
"
carousel-item
"
>
<
div
className
=
"
col-md-3
"
>
<
div
className
=
"
card
"
>
<
div
className
=
"
card-img
"
>
<
img
src
=
"
//via.placeholder.com/500x400/fc0?text=6
"
className
=
"
img-fluid
"
/>
<
/div
>
<
div
className
=
"
card-img-overlay
"
>
Slide
6
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
a
className
=
"
carousel-control-prev bg-transparent w-aut
"
href
=
"
#recipeCarousel
"
role
=
"
button
"
data
-
bs
-
slide
=
"
prev
"
>
<
span
className
=
"
carousel-control-prev-icon
"
aria
-
hidden
=
"
true
"
><
/span
>
<
/a
>
<
a
className
=
"
carousel-control-next bg-transparent w-aut
"
href
=
"
#recipeCarousel
"
role
=
"
button
"
data
-
bs
-
slide
=
"
next
"
>
<
span
className
=
"
carousel-control-next-icon
"
aria
-
hidden
=
"
true
"
><
/span
>
<
/a
>
<
/div
>
<
/div
>
<
h5
className
=
"
mt-2 fw-light
"
>
advances
one
slide
at
a
time
<
/h5
>
<
/div
>
<
div
className
=
"
row my-auto justify-content-center
"
>
<
div
id
=
"
recipeCarousel
"
className
=
"
carousel slide
"
data
-
bs
-
ride
=
"
carousel
"
data
-
bs
-
interval
=
"
999999999
"
>
<
div
className
=
{
`carousel-inner`
}
role
=
"
listbox
"
>
...
...
client/src/components/BoxOffice/box-office.module.css
0 → 100644
View file @
c42e9ffb
@media
(
max-width
:
767px
)
{
.carousel-inner
.carousel-item
>
div
{
display
:
none
;
}
.carousel-inner
.carousel-item
>
div
:first-child
{
display
:
block
;
}
}
.carousel-inner
.carousel-item.active
,
.carousel-inner
.carousel-item-next
,
.carousel-inner
.carousel-item-prev
{
display
:
flex
;
}
/* medium and up screens */
@media
(
min-width
:
768px
)
{
.carousel-inner
.carousel-item-end.active
,
.carousel-inner
.carousel-item-next
{
transform
:
translateX
(
25%
);
}
.carousel-inner
.carousel-item-start.active
,
.carousel-inner
.carousel-item-prev
{
transform
:
translateX
(
-25%
);
}
}
.carousel-inner
.carousel-item-end
,
.carousel-inner
.carousel-item-start
{
transform
:
translateX
(
0
);
}
client/src/components/BoxOffice/box-office.module.scss
deleted
100644 → 0
View file @
6aa99cb4
/* // .cursor {
// cursor: pointer;
// }
// .dNone {
// display: none;
// }
\
// .dBlock {
// display: block;
// } */
// @media (max-width: 767px) {
// .carousel-inner .carousel-item >div {
// display: none;
// }
// .carousel-inner .carousel-item >div:first-child {
// display: block;
// }
// }
.carousel-inner
.carousel-item.active
,
.carousel-inner
.carousel-item-next
,
.carousel-inner
.carousel-item-prev
{
display
:
flex
;
}
$breakpoint-tablet
:
768px
;
/* medium and up screens */
@media
(
min-width
:
$breakpoint-tablet
)
{
.carousel-inner
.carousel-item-end
.active
,
.carousel-inner
.carousel-item-next
{
transform
:
translateX
(
25%
);
}
.carousel-inner
.carousel-item-start
.active
,
.carousel-inner
.carousel-item-prev
{
transform
:
translateX
(
-25%
);
}
}
.carousel-inner
.carousel-item-end
,
.carousel-inner
.carousel-item-start
{
transform
:
translateX
(
0
);
}
client/src/components/CountButton.js
0 → 100644
View file @
c42e9ffb
import
{
useState
}
from
'
react
'
const
CountButton
=
(
props
)
=>
{
const
name
=
props
.
name
function
handleCount
(
event
)
{
if
(
event
.
target
.
name
===
"
backbutton
"
)
{
props
.
setCount
({...
props
.
count
,
[
name
]
:
props
.
count
[
name
]
-
1
})
}
else
if
(
event
.
target
.
name
===
"
forwardbutton
"
)
{
props
.
setCount
({...
props
.
count
,
[
name
]
:
props
.
count
[
name
]
+
1
})
}
else
{
props
.
setCount
({...
props
.
count
,
[
name
]
:
event
.
target
.
value
})
}
}
return
(
<
span
className
=
""
>
<
button
type
=
"
button
"
name
=
"
backbutton
"
style
=
{{
backgroundColor
:
"
black
"
,
border
:
"
0
"
}}
onClick
=
{
handleCount
}
>
<
img
src
=
"
/images/icons8-back-24.png
"
name
=
"
backbutton
"
alt
=
"
<
"
/>
<
/button
>
<
input
type
=
'
number
'
onChange
=
{
handleCount
}
value
=
{
props
.
count
[
name
]}
style
=
{{
width
:
'
2rem
'
}}
className
=
"
text-center
"
/>
<
button
type
=
"
button
"
name
=
"
forwardbutton
"
min
=
"
0
"
style
=
{{
backgroundColor
:
"
black
"
,
border
:
"
0
"
}}
onClick
=
{
handleCount
}
>
<
img
src
=
"
/images/icons8-forward-24.png
"
name
=
"
forwardbutton
"
alt
=
"
>
"
/>
<
/button
>
<
/span
>
)
}
export
default
CountButton
\ No newline at end of file
client/src/components/KakaoMap/KakaoMap.js
deleted
100644 → 0
View file @
6aa99cb4
import
{
useState
,
useEffect
,
useRef
}
from
"
react
"
;
import
styles
from
"
./kakao-map.module.scss
"
;
const
{
kakao
}
=
window
;
const
KakaoMap
=
({
keyword
,
cinemaInfo
,
setCinemaInfo
})
=>
{
const
kakaoMapDiv
=
useRef
(
null
)
const
menu
=
useRef
(
null
)
const
searchList
=
useRef
(
null
)
const
page
=
useRef
(
null
)
const
[
places
,
setPlaces
]
=
useState
([])
let
markers
=
[]
useEffect
(()
=>
{
const
container
=
kakaoMapDiv
.
current
const
options
=
{
center
:
new
kakao
.
maps
.
LatLng
(
33.450701
,
126.570667
),
level
:
3
};
const
map
=
new
kakao
.
maps
.
Map
(
container
,
options
);
const
ps
=
new
kakao
.
maps
.
services
.
Places
();
const
infowindow
=
new
kakao
.
maps
.
InfoWindow
({
zIndex
:
1
});
searchPlaces
(
keyword
)
// 키워드 검색을 요청하는 함수입니다
function
searchPlaces
(
keyword
)
{
if
(
!
keyword
.
replace
(
/^
\s
+|
\s
+$/g
,
''
))
{
alert
(
'
키워드를 입력해주세요.
'
);
return
false
}
// 장소검색 객체를 통해 키워드로 장소검색을 요청합니다
ps
.
keywordSearch
(
keyword
,
placesSearchCB
);
}
// 장소검색이 완료됐을 때 호출되는 콜백함수 입니다
function
placesSearchCB
(
data
,
status
,
pagination
)
{
if
(
status
===
kakao
.
maps
.
services
.
Status
.
OK
)
{
displayPlaces
(
data
);
displayPagination
(
pagination
);
// 페이지 번호를 표출합니다
}
else
if
(
status
===
kakao
.
maps
.
services
.
Status
.
ZERO_RESULT
)
{
alert
(
'
검색 결과가 존재하지 않습니다.
'
);
return
}
else
if
(
status
===
kakao
.
maps
.
services
.
Status
.
ERROR
)
{
alert
(
'
검색 결과 중 오류가 발생했습니다.
'
);
return
}
}
// 검색 결과 목록과 마커를 표출하는 함수입니다
function
displayPlaces
(
places
)
{
let
listEl
=
searchList
.
current
,
menuEl
=
menu
.
current
,
fragment
=
document
.
createDocumentFragment
(),
bounds
=
new
kakao
.
maps
.
LatLngBounds
();
for
(
let
i
=
0
;
i
<
places
.
length
;
i
++
)
{
// 마커를 생성하고 지도에 표시합니다
let
placePosition
=
new
kakao
.
maps
.
LatLng
(
places
[
i
].
y
,
places
[
i
].
x
),
itemEl
=
getListItem
(
i
,
places
[
i
]);
// 검색 결과 항목 Element를 생성합니다
displayMarker
(
places
[
i
],
itemEl
)
// 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해 LatLngBounds 객체에 좌표를 추가합니다
bounds
.
extend
(
placePosition
);
fragment
.
appendChild
(
itemEl
);
}
// 검색결과 항목들을 검색결과 목록 Elemnet에 추가합니다
listEl
.
appendChild
(
fragment
);
menuEl
.
scrollTop
=
0
;
// 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다
map
.
setBounds
(
bounds
);
}
function
displayMarker
(
place
,
itemEl
)
{
let
marker
=
new
kakao
.
maps
.
Marker
({
map
:
map
,
position
:
new
kakao
.
maps
.
LatLng
(
place
.
y
,
place
.
x
),
})
kakao
.
maps
.
event
.
addListener
(
marker
,
'
mouseover
'
,
function
()
{
infowindow
.
setContent
(
'
<div style="padding:5px;font-size:12px;">
'
+
place
.
place_name
+
'
</div>
'
)
infowindow
.
open
(
map
,
marker
)
})
kakao
.
maps
.
event
.
addListener
(
marker
,
'
mouseout
'
,
function
()
{
infowindow
.
close
();
})
itemEl
.
onmouseover
=
function
()
{
itemEl
.
style
.
background
=
'
rgba(0, 0, 0, 0.075)
'
;
itemEl
.
style
.
cursor
=
'
pointer
'
;
infowindow
.
setContent
(
'
<div style="padding:5px;font-size:12px;">
'
+
place
.
place_name
+
'
</div>
'
)
infowindow
.
open
(
map
,
marker
)
};
itemEl
.
onmouseout
=
function
()
{
itemEl
.
style
.
background
=
'
#fff
'
;
infowindow
.
close
();
};
itemEl
.
onclick
=
function
()
{
setCinemaInfo
({
...
cinemaInfo
,
address
:
place
.
address_name
})
}
}
},
[
keyword
])
// 검색결과 목록 하단에 페이지번호를 표시는 함수입니다
function
displayPagination
(
pagination
)
{
let
paginationEl
=
page
.
current
,
fragment
=
document
.
createDocumentFragment
(),
i
;
for
(
i
=
1
;
i
<=
pagination
.
last
;
i
++
)
{
// let el = <a>{i}</a>
let
el
=
document
.
createElement
(
'
a
'
);
// el.href = "#";
el
.
innerHTML
=
i
;
if
(
i
===
pagination
.
current
)
{
el
.
className
=
'
on
'
;
}
else
{
el
.
onclick
=
(
function
(
i
)
{
return
function
()
{
pagination
.
gotoPage
(
i
);
}
})(
i
);
}
fragment
.
appendChild
(
el
);
}
paginationEl
.
appendChild
(
fragment
);
}
// 검색결과 항목을 Element로 반환하는 함수입니다
function
getListItem
(
index
,
places
)
{
let
el
=
document
.
createElement
(
'
div
'
),
itemStr
=
'
<div className="info">
'
+
'
<h5>
'
+
places
.
place_name
+
'
</h5>
'
;
if
(
places
.
road_address_name
)
{
itemStr
+=
'
<span>
'
+
places
.
road_address_name
+
'
</span>
'
+
'
<span className="jibun gray">
'
+
places
.
address_name
+
'
</span>
'
;
}
else
{
itemStr
+=
'
<span>
'
+
places
.
address_name
+
'
</span>
'
;
}
itemStr
+=
'
<span className="tel">
'
+
places
.
phone
+
'
</span>
'
+
'
</div>
'
;
el
.
innerHTML
=
itemStr
;
el
.
className
=
'
item
'
;
return
el
;
}
return
(
<>
<
div
ref
=
{
kakaoMapDiv
}
style
=
{{
width
:
"
500px
"
,
height
:
"
400px
"
}}
><
/div
>
<
div
ref
=
{
menu
}
className
=
{
`
${
styles
.
menu
}
bg-white`
}
>
<
div
ref
=
{
searchList
}
><
/div
>
<
div
ref
=
{
page
}
><
/div
>
<
/div
>
<
/
>
)
}
export
default
KakaoMap
\ No newline at end of file
client/src/components/KakaoMap/index.js
deleted
100644 → 0
View file @
6aa99cb4
export
{
default
}
from
"
./KakaoMap
"
\ No newline at end of file
client/src/components/KakaoMap/kakao-map.module.scss
deleted
100644 → 0
View file @
6aa99cb4
// .menu {
// position:absolute;
// top:0;
// left:0;
// bottom:0;
// width:250px;
// margin:10px 0 30px 10px;
// padding:5px;
// overflow-y:auto;
// background:rgba(255, 255, 255, 0.7);
// z-index: 1;
// font-size:12px;
// border-radius: 10px;
// }
\ No newline at end of file
client/src/components/MovieCard/MovieCard.js
0 → 100644
View file @
c42e9ffb
import
{
useState
,
useEffect
}
from
"
react
"
import
{
Link
}
from
'
react-router-dom
'
import
styles
from
'
./movie-card.module.scss
'
const
MovieCard
=
({
list
})
=>
{
const
[
movieList
,
setMovieList
]
=
useState
(
list
)
useEffect
(()
=>
{
setMovieList
(
list
)
},
[
list
])
return
(
<>
{
movieList
.
map
(
movie
=>
(
<
div
className
=
"
card h-100
"
style
=
{{
backgroundColor
:
"
black
"
}}
>
<
Link
to
=
{{
pathname
:
`/movie/
${
movie
.
id
}
`
,
state
:
{
...
movie
}
}}
className
=
{
`
${
styles
.
layer
}
`
}
>
<
img
src
=
{
`https://image.tmdb.org/t/p/original
${
movie
.
poster_path
}
`
}
className
=
{
`card-img-top rounded
${
styles
.
poster
}
`
}
alt
=
"
Movie Poster
"
/>
<
div
className
=
{
`
${
styles
.
description
}
`
}
>
{
movie
.
overview
}
<
/div
>
<
/Link
>
<
div
className
=
"
card-body text-light
"
>
<
marquee
className
=
{
`h2 card-title text-center
${
styles
.
title
}
`
}
>
{
movie
.
title
}
<
/marquee
>
<
p
className
=
{
`card-text text-center
${
styles
.
txt
}
`
}
>
예매율
:
{
movie
.
ticket_sales
}
0
%
|
{
movie
.
runtime
}
분
<
/p
>
<
p
className
=
"
card-text text-center
"
><
small
className
=
"
text-muted
"
>
{
movie
.
release_date
}
개봉
<
/small></
p
>
<
/div
>
<
Link
to
=
{{
pathname
:
`/ticket`
,
state
:
{
movieId
:
movie
.
id
,}
}}
className
=
"
text-center
"
>
<
button
className
=
"
btn btn-warning
"
>
예매하기
<
/button
>
<
/Link
>
<
/div
>
))}
<
/
>
)
}
export
default
MovieCard
\ No newline at end of file
client/src/components/MovieCard/index.js
0 → 100644
View file @
c42e9ffb
export
{
default
}
from
"
./MovieCard.js
"
\ No newline at end of file
client/src/components/MovieC
omming/movieComming
.module.scss
→
client/src/components/MovieC
ard/movie-card
.module.scss
View file @
c42e9ffb
.layer
{
position
:
relative
;
}
// .poster{
// opacity: 1;
// &:hover{
// opacity: 0.3;
// }
// }
.poster
{
max-height
:
20rem
;
object-fit
:
contain
;
}
.description
{
position
:
absolute
;
top
:
0%
;
...
...
@@ -27,4 +25,7 @@
&
:hover
{
opacity
:
1
;
}
}
.txt
{
font-size
:
99%
;
}
\ No newline at end of file
client/src/components/MovieChart.js
0 → 100644
View file @
c42e9ffb
import
{
useState
,
useEffect
}
from
'
react
'
import
MovieCard
from
'
./MovieCard/index.js
'
import
movieApi
from
'
../apis/movie.api.js
'
import
catchErrors
from
'
../utils/catchErrors.js
'
const
MovieChart
=
()
=>
{
const
[
TMDB_TopRated_Data
,
setTMDB_TopRated_Data
]
=
useState
([])
const
[
error
,
setError
]
=
useState
(
""
)
const
category
=
"
popular
"
useEffect
(()
=>
{
getTMDB_TopRated
()
},
[])
async
function
getTMDB_TopRated
()
{
try
{
setError
(
""
)
const
data
=
await
movieApi
.
getMoviesfromTM
(
category
)
console
.
log
(
"
sdad==
"
,
data
)
setTMDB_TopRated_Data
([...
data
])
}
catch
(
error
)
{
catchErrors
(
error
,
setError
)
}
}
return
(
<>
{
TMDB_TopRated_Data
.
length
!==
0
?
<
div
className
=
"
row row-cols-1 row-cols-md-4 g-4
"
>
<
MovieCard
list
=
{
TMDB_TopRated_Data
}
/
>
<
/div
>
:
<
h2
className
=
"
text-white text-center my-5
"
>
영화정보를
로딩할
수
없습니다
.
<
/h2
>
}
<
/
>
)
}
export
default
MovieChart
\ No newline at end of file
client/src/components/MovieChart/MovieChart.js
deleted
100644 → 0
View file @
6aa99cb4
import
React
,{
useState
,
useEffect
}
from
'
react
'
import
axios
from
'
axios
'
import
{
baseUrl
}
from
'
../../utils/baseUrl.js
'
import
{
Link
}
from
'
react-router-dom
'
;
import
styles
from
"
./movieChart.module.scss
"
const
MovieChart
=
()
=>
{
const
[
TMDB_TopRated_Data
,
setTMDB_TopRated_Data
]
=
useState
()
useEffect
(()
=>
{
getTMDB_TopRated
()
},
[])
async
function
getTMDB_TopRated
()
{
try
{
const
response
=
await
axios
.
get
(
`
${
baseUrl
}
/api/movie`
)
console
.
log
(
response
.
data
)
setTMDB_TopRated_Data
([...
response
.
data
])
}
catch
(
error
)
{
}
}
return
(
<
div
class
=
"
row row-cols-1 row-cols-md-4 g-4
"
>
{
console
.
log
(
TMDB_TopRated_Data
)}
{
TMDB_TopRated_Data
?
TMDB_TopRated_Data
.
map
(
movie
=>
(
<
div
className
=
"
card h-100
"
style
=
{{
backgroundColor
:
"
black
"
}}
>
<
Link
to
=
{{
pathname
:
`/movie/
${
movie
.
id
}
`
,
state
:
{
...
movie
}
}}
className
=
{
`
${
styles
.
layer
}
`
}
>
<
img
src
=
{
`https://image.tmdb.org/t/p/original
${
movie
.
poster_path
}
`
}
className
=
{
`card-img-top rounded
${
styles
.
poster
}
`
}
alt
=
"
Movie Poster
"
/>
<
div
className
=
{
`
${
styles
.
description
}
`
}
>
{
movie
.
overview
}
<
/div
>
<
/Link
>
<
div
className
=
"
card-body text-light
"
>
<
marquee
onmouseover
=
"
this.stop()
"
className
=
{
`h2 card-title text-center
${
styles
.
title
}
`
}
>
{
movie
.
title
}
<
/marquee
>
<
p
className
=
"
card-text text-center
"
>
예매율
:
{
movie
.
ticket_sales
}
0
%
|
{
movie
.
runtime
}
분
<
/p
>
<
p
className
=
"
card-text text-center
"
><
small
className
=
"
text-muted
"
>
{
movie
.
release_date
}
개봉
<
/small></
p
>
<
/div
>
<
button
className
=
"
btn btn-warning
"
>
예매하기
<
/button
>
<
/div
>
))
:
<
div
>
영화정보를
로딩할
수
없습니다
.
<
/div
>
}
<
/div
>
)
}
export
default
MovieChart
\ No newline at end of file
client/src/components/MovieChart/index.js
deleted
100644 → 0
View file @
6aa99cb4
export
{
default
}
from
'
./MovieChart
'
\ No newline at end of file
client/src/components/MovieChart/movieChart.module.scss
deleted
100644 → 0
View file @
6aa99cb4
.layer
{
position
:
relative
;
}
// .poster{
// opacity: 1;
// &:hover{
// opacity: 0.3;
// }
// }
.description
{
position
:
absolute
;
top
:
0%
;
left
:
0%
;
width
:
100%
;
height
:
100%
;
opacity
:
0
;
background-color
:rgba
(
0
,
0
,
0
,
0
.6
)
;
text-align
:
center
;
color
:white
;
//ellipsis
text-overflow
:
ellipsis
;
white-space
:
pre-line
;
display
:
-
webkit-box
;
-webkit-line-clamp
:
9
;
-webkit-box-orient
:
vertical
;
overflow
:
hidden
;
&
:hover
{
opacity
:
1
;
}
}
.title
{
}
\ No newline at end of file
client/src/components/MovieComing.js
0 → 100644
View file @
c42e9ffb
import
{
useState
,
useEffect
}
from
'
react
'
import
movieApi
from
"
../apis/movie.api.js
"
// import MovieCard from "./MovieCard/index.js"
import
{
Link
}
from
'
react-router-dom
'
import
styles
from
'
./MovieCard/MovieCard.js
'
import
catchErrors
from
'
../utils/catchErrors.js
'
const
MovieComing
=
()
=>
{
const
[
TMDB_UpComing_Data
,
setTMDB_UpComing_Data
]
=
useState
([])
const
[
error
,
setError
]
=
useState
(
""
)
const
category
=
"
upcoming
"
useEffect
(()
=>
{
getTMDB_UpComing
()
},
[])
async
function
getTMDB_UpComing
()
{
try
{
setError
(
""
)
const
response
=
await
movieApi
.
getMoviesfromTM
(
category
)
setTMDB_UpComing_Data
([...
response
])
}
catch
(
error
)
{
catchErrors
(
error
,
setError
)
}
}
return
(
<>
{
TMDB_UpComing_Data
.
length
!==
0
?
<
div
className
=
"
row row-cols-1 row-cols-md-4 g-4
"
>
{
/* <MovieCard list={TMDB_UpComing_Data} /> */
}
{
TMDB_UpComing_Data
.
map
(
movie
=>
(
<
div
className
=
"
card h-100
"
style
=
{{
backgroundColor
:
"
black
"
}}
>
<
Link
to
=
{{
pathname
:
`/movie/
${
movie
.
id
}
`
,
state
:
{
...
movie
}
}}
className
=
{
`
${
styles
.
layer
}
`
}
>
<
img
src
=
{
`https://image.tmdb.org/t/p/original
${
movie
.
poster_path
}
`
}
className
=
{
`card-img-top rounded
${
styles
.
poster
}
`
}
alt
=
"
Movie Poster
"
/>
<
div
className
=
{
`
${
styles
.
description
}
`
}
>
{
movie
.
overview
}
<
/div
>
<
/Link
>
<
div
className
=
"
card-body text-light
"
>
<
marquee
className
=
{
`h2 card-title text-center
${
styles
.
title
}
`
}
>
{
movie
.
title
}
<
/marquee
>
<
p
className
=
{
`card-text text-center
${
styles
.
txt
}
`
}
>
예매율
:
{
movie
.
ticket_sales
}
0
%
|
{
movie
.
runtime
}
분
<
/p
>
<
p
className
=
"
card-text text-center
"
><
small
className
=
"
text-muted
"
>
{
movie
.
release_date
}
개봉
<
/small></
p
>
<
/div
>
<
Link
to
=
{{
pathname
:
`/ticket`
,
state
:
{
movieId
:
movie
.
id
,
}
}}
className
=
"
text-center
"
>
<
button
className
=
"
btn btn-warning
"
>
예매하기
<
/button
>
<
/Link
>
<
/div
>
))}
<
/div
>
:
<
h2
className
=
"
text-white text-center my-5
"
>
영화정보를
로딩할
수
없습니다
.
<
/h2
>
}
<
/
>
)
}
export
default
MovieComing
\ No newline at end of file
client/src/components/MovieComming/MovieComming.js
deleted
100644 → 0
View file @
6aa99cb4
import
React
,{
useState
,
useEffect
}
from
'
react
'
import
axios
from
'
axios
'
import
{
baseUrl
}
from
'
../../utils/baseUrl.js
'
import
{
Link
}
from
'
react-router-dom
'
;
import
styles
from
"
./movieComming.module.scss
"
const
MovieComming
=
()
=>
{
const
[
TMDB_UpComming_Data
,
setTMDB_UpComming_Data
]
=
useState
()
useEffect
(()
=>
{
getTMDB_UpComming
()
},
[])
async
function
getTMDB_UpComming
()
{
try
{
const
response
=
await
axios
.
get
(
`
${
baseUrl
}
/api/movie/upcomming`
)
console
.
log
(
response
.
data
)
setTMDB_UpComming_Data
([...
response
.
data
])
}
catch
(
error
)
{
}
}
return
(
<
div
class
=
"
row row-cols-1 row-cols-md-4 g-4
"
>
{
TMDB_UpComming_Data
?
TMDB_UpComming_Data
.
map
(
movie
=>
(
<
div
className
=
"
card h-100
"
style
=
{{
backgroundColor
:
"
black
"
}}
>
<
Link
to
=
{{
pathname
:
`/movie/
${
movie
.
id
}
`
,
state
:
{
...
movie
}
}}
className
=
{
`
${
styles
.
layer
}
`
}
>
<
img
src
=
{
`https://image.tmdb.org/t/p/original
${
movie
.
poster_path
}
`
}
className
=
{
`card-img-top rounded
${
styles
.
poster
}
`
}
alt
=
"
Movie Poster
"
/>
<
div
className
=
{
`
${
styles
.
description
}
`
}
>
{
movie
.
overview
}
<
/div
>
<
/Link
>
<
div
className
=
"
card-body text-light
"
>
<
marquee
onmouseover
=
"
this.stop()
"
className
=
{
`h2 card-title text-center
${
styles
.
title
}
`
}
>
{
movie
.
title
}
<
/marquee
>
<
p
className
=
"
card-text text-center
"
>
{
movie
.
runtime
}
분
<
/p
>
<
p
className
=
"
card-text text-center
"
><
small
className
=
"
text-muted
"
>
{
movie
.
release_date
}
개봉
<
/small></
p
>
<
/div
>
<
button
className
=
"
btn btn-warning
"
>
예매하기
<
/button
>
<
/div
>
))
:
<
div
>
영화정보를
로딩할
수
없습니다
.
<
/div
>
}
<
/div
>
)
}
export
default
MovieComming
\ No newline at end of file
client/src/components/MovieComming/index.js
deleted
100644 → 0
View file @
6aa99cb4
export
{
default
}
from
'
./MovieComming
'
\ No newline at end of file
client/src/components/MovieTable/MovieTable.js
View file @
c42e9ffb
...
...
@@ -6,28 +6,37 @@ import styles from "./movie-table.module.scss";
const
MovieTable
=
({
movieList
})
=>
{
const
[
error
,
setError
]
=
useState
(
""
)
async
function
handle
Click
(
e
,
movieId
)
{
async
function
handle
Submit
(
e
,
movieId
)
{
e
.
preventDefault
();
try
{
setError
(
""
)
;
setError
(
""
)
await
movieApi
.
submit
(
movieId
)
alert
(
"
서버 등록이 완료되었습니다.
"
)
window
.
location
.
reload
()
}
catch
(
error
)
{
catchErrors
(
error
,
setError
)
}
}
async
function
handleDelete
(
e
,
movieId
)
{
e
.
preventDefault
()
try
{
setError
(
""
)
await
movieApi
.
remove
(
movieId
)
alert
(
"
해당 영화 정보가 서버에서 삭제되었습니다.
"
)
window
.
location
.
reload
()
}
catch
(
error
)
{
catchErrors
(
error
,
setError
)
}
}
return
(
<
table
className
=
{
`table text-center
${
styles
.
tableForm
}
`
}
>
<
table
style
=
{{
color
:
"
white
"
}}
className
=
{
`table text-center
align-middle
${
styles
.
tableForm
}
`
}
>
<
thead
className
=
{
`table-dark
${
styles
.
dNone
}
`
}
>
<
tr
>
<
th
>
제목
<
/th
>
<
th
>
감독
<
/th
>
<
th
>
상영일
<
/th
>
<
th
>
줄거리
<
/th
>
<
th
>
포스터
<
/th
>
<
th
>
스틸컷
<
/th
>
<
th
>
예고편
<
/th
>
<
th
className
=
"
col-md-5
"
>
제목
<
/th
>
<
th
className
=
"
col-md-4
"
>
감독
<
/th
>
<
th
className
=
"
col-md-3
"
>
상영일
<
/th
>
<
/tr
>
<
/thead
>
<
tbody
>
...
...
@@ -35,24 +44,15 @@ const MovieTable = ({ movieList }) => {
<>
<
tr
className
=
{
styles
.
Row
}
data
-
bs
-
toggle
=
"
collapse
"
data
-
bs
-
target
=
{
"
#movie
"
+
movie
.
id
}
>
<
td
className
=
"
d-inline-block d-md-table-cell
"
>
{
movie
.
title
}
<
/td
>
<
td
data
-
label
=
"
-
"
className
=
{
`d-inline-block d-md-table-cell
${
styles
.
data
}
`
}
>
케이트
쇼트랜드
<
/td
>
<
td
data
-
label
=
"
/
"
className
=
{
`d-inline-block d-md-table-cell
${
styles
.
data
}
`
}
>
{
movie
.
release_date
}
<
/td
>
<
td
className
=
"
d-none d-md-table-cell
"
>
{
movie
.
overview
!==
''
?
'
O
'
:
'
X
'
}
<
/td
>
<
td
className
=
"
d-none d-md-table-cell
"
>
{
movie
.
poster_path
!==
''
?
'
O
'
:
'
X
'
}
<
/td
>
<
td
className
=
"
d-none d-md-table-cell
"
>
{
movie
.
backdrop_path
!==
''
?
'
O
'
:
'
X
'
}
<
/td
>
<
td
className
=
"
d-none d-md-table-cell
"
>
{
movie
.
video
!==
false
?
'
O
'
:
'
X
'
}
<
/td
>
<
td
className
=
"
d-none d-md-table-cell
"
>
{
movie
.
director
}
<
/td
>
<
td
className
=
"
d-none d-md-table-cell
"
>
{
movie
.
release_date
}
<
/td
>
<
/tr
>
<
tr
className
=
{
styles
.
Row
}
>
<
td
colSpan
=
"
7
"
className
=
"
collapse
"
id
=
{
"
movie
"
+
movie
.
id
}
>
<
div
className
=
{
`d-inline-block d-md-none
${
styles
.
word
}
mb-2`
}
>
줄거리
-
{
movie
.
overview
!==
''
?
'
O
'
:
'
X
'
}
/
포스터
-
{
movie
.
poster_path
!==
''
?
'
O
'
:
'
X
'
}
/
스틸컷
-
{
movie
.
backdrop_path
!==
''
?
'
O
'
:
'
X
'
}
/
예고편
-
{
movie
.
video
!==
false
?
'
O
'
:
'
X
'
}
<
/div
>
<
td
colSpan
=
"
3
"
className
=
"
collapse
"
id
=
{
"
movie
"
+
movie
.
id
}
>
<
div
className
=
{
`d-inline-block d-md-none
${
styles
.
word
}
mb-2`
}
>
{
movie
.
director
}
/ {movie.release_date}</
div
>
<
div
className
=
"
d-flex justify-content-end
"
>
<
button
type
=
"
button
"
className
=
"
btn btn-
primary
"
onClick
=
{(
e
)
=>
handle
Click
(
e
,
movie
.
id
)}
>
등록
<
/button
>
{
/*
<button type="button" className="btn btn-
danger">삭제
</button>
*/
}
{
movie
.
existed
?
<
button
type
=
"
button
"
className
=
"
btn btn-
danger
"
onClick
=
{(
e
)
=>
handle
Delete
(
e
,
movie
.
id
)}
>
삭제
<
/button
>
:
<
button
type
=
"
button
"
className
=
"
btn btn-
primary
"
onClick
=
{(
e
)
=>
handleSubmit
(
e
,
movie
.
id
)}
>
등록
<
/button>
}
<
/div
>
<
/td
>
<
/tr
>
...
...
client/src/components/MovieTable/movie-table.module.scss
View file @
c42e9ffb
.Row
:hover
{
background
:
rgba
(
0
,
0
,
0
,
0
.075
);
.Row
{
cursor
:
pointer
;
&
:hover
{
background
:
rgba
(
0
,
0
,
0
,
0
.075
);
}
}
.word
{
...
...
@@ -17,11 +20,6 @@
&
.Row
{
border-bottom
:
2px
solid
;
&
.data
::before
{
content
:
attr
(
data-label
);
font-weight
:
bold
;
}
}
}
};
\ No newline at end of file
client/src/components/Navs/MainNav.js
View file @
c42e9ffb
...
...
@@ -3,7 +3,7 @@ import { useHistory } from "react-router";
import
Search
from
"
../Search
"
;
const
MainNav
=
()
=>
{
const
[
search
,
setSearch
]
=
useState
({
keyword
:
""
})
const
[
search
,
setSearch
]
=
useState
({
type
:
"
home
"
,
keyword
:
""
})
const
history
=
useHistory
()
function
searchMovie
()
{
...
...
@@ -11,11 +11,11 @@ const MainNav = () => {
}
return
(
<
nav
class
=
"
nav justify-content-evenly border border-start-0 border-end-0 border-white border-2 py-1
"
>
<
a
class
=
"
nav-link text-white
"
href
=
"
/movielist
"
>
영화
<
/a
>
<
a
class
=
"
nav-link text-white
"
href
=
"
/ticket
"
>
빠른예매
<
/a
>
<
a
class
=
"
nav-link text-white
"
href
=
"
#
"
>
극장
<
/a
>
<
Search
type
=
"
home
"
search
=
{
search
}
setSearch
=
{
setSearch
}
handleClick
=
{
searchMovie
}
/
>
<
nav
class
Name
=
"
nav justify-content-evenly border border-start-0 border-end-0 border-white border-2 py-1
"
>
<
a
class
Name
=
"
nav-link text-white
"
href
=
"
/movielist
"
>
영화
<
/a
>
<
a
class
Name
=
"
nav-link text-white
"
href
=
"
/ticket
"
>
빠른예매
<
/a
>
<
a
class
Name
=
"
nav-link text-white
"
href
=
"
/theater
"
>
극장
<
/a
>
<
Search
search
=
{
search
}
setSearch
=
{
setSearch
}
handleClick
=
{
searchMovie
}
/
>
<
/nav
>
)
}
...
...
Prev
1
2
3
4
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