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
54b1ec39
Commit
54b1ec39
authored
Aug 02, 2021
by
Jiwon Yoon
Browse files
theaterInfo
parent
5ee991bb
Changes
11
Hide whitespace changes
Inline
Side-by-side
client/src/App.js
View file @
54b1ec39
...
...
@@ -38,6 +38,7 @@ function App() {
<
Route
path
=
"
/ticket/seat
"
component
=
{
TicketingSeatPage
}
/
>
<
Route
path
=
"
/ticket
"
component
=
{
TicketingPage
}
/
>
<
Route
path
=
"
/payment
"
component
=
{
Payment
}
/
>
<
Route
path
=
"
/theater
"
component
=
{
TheaterPage
}
/
>
<
Route
path
=
"
/search
"
component
=
{
SearchPage
}
/
>
<
/Switch
>
<
/Router
>
...
...
client/src/components/CountButton.js
View file @
54b1ec39
import
{
useState
}
from
'
react
'
const
CountButton
=
(
props
)
=>
{
const
name
=
props
.
name
const
CountButton
=
(
{
count
,
setCount
}
)
=>
{
const
name
=
name
function
handleCount
(
event
)
{
if
(
event
.
target
.
name
===
"
backbutton
"
)
{
props
.
setCount
({...
props
.
count
,
[
name
]
:
props
.
count
[
name
]
-
1
})
setCount
({...
count
,
[
name
]
:
count
[
name
]
-
1
})
}
else
if
(
event
.
target
.
name
===
"
forwardbutton
"
)
{
props
.
setCount
({...
props
.
count
,
[
name
]
:
props
.
count
[
name
]
+
1
})
setCount
({...
count
,
[
name
]
:
count
[
name
]
+
1
})
}
else
{
props
.
setCount
({...
props
.
count
,
[
name
]
:
event
.
target
.
value
})
setCount
({...
count
,
[
name
]
:
event
.
target
.
value
})
}
}
...
...
@@ -16,7 +16,7 @@ const CountButton = (props) => {
<
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
"
/>
<
input
type
=
'
number
'
onChange
=
{
handleCount
}
value
=
{
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
>
...
...
client/src/components/Kakaopay.js
View file @
54b1ec39
import
axios
from
'
axios
'
const
Kakaopay
=
(
props
)
=>
{
const
Kakaopay
=
(
{
ticketInfo
}
)
=>
{
async
function
handleClick
()
{
try
{
const
response
=
await
axios
.
post
(
'
/api/kakaopay/test/single
'
,
{
cid
:
'
TC0ONETIME
'
,
partner_order_id
:
'
orderNum
'
,
partner_user_id
:
'
userName
'
,
item_name
:
props
.
ticketInfo
.
title
,
quantity
:
props
.
ticketInfo
.
teenager
+
props
.
ticketInfo
.
adult
+
props
.
ticketInfo
.
elderly
,
total_amount
:
props
.
ticketInfo
.
teenager
*
7000
+
props
.
ticketInfo
.
adult
*
8000
+
props
.
ticketInfo
.
elderly
*
6000
,
item_name
:
ticketInfo
.
title
,
quantity
:
ticketInfo
.
teenager
+
ticketInfo
.
adult
+
ticketInfo
.
elderly
,
total_amount
:
ticketInfo
.
teenager
*
7000
+
ticketInfo
.
adult
*
8000
+
ticketInfo
.
elderly
*
6000
,
vat_amount
:
0
,
tax_free_amount
:
0
,
approval_url
:
'
http://localhost:3000/
'
,
...
...
client/src/components/SeatTable/SeatTable.js
View file @
54b1ec39
import
{
useState
}
from
'
react
'
//
import { useState } from 'react'
import
styles
from
'
./seatTable.module.scss
'
const
SeatTable
=
(
props
)
=>
{
const
SeatTable
=
(
{
theaterInfo
,
count
,
setSelectedSeats
,
selectedSeats
,
reservedSeats
}
)
=>
{
const
table
=
[]
if
(
props
.
theaterInfo
)
{
for
(
let
rowIndex
=
0
;
rowIndex
<
props
.
theaterInfo
.
rows
;
rowIndex
++
)
{
if
(
theaterInfo
)
{
for
(
let
rowIndex
=
0
;
rowIndex
<
theaterInfo
.
rows
;
rowIndex
++
)
{
table
.
push
(
<
span
className
=
"
me-3
"
style
=
{{
color
:
"
gray
"
}}
>
{
String
.
fromCharCode
(
rowIndex
+
65
)}
<
/span>
)
for
(
let
colIndex
=
0
;
colIndex
<
props
.
theaterInfo
.
columns
;
colIndex
++
)
{
for
(
let
colIndex
=
0
;
colIndex
<
theaterInfo
.
columns
;
colIndex
++
)
{
table
.
push
(
<
span
>
{
props
.
reservedSeats
.
find
(
el
=>
el
===
String
(
rowIndex
+
1
)
+
'
-
'
+
String
(
colIndex
+
1
))
{
reservedSeats
.
find
(
el
=>
el
===
String
(
rowIndex
+
1
)
+
'
-
'
+
String
(
colIndex
+
1
))
?
<
button
className
=
{
styles
.
btnBlock
}
name
=
{
rowIndex
+
1
}
id
=
{
colIndex
+
1
}
type
=
"
button
"
disabled
>
{
colIndex
+
1
}
<
/button
>
:
<
button
className
=
{
props
.
selectedSeats
.
find
(
el
=>
el
===
String
(
rowIndex
+
1
)
+
'
-
'
+
String
(
colIndex
+
1
))
?
styles
.
on
:
styles
.
btn
}
name
=
{
rowIndex
+
1
}
id
=
{
colIndex
+
1
}
type
=
"
button
"
onClick
=
{
handleClick
}
>
{
colIndex
+
1
}
<
/button
>
<
button
className
=
{
selectedSeats
.
find
(
el
=>
el
===
String
(
rowIndex
+
1
)
+
'
-
'
+
String
(
colIndex
+
1
))
?
styles
.
on
:
styles
.
btn
}
name
=
{
rowIndex
+
1
}
id
=
{
colIndex
+
1
}
type
=
"
button
"
onClick
=
{
handleClick
}
>
{
colIndex
+
1
}
<
/button
>
}
<
/span
>
)
...
...
@@ -24,25 +24,25 @@ const SeatTable = (props) => {
function
handleClick
(
event
)
{
const
num
=
Object
.
values
(
props
.
count
).
reduce
((
a
,
b
)
=>
(
a
+
b
))
if
(
props
.
selectedSeats
.
find
(
el
=>
el
===
event
.
target
.
name
+
'
-
'
+
event
.
target
.
id
))
{
const
num
=
Object
.
values
(
count
).
reduce
((
a
,
b
)
=>
(
a
+
b
))
if
(
selectedSeats
.
find
(
el
=>
el
===
event
.
target
.
name
+
'
-
'
+
event
.
target
.
id
))
{
//제거
const
deleted
=
props
.
selectedSeats
.
filter
((
element
)
=>
element
!==
event
.
target
.
name
+
'
-
'
+
event
.
target
.
id
);
props
.
setSelectedSeats
(
deleted
)
const
deleted
=
selectedSeats
.
filter
((
element
)
=>
element
!==
event
.
target
.
name
+
'
-
'
+
event
.
target
.
id
);
setSelectedSeats
(
deleted
)
}
else
{
if
(
props
.
selectedSeats
.
length
>
num
-
1
)
{
if
(
selectedSeats
.
length
>
num
-
1
)
{
alert
(
"
선택한 좌석이 예매인원보다 많습니다.
"
)
}
else
{
//추가
props
.
setSelectedSeats
([...
props
.
selectedSeats
,
event
.
target
.
name
+
'
-
'
+
event
.
target
.
id
])
setSelectedSeats
([...
selectedSeats
,
event
.
target
.
name
+
'
-
'
+
event
.
target
.
id
])
}
}
}
return
(
<
div
className
=
"
text-center
"
>
{
/* {console.log(
props.
theaterInfo)} */
}
{
console
.
log
(
props
.
selectedSeats
)}
{
/* {console.log(theaterInfo)} */
}
{
console
.
log
(
selectedSeats
)}
<
div
className
=
"
mb-2
"
style
=
{{
backgroundColor
:
"
gray
"
}}
>
Screen
<
/div
>
{
table
}
<
/div
>
...
...
client/src/components/TheaterInfo.js
0 → 100644
View file @
54b1ec39
import
axios
from
"
axios
"
import
{
useState
,
useEffect
}
from
'
react
'
import
catchErrors
from
"
../utils/catchErrors
"
const
TheaterInfo
=
()
=>
{
const
[
theaterInfo
,
setTheaterInfo
]
=
useState
()
const
[
error
,
setError
]
=
useState
()
useEffect
(()
=>
{
getTheaterInfo
()
},
[])
async
function
getTheaterInfo
()
{
try
{
const
response
=
await
axios
.
get
(
'
/api/info/cinema
'
)
console
.
log
(
response
.
data
)
setTheaterInfo
(
response
.
data
)
}
catch
(
error
)
{
catchErrors
(
error
,
setError
)
}
}
return
(
<>
{
/* <h3>{theaterInfo.cinemaName}</h3> */
}
<
div
>
총
상영관
수
:
<
/div
>
{
/* <div>{theaterInfo.address}</div> */
}
<
/
>
)
}
export
default
TheaterInfo
\ No newline at end of file
client/src/components/TicketingMovie/TicketingMovie.js
View file @
54b1ec39
...
...
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
import
axios
from
'
axios
'
import
styles
from
"
./ticketingMovie.module.scss
"
const
TicketingMovie
=
(
props
)
=>
{
const
TicketingMovie
=
(
{
ticketInfo
,
setTicketInfo
}
)
=>
{
const
[
movieList
,
setMovieList
]
=
useState
([])
useEffect
(()
=>
{
getMovieList
()
...
...
@@ -19,16 +19,16 @@ const TicketingMovie = (props) => {
function
handleClick
(
event
)
{
console
.
log
(
event
.
target
.
name
)
props
.
setTicketInfo
({...
props
.
ticketInfo
,
movieId
:
event
.
target
.
name
})
setTicketInfo
({...
ticketInfo
,
movieId
:
event
.
target
.
name
})
}
return
(
<
div
>
{
console
.
log
(
props
.
ticketInfo
.
movieId
)}
{
console
.
log
(
ticketInfo
.
movieId
)}
<
div
className
=
"
d-grid gap-2
"
>
{
movieList
.
length
>
0
?
movieList
.
map
(
movie
=>
(
<
button
name
=
{
movie
.
id
}
className
=
{
`
${
props
.
ticketInfo
.
movieId
==
movie
.
id
?
styles
.
on
:
styles
.
btn
}
`
}
onClick
=
{
handleClick
}
>
<
button
name
=
{
movie
.
id
}
className
=
{
`
${
ticketInfo
.
movieId
==
movie
.
id
?
styles
.
on
:
styles
.
btn
}
`
}
onClick
=
{
handleClick
}
>
{
movie
.
title
}
<
/button
>
))
...
...
client/src/components/TicketingTheater/TicketingTheater.js
View file @
54b1ec39
import
styles
from
"
./ticketingTheater.module.scss
"
const
TicketingTheater
=
(
props
)
=>
{
const
TicketingTheater
=
(
{
ticketInfo
,
cinemaInfo
,
setTicketInfo
}
)
=>
{
function
handleClick
(
event
)
{
// event.preventDefault()
console
.
log
(
event
.
target
.
name
)
props
.
setTicketInfo
({
...
props
.
ticketInfo
,
cinema
:
event
.
target
.
name
})
setTicketInfo
({
...
ticketInfo
,
cinema
:
event
.
target
.
name
})
}
return
(
<
div
>
<
div
className
=
"
d-grid gap-2
"
>
<
button
name
=
{
props
.
cinemaInfo
.
cinemaName
}
className
=
{
`
${
props
.
ticketInfo
.
cinema
===
props
.
cinemaInfo
.
cinemaName
?
styles
.
on
:
styles
.
btn
}
`
}
onClick
=
{
handleClick
}
>
{
props
.
cinemaInfo
.
cinemaName
}
<
/button
>
<
button
name
=
{
cinemaInfo
.
cinemaName
}
className
=
{
`
${
ticketInfo
.
cinema
===
cinemaInfo
.
cinemaName
?
styles
.
on
:
styles
.
btn
}
`
}
onClick
=
{
handleClick
}
>
{
cinemaInfo
.
cinemaName
}
<
/button
>
<
/div
>
<
/div
>
)
...
...
client/src/components/TicketingTimeTable/TicketingTimeTable.js
View file @
54b1ec39
const
TicketingTimeTable
=
(
props
)
=>
{
const
TicketingTimeTable
=
(
{
ticketInfo
}
)
=>
{
return
(
<
div
>
<
div
className
=
"
text-center
"
style
=
{{
color
:
"
white
"
}}
>
{
console
.
log
(
props
.
ticketInfo
.
movieId
,
props
.
ticketInfo
.
theater
)}
{
props
.
ticketInfo
.
movieId
&&
props
.
ticketInfo
.
theater
?
<
div
>
{
props
.
ticketInfo
.
movieId
}
{
props
.
ticketInfo
.
theater
}
<
/div
>
{
console
.
log
(
ticketInfo
.
movieId
,
ticketInfo
.
cinema
)}
{
ticketInfo
.
movieId
&&
ticketInfo
.
cinema
?
<
div
>
{
ticketInfo
.
movieId
}
{
ticketInfo
.
cinema
}
<
/div
>
:
<
div
>
영화와
극장을
모두
선택해주세요
.
<
/div>
}
<
/div
>
<
/div
>
...
...
client/src/components/Video.js
View file @
54b1ec39
import
{
useEffect
,
useState
}
from
'
react
'
import
movieApi
from
'
../apis/movie.api.js
'
const
Video
=
(
props
)
=>
{
const
Video
=
(
{
movieId
}
)
=>
{
const
[
videoUrls
,
setVideoUrls
]
=
useState
([])
useEffect
(()
=>
{
getVideos
()
...
...
@@ -8,7 +8,7 @@ const Video = (props) => {
async
function
getVideos
()
{
try
{
const
data
=
await
movieApi
.
getVideosfromTM
(
props
.
movieId
)
const
data
=
await
movieApi
.
getVideosfromTM
(
movieId
)
setVideoUrls
(
data
)
}
catch
(
error
)
{
console
.
log
(
error
)
...
...
client/src/pages/TheaterPage.js
View file @
54b1ec39
import
{
useState
}
from
'
react
'
import
{
useState
}
from
'
react
'
import
TheaterInfo
from
'
../components/TheaterInfo
'
const
TheaterPage
=
()
=>
{
const
[
state
,
setState
]
=
useState
(
0
)
...
...
@@ -19,7 +20,7 @@ const TheaterPage = () => {
<
/div
>
<
div
className
=
"
tab-content text-center
"
id
=
"
myTabContent
"
style
=
{{
color
:
"
white
"
}}
>
<
div
className
=
"
tab-pane fade show active
"
id
=
"
overview
"
role
=
"
tabpanel
"
aria
-
labelledby
=
"
overview-tab
"
>
<
div
>
극장정보
<
/div
>
<
TheaterInfo
/
>
<
/div
>
<
div
className
=
"
tab-pane fade
"
id
=
"
stillcut
"
role
=
"
tabpanel
"
aria
-
labelledby
=
"
stillcut-tab
"
>
<
div
>
상영시간표
<
/div
>
...
...
client/src/pages/TicketingPage.js
View file @
54b1ec39
...
...
@@ -52,7 +52,7 @@ const TicketingPage = ({ location }) => {
<
TicketingMovie
ticketInfo
=
{
ticketInfo
}
setTicketInfo
=
{
setTicketInfo
}
/
>
<
/div
>
<
div
className
=
"
col-sm-3 mb-4
"
>
<
h3
className
=
"
py-2
mb-3
text-white text-center
"
style
=
{{
border
:
"
3px solid #000000
"
,
borderBottom
:
"
3px solid #FEDC00
"
}}
>
극장
<
/h3
>
<
h3
className
=
"
py-2 text-white text-center
"
style
=
{{
border
:
"
3px solid #000000
"
,
borderBottom
:
"
3px solid #FEDC00
"
}}
>
극장
<
/h3
>
<
TicketingTheater
cinemaInfo
=
{
cinemaInfo
}
ticketInfo
=
{
ticketInfo
}
setTicketInfo
=
{
setTicketInfo
}
/
>
<
/div
>
<
div
className
=
"
col-sm-5 mb-4
"
>
...
...
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