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
fa2af12b
Commit
fa2af12b
authored
Jul 24, 2021
by
Jiwon Yoon
Browse files
ticketing-seat
parent
01ce1fdf
Changes
27
Hide whitespace changes
Inline
Side-by-side
client/public/images/icons8-back-24.png
0 → 100644
View file @
fa2af12b
240 Bytes
client/public/images/icons8-forward-24.png
0 → 100644
View file @
fa2af12b
232 Bytes
client/public/images/movie_image_black.jpg
deleted
100644 → 0
View file @
01ce1fdf
1.61 MB
client/public/images/movie_image_black_stillcut1.jpg
deleted
100644 → 0
View file @
01ce1fdf
73.2 KB
client/public/images/movie_image_black_stillcut2.jpg
deleted
100644 → 0
View file @
01ce1fdf
51.4 KB
client/public/images/movie_image_black_stillcut3.jpg
deleted
100644 → 0
View file @
01ce1fdf
70.2 KB
client/public/images/movie_image_cruella.jpg
deleted
100644 → 0
View file @
01ce1fdf
4.09 MB
client/public/images/movie_image_everyday.jpg
deleted
100644 → 0
View file @
01ce1fdf
2.54 MB
client/public/images/movie_image_limit.jpg
deleted
100644 → 0
View file @
01ce1fdf
3.07 MB
client/public/images/none.jpg
0 → 100644
View file @
fa2af12b
63.3 KB
client/public/images/photothumb.db
deleted
100644 → 0
View file @
01ce1fdf
File deleted
client/src/App.js
View file @
fa2af12b
...
...
@@ -11,6 +11,7 @@ import TheaterPage from "./pages/TheaterPage";
import
MyPage
from
"
./pages/MyPage
"
;
import
AdminPage
from
"
./pages/AdminPage/AdminPage
"
;
import
TicketingPage
from
"
./pages/TicketingPage
"
;
import
TicketingSeatPage
from
'
./pages/TicketingSeatPage
'
import
SearchPage
from
"
./pages/SearchPage
"
;
function
App
()
{
...
...
@@ -27,6 +28,7 @@ function App() {
<
Route
path
=
"
/signup
"
component
=
{
SignupPage
}
/
>
<
Route
path
=
"
/movielist
"
component
=
{
MovieListPage
}
/
>
<
Route
path
=
"
/movie/:movieId
"
component
=
{
MoviePage
}
/
>
<
Route
path
=
"
/ticket/seat
"
component
=
{
TicketingSeatPage
}
/
>
<
Route
path
=
"
/ticket
"
component
=
{
TicketingPage
}
/
>
<
Route
path
=
"
/theater
"
component
=
{
TheaterPage
}
/
>
<
Route
path
=
"
/search
"
component
=
{
SearchPage
}
/
>
...
...
client/src/apis/movie.api.js
View file @
fa2af12b
import
axios
from
"
axios
"
;
import
{
baseUrl
,
TMDBUrl
}
from
"
../utils/baseUrl.js
"
;
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`
)
...
...
@@ -7,25 +7,45 @@ const getUpcomingfromTM = async () => {
}
const
getMoviesfromTM
=
async
(
cate
)
=>
{
const
category
=
cate
const
response
=
await
axios
.
get
(
`
${
baseUrl
}
/api/movie/showmovies/
${
category
}
`
)
console
.
log
(
response
.
data
)
return
response
.
data
const
response
=
await
axios
.
get
(
`
${
baseUrl
}
/api/movie/showmovies/
${
category
}
`
)
console
.
log
(
response
.
data
)
return
response
.
data
}
const
getMovieInfofromTM
=
async
(
id
)
=>
{
const
movieId
=
id
const
response
=
await
axios
.
get
(
`
${
TMDBUrl
}
/
${
movieId
}
?api_key=
${
process
.
env
.
REACT_APP_TMDB_API_KEY
}
&language=ko-KR`
)
console
.
log
(
response
.
data
)
return
response
.
data
const
response
=
await
axios
.
get
(
`
${
TMDBUrl
}
/
${
movieId
}
?api_key=
${
process
.
env
.
REACT_APP_TMDB_API_KEY
}
&language=ko-KR`
)
console
.
log
(
response
.
data
)
return
response
.
data
}
const
getImagesfromTM
=
async
(
id
)
=>
{
const
movieId
=
id
const
response
=
await
axios
.
get
(
`
${
TMDBUrl
}
/
${
movieId
}
/images?api_key=
${
process
.
env
.
REACT_APP_TMDB_API_KEY
}
`
)
return
response
.
data
}
const
getCreditsfromTM
=
async
(
id
)
=>
{
const
movieId
=
id
const
response
=
await
axios
.
get
(
`
${
TMDBUrl
}
/
${
movieId
}
/credits?api_key=
${
process
.
env
.
REACT_APP_TMDB_API_KEY
}
`
)
return
response
.
data
}
const
getVideosfromTM
=
async
(
id
)
=>
{
const
movieId
=
id
const
response
=
await
axios
.
get
(
`
${
TMDBUrl
}
/
${
movieId
}
/videos?api_key=
${
process
.
env
.
REACT_APP_TMDB_API_KEY
}
`
)
return
response
.
data
.
results
}
const
submit
=
async
(
movieId
)
=>
{
const
{
data
}
=
await
axios
.
post
(
`
${
baseUrl
}
/api/movie/
${
movieId
}
`
)
console
.
log
(
"
data==
"
,
data
)
console
.
log
(
"
data==
"
,
data
)
}
const
movieApi
=
{
getUpcomingfromTM
,
getMoviesfromTM
,
getMovieInfofromTM
,
getImagesfromTM
,
getCreditsfromTM
,
getVideosfromTM
,
submit
}
...
...
client/src/components/BoxOffice/BoxOffice.js
View file @
fa2af12b
import
axios
from
"
axios
"
import
{
baseUrl
}
from
'
../../utils/baseUrl.js
'
import
React
,
{
useState
,
useEffect
}
from
"
react
"
// import styles from "./box-office.module.scss"
import
{
useState
,
useEffect
}
from
"
react
"
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 @
fa2af12b
@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 @
01ce1fdf
/* // .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 @
fa2af12b
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/SeatTable/SeatTable.js
0 → 100644
View file @
fa2af12b
import
{
useState
}
from
'
react
'
import
styles
from
'
./seatTable.module.scss
'
const
SeatTable
=
(
props
)
=>
{
const
table
=
[]
for
(
let
rowIndex
=
0
;
rowIndex
<
props
.
allSeat
.
row
;
rowIndex
++
)
{
table
.
push
(
<
span
className
=
"
me-3
"
style
=
{{
color
:
"
gray
"
}}
>
{
String
.
fromCharCode
(
rowIndex
+
65
)}
<
/span>
)
// console.log(String.fromCharCode(rowIndex+65))
for
(
let
colIndex
=
0
;
colIndex
<
props
.
allSeat
.
col
;
colIndex
++
)
{
table
.
push
(
<
span
>
<
button
className
=
{
props
.
selectedSeats
.
find
(
el
=>
el
===
String
.
fromCharCode
(
rowIndex
+
65
)
+
String
(
colIndex
+
1
))
?
styles
.
on
:
styles
.
btn
}
name
=
{
`
${
String
.
fromCharCode
(
rowIndex
+
65
)}${
colIndex
+
1
}
`
}
type
=
"
button
"
onClick
=
{
handleClick
}
>
{
colIndex
+
1
}
<
/button
>
<
/span
>
)
}
table
.
push
(
<
br
/>
)
}
function
handleClick
(
event
)
{
const
num
=
Object
.
values
(
props
.
count
).
reduce
((
a
,
b
)
=>
(
a
+
b
))
if
(
props
.
selectedSeats
.
find
(
el
=>
el
===
event
.
target
.
name
))
{
//제거
const
deleted
=
props
.
selectedSeats
.
filter
((
element
)
=>
element
!==
event
.
target
.
name
);
props
.
setSelectedSeats
(
deleted
)
}
else
{
if
(
props
.
selectedSeats
.
length
>
num
-
1
)
{
alert
(
"
선택한 좌석이 예매인원보다 많습니다.
"
)
}
else
{
//추가
props
.
setSelectedSeats
([...
props
.
selectedSeats
,
event
.
target
.
name
])
}
}
}
return
(
<
div
className
=
"
text-center
"
>
{
console
.
log
(
props
.
selectedSeats
)}
<
div
className
=
"
mb-2
"
style
=
{{
backgroundColor
:
"
gray
"
}}
>
Screen
<
/div
>
{
table
}
<
/div
>
)
}
export
default
SeatTable
\ No newline at end of file
client/src/components/SeatTable/index.js
0 → 100644
View file @
fa2af12b
export
{
default
}
from
"
./SeatTable
"
\ No newline at end of file
client/src/components/SeatTable/seatTable.module.scss
0 → 100644
View file @
fa2af12b
.btn
{
border
:
0
;
background
:
black
;
color
:
white
;
&
:hover
{
border
:
0
;
background
:
red
;
color
:white
}
}
.on
{
border
:
0
;
background
:
red
;
color
:white
}
\ No newline at end of file
Prev
1
2
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