master 병합

.gitignore

 /node_modules
 .env.development
 .env
+upload/
\ No newline at end of file

client/package-lock.json

@@ -4419,9 +4419,9 @@
       }
     },
     "cookie": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
-      "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg=="
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.1.tgz",
+      "integrity": "sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA=="
     },
     "cookie-signature": {
       "version": "1.0.6",
@@ -6510,6 +6510,11 @@
           "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
           "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
         },
+        "cookie": {
+          "version": "0.4.0",
+          "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
+          "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg=="
+        },
         "debug": {
           "version": "2.6.9",
           "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",

client/src/App.js

@@ -14,7 +14,8 @@ import AdminPage from "./pages/AdminPage/AdminPage";
 import TicketingPage from "./pages/TicketingPage";
 import TicketingSeatPage from './pages/TicketingSeatPage'
 import SearchPage from "./pages/SearchPage";
-import Payment from "./pages/PaymentPage";
+import Payment from "./pages/PaymentPage/PaymentPage";
+import PaymentCompletePage from "./pages/PaymentCompletePage";
 
 function App() {
 

client/src/apis/auth.api.js

 import axios from "axios";
 import { baseUrl } from "../utils/baseUrl.js";
-import config from "../utils/clientConfig.js";
+
+const getUser = async () => {
+  const url = `${baseUrl}/api/auth/user`
+  const { data } = await axios.get(url)
+  return data
+}
 
 const login = async (login) => {
   const payload = login;
@@ -9,41 +14,61 @@ const login = async (login) => {
 };
 
 const logout = async () => {
-  alert("로그아웃되었습니다.");
-  localStorage.removeItem(config.loginUser);
-  await axios.get(`${baseUrl}/api/auth/logout`);
+  const { data } = await axios.get(`${baseUrl}/api/auth/logout`);
+  return data
 };
 
 const signup = async (user) => {
-  const url = `${baseUrl}/api/auth/signup`
-  await axios.post(url, user)
+  const url = `${baseUrl}/api/auth/signup`;
+  const { data } = await axios.post(url, user);
+  return data
 }
 
-const compareId = async (userId) => {
-  const url = `${baseUrl}/api/auth/${userId}`
+const confirmMbnum = async (phone) => {
+  const url = `${baseUrl}/api/auth/phone/${phone}`
+  const { data } = await axios.post(url);
+  return data
+}
+
+const confirmNum = async (confirmNum) => {
+  const url = `${baseUrl}/api/auth/num`
+  const { data } = await axios.post(url, confirmNum);
+  return data
+}
+
+const profile = async (formData) => {
+  const url = `${baseUrl}/api/auth/profile`
+  const { data } = await axios.post(url, formData)
+  return data
+}
+const getMember = async () => {
+  const url = `${baseUrl}/api/auth/member`
   const { data } = await axios.get(url)
   return data
 }
 
-const confirmMbnum = async (id,token) => {
-  const url = `${baseUrl}/api/auth/${id}/${token}`
+const comparePw = async (pw) => {
+  const url = `${baseUrl}/api/auth/pw/${pw}`
   const { data } = await axios.get(url)
   return data
 }
 
-const getNickName = async(id) =>{
-  const url = `${baseUrl}/api/auth/${id}`
-  console.log("url :  ", url);
-  const { nickName } = await axios.get(url)
-  return nickName
+const modifyUser = async (user) => {
+  const url = `${baseUrl}/api/auth/modify`
+  const { data } = await axios.post(url, user)
+  return data
 }
 
 const authApi = {
+  getUser,
   login,
   logout,
   signup,
-  compareId,
   confirmMbnum,
-  getNickName,
+  confirmNum,
+  profile,
+  getMember,
+  comparePw,
+  modifyUser,
 };
 export default authApi
\ No newline at end of file

client/src/apis/movie.api.js

@@ -11,11 +11,6 @@ const getAllfromTM = async (pageNum) => {
     return data
 }
 
-const getMoviesfromTM = async (category) => {
-    const response = await axios.get(`${baseUrl}/api/movie/showmovies/${category}`)
-    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`)
@@ -28,13 +23,13 @@ const getImagesfromTM = async (id) => {
     return response.data
 }
 
-const getCreditsfromTM = async (id) =>{
+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 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
@@ -45,6 +40,11 @@ const getListfromDB = async () => {
     return data
 }
 
+const getListByCategoryfromDB = async (category) => {
+    const { data } = await axios.get(`${baseUrl}/api/movie/movielist/${category}`)
+    return data
+}
+
 const submit = async (movieId) => {
     const { data } = await axios.post(`${baseUrl}/api/movie/${movieId}`)
     return data
@@ -68,7 +68,7 @@ const search = async ({ type, keyword }, pageNum) => {
 
 const movieApi = {
     getAllfromTM,
-    getMoviesfromTM,
+    getListByCategoryfromDB,
     getMovieInfofromTM,
     getImagesfromTM,
     getCreditsfromTM,

client/src/components/Admin/TicketFeeTable.js

 import { useState, useEffect } from "react";
 import cinemaApi from "../../apis/cinema.api.js";
 import catchErrors from "../../utils/catchErrors.js";
+import { useAuth } from '../../context/auth_context';
 import styles from "./admin.module.scss";
 
 const TicketFeeTable = ({ selectTheater, setEditFee, formRef }) => {
     const [ticketFee, setTicketFee] = useState([])
     const [error, setError] = useState("")
+    const { user } = useAuth()
+
 
     useEffect(() => {
         if (selectTheater !== 0) getOne(selectTheater)
@@ -48,7 +51,7 @@ const TicketFeeTable = ({ selectTheater, setEditFee, formRef }) => {
     }
 
     return (
-        <table className={`table text-center align-middle ${styles.tableForm}`}>
+        <table className={`table text-center align-middle ${styles.tableForm}`} style={{ color: user.role === "admin" ? "" : "white" }}>
             <thead className={`table-dark align-middle ${styles.dNone}`}>
                 <tr>
                     <th className={styles.word}>상영관 종류</th>
@@ -57,7 +60,7 @@ const TicketFeeTable = ({ selectTheater, setEditFee, formRef }) => {
                     <th>청소년</th>
                     <th>일반</th>
                     <th>경로</th>
-                    <th style={{ width: "14%" }}></th>
+                    {user.role === "admin" ? <th style={{ width: "14%" }}></th> : <></>}
                 </tr>
             </thead>
             <tbody>
@@ -70,12 +73,15 @@ const TicketFeeTable = ({ selectTheater, setEditFee, formRef }) => {
                             <td className="d-inline-block d-md-table-cell">{priceToString(info.weekdays + info.morning + info.youth + info.defaultPrice)}원</td>
                             <td className="d-inline-block d-md-table-cell">{priceToString(info.weekdays + info.morning + info.adult + info.defaultPrice)}원</td>
                             <td className="d-inline-block d-md-table-cell">{priceToString(info.weekdays + info.morning + info.senior + info.defaultPrice)}원</td>
+                            {user.role === "admin"
+                                ?
                                 <td rowSpan="6" className="d-none d-md-table-cell">
                                     <div className="d-flex flex-column">
                                         <button type="button" className="btn btn-primary my-1" onClick={() => editRow(info.theatertypeId)}>수정</button>
                                         <button type="button" className="btn btn-danger my-1" onClick={() => deleteData(info.theatertypeId)}>삭제</button>
                                     </div>
                                 </td>
+                                : <></>}
                         </tr>
                         <tr>
                             <td className="d-inline-block d-md-table-cell">일반 (11:00 ~ )</td>
@@ -107,12 +113,15 @@ const TicketFeeTable = ({ selectTheater, setEditFee, formRef }) => {
                             <td className="d-inline-block d-md-table-cell">{priceToString(info.weekend + info.night + info.youth + info.defaultPrice)}원</td>
                             <td className="d-inline-block d-md-table-cell">{priceToString(info.weekend + info.night + info.adult + info.defaultPrice)}원</td>
                             <td className="d-inline-block d-md-table-cell">{priceToString(info.weekend + info.night + info.senior + info.defaultPrice)}원</td>
+                            {user.role === "admin"
+                                ?
                                 <td className={`d-block d-md-none ${styles.borderTop}`}>
                                     <div className="d-flex justify-content-end">
                                         <button type="button" className="btn btn-primary" onClick={() => editRow(info.theatertypeId)}>수정</button>
                                         <button type="button" className="btn btn-danger ms-2" onClick={() => deleteData(info.theatertypeId)}>삭제</button>
                                     </div>
                                 </td>
+                                : <></>}
                         </tr>
                     </>)
                     : <tr>

client/src/components/BoxOffice/BoxOffice.js

 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 .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)
-                el.appendChild(cloneChild.children[0])
-                next = next.nextElementSibling
-            }
-        })
-    }, [])
-
-    async function getTMDB_TopRated() {
-        const category = "popular"
-        try {
-            const data = await movieApi.getMoviesfromTM(category)
-            console.log(data)
-            setTMDB_TopRated_Data(data)
-        } catch (error) {
-            console.log(error)
-        }
-    }
+const BoxOffice = ({TMDB_TopRated_Data}) => {
 
     return (
         <div className="container text-center my-3">
-            {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">
-                        {TMDB_TopRated_Data ?
-                            TMDB_TopRated_Data.map((moviePoster, index) => (
+            {/* <div id="carouselExampleControls" className="carousel slide" data-bs-ride="carousel">
+                <div className="carousel-inner">
+                    {TMDB_TopRated_Data.length>0
+                        ?
+                        TMDB_TopRated_Data.map((movie, index) => {
                             <div  className={`carousel-item ${index === 0 ? "active" : ""}`}>
-                                    <div className="col-sm-3">
-                                        <div className="card">
-                                            <div className="card-img">
-                                                <img src={`https://image.tmdb.org/t/p/original${moviePoster.poster_path}`} className="img-fluid" />
-                                            </div>
-                                        </div>
+                                {console.log(movie.poster_path)}
+                                <img src={`https://image.tmdb.org/t/p/original${movie.poster_path}`} className="d-block w-100" alt="Movie Poster"/>
                             </div>
+                        })
+                        :
+                        <div className="carousel-item">
+                            {console.log("스틸컷 불러오기 오류")}
+                            <img src="/images/none.jpg" className="d-block w-100" alt="등록된 스틸컷이 없습니다." />
                         </div>
-                            ))
-                            : (<div>영화를 불러올 수 없습니다:(</div>)}
+                    }
                 </div>
-                    <a className="carousel-control-prev bg-transparent w-aut" href="#recipeCarousel" role="button"
-                        data-bs-slide="prev">
+                <button className="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" 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="visually-hidden">Previous</span>
+                </button>
+                <button className="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
                     <span className="carousel-control-next-icon" aria-hidden="true"></span>
-                    </a>
-                </div>
-            </div>
+                    <span className="visually-hidden">Next</span>
+                </button>
+            </div> */}
+
         </div>
     )
 }
 
 export default BoxOffice
+
+// 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 .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)
+//                 el.appendChild(cloneChild.children[0])
+//                 next = next.nextElementSibling
+//             }
+//         })
+//     }, [])
+
+//     async function getTMDB_TopRated() {
+//         const category = "popular"
+//         try {
+//             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(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">
+//                         {TMDB_TopRated_Data ?
+//                             TMDB_TopRated_Data.map((moviePoster, index) => (
+//                                 <div className={`carousel-item ${index === 0 ? "active" : ""}`}>
+//                                     <div className="col-sm-3">
+//                                         <div className="card">
+//                                             <div className="card-img">
+//                                                 <img src={`https://image.tmdb.org/t/p/original${moviePoster.poster_path}`} className="img-fluid" />
+//                                             </div>
+//                                         </div>
+//                                     </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>
+//         </div>
+//     )
+// }
+
+// export default BoxOffice
\ No newline at end of file

client/src/components/BoxOffice/box-office.module.css

-@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/mystyle.css

-
-@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/Collection.js

-const Collection = () => {
+import { useEffect, useState } from 'react'
+import movieApi from '../apis/movie.api.js'
+import catchErrors from '../utils/catchErrors.js'
+
+const Collection = ({ TMDB_TopRated_Data }) => {
+    const [videoUrls, setVideoUrls] = useState([])
+    const [error, setError] = useState("")
+
+    useEffect(() => {
+        if (TMDB_TopRated_Data.length > 0) {
+            getVideos()
+        }
+    }, [TMDB_TopRated_Data])
+
+    async function getVideos() {
+        try {
+            const data = await movieApi.getVideosfromTM(TMDB_TopRated_Data[0].id)
+            setVideoUrls(data)
+        } catch (error) {
+            catchErrors(error, setError)
+        }
+    }
     return (
         <>
             <h2 className="fw-bold text-white text-center my-5">Movie Collection</h2>
-            <div className="d-flex container justify-content-between" style={{ marginBottom: "8em" }}>
-                <div className="col-md-8 col-12 bg-white" style={{ height: "20em" }}></div>
-                <img className="col-md-3 bg-white" style={{ height: "20em" }} />
+            <div className="row justify-content-sm-center" style={{ marginBottom: "8rem" }}>
+                <div className="col-md-8">
+                    {videoUrls.length > 0
+                        ?
+                        <div className="">
+                            <div className="ratio ratio-16x9">
+                                <iframe src={`https://www.youtube.com/embed/${videoUrls[0].key}`} title="YouTube video" allowfullscreen></iframe>
+                            </div>
+                        </div>
+
+                        : <div className="text-center">예고편 정보가 존재하지 않습니다.</div>}
+                </div>
+                {TMDB_TopRated_Data.length > 0
+                    ?
+                    <img src={`https://image.tmdb.org/t/p/original${TMDB_TopRated_Data[0].poster_path}`} className="col-md-3 bg-black" />
+                    :
+                    <div className="col-md-3"></div>
+                }
             </div>
         </>
     )

client/src/components/CountButton.js

-import {useState} from 'react'
-const CountButton = (props) => {
-    const name = props.name
+const CountButton = ({name, count, setCount}) => {
     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})
 
         }
     }
+    
     return (
-        <div 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" />
+            <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>
-        </div>
+        </>
     )
 }
 

client/src/components/Kakaopay.js

-import axios from 'axios'
-
-const Kakaopay = (props) => {
-    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,
-                vat_amount: 0,
-                tax_free_amount: 0,
-                approval_url: 'http://localhost:3000/',
-                fail_url: 'http://localhost:3000/',
-                cancel_url: 'http://localhost:3000/',
-            })
-            console.log(response.data)
-            if (response.data) {
-                window.location.href = response.data.redirect_url
-            }
-        } catch (error) {
-            console.log(error)
-        }
-    }
-
-    return (
-        <>
-            <button onClick={handleClick} style={{ backgroundColor: "black", border: '0' }}>
-                <img src="/images/payment_icon_yellow_medium.png" />
-            </button>
-        </>
-    )
-}
-
-export default Kakaopay
\ No newline at end of file

client/src/components/Login/Login.js

 import { useState } from "react";
-import styles from "./login.module.scss";
 import { Redirect } from "react-router-dom";
+import { useAuth } from "../../context/auth_context.js";
 import catchErrors from "../../utils/catchErrors";
-import {useAuth} from "../../context/auth_context.js";
+import styles from "./login.module.scss";
 
 const Login = () => {
-    const {login, loading} = useAuth();
-    //useState를 이용해서 각 state 생성 및 초기값 저장
-    const [state, setState] = useState(true); // 이 줄은 css에 해당하는 state
-    //state변수 지정 하지만 이 변수는 react에 의해 없어지지 않음, 그리고 그 다음 변수는 state변수를 갱신해주는 함수
+    const { login, loading } = useAuth();
+    const [state, setState] = useState(true);
     const [user, setUser] = useState({
         id: '',
         password: ''
     });
     const [error, setError] = useState("");
     const [success, setSuccess] = useState(false);
-
     const [guest, setGuset] = useState({
         guestName: '',
         gusetBirthday: '',
@@ -23,10 +20,7 @@ const Login = () => {
         guestPassword: ''
     })
 
-    //input태그에 걸려있는 onchange에서 실행할 함수설정
     const handleLoginOnChange = (e) => {
-        // ... 전개 연산자
-        // 현재 state에 방금 변화한 값을 다시 저장함
         setUser({
             ...user,
             [e.target.name]: e.target.value
@@ -41,9 +35,12 @@ const Login = () => {
     }
 
     const requestServer = async (data) => {
-        if(data === user){
-        await login(data);
-        }else{
+        if (data === user) {
+            const success = await login(data);
+            if (success) {
+                setSuccess(true);
+                alert('로그인이 완료되었습니다.')
+            }
         }
     }
 
@@ -51,11 +48,8 @@ const Login = () => {
         e.preventDefault();
         try {
             setError("");
-            console.log(e.target.name);
             if (e.target.name === "login") {
                 requestServer(user);
-                alert('로그인이 완료되었습니다.')
-                setSuccess(true);
             }
             else {
                 requestServer(guest);
@@ -86,7 +80,6 @@ const Login = () => {
                 </li>
             </ul>
             <div className="tab-content w-100" id="myTabContent">
-                {/* 로그인 */}
                 <div className="tab-pane fade show active" id="login" role="tabpanel" aria-labelledby="login-tab">
                     <form className="d-flex flex-column" name="login" onSubmit={handleOnSummit}>
                         <input className={styles.input} type="text" name="id" placeholder="ID" onChange={handleLoginOnChange} maxLength="10" required />
@@ -95,7 +88,6 @@ const Login = () => {
                         <span><a href="./signup" className={styles.intoSignupPage}>회원이 아니십니까?</a></span>
                     </form>
                 </div>
-                {/* 비회원예매 학인 */}
                 <div className="tab-pane fade" id="guest" role="tabpanel" aria-labelledby="guest-tab">
                     <form className="d-flex flex-column" onSubmit={handleOnSummit}>
                         <input className={styles.input} type="text" name="guestName" id="guestName" placeholder="이름" onChange={handleGuestOnChange} maxLength="5" required />
@@ -103,7 +95,6 @@ const Login = () => {
                         <input className={styles.input} type="number" name="gusetBirthday" id="gusetBirthday" placeholder="생년월일" onChange={handleGuestOnChange} maxLength="6" required />
                         <input className={styles.input} type="number" name="gusetMbnum" id="gusetMbnum" placeholder="휴대폰 번호" onChange={handleGuestOnChange} maxLength="11" required />
                         <input className={styles.input} type="password" name="guestPassword" id="password" placeholder="비밀번호" onChange={handleGuestOnChange} maxLength="11" required />
-
                         <p className={`text-white ${styles.fontSizeTwo}`}>
                             ※ 비회원 정보 오 입력 시 예매 내역 확인/취소 및 티켓 발권이 어려울 수 있으니 다시 한번 확인해 주시기 바랍니다.
                         </p>

client/src/components/MovieCard/MovieCard.js

@@ -23,8 +23,9 @@ const MovieCard = ({ list }) => {
                         <div className={`${styles.description}`}>{movie.overview}</div>
                     </Link>
                     <div className="card-body text-light">
-                        <marquee className={`h2 card-title text-center ${styles.title}`}>{movie.title}</marquee>
-                        <p className={`card-text text-center ${styles.txt}`}>예매율: {movie.ticket_sales}0% | {movie.runtime}분</p>
+                        {movie.adult? <image src="/images/19.png" /> :<></>}
+                        <div className={`h4 card-title text-center ${styles.title}`}>{movie.title}</div>
+                        <p className={`card-text text-center ${styles.txt}`}>예매율: {Math.round((movie.ticket_sales/(movie.totalReservationRate.totalReservationRate||1))*100)}% | {movie.runtime}분</p>
                         <p className="card-text text-center"><small className="text-muted">{movie.release_date} 개봉</small></p>
                     </div>
                     <Link to={{

client/src/components/MovieChart.js

@@ -3,7 +3,6 @@ import MovieCard from './MovieCard/index.js'
 import movieApi from '../apis/movie.api.js'
 import catchErrors from '../utils/catchErrors.js'
 
-
 const MovieChart = () => {
     const [TMDB_TopRated_Data, setTMDB_TopRated_Data] = useState([])
     const [error, setError] = useState("")
@@ -16,8 +15,7 @@ const MovieChart = () => {
     async function getTMDB_TopRated() {
         try {
             setError("")
-            const data = await movieApi.getMoviesfromTM(category)
-            console.log("sdad==", data)
+            const data = await movieApi.getListByCategoryfromDB(category)
             setTMDB_TopRated_Data([...data])
         } catch (error) {
             catchErrors(error, setError)
@@ -30,7 +28,7 @@ const MovieChart = () => {
                 <div className="row row-cols-1 row-cols-md-4 g-4">
                     <MovieCard list={TMDB_TopRated_Data} />
                 </div>
-                : <h2 className="text-white text-center my-5">영화정보를 로딩할 수 없습니다.</h2>
+                : <h2 className="text-white text-center p-5"> </h2>
             }
         </>
     )

client/src/components/MovieComing.js

 import { useState, useEffect } from 'react'
-import movieApi from "../apis/movie.api.js"
-// import MovieCard from "./MovieCard/index.js"
 import { Link } from 'react-router-dom'
-import styles from './MovieCard/MovieCard.js'
+import movieApi from "../apis/movie.api.js"
 import catchErrors from '../utils/catchErrors.js'
+import styles from './MovieCard/movie-card.module.scss'
 
 const MovieComing = () => {
     const [TMDB_UpComing_Data, setTMDB_UpComing_Data] = useState([])
@@ -17,7 +16,7 @@ const MovieComing = () => {
     async function getTMDB_UpComing() {
         try {
             setError("")
-            const response = await movieApi.getMoviesfromTM(category)
+            const response = await movieApi.getListByCategoryfromDB(category)
             setTMDB_UpComing_Data([...response])
         } catch (error) {
             catchErrors(error, setError)
@@ -28,7 +27,6 @@ const MovieComing = () => {
         <>
             {TMDB_UpComing_Data.length !== 0 ?
                 <div className="row row-cols-1 row-cols-md-4 g-4">
-                    {/* <MovieCard list={TMDB_UpComing_Data} /> */}
                     {TMDB_UpComing_Data.map(movie => (
                         <div className="card h-100" style={{ backgroundColor: "black" }}>
                             <Link to={{
@@ -41,8 +39,9 @@ const MovieComing = () => {
                                 <div className={`${styles.description}`}>{movie.overview}</div>
                             </Link>
                             <div className="card-body text-light">
-                                <marquee className={`h2 card-title text-center ${styles.title}`}>{movie.title}</marquee>
-                                <p className={`card-text text-center ${styles.txt}`}>예매율: {movie.ticket_sales}0% | {movie.runtime}분</p>
+                                {movie.adult ? <image src="/images/19.png" /> : <></>}
+                                <div className={`h4 card-title text-center ${styles.title}`}>{movie.title}</div>
+                                <p className={`card-text text-center ${styles.txt}`}>{movie.runtime}분</p>
                                 <p className="card-text text-center"><small className="text-muted">{movie.release_date} 개봉</small></p>
                             </div>
                             <Link to={{
@@ -54,7 +53,7 @@ const MovieComing = () => {
                         </div>
                     ))}
                 </div>
-                : <h2 className="text-white text-center my-5">영화정보를 로딩할 수 없습니다.</h2>
+                : <h2 className="text-white text-center p-5"> </h2>
             }
         </>
     )