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
711c9c42
Commit
711c9c42
authored
Jul 19, 2021
by
Jiwon Yoon
Browse files
0719ticketing
parent
c71167c9
Changes
13
Hide whitespace changes
Inline
Side-by-side
client/src/apis/movie.api.js
View file @
711c9c42
import
axios
from
"
axios
"
;
import
{
baseUrl
,
TMDBUrl
}
from
"
../utils/baseUrl
"
;
import
{
baseUrl
,
TMDBUrl
}
from
"
../utils/baseUrl
.js
"
;
const
getUpcomingfromTM
=
async
()
=>
{
const
{
data
}
=
await
axios
.
get
(
`
${
TMDBUrl
}
/upcoming?api_key=
${
process
.
env
.
REACT_APP_TMDB_API_KEY
}
&language=ko-KR`
)
...
...
client/src/components/BoxOffice/BoxOffice.js
View file @
711c9c42
import
axios
from
"
axios
"
<<<<<<<
HEAD
import
baseUrl
from
'
../../utils/baseUrl
'
import
{
baseUrl
}
from
'
../../utils/baseUrl.js
'
import
React
,
{
useState
,
useEffect
}
from
"
react
"
import
"
./box-office.module.scss
"
// import "./mystyle.css"
=======
import
{
baseUrl
}
from
'
../../utils/baseUrl
'
import
React
,
{
useState
,
useEffect
}
from
"
react
"
import
styles
from
"
./box-office.module.scss
"
>>>>>>>
kimpen
// import styles from "./box-office.module.scss"
const
BoxOffice
=
()
=>
{
const
[
TMDB_TopRated_Data
,
setTMDB_TopRated_Data
]
=
useState
()
...
...
client/src/components/MovieChart/MovieChart.js
View file @
711c9c42
import
React
,
{
useState
,
useEffect
}
from
'
react
'
import
React
,
{
useState
,
useEffect
}
from
'
react
'
import
axios
from
'
axios
'
import
baseUrl
from
'
../../utils/baseUrl
'
import
{
baseUrl
}
from
'
../../utils/baseUrl
.js
'
import
{
Link
}
from
'
react-router-dom
'
;
import
styles
from
"
./movieChart.module.scss
"
...
...
@@ -11,8 +11,9 @@ const MovieChart = () => {
},
[])
async
function
getTMDB_TopRated
()
{
const
category
=
"
popular
"
try
{
const
response
=
await
axios
.
get
(
`
${
baseUrl
}
/api/movie`
)
const
response
=
await
axios
.
get
(
`
${
baseUrl
}
/api/movie
/showmovie/
${
category
}
`
)
console
.
log
(
response
.
data
)
setTMDB_TopRated_Data
([...
response
.
data
])
}
catch
(
error
)
{
...
...
@@ -28,9 +29,7 @@ const MovieChart = () => {
<
div
className
=
"
card h-100
"
style
=
{{
backgroundColor
:
"
black
"
}}
>
<
Link
to
=
{{
pathname
:
`/movie/
${
movie
.
id
}
`
,
state
:
{
...
movie
}
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
>
...
...
@@ -40,7 +39,12 @@ const MovieChart = () => {
<
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
>
<
Link
to
=
{{
pathname
:
`/ticket`
,
state
:
{
movieId
:
movie
.
id
}
}}
>
<
button
className
=
"
btn btn-warning
"
>
예매하기
<
/button
>
<
/Link
>
<
/div
>
))
:
<
div
>
영화정보를
로딩할
수
없습니다
.
<
/div
>
...
...
client/src/components/MovieComming/MovieComming.js
View file @
711c9c42
...
...
@@ -12,7 +12,7 @@ const MovieComming = () => {
async
function
getTMDB_UpComming
()
{
try
{
const
response
=
await
axios
.
get
(
`
${
baseUrl
}
/api/
movie/upcomming`
)
const
response
=
await
axios
.
get
(
`
/api/movie/show
movie/upcomming`
)
console
.
log
(
response
.
data
)
setTMDB_UpComming_Data
([...
response
.
data
])
}
catch
(
error
)
{
...
...
client/src/components/TicketingMovie/TicketingMovie.js
View file @
711c9c42
import
React
,{
useState
}
from
'
react
'
import
React
,
{
useState
,
useEffect
}
from
'
react
'
import
axios
from
'
axios
'
import
styles
from
"
./ticketingMovie.module.scss
"
const
TicketingMovie
=
()
=>
{
const
TicketingMovie
=
(
props
)
=>
{
const
[
movieList
,
setMovieList
]
=
useState
([])
const
[
state
,
setState
]
=
useState
(
0
)
useEffect
(()
=>
{
getMovieList
()
},
[])
async
function
getMovieList
()
{
try
{
const
response
=
await
axios
.
get
(
`/api/movie/movielist`
)
console
.
log
(
response
.
data
)
setMovieList
(
response
.
data
)
}
catch
(
error
)
{
}
}
return
(
<
div
>
<
div
className
=
{
``
}
>
<
ul
className
=
"
d-grid gap-2
"
>
{
movieList
.
length
>
0
?
movieList
.
map
(
movie
=>
(
<
li
>
<
button
className
=
{
`
${
styles
.
btn
}
`
}
onClick
=
{()
=>
{
props
.
setMovieInfo
({
movieId
:
movie
.
id
})
}}
>
{
movie
.
title
}
<
/button
>
<
/li
>
))
:
<
div
>
영화정보를
불러올
수
없습니다
.
<
/div>
}
<
/ul
>
<
/div
>
)
}
...
...
client/src/components/TicketingMovie/ticketingMovie.module.scss
View file @
711c9c42
.
navB
tn
{
color
:
"white"
;
background-color
:
"black"
;
border
-color
:
"#FEDC00"
;
border-top
:
"0"
;
b
order-left
:
"0"
;
border-right
:
"0"
;
border-bottom
:
"3px solid"
;
.
b
tn
{
background
:black
;
color
:white
;
border
:
0
;
&
:focus
{
b
ackground
:
white
;
color
:
black
;
}
}
.navBtnFocus
{
color
:
"white"
;
background-color
:
"black"
;
border-color
:
"#FEDC00"
;
border-bottom
:
"0"
;
}
\ No newline at end of file
client/src/components/TicketingTheater.js
deleted
100644 → 0
View file @
c71167c9
const
TicketingTheater
=
()
=>
{
return
(
<>
<
/
>
)
}
export
default
TicketingTheater
\ No newline at end of file
client/src/components/TicketingTheater/TicketingTheater.js
0 → 100644
View file @
711c9c42
import
React
from
'
react
'
import
styles
from
"
./ticketingTheater.module.scss
"
const
TicketingTheater
=
(
props
)
=>
{
return
(
<
div
className
=
{
``
}
>
<
div
className
=
"
d-grid gap-2
"
>
{
props
.
theaterInfo
.
cinemaNum
.
length
>
0
?
props
.
theaterInfo
.
cinemaNum
.
map
(
num
=>
(
<
button
className
=
{
`
${
styles
.
btn
}
`
}
onClick
=
{()
=>
props
.
setTheaterInfo
({...
props
.
theaterInfo
,
selectedCinemaNum
:
num
})}
>
{
num
}
<
/button
>
))
:
<
div
>
영화정보를
불러올
수
없습니다
.
<
/div>
}
<
/div
>
<
/div
>
)
}
export
default
TicketingTheater
\ No newline at end of file
client/src/components/TicketingTheater/index.js
0 → 100644
View file @
711c9c42
export
{
default
}
from
'
./TicketingTheater
'
\ No newline at end of file
client/src/components/TicketingTheater/ticketingTheater.module.scss
0 → 100644
View file @
711c9c42
.btn
{
background
:black
;
color
:white
;
border
:
0
;
&
:focus
{
background
:
white
;
color
:
black
;
}
}
\ No newline at end of file
client/src/pages/TicketingPage.js
View file @
711c9c42
import
React
from
'
react
'
import
React
,
{
useState
}
from
'
react
'
import
TicketingMovie
from
"
../components/TicketingMovie/TicketingMovie
"
import
TicketingTheater
from
"
../components/TicketingTheater
"
import
TicketingTheater
from
"
../components/TicketingTheater
/TicketingTheater
"
import
TicketingTimeTable
from
"
../components/TicketingTimeTable
"
const
TicketingPage
=
()
=>
{
const
TicketingPage
=
(
location
)
=>
{
// const [movieInfo, setMovieInfo] = useState(location)
const
[
movieInfo
,
setMovieInfo
]
=
useState
({
movieId
:
"
497698
"
})
const
[
theaterInfo
,
setTheaterInfo
]
=
useState
({
theater
:
"
Butter 조치원
"
,
cinemaNum
:
[
1
,
2
,
3
,
4
],
selectedCinemaNum
:
0
})
return
(
<
div
style
=
{{
backgroundColor
:
"
black
"
}}
>
<
div
className
=
"
container
"
style
=
{{
backgroundColor
:
"
black
"
}}
>
<
div
className
=
"
row justify-content-center my-5
"
>
<
div
className
=
"
col-sm-4
"
>
<
h2
className
=
"
py-2 text-white text-center
"
style
=
{{
border
Top
:
"
3px solid #FEDC00
"
,
borderBottom
:
"
3px solid #FEDC00
"
}}
>
영화
<
/h2
>
<
TicketingMovie
/>
<
h2
className
=
"
py-2 text-white text-center
"
style
=
{{
border
:
"
3px solid #FEDC00
"
,
borderBottom
:
"
3px solid #FEDC00
"
}}
>
영화
<
/h2
>
<
TicketingMovie
movieInfo
=
{
movieInfo
}
setMovieInfo
=
{
setMovieInfo
}
/
>
<
/div
>
<
div
className
=
"
col-sm-4
"
>
<
h2
>
극장
<
/h2
>
<
TicketingTheater
/>
<
h2
className
=
"
py-2 text-white text-center
"
style
=
{{
border
:
"
3px solid #FEDC00
"
,
borderBottom
:
"
3px solid #FEDC00
"
}}
>
극장
<
/h2
>
<
TicketingTheater
theaterInfo
=
{
theaterInfo
}
setTheaterInfo
=
{
setTheaterInfo
}
/
>
<
/div
>
<
div
className
=
"
col-sm-4
"
>
<
h2
>
시간표
<
/h2
>
<
TicketingTimeTable
/>
<
h2
className
=
"
py-2 text-white text-center
"
style
=
{{
border
:
"
3px solid #FEDC00
"
,
borderBottom
:
"
3px solid #FEDC00
"
}}
>
시간표
<
/h2
>
<
TicketingTimeTable
movieInfo
=
{
movieInfo
}
theaterInfo
=
{
theaterInfo
}
/
>
<
/div
>
<
/div
>
...
...
server/controllers/movie.controller.js
View file @
711c9c42
...
...
@@ -3,87 +3,85 @@ import sequelize from 'sequelize';
const
{
Op
}
=
sequelize
import
{
Movie
}
from
'
../db/index.js
'
const
comparePopularMovie
=
async
(
req
,
res
)
=>
{
const
responsePopular
=
await
axios
.
get
(
`https://api.themoviedb.org/3/movie/
popular
?api_key=
${
process
.
env
.
TMDB_APP_KEY
}
&language=ko-KR`
)
const
movies
=
responsePopular
.
data
.
results
const
movieIds
=
[]
movies
.
forEach
(
element
=>
{
movieIds
.
push
(
element
.
id
)
const
getMovieByCategory
=
async
(
req
,
res
,
next
,
category
)
=>
{
const
responsePopular
=
await
axios
.
get
(
`https://api.themoviedb.org/3/movie/
${
category
}
?api_key=
${
process
.
env
.
TMDB_APP_KEY
}
&language=ko-KR
&page=1
`
)
const
TMDB
movies
=
responsePopular
.
data
.
results
const
TMDB
movieIds
=
[]
TMDB
movies
.
forEach
(
element
=>
{
TMDB
movieIds
.
push
(
element
.
id
)
});
console
.
log
(
movieIds
)
console
.
log
(
TMDB
movieIds
)
try
{
const
responseAfterCompare
=
await
Movie
.
findAll
({
where
:
{
movieId
:
{
[
Op
.
or
]:
movieIds
[
Op
.
or
]:
TMDB
movieIds
}
}
})
const
popularM
ovieIds
=
[]
const
m
ovieIds
=
[]
responseAfterCompare
.
forEach
(
el
=>
{
popularM
ovieIds
.
push
(
el
.
movieId
)
m
ovieIds
.
push
(
el
.
movieId
)
})
console
.
log
(
'
popularMovieIds=
'
,
popularMovieIds
)
const
m
=
await
Promise
.
all
(
popularMovieIds
.
map
(
async
(
el
)
=>
{
const
movie
=
await
axios
.
get
(
`https://api.themoviedb.org/3/movie/
${
el
}
?api_key=
${
process
.
env
.
TMDB_APP_KEY
}
&language=ko-KR`
)
console
.
log
(
'
movieIds=
'
,
movieIds
)
req
.
movieIds
=
movieIds
next
()
}
catch
(
error
)
{
console
.
log
(
error
)
}
}
const
getMovieById
=
async
(
req
,
res
)
=>
{
try
{
const
movieIds
=
req
.
movieIds
console
.
log
(
movieIds
)
const
elements
=
await
Promise
.
all
(
movieIds
.
map
(
async
(
movieId
)
=>
{
const
movie
=
await
axios
.
get
(
`https://api.themoviedb.org/3/movie/
${
movieId
}
?api_key=
${
process
.
env
.
TMDB_APP_KEY
}
&language=ko-KR`
)
return
movie
.
data
})
)
res
.
json
(
m
)
)
console
.
log
(
elements
)
res
.
json
(
elements
)
}
catch
(
error
)
{
console
.
log
(
error
)
}
}
const
upcommingMovie
=
async
(
req
,
res
)
=>
{
const
responsePopular
=
await
axios
.
get
(
`https://api.themoviedb.org/3/movie/upcoming?api_key=
${
process
.
env
.
TMDB_APP_KEY
}
&language=ko-KR&page=1`
)
const
movies
=
responsePopular
.
data
.
results
const
movieIds
=
[]
movies
.
forEach
(
element
=>
{
movieIds
.
push
(
element
.
id
)
});
console
.
log
(
movieIds
)
const
getMovieList
=
async
(
req
,
res
)
=>
{
try
{
const
responseAfterCompare
=
await
Movie
.
findAll
({
where
:
{
movieId
:
{
[
Op
.
or
]:
movieIds
}
}
})
const
popularMovieIds
=
[]
responseAfterCompare
.
forEach
(
el
=>
{
popularMovieIds
.
push
(
el
.
movieId
)
const
movieList
=
await
Movie
.
findAll
()
// console.log(movieList)
const
movieIds
=
[]
movieList
.
forEach
(
el
=>
{
movieIds
.
push
(
el
.
movieId
)
})
console
.
log
(
'
popularMovieIds=
'
,
popularMovieIds
)
const
m
=
await
Promise
.
all
(
popularMovieIds
.
map
(
async
(
el
)
=>
{
const
movie
=
await
axios
.
get
(
`https://api.themoviedb.org/3/movie/
${
el
}
?api_key=
${
process
.
env
.
TMDB_APP_KEY
}
&language=ko-KR`
)
const
elements
=
await
Promise
.
all
(
movieIds
.
map
(
async
(
movieId
)
=>
{
const
movie
=
await
axios
.
get
(
`https://api.themoviedb.org/3/movie/
${
movieId
}
?api_key=
${
process
.
env
.
TMDB_APP_KEY
}
&language=ko-KR`
)
return
movie
.
data
})
)
res
.
json
(
m
)
)
console
.
log
(
elements
)
res
.
json
(
elements
)
}
catch
(
error
)
{
console
.
log
(
error
)
}
}
<<<<<<<
HEAD
export
default
{
comparePopularMovie
,
upcommingMovie
}
=======
const
create
=
async
(
req
,
res
)
=>
{
try
{
const
{
movieId
}
=
req
.
params
const
newMovie
=
await
Movie
.
create
({
movieId
:
movieId
});
return
res
.
json
(
newMovie
);
res
.
json
(
newMovie
);
}
catch
(
error
)
{
return
res
.
status
(
500
).
send
(
error
.
message
||
"
영화 등록 중 에러 발생
"
);
res
.
status
(
500
).
send
(
error
.
message
||
"
영화 등록 중 에러 발생
"
);
}
}
export
default
{
comparePopularMovie
,
getMovieByCategory
,
getMovieById
,
getMovieList
,
create
,
}
>>>>>>>
kimpen
server/routes/movie.route.js
View file @
711c9c42
...
...
@@ -5,11 +5,18 @@ const router = express.Router();
router
.
route
(
"
/
"
)
.
post
(
movieCtrl
.
comparePopularMovie
)
.
get
(
movieCtrl
.
comparePopularMovie
)
// .post(movieCtrl.comparePopularMovie)
router
.
route
(
'
/showmovie/:category
'
)
.
get
(
movieCtrl
.
getMovieById
)
router
.
route
(
'
/movielist
'
)
.
get
(
movieCtrl
.
getMovieList
)
router
.
route
(
"
/:movieId
"
)
.
post
(
movieCtrl
.
create
)
router
.
param
(
'
category
'
,
movieCtrl
.
getMovieByCategory
)
export
default
router
;
\ No newline at end of file
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