Merge branch 'master' into gyumin

.gitignore

 /node_modules
 .env.development
-.env.development.local
-.env.local
 .env
\ No newline at end of file

client/src/App.js

@@ -12,6 +12,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() {
@@ -29,6 +30,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="/search" component={SearchPage} />
             <Route path="/admin" component={AdminPage} />

client/src/apis/cinema.api.js

+import axios from "axios";
+import {baseUrl} from "../utils/baseUrl.js";
+
+const getInfo = async () => {
+    const { data } = await axios.get(`${baseUrl}/api/cinema`)
+    return data
+}
+
+const edit = async (cinemaInfo) => {
+    const { data } = await axios.put(`${baseUrl}/api/cinema`, cinemaInfo)
+    return data
+}
+
+const cinemaApi = {
+    getInfo,
+    edit
+}
+
+export default cinemaApi
\ No newline at end of file

client/src/apis/movie.api.js

 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`)
-    return data.results
+
+const getAllfromTM = async () => {
+    const payload = {
+        params: {
+            pageNum: 1
+        }
+    }
+    const { data } = await axios.get(`${baseUrl}/api/movie/all`, payload)
+    return data
+}
+const getMoviesfromTM = async (category) => {
+    console.log(category)
+    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 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 remove = async (movieId) => {
+    const { data } = await axios.delete(`${baseUrl}/api/movie/${movieId}`)
+    return data
+}
+
+const search = async ({ type, keyword }) => {
+    const payload = {
+        params: {
+            keyword
+        }
+    }
+    const { data } = await axios.get(`${baseUrl}/api/movie/search/${type}`, payload)
+    return data
 }
 
 const movieApi = {
-    getUpcomingfromTM,
-    submit
+    getAllfromTM,
+    getMoviesfromTM,
+    getMovieInfofromTM,
+    getImagesfromTM,
+    getCreditsfromTM,
+    getVideosfromTM,
+    submit,
+    remove,
+    search,
 }
 
 export default movieApi
\ No newline at end of file

client/src/components/Admin/CinemaEdit.js

-import { useState } from "react";
-import KakaoMap from "../KakaoMap";
+import { useState, useEffect } from "react";
+import cinemaApi from "../../apis/cinema.api.js";
+import catchErrors from "../../utils/catchErrors.js";
 import styles from "./admin.module.scss";
 
+const INIT_CINEMAINFO = {
+    cinemaName: "", 
+    transportation: "", 
+    parking: "", 
+    address: "" 
+}
+
 const CinemaEdit = () => {
-    const [cinemaInfo, setCinemaInfo] = useState({ cinema: "", transportation: "", parking: "", keyword: "", address: "" })
-    const [search, setSearch] = useState("")
+    const [cinemaInfo, setCinemaInfo] = useState(INIT_CINEMAINFO)
+    const [error, setError] = useState("")
+
+    useEffect(() => {
+        getInfo()
+    }, [])
 
     function handleChange(e) {
         const { name, value } = e.target
         setCinemaInfo({ ...cinemaInfo, [name]: value })
     }
 
+    async function getInfo() {
+        try {
+            setError("")
+            const info = await cinemaApi.getInfo()
+            if (info) setCinemaInfo(info)
+            else setCinemaInfo(INIT_CINEMAINFO)
+        } catch (error) {
+            catchErrors(error, setError)
+        }
+    }
+
+    async function handleSubmit() {
+        try {
+            setError("")
+            await cinemaApi.edit(cinemaInfo)
+            window.location.reload()
+        } catch (error) {
+            catchErrors(error, setError)
+        }
+    }
+
     return (
         <>
             <h2 className="border-bottom border-2 text-center pb-2 me-2">현재 영화관 정보</h2>
-            <input type="text" className={`form-control mb-2 ${styles.shadowNone}`} id="cinema" name="cinema" onChange={handleChange} />
+            <div className="mb-3">
+                <label for="cinemaName" className="form-label">영화관 이름</label>
+                <input type="text" className={`form-control mb-2 ${styles.shadowNone}`} id="cinemaName" name="cinemaName" value={cinemaInfo.cinemaName} onChange={handleChange} />
                 <p>총 상영관 수: 8개관 | 총 좌석 수: 1,282석</p>
+            </div>
             <div className="mb-3">
                 <label for="transportation" className="form-label">대중교통 안내</label>
-                <textarea className={`form-control ${styles.shadowNone} ${styles.textarea}`} rows="7" id="transportation" name="transportation" onChange={handleChange}></textarea>
+                <textarea className={`form-control ${styles.shadowNone} ${styles.textarea}`} rows="7" id="transportation" name="transportation" value={cinemaInfo.transportation} onChange={handleChange}></textarea>
             </div>
             <div className="mb-3">
                 <label for="parking" className="form-label">자가용/주차안내</label>
-                <textarea className={`form-control ${styles.shadowNone} ${styles.textarea}`} rows="7" id="parking" name="parking" onChange={handleChange}></textarea>
+                <textarea className={`form-control ${styles.shadowNone} ${styles.textarea}`} rows="7" id="parking" name="parking" value={cinemaInfo.parking} onChange={handleChange}></textarea>
             </div>
             <label for="keyword" className="form-label">지도보기</label>
             <div className="input-group mb-3">
                 <span className="input-group-text" id="address"><i className="bi bi-geo-alt-fill"></i></span>
-                <input type="text" className={`form-control ${styles.shadowNone}`} id="address" name="address" aria-label="map" aria-describedby="address" onChange={handleChange} value={cinemaInfo.address} />
-            </div>
-            <div className="input-group mb-3">
-                <input type="text" className={`form-control ${styles.shadowNone}`} id="keyword" name="keyword" aria-label="map" aria-describedby="currentMap" onChange={handleChange} />
-                <button className="btn btn-dark" type="button" id="currentMap" onClick={() => setSearch(cinemaInfo.keyword)}><i className="bi bi-search"></i></button>
+                <input type="text" className={`form-control ${styles.shadowNone}`} id="address" name="address" value={cinemaInfo.address} onChange={handleChange} value={cinemaInfo.address} />
             </div>
-            <div className="d-flex justify-content-center mb-5">
-                <KakaoMap keyword={search} cinemaInfo={cinemaInfo} setCinemaInfo={setCinemaInfo} />
+            <div className="d-grid gap-2 mb-5">
+                <button type="submit" className={`btn btn-dark shadow-none ${styles.customBtn}`} onClick={handleSubmit}>수정</button>
             </div>
         </>
     )

client/src/components/Admin/MovieEdit.js

@@ -4,10 +4,9 @@ import MovieTable from "../MovieTable";
 import Pagination from "../Pagination";
 import movieApi from "../../apis/movie.api.js";
 import catchErrors from "../../utils/catchErrors.js";
-import styles from "./admin.module.scss";
 
 const MovieEdit = () => {
-    const [search, setSearch] = useState({ kind: "", keyword: "" })
+    const [search, setSearch] = useState({ type: "admin", keyword: "" })
     const [movieList, setMovieList] = useState([])
     const [error, setError] = useState("")
 
@@ -18,7 +17,7 @@ const MovieEdit = () => {
     async function getMovieList() {
         try {
             setError("")
-            const getMovieList = await movieApi.getUpcomingfromTM()
+            const getMovieList = await movieApi.getAllfromTM()
             setMovieList(getMovieList)
         } catch (error) {
             catchErrors(error, setError)
@@ -28,6 +27,8 @@ const MovieEdit = () => {
     async function searchMovie() {
         try {
             setError("")
+            const findMovie = await movieApi.search(search)
+            setMovieList(findMovie)
         } catch (error) {
             catchErrors(error, setError)
         }
@@ -35,17 +36,11 @@ const MovieEdit = () => {
 
     return (
         <>
-        {console.log("search==",search)}
             <div className="d-flex justify-content-md-end justify-content-center mb-3">
-                <Search type="admin" search={search} setSearch={setSearch} handleClick={searchMovie} />
+                <Search search={search} setSearch={setSearch} handleClick={searchMovie} />
             </div>
             <MovieTable movieList={movieList} />
-            <div className="d-flex flex-wrap">
             <Pagination />
-                <div className="d-flex justify-content-end col-12 col-md-4 my-2">
-                    <button type="button" className={`btn btn-dark ${styles.customBtn}`}>등록</button>
-                </div>
-            </div>
         </>
     )
 }

client/src/components/Admin/admin.module.scss

@@ -29,8 +29,6 @@
 }
 
 .customBtn {
-    width: 5em;
-
     &:hover {
         border-color: #FEDC00;
         background-color: #FEDC00;