Merge branch 'master' into gyumin

client/src/components/Search/Search.js

 import styles from "./search.module.scss";
 
-const Search = ({ type, search, setSearch, handleClick }) => {
+const Search = ({ search, setSearch, handleClick }) => {
     function handleSearch(e) {
         const { name, value } = e.target
         setSearch({ ...search, [name]: value })
     }
-    console.log("type==", type)
+
     return (
         <div className="d-flex">
-            {type === "home" ? null :
-                <select className={`form-select ${styles.search}`} name="kind" aria-label="select search" onChange={handleSearch}>
-                    <option selected value="title">제목</option>
-                    <option value="director">감독명</option>
-                </select>
-            }
-            <input className={`form-control ${type === "home" ? styles.searchWhite : `${styles.search}`}`} name="keyword" type="text" onChange={handleSearch} />
-            <i className={`bi bi-search align-self-center ${type === "home" ? "text-white" : "mx-2"} ${styles.icon}`} onClick={handleClick} style={{ fontSize: "1.3rem" }}></i>
+            <input className={`form-control ${search.type === "home" ? styles.searchWhite : `${styles.search}`}`} name="keyword" type="text" autoComplete="off" onChange={handleSearch} />
+            <i className={`bi bi-search align-self-center ${search.type === "home" ? "text-white" : "mx-2"} ${styles.icon}`} onClick={handleClick} style={{ fontSize: "1.3rem" }}></i>
         </div>
     )
 }

client/src/components/SearchResult.js

-import { useLocation } from 'react-router-dom';
-import queryString from 'query-string';
-import MovieChart from "./MovieChart/index.js";
+import { useState, useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
+import queryString from 'query-string'
+import MovieCard from "./MovieCard/index.js"
+import movieApi from '../apis/movie.api.js'
+import catchErrors from '../utils/catchErrors.js'
 
 const SearchResult = () => {
+    const [result, setResult] = useState([])
+    const [error, setError] = useState("")
     const { search } = useLocation()
     const { title } = queryString.parse(search)
 
-    console.log("search==",search,"title==",title)
+    useEffect(() => {
+        findforKeyword()
+    }, [title])
+
+    async function findforKeyword() {
+        try {
+            setError("")
+            const { count, results } = await movieApi.search({ type: "home", keyword: title })
+            setResult([...results])
+        } catch (error) {
+            catchErrors(error, setError)
+        }
+    }
+
     return (
+        <>
+            {result.length !== 0 ? (
                 <>
                     <h3 className="text-white text-center my-5">'{title}' 에 관한 검색 결과입니다.</h3>
-            <MovieChart />
+                    <div className="row row-cols-1 row-cols-md-4 g-4">
+                        <MovieCard list={result} />
+                    </div>
+                </>
+            ) : <h3 className="text-white text-center my-5 vh-100" style={{ wordBreak: "keep-all" }}>'{title}' 에 관한 검색 결과가 존재하지 않습니다.</h3>
+            }
         </>
     )
 }

client/src/components/SeatTable/SeatTable.js

+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

+export { default } from "./SeatTable"
\ No newline at end of file

client/src/components/SeatTable/seatTable.module.scss

+.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

client/src/components/TicketingMovie/TicketingMovie.js

-import React,{useState} from 'react'
+import React, { useState, useEffect } from 'react'
+import axios from 'axios'
 import styles from "./ticketingMovie.module.scss"
 
-const TicketingMovie = () => {
-    const [state, setState] = useState(0)
-    return (
-        <div>
+const TicketingMovie = (props) => {
+    const [movieList, setMovieList] = useState([])
+    useEffect(() => {
+        getMovieList()
+    }, [])
+
+    async function getMovieList() {
+        try {
+            const response = await axios.get(`/api/movie/movielist`)
+            setMovieList(response.data)
+        } catch (error) {
+
+        }
+    }
 
+    function handleClick(event) {
+        console.log(event.target.name)
+        props.setTicketInfo({...props.ticketInfo, movieId: event.target.name })
+    }
+
+    return (
+        <div >
+            {console.log(props.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}>
+                            {movie.title}
+                        </button>
+                    ))
+                    : <div>영화정보를 불러올 수 없습니다.</div>}
+            </div>
         </div>
     )
 }

client/src/components/TicketingMovie/ticketingMovie.module.scss

-.navBtn{
-    color: "white";
-    background-color: "black"; 
-    border-color:"#FEDC00";
-    border-top: "0";
-    border-left: "0";
-    border-right: "0";
-    border-bottom: "3px solid";
+.btn {
+    background:black; 
+    color:white; 
+    border:0;
 }
-
-.navBtnFocus{
-    color: "white";
-    background-color: "black"; 
-    border-color:"#FEDC00";
-    border-bottom: "0";
+.on {
+    background: white;
+    color: black;
+    border:0;
 }
\ No newline at end of file

client/src/components/TicketingTheater.js

-const TicketingTheater = () => {
-    return (
-        <>
-
-        </>
-    )
-}
-
-export default TicketingTheater
\ No newline at end of file

client/src/components/TicketingTheater/TicketingTheater.js

+import styles from "./ticketingTheater.module.scss"
+const TicketingTheater = (props) => {
+
+    function handleClick(event) {
+        // event.preventDefault()
+        console.log(event.target.name)
+        props.setTicketInfo({ ...props.ticketInfo, theater:event.target.name})
+    }
+
+    return (
+        <div >
+            <div className="d-grid gap-2">
+                {props.theaterInfo.theater.length > 0
+                    ? props.theaterInfo.theater.map(name => (
+                        <button name={name} className={`${props.ticketInfo.theater === name ? styles.on : styles.btn}`} onClick={handleClick}>{name}</button>
+                    ))
+                    : <div>영화관 정보가 존재하지 않습니다.</div>}
+            </div>
+        </div>
+    )
+}
+
+export default TicketingTheater
\ No newline at end of file

client/src/components/TicketingTheater/index.js

+export { default } from './TicketingTheater'
\ No newline at end of file

client/src/components/TicketingTheater/ticketingTheater.module.scss

+.btn {
+    background:black; 
+    color:white; 
+    border:0;
+}
+.on {
+    background: white;
+    color: black;
+    border:0;
+}
\ No newline at end of file

client/src/components/TicketingTimeTable.js

-const TicketingTimeTable = () => {
-    return (
-        <>
-
-        </>
-    )
-}
-
-export default TicketingTimeTable
\ No newline at end of file

client/src/components/TicketingTimeTable/TicketingTimeTable.js

+const TicketingTimeTable = (props) => {
+    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>
+                    : <div>영화와 극장을 모두 선택해주세요.</div>}
+            </div>
+        </div>
+    )
+}
+
+export default TicketingTimeTable
\ No newline at end of file

client/src/components/Video.js

+import { useEffect, useState } from 'react'
+import movieApi from '../apis/movie.api.js'
+const Video = (props) => {
+    const [videoUrls, setVideoUrls] = useState([])
+    useEffect(() => {
+        getVideos()
+    }, [])
+
+    async function getVideos() {
+        try {
+            const data = await movieApi.getVideosfromTM(props.movieId)
+            setVideoUrls(data)
+        } catch (error) {
+            console.log(error)
+        }
+    }
+    return (
+        <div>
+            {videoUrls.length > 0
+                ? videoUrls.map(el => (
+                    <div className="mt-5 pb-5">
+                        <p>{el.name}</p>
+                        <div class="ratio ratio-16x9">
+                            <iframe src={`https://www.youtube.com/embed/${el.key}`} title="YouTube video" allowfullscreen></iframe>
+                        </div>
+                    </div>
+                ))
+                : <div>예고편 정보가 존재하지 않습니다.</div>}
+        </div>
+    )
+}
+
+export default Video
\ No newline at end of file

client/src/pages/MovieListPage.js

-import React, { useState } from 'react'
-import MovieChart from '../components/MovieChart/MovieChart'
-import MovieComming from '../components/MovieComming/MovieComming'
+import { useState } from 'react'
+import MovieChart from '../components/MovieChart.js'
+import MovieComing from '../components/MovieComing.js'
+
 const MovieListPage = () => {
     const [state, setState] = useState(true)
+
     return (
         <div className="container">
-            <div className="">
+            <div>
                 <ul className="nav nav-tabs justify-content-center my-4 border-0" id="myTab" role="tablist">
                     <li className="nav-item" role="presentation">
                         <button className="nav-link active mx-auto" style={{color:"white", borderColor: "black", backgroundColor:"black", borderBottom: state? "3px solid":"none" ,borderBottomColor:state?"#FEDC00":"black"}} id="moviechart-tab" data-bs-toggle="tab" data-bs-target="#moviechart" type="button" role="tab" aria-controls="moviechart" aria-selected="true" onClick={() => setState(true)}>무비차트</button>
@@ -20,7 +22,7 @@ const MovieListPage = () => {
                     <MovieChart />
                 </div>
                 <div className="tab-pane fade" id="moviecomming" role="tabpanel" aria-labelledby="moviecomming-tab">
-                    <MovieComming />
+                    <MovieComing />
                 </div>
             </div>
         </div>

client/src/pages/MoviePage.js

-import React, { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
+import movieApi from '../apis/movie.api.js'
+import Video from '../components/Video.js'
 
 const MoviePage = ({ location }) => {
     const [movieInfo, setMovieInfo] = useState({
         ...location.state,
-        stillCuts: ["/images/movie_image_black_stillcut1.jpg", "/images/movie_image_black_stillcut2.jpg", "/images/movie_image_black_stillcut3.jpg"],
-        production: "케이트 쇼트랜드",
-        casts: ["Scarlett Johansson", "Florence Pugh", "David Harbour", "Rachel Weisz"],
-        genres: ["액션", "모험", "스릴러"],
-        attendance: 585954
+        stillCuts: [],
+        cast: "",
+        director: "",
+        genres: [],
+        attendance: ""
     })
     const [state, setState] = useState(0)
 
+    useEffect(() => {
+        getImagesAndCredits()
+    }, [])
+
+    async function getImagesAndCredits() {
+        try {
+            const images = await movieApi.getImagesfromTM(movieInfo.id)
+            const still = images.backdrops.map(el => el.file_path)
+            const credits = await movieApi.getCreditsfromTM(movieInfo.id)
+            const castsInfo = credits.cast.map(el => el.name)
+            const casts = castsInfo.reduce((acc, cur, idx) => {
+                if (idx !== 0) return acc + ', ' + cur
+                else return acc + cur
+            },"")
+            console.log(castsInfo)
+            const directorsInfo = await credits.crew.filter(element => element.job === "Director")
+            const directors = directorsInfo.reduce((acc, cur, idx) => {
+                if (idx !== 0) return acc + ', ' + cur.name
+                else return acc + cur.name
+            },"")
+
+            console.log("directorInfo=",directorsInfo)
+            setMovieInfo({
+                ...movieInfo,
+                stillCuts: still,
+                cast: casts,
+                director: directors
+            })
+        } catch (error) {
+            console.log(error)
+        }
+    }
+
     return (
         <div className="container" style={{ backgroundColor: "black" }}>
             {console.log(movieInfo)}
             <div id="carouselExampleInterval" className="carousel slide py-4" data-bs-ride="carousel">
                 <div className="carousel-inner">
                     {movieInfo.stillCuts.length > 0
-                        ? movieInfo.stillCuts.map((image, index) => (
+                        ? movieInfo.stillCuts.map((imageUrl, index) => (
                             <div className={`carousel-item ${index === 0 ? "active" : ""}`} >
-                                <img src={image} className="d-block w-100" alt="스틸컷" />
+                                <img src={`https://image.tmdb.org/t/p/original${imageUrl}`} className="d-block w-100" alt="스틸컷" />
                             </div>
                         ))
                         : <div className="carousel-item">
-                            <img src="..." className="d-block w-100" alt="등록된 스틸컷이 없습니다." />
+                            {console.log("스틸컷 불러오기 오류")}
+                            <img src="/images/none.jpg" className="d-block w-100" alt="등록된 스틸컷이 없습니다." />
                         </div>}
                 </div>
                 <button className="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
@@ -37,35 +73,35 @@ const MoviePage = ({ location }) => {
                 </button>
             </div>
             <div className="row justify-content-center py-5">
-                <div className="col-sm-3">
-                    <img className="img-thumbnail" src={movieInfo.poster} alt="영화포스터" />
+                <div className="col-sm-3 mb-5">
+                    <img className="img-thumbnail" src={`https://image.tmdb.org/t/p/original${movieInfo.poster_path}`} alt="영화포스터" />
                 </div>
-                <div className="col-sm-6 p-4" style={{ color: "white" }}>
-                    <h1 className="py-3">{movieInfo.title}</h1>
-                    <p>예매율: {movieInfo.popularity}% 누적관객수: {movieInfo.attendance}명</p>
-                    <p>감독: {movieInfo.production}</p>
-                    <p>출연: {movieInfo.casts.map(e => e)}</p>
+                <div className="col-sm-6 " style={{ color: "white" }}>
+                    <h1 className="pb-3">{movieInfo.title}</h1>
+                    <p>예매율: 0% 누적관객수: {movieInfo.attendance}명</p>
+                    <p>감독: {movieInfo.director}</p>
+                    <p>출연: {movieInfo.cast}</p>
                     <p>장르: {movieInfo.genres.map(e => e)}</p>
                     <p>개봉일:{movieInfo.release_date}</p>
+                    <div className="text-end">
                         <Link to={{
                             pathname: `/ticket`,
                             state: {
-                                id: movieInfo.id,
-                                poster: movieInfo.poster,
-                                title: movieInfo.title,
+                                movieId: movieInfo.id,
                             }
                         }}>
                             <button className="btn btn-warning">예매하기</button>
                         </Link>
                     </div>
                 </div>
+            </div>
             <div className="">
-                <ul className="nav nav-tabs justify-content-center my-4 border-0" id="myTab" role="tablist">
+                <ul className="nav nav-tabs justify-content-center mt-4 border-0" id="myTab" role="tablist">
                     <li className="nav-item" role="presentation">
                         <button className="nav-link active mx-auto" style={{ color: "white", borderColor: "black", backgroundColor: "black", borderBottom: state === 0 ? "3px solid" : "none", borderBottomColor: state === 0 ? "#FEDC00" : "black" }} id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview" type="button" role="tab" aria-controls="overview" aria-selected="true" onClick={() => setState(0)}>상세정보</button>
                     </li>
                     <li className="nav-item" role="presentation">
-                        <button className="nav-link mx-auto" style={{ color: "white", borderColor: "black", backgroundColor: "black", borderBottom: state === 1 ? "3px solid" : "none", borderBottomColor: state === 1 ? "#FEDC00" : "black" }} id="stillcut-tab" data-bs-toggle="tab" data-bs-target="#stillcut" type="button" role="tab" aria-controls="stillcut" aria-selected="false" onClick={() => setState(1)}>예고편/스틸컷</button>
+                        <button className="nav-link mx-auto" style={{ color: "white", borderColor: "black", backgroundColor: "black", borderBottom: state === 1 ? "3px solid" : "none", borderBottomColor: state === 1 ? "#FEDC00" : "black" }} id="stillcut-tab" data-bs-toggle="tab" data-bs-target="#stillcut" type="button" role="tab" aria-controls="stillcut" aria-selected="false" onClick={() => setState(1)}>예고편</button>
                     </li>
                     <li className="nav-item" role="presentation">
                         <button className="nav-link mx-auto" style={{ color: "white", borderColor: "black", backgroundColor: "black", borderBottom: state === 2 ? "3px solid" : "none", borderBottomColor: state === 2 ? "#FEDC00" : "black" }} id="review-tab" data-bs-toggle="tab" data-bs-target="#review" type="button" role="tab" aria-controls="review" aria-selected="false" onClick={() => setState(2)}>관람평</button>
@@ -77,7 +113,7 @@ const MoviePage = ({ location }) => {
                     <div>{movieInfo.overview}</div>
                 </div>
                 <div className="tab-pane fade" id="stillcut" role="tabpanel" aria-labelledby="stillcut-tab">
-                    <div>예고편/스틸컷</div>
+                    <Video movieId={movieInfo.id} />
                 </div>
                 <div className="tab-pane fade" id="review" role="tabpanel" aria-labelledby="review-tab">
                     <div>관람평</div>

client/src/pages/TheaterPage.js

+import {useState} from 'react'
+
 const TheaterPage = () => {
+    const [state, setState] = useState(0)
     return (
         <div>
-            
+            <div className="">
+                <ul className="nav nav-tabs justify-content-center my-4 border-0" id="myTab" role="tablist">
+                    <li className="nav-item" role="presentation">
+                        <button className="nav-link active mx-auto" style={{ color: "white", borderColor: "black", backgroundColor: "black", borderBottom: state === 0 ? "3px solid" : "none", borderBottomColor: state === 0 ? "#FEDC00" : "black" }} id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview" type="button" role="tab" aria-controls="overview" aria-selected="true" onClick={() => setState(0)}>극장정보</button>
+                    </li>
+                    <li className="nav-item" role="presentation">
+                        <button className="nav-link mx-auto" style={{ color: "white", borderColor: "black", backgroundColor: "black", borderBottom: state === 1 ? "3px solid" : "none", borderBottomColor: state === 1 ? "#FEDC00" : "black" }} id="stillcut-tab" data-bs-toggle="tab" data-bs-target="#stillcut" type="button" role="tab" aria-controls="stillcut" aria-selected="false" onClick={() => setState(1)}>상영시간표</button>
+                    </li>
+                    <li className="nav-item" role="presentation">
+                        <button className="nav-link mx-auto" style={{ color: "white", borderColor: "black", backgroundColor: "black", borderBottom: state === 2 ? "3px solid" : "none", borderBottomColor: state === 2 ? "#FEDC00" : "black" }} id="review-tab" data-bs-toggle="tab" data-bs-target="#review" type="button" role="tab" aria-controls="review" aria-selected="false" onClick={() => setState(2)}>관람료</button>
+                    </li>
+                </ul>
+            </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>
+                </div>
+                <div className="tab-pane fade" id="stillcut" role="tabpanel" aria-labelledby="stillcut-tab">
+                    <div>상영시간표</div>
+                </div>
+                <div className="tab-pane fade" id="review" role="tabpanel" aria-labelledby="review-tab">
+                    <div>관람료</div>
+                </div>
+            </div>
         </div>
     )
 }

client/src/pages/TicketingPage.js

-import React from 'react'
-import TicketingMovie from "../components/TicketingMovie/TicketingMovie"
-import TicketingTheater from "../components/TicketingTheater"
-import TicketingTimeTable from "../components/TicketingTimeTable"
+import { useState, useEffect } from 'react'
+import { Link } from 'react-router-dom'
+import movieApi from '../apis/movie.api.js'
+import TicketingMovie from "../components/TicketingMovie/TicketingMovie.js"
+import TicketingTheater from "../components/TicketingTheater/TicketingTheater.js"
+import TicketingTimeTable from "../components/TicketingTimeTable/TicketingTimeTable.js"
+
+const TicketingPage = ({ location }) => {
+    const [ticketInfo, setTicketInfo] = useState({
+        ...location.state,
+        theater:"",
+        selectedCinemaNum: 0,
+        time: {}
+    })
+    const [theaterInfo, setTheaterInfo] = useState({
+        theater: ["Butter Studio 조치원"],
+        cinemaNum: [1, 2, 3, 4]
+    })
+    const [movieInfo, setMovieInfo] = useState()
+
+    useEffect(() => {
+        getMovieInfo()
+    }, [ticketInfo])
+
+    async function getMovieInfo() {
+        try {
+            const data = await movieApi.getMovieInfofromTM(ticketInfo.movieId)
+            setMovieInfo(data)
+        } catch (error) {
+            console.log(error)
+        }
+    }
 
-const TicketingPage = () => {
     return (
-        <div style={{ backgroundColor: "black" }}>
+        <div className="container" style={{ backgroundColor: "black" }}>
+            <div>
+                {console.log(ticketInfo)}
+            </div>
             <div className="row justify-content-center my-5">
-                <div className="col-sm-4">
-                    <h2 className="py-2 text-white text-center" style={{borderTop:"3px solid #FEDC00", borderBottom:"3px solid #FEDC00"}}>영화</h2>
-                    <TicketingMovie />
+                <div className="col-sm-4 mb-4 ">
+                    <h3 className="py-2 text-white text-center" style={{ border: "3px solid #000000", borderBottom: "3px solid #FEDC00" }}>영화</h3>
+                    <TicketingMovie ticketInfo={ticketInfo} setTicketInfo={setTicketInfo} />
                 </div>
-                <div className="col-sm-4">
-                    <h2>극장</h2>
-                    <TicketingTheater />
+                <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>
+                    <TicketingTheater theaterInfo={theaterInfo} ticketInfo={ticketInfo} setTicketInfo={setTicketInfo} />
                 </div>
-                <div className="col-sm-4">
-                    <h2>시간표</h2>
-                    <TicketingTimeTable />
+                <div className="col-sm-5 mb-4 ">
+                    <h3 className="py-2 text-white text-center" style={{ border: "3px solid #000000", borderBottom: "3px solid #FEDC00" }}>시간표</h3>
+                    <TicketingTimeTable ticketInfo={ticketInfo} theaterInfo={theaterInfo} />
                 </div>
             </div>
+            <div className="row p-3" style={{ backgroundColor: "#252525"}}>
+                <div className="col-sm-3 border-end text-center">
+                    {movieInfo
+                        ? <img style={{ maxHeight: "10rem" }} src={`https://image.tmdb.org/t/p/original${movieInfo.poster_path}`} alt="영화포스터" />
+                        : <div className="mb-2" style={{ color: "white" }}>영화선택</div>}
+                </div>
+                <div className="col-sm-6 border-end" style={{ color: "white" }}>
+                    <div className="mb-2  text-center">극장선택</div>
+                    {movieInfo && ticketInfo.theater
+                        ? <ul>
+                            <li>영화: {movieInfo.title}</li>
+                            <li>극장: {ticketInfo.theater}</li>
+                            <li>일시: </li>
+                            <li>상영관: </li>
+                        </ul>
+                        : <div></div>}
+                </div>
+                <div className="col-sm-3 text-center">
+                    <div className="mb-2" style={{ color: "white" }}>좌석선택</div>
+                    {movieInfo && ticketInfo.theater
+                        ?
+                        <Link to={{
+                            pathname: `/ticket/seat`,
+                            state: {...ticketInfo,...movieInfo}
+                        }}>
+                            <img className="border border-3 rounded-3" src="/images/icons8-arrow-white.png" alt="예매하기" />
+                        </Link>
+                        :
+                        <img className="border border-3 rounded-3" src="/images/icons8-arrow-white.png" alt="예매하기" />
 
+                    }
+                </div>
+            </div>
         </div>
     )
 }

client/src/pages/TicketingSeatPage.js

+import { Link } from 'react-router-dom'
+import { useState } from 'react'
+import CountButton from '../components/CountButton'
+import SeatTable from '../components/SeatTable/SeatTable'
+
+const TicketingSeatPage = ({ location }) => {
+    const [ticketInfo, setTicketInfo] = useState({ ...location.state })
+    const [selectedSeats, setSelectedSeats] = useState([])
+    const [count, setCount] = useState({
+        adult: 0,
+        teenager: 0,
+        elderly: 0
+    })
+    const allSeat = { row: 6, col: 10 }
+    return (
+        <div className="container" style={{ color: "white" }}>
+            {console.log(ticketInfo)}
+            <div className="row justify-content-center my-5">
+                <div className="col-sm-4 mb-3 ">
+                    <h3 className="py-2 text-white text-center" style={{ border: "3px solid #000000", borderBottom: "3px solid #FEDC00" }}>좌석선택</h3>
+                </div>
+            </div>
+            <div className="row justify-content-center my-3">
+                <div className="col-sm-6 mb-4 text-center">
+                    <ul className="mr-2" style={{ listStyle: 'none' }}>
+                        <li>
+                            <span className="">일반</span>
+                            <CountButton name="adult" count={count} setCount={setCount} />
+                        </li>
+                        <li>
+                            <span className="">청소년</span>
+                            <CountButton name="teenager" count={count} setCount={setCount} />
+                        </li>
+                        <li>
+                            <span className="">경로우대</span>
+                            <CountButton name="elderly" count={count} setCount={setCount} />
+                        </li>
+                    </ul>
+                </div>
+                <div className="col-sm-6 mb-4 p-2 text-center" style={{ backgroundColor: '#252525' }}>
+                    <div>{ticketInfo.theater} | 3관</div>
+                    <div>{ticketInfo.title}</div>
+                    <div>2021/07/21 10:00 ~ 11:30</div>
+                </div>
+            </div>
+            <div className="row justify-content-center border p-5 ">
+                <div className="col-sm-8">
+                    <SeatTable count={count} setSelectedSeats={setSelectedSeats} selectedSeats={selectedSeats} allSeat={allSeat} />
+                </div>
+                <div className="col-sm-4 mt-5">
+                    <p>선택됨</p>
+                    <p>선택불가</p>
+                </div>
+            </div>
+            <div className="row p-3 my-5" style={{ backgroundColor: "#252525" }}>
+                <div className="col-sm-3 border-end text-center">
+                    {ticketInfo
+                        ? <img style={{ maxHeight: "10rem" }} src={`https://image.tmdb.org/t/p/original${ticketInfo.poster_path}`} alt="영화포스터" />
+                        : <div className="mb-2" style={{ color: "white" }}>영화선택</div>}
+                </div>
+                <div className="col-sm-6 border-end" style={{ color: "white" }}>
+                    <div className="mb-2  text-center">극장선택</div>
+                    {ticketInfo
+                        ? <ul>
+                            <li>영화: {ticketInfo.title}</li>
+                            <li>극장: {ticketInfo.theater}</li>
+                            <li>일시: 2021/07/21 10:00 </li>
+                            <li>상영관: 3관</li>
+                            <li>좌석: {selectedSeats}</li>
+                        </ul>
+                        : <div></div>}
+                </div>
+                <div className="col-sm-3 text-center">
+                    <div className="mb-2" style={{ color: "white" }}>결제하기</div>
+                    {ticketInfo
+                        ?
+                        <Link to={{
+                            pathname: `/payment`,
+                            state: { }
+                        }}>
+                            <img className="border border-3 rounded-3" src="/images/icons8-arrow-white.png" alt="예매하기" />
+                        </Link>
+                        :
+                        <img className="border border-3 rounded-3" src="/images/icons8-arrow-white.png" alt="예매하기" />
+
+                    }
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default TicketingSeatPage
\ No newline at end of file

server/controllers/cinema.controller.js

+import { Cinema } from "../db/index.js";
+
+const getAll = async (req, res) => {
+    try {
+        const info = await Cinema.findOne({
+            where: { id: 1 },
+            attributes: ['cinemaName', 'transportation', 'parking', 'address']
+        })
+        return res.json(info)
+    } catch (error) {
+        return res.status(500).send(error.message || "영화관 정보 가져오는 중 에러 발생")
+    }
+}
+
+const edit = async (req, res) => {
+    try {
+        let response = null
+        const result = await Cinema.findOrCreate({
+            where: { id: 1 },
+            defaults: { ...req.body }
+        })
+        if (!result[1]) {
+            const updateData = await Cinema.update({ ...req.body }, { where: { id: 1 } })
+            response = updateData
+        } else response = result[0]
+        return res.json(response)
+    } catch (error) {
+        return res.status(500).send(error.message || "영화관 정보 수정 중 에러 발생")
+    }
+}
+
+export default {
+    getAll,
+    edit
+}
\ No newline at end of file