Merge branch 'kimpen'

client/src/components/Pagination.js

-const Pagination = () => {
+import PaginationBoot from "./PaginationBoot";
+
+const Pagination = ({ totalPages, activePage, prevPage, nextPage, paginate }) => {
+    const pageWidth = 5
+    const section = Math.floor((activePage - 1) / pageWidth)
+
+    let startPage = section * pageWidth + 1
+    if (startPage < 1) startPage = 1
+
+    let endPage = startPage + pageWidth - 1
+    if (endPage > totalPages) endPage = totalPages
+
+    const pageNumbers = []
+    for (let i = startPage; i <= endPage; i++) {
+        pageNumbers.push(i);
+    }
+
     return (
-        <nav className="col-12 col-md-4 offset-md-4 my-2" aria-label="Page navigation">
-            <ul className="pagination justify-content-center mb-0">
-                <li className="page-item">
-                    <a className="page-link" href="#" aria-label="Previous">
-                        <span aria-hidden="true">&laquo;</span>
-                    </a>
-                </li>
-                <li className="page-item"><a className="page-link" href="#">1</a></li>
-                <li className="page-item"><a className="page-link" href="#">2</a></li>
-                <li className="page-item"><a className="page-link" href="#">3</a></li>
-                <li className="page-item">
-                    <a className="page-link" href="#" aria-label="Next">
-                        <span aria-hidden="true">&raquo;</span>
-                    </a>
-                </li>
-            </ul>
-        </nav>
+        <PaginationBoot>
+            <PaginationBoot.First
+                disabled={activePage <= 1}
+                onClick={() => paginate(1)}
+            />
+            <PaginationBoot.Prev onClick={prevPage} disabled={activePage <= 1} />
+            {pageNumbers.map((number, index) => <PaginationBoot.Item
+                key={index}
+                active={activePage === number}
+                onClick={() => {
+                    console.log("number", number);
+                    paginate(number);
+                }}
+            >
+                {number}
+            </PaginationBoot.Item>
+            )}
+            <PaginationBoot.Next
+                onClick={nextPage}
+                disabled={activePage >= totalPages}
+            />
+            <PaginationBoot.Last
+                disabled={activePage >= totalPages}
+                onClick={() => paginate(totalPages)}
+            />
+        </PaginationBoot>
     )
 }
 

client/src/components/PaginationBoot.js

+import { Link } from "react-router-dom";
+
+const PaginationBoot = ({ children }) => {
+  return (
+    <nav aria-label="page navigation">
+      <ul className="pagination justify-content-center py-3">{children}</ul>
+    </nav>
+  );
+};
+
+const PageItem = ({
+  active = false,
+  disabled = false,
+  className = "",
+  style,
+  activeLabel = "(current)",
+  children,
+  ...props
+}) => {
+  return (
+    <li
+      style={style}
+      className={`${className}` + " page-item " + (active ? "active " : "") + (disabled ? "disabled " : "")}
+    >
+      <Link to="#" className={"page-link border-0 shadow-none " + (active ? "rounded-circle text-white" : "text-dark")} {...props}>
+        {children}
+      </Link>
+    </li>
+  );
+};
+
+const createButton = (name, defaultValue, label = name) => {
+  function Button({ children, ...props }) {
+    return (
+      <PageItem {...props}>
+        <span aria-hidden="true">{children || defaultValue}</span>
+        <span className="visually-hidden">{label}</span>
+      </PageItem>
+    );
+  }
+
+  Button.displayName = name;
+  return Button;
+};
+
+PaginationBoot.First = createButton("First", <i className="bi bi-chevron-double-left"></i>);
+PaginationBoot.Prev = createButton("Prev", <i className="bi bi-chevron-left"></i>);
+PaginationBoot.Item = PageItem;
+PaginationBoot.Next = createButton("Next", <i className="bi bi-chevron-right"></i>);
+PaginationBoot.Last = createButton("Last", <i className="bi bi-chevron-double-right"></i>);
+
+export default PaginationBoot
\ No newline at end of file

client/src/components/ReservationDetails/reservation-details.module.scss

@@ -31,7 +31,6 @@
 }
 
 @media (max-width: 576px) {
-    
     .header{
         display: flex;
         justify-content: center;
@@ -41,9 +40,8 @@
         font-size: 1.5rem;
         margin: 1rem;
     }
-    
-.layout{
+    .layout{
     color:white;
     font-size: 1rem;
-}
+    }
 }
\ No newline at end of file

client/src/components/Search/Search.js

@@ -9,7 +9,7 @@ const Search = ({ search, setSearch, handleClick }) => {
     return (
         <div className="d-flex">
             <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>
+            <i className={`bi bi-search align-self-center ${search.type === "home" ? "text-white" : "mx-2"} ${styles.icon}`} onClick={() => handleClick(1)} style={{ fontSize: "1.3rem" }}></i>
         </div>
     )
 }

client/src/components/SeatTable/SeatTable.js

-// import { useState } from 'react'
 import styles from './seatTable.module.scss'
 
 const SeatTable = ({ theaterInfo, count, setSelectedSeats, selectedSeats, reservedSeats }) => {
     const table = []
+    
     if (theaterInfo) {
         for (let rowIndex = 0; rowIndex < theaterInfo.rows; rowIndex++) {
             table.push(<span className="me-3" style={{ color: "gray" }}>{String.fromCharCode(rowIndex + 65)}</span>)
@@ -26,19 +26,14 @@ const SeatTable = ({ theaterInfo, count, setSelectedSeats, selectedSeats, reserv
     function handleClick(event) {
         const num = Object.values(count).reduce((a, b) => (a + b))
         if (selectedSeats.find(el => el === event.target.name + '-' + event.target.id)) {
-            //제거
             const deleted = selectedSeats.filter((element) => element !== event.target.name + '-' + event.target.id);
             setSelectedSeats(deleted)
         } else {
-            if (selectedSeats.length > num - 1) {
-                alert("선택한 좌석이 예매인원보다 많습니다.")
-            } else {
-                //추가
-                setSelectedSeats([...selectedSeats, event.target.name + '-' + event.target.id])
-            }
+            if (selectedSeats.length > num - 1) alert("선택한 좌석이 예매인원보다 많습니다.")
+            else setSelectedSeats([...selectedSeats, event.target.name + '-' + event.target.id])
         }
-
     }
+
     return (
         <div className="text-center">
             <div className="mb-2" style={{ backgroundColor: "gray" }}>Screen</div>

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

 .btn {
-    border:0;
+    border: 0;
     background: black;
     color: white;
-    &:hover{
-        border:0;
-        background: red ;
-        color:white
+
+    &:hover {
+        border: 0;
+        background: red;
+        color: white;
     }
 }
+
 .on {
-    border:0;
-    background: red ;
-    color:white
+    border: 0;
+    background: red;
+    color: white;
 }
 
 .btnBlock {
     background: gray;
     border: 0;
-    color:white;
+    color: white;
 }
\ No newline at end of file

client/src/components/Signup/Signup.js

-import styles from "./signup.module.scss";
 import { useState } from "react";
-import authApi from "../../apis/auth.api.js";
 import { Redirect } from "react-router-dom";
+import authApi from "../../apis/auth.api.js";
 import catchErrors from "../../utils/catchErrors.js";
+import styles from "./signup.module.scss";
 
 const Signup = () => {
     //회원정보
     const [user, setUser] = useState({
         userId: "",
-        userName:"",
+        userName: "",
         userEmail: "",
         userNickName: "",
         userBirthday: "",
@@ -20,8 +20,7 @@ const Signup = () => {
     const [number, setNumber] = useState(null);
     const [loading, setLoading] = useState(false);
     const [success, setSuccess] = useState(false);
-    //각 타입별 error 유무 state
-    const [mbError,setMbError] = useState(false);
+    const [mbError, setMbError] = useState(false);
     const [error, setError] = useState("");
     const [errorMsg, setErrorMsg] = useState({
         errorId: false,
@@ -34,7 +33,6 @@ const Signup = () => {
     })
     const [confirmMb, setConfirmMb] = useState(false);
 
-    //입력할때마다 state에 저장
     const handleUserOnChange = (e) => {
         setUser({
             ...user,
@@ -47,7 +45,6 @@ const Signup = () => {
             })
         }
     }
-    //인증번호 보내기
     const handleOnClickMbnum = async (e) => {
         e.preventDefault();
         try {
@@ -56,136 +53,121 @@ const Signup = () => {
             setLoading(true)
             const phone = user.userMbnum;
             const message = await authApi.confirmMbnum(phone);
-            if(message.isSuccess){
-            setMbError("보냄");
-            setStartTime(message.startTime);
+            if (message.isSuccess) {
+                setMbError("보냄");
+                setStartTime(message.startTime);
             }
         } catch (error) {
-            console.log('error'+ error)
-        }finally {
+            catchErrors(error, setError);
+        } finally {
             setLoading(false);
         }
     }
-    //인증번호 입력
+
     const handleOnChangeMb = (e) => {
         setNumber(String(e.target.value));
     }
-    //인증번호 검증
+
     const handleOnClickMbConfirm = async (e) => {
         e.preventDefault();
         try {
             setError("");
             setLoading(true);
-            const confirmNum = {userMbnum : user.userMbnum, number : number, startTime : startTime};
+            const confirmNum = { userMbnum: user.userMbnum, number: number, startTime: startTime };
             const message = await authApi.confirmNum(confirmNum);
             setMbError(message);
-            if(message === "성공"){
+            if (message === "성공") {
                 setConfirmMb(true);
-                console.log("인증완료");
             }
         } catch (error) {
             catchErrors(error, setError);
-        }finally {
+        } finally {
             setLoading(false);
         }
     }
-    //비밀번호일치 여부만 클라이언트에서 확인
+
     const validationPw = () => {
-        if(user.userPassword !== user.userRePassword){
-            return false;
-        }else{return true;}
+        if (user.userPassword !== user.userRePassword) return false;
+        else return true;
     }
-    //서버로 전송
+
     const handleOnSummit = async (e) => {
         e.preventDefault();
         try {
             setError("");
-            //처리가 될때까지 버튼(가입하기)이 안눌리게 지정
             setLoading(true);
             let validPw = validationPw();
-            if(confirmMb){
-                if(validPw){
+            if (confirmMb) {
+                if (validPw) {
                     const userData = user;
-                    //서버로 전송
                     const error = await authApi.signup(userData);
-                    if(error === "성공"){
-                        setSuccess(true);
-                    }else{
+                    if (error === "성공") setSuccess(true);
+                    else {
                         setErrorMsg(error);
                         alert("형식에 맞게 다시 작성해주세요");
                     }
-                }else{
-                    throw new Error("비밀번호가 일치하지 않습니다.");
-                }
-            }else{
-                throw new Error("핸드폰 번호를 인증해주세요.");
-            }
+                } else throw new Error("비밀번호가 일치하지 않습니다.");
+            } else throw new Error("핸드폰 번호를 인증해주세요.");
         } catch (error) {
-            //에러전송
             catchErrors(error, setError);
         } finally {
             setLoading(false);
         }
     }
 
-    if(success){
+    if (success) {
         return <Redirect to="/login" />;
     }
 
     return (
-        // 데이터 입력과 유효성 검사 후 보이는 경고창
         <form className={`d-flex col-md-6 col-12 justify-content-center`} onSubmit={handleOnSummit}>
             <div className="d-flex flex-column">
                 <span className={styles.title}>회원가입</span>
                 <div className="d-flex flex-column">
                     <div className={styles.inputContent}>
                         <label className={styles.signupLabel}>아이디</label>
-                        <input className={`${styles.input} ${styles.inputSize}`} type="text" name="userId" placeholder="5~10자리 사이" onChange={handleUserOnChange} maxLength="10"/>
+                        <input className={`${styles.input} ${styles.inputSize}`} type="text" name="userId" placeholder="5~10자리 사이" onChange={handleUserOnChange} maxLength="10" />
                     </div>
                     {errorMsg.errorId && <p className={styles.errorMsg}>5~10자리 사이로 입력해주세요.</p>}
                 </div>
                 <div className="d-flex flex-column">
                     <div className={styles.inputContent}>
                         <label className={styles.signupLabel}>이름</label>
-                        <input className={`${styles.input} ${styles.inputSize}`} type="text" name="userName" placeholder="이름을 입력해주세요" onChange={handleUserOnChange}  maxLength="20"  />
+                        <input className={`${styles.input} ${styles.inputSize}`} type="text" name="userName" placeholder="이름을 입력해주세요" onChange={handleUserOnChange} maxLength="20" />
                     </div>
                     {errorMsg.errorName && <p className={styles.errorMsg}>이름을 입력해주세요</p>}
                 </div>
                 <div className="d-flex flex-column">
                     <div className={styles.inputContent}>
                         <label className={styles.signupLabel}>이메일</label>
-                        <input className={`${styles.input} ${styles.inputSize}`} type="email" name="userEmail" placeholder="이메일을 입력해주세요" onChange={handleUserOnChange} maxLength="20"  />
+                        <input className={`${styles.input} ${styles.inputSize}`} type="email" name="userEmail" placeholder="이메일을 입력해주세요" onChange={handleUserOnChange} maxLength="20" />
                     </div>
                     {errorMsg.errorEmail && <p className={styles.errorMsg}>이메일을 입력해주세요</p>}
                 </div>
                 <div className="d-flex flex-column">
                     <div className={styles.inputContent}>
                         <label className={styles.signupLabel}>별명</label>
-                        <input className={`${styles.input} ${styles.inputSize}`} type="text" name="userNickName" placeholder="10자리 이내" onChange={handleUserOnChange} maxLength="20"  />
+                        <input className={`${styles.input} ${styles.inputSize}`} type="text" name="userNickName" placeholder="10자리 이내" onChange={handleUserOnChange} maxLength="20" />
                     </div>
                     {errorMsg.errorNickName && <p className={styles.errorMsg}>10자 이내로 입력해주세요.</p>}
                 </div>
-
                 <div className="d-flex flex-column">
                     <div className={styles.inputContent}>
                         <label className={styles.signupLabel}>생년월일</label>
-                        <input className={`${styles.input} ${styles.inputSize} ${styles.input.placeholder}`} type="number" name="userBirthday" placeholder="6자리(예시: 991225)" onChange={handleUserOnChange} min="0" max="999999"  />
+                        <input className={`${styles.input} ${styles.inputSize} ${styles.input.placeholder}`} type="number" name="userBirthday" placeholder="6자리(예시: 991225)" onChange={handleUserOnChange} min="0" max="999999" />
                     </div>
                     {errorMsg.errorBirthday && <p className={styles.errorMsg}>숫자 6자리를 입력해주세요.</p>}
                 </div>
-
                 <div className="d-flex flex-column">
                     <div className={styles.inputContent}>
                         <label className={styles.signupLabel}>휴대폰 번호</label>
                         <div className="d-flex col-md-auto">
-                            <input className={`${styles.input} ${styles.input2}`} type="number" name="userMbnum" placeholder="-없이 11자리 입력" onChange={handleUserOnChange} min="0" max="99999999999"  />
+                            <input className={`${styles.input} ${styles.input2}`} type="number" name="userMbnum" placeholder="-없이 11자리 입력" onChange={handleUserOnChange} min="0" max="99999999999" />
                             <button type="button" disabled={loading} className={`rounded-2 mt-2 ${styles.butterYellowAndBtn} ${styles.btnHover}`} data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample" onClick={handleOnClickMbnum}>인증번호받기</button>
                         </div>
                     </div>
                     {errorMsg.errorMbnum && <p className={styles.errorMsg}>-없이 숫자 11자리를 입력해주세요.</p>}
-
                     <div className="collapse" id="collapseExample">
-                        {/* <div className="d-flex col-md-auto justify-content-end"> */}
                         <div className="d-flex justify-content-between mt-3">
                             <label className={`${styles.confirm}`}>인증하기</label>
                             <div>
@@ -204,16 +186,14 @@ const Signup = () => {
                 <div className="d-flex flex-column">
                     <div className={`${styles.inputContent}`}>
                         <label className={styles.signupLabel}>비밀번호</label>
-                        <input className={`${styles.input} ${styles.inputSize}`} type="password" name="userPassword" placeholder="8~11자리 사이" onChange={handleUserOnChange} maxLength="20"  />
+                        <input className={`${styles.input} ${styles.inputSize}`} type="password" name="userPassword" placeholder="8~11자리 사이" onChange={handleUserOnChange} maxLength="20" />
                     </div>
                     {errorMsg.errorPassword && <p className={styles.errorMsg}>8~11자리 사이로 입력해주세요.</p>}
                 </div>
-
                 <div className={`d-flex ${styles.inputContent}`}>
                     <label className={styles.signupLabel}>비밀번호 확인</label>
-                    <input className={`${styles.input} ${styles.inputSize}`} type="password" name="userRePassword" placeholder="8~11자리 사이" onChange={handleUserOnChange} maxLength="20"  />
+                    <input className={`${styles.input} ${styles.inputSize}`} type="password" name="userRePassword" placeholder="8~11자리 사이" onChange={handleUserOnChange} maxLength="20" />
                 </div>
-
                 <button className={`rounded my-3 py-2 fs-5 ${styles.butterYellowAndBtn} ${styles.btnHover}`} type="submit" disabled={loading}>가입하기</button>
             </div>
         </form>

client/src/components/TheaterInfo.js

 import { useRef, useState, useEffect } from 'react'
-import axios from "axios"
+import cinemaApi from "../apis/cinema.api,js"
+import theaterApi from "../apis/theater.api.js"
 import catchErrors from "../utils/catchErrors"
-// import InfoModal from "./InfoModal"
+
 const { kakao } = window;
 const options = {
     center: new kakao.maps.LatLng(37.365264512305174, 127.10676860117488),
     level: 3
 };
+
 const TheaterInfo = () => {
     const container = useRef(null)
     const [cinemaInfo, setCinemaInfo] = useState()
@@ -23,33 +25,24 @@ const TheaterInfo = () => {
 
     useEffect(() => {
         if (currentInfo.title === "address") {
-            // 지도를 담을 영역의 DOM 레퍼런스
             const container = document.getElementById("map");
-            // center옵션은 지도를 생성하는데 반드시 필요하며 파라미터는 위경도좌표이다. (위도,경도 순서)
-            // level옵션은 지도의 확대, 축소 정도이다.
             const options = {
                 center: new kakao.maps.LatLng(33.450701, 126.570667),
                 level: 3,
             };
-            // 지도 생성 및 객체 리턴
             const map = new kakao.maps.Map(container, options);
             const geocoder = new kakao.maps.services.Geocoder();
-            // 주소로 좌표를 검색합니다
             geocoder.addressSearch(`${cinemaInfo.address}`, function (result, status) {
-                // 정상적으로 검색이 완료됐으면 
                 if (status === kakao.maps.services.Status.OK) {
                     const coords = new kakao.maps.LatLng(result[0].y, result[0].x);
-                    // 결과값으로 받은 위치를 마커로 표시합니다
                     const marker = new kakao.maps.Marker({
                         map: map,
                         position: coords
                     });
-                    // 인포윈도우로 장소에 대한 설명을 표시합니다
                     const infowindow = new kakao.maps.InfoWindow({
                         content: '<div style="color:black; width:150px;text-align:center;padding:6px 0;">Butter Studio</div>'
                     });
                     infowindow.open(map, marker);
-                    // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
                     map.setCenter(coords);
                 }
             });
@@ -58,8 +51,8 @@ const TheaterInfo = () => {
 
     async function getTheaterInfo() {
         try {
-            const response = await axios.get('/api/info/cinema')
-            const response2 = await axios.get('/api/theater')
+            const response = await cinemaApi.getCinemaInfo()
+            const response2 = await theaterApi.getAll()
             setCinemaInfo({ ...response.data, theaterNum: response2.data.length })
             setCurrentInfo({
                 name: "대중교통 안내",
@@ -79,13 +72,10 @@ const TheaterInfo = () => {
         })
     }
 
-
     return (
         <>
             {cinemaInfo ?
                 <div>
-                    {/* {console.log(currentInfo)} */}
-                    {console.log(cinemaInfo)}
                     <h2 className="m-5">{cinemaInfo.cinemaName}</h2>
                     <div className="my-3 text-center">
                         <img src="/images/movieTheater.jpg" style={{ width: "80%" }} />

client/src/components/TicketingMovie/TicketingMovie.js

-import React, { useState, useEffect } from 'react'
-import axios from 'axios'
+import { useState, useEffect } from 'react'
+import movieApi from '../../apis/movie.api'
+import catchErrors from '../../utils/catchErrors'
 import styles from "./ticketingMovie.module.scss"
 import movieApi from '../../apis/movie.api'
 import catchErrors from '../../utils/catchErrors'
 
-const TicketingMovie = ({ticketInfo, setTicketInfo}) => {
+const TicketingMovie = ({ ticketInfo, setTicketInfo }) => {
     const [movieList, setMovieList] = useState([])
     const [error, setError] = useState()
+
     useEffect(() => {
         getMovieList()
     }, [])
@@ -14,7 +16,6 @@ const TicketingMovie = ({ticketInfo, setTicketInfo}) => {
     async function getMovieList() {
         try {
             const response = await movieApi.getListByCategoryfromDB()
-            console.log(response)
             setMovieList(response)
         } catch (error) {
             catchErrors(error, setError)
@@ -22,22 +23,18 @@ const TicketingMovie = ({ticketInfo, setTicketInfo}) => {
     }
 
     function handleClick(event) {
-        console.log(event.target.name)
-        setTicketInfo({...ticketInfo, movieId: event.target.name })
+        setTicketInfo({ ...ticketInfo, movieId: event.target.name })
     }
 
     return (
-        <div >
-            {console.log(ticketInfo.movieId)}
-            <div className="d-grid gap-2">
-                {movieList.length > 0
-                    ? movieList.map(movie => (
-                        <button name={movie.id} className={`${ticketInfo.movieId == movie.id ? styles.on : styles.btn}`} onClick={handleClick}>
-                            {movie.title}
-                        </button>
-                    ))
-                    : <div>영화정보를 불러올 수 없습니다.</div>}
-            </div>
+        <div className="d-grid gap-2">
+            {movieList.length > 0
+                ? movieList.map(movie => (
+                    <button name={movie.id} className={`${ticketInfo.movieId == movie.id ? styles.on : styles.btn}`} onClick={handleClick}>
+                        {movie.title}
+                    </button>
+                ))
+                : <div>영화정보를 불러올 수 없습니다.</div>}
         </div>
     )
 }

client/src/components/TicketingTheater/TicketingTheater.js

 import styles from "./ticketingTheater.module.scss"
-const TicketingTheater = ({ticketInfo, cinemaInfo, setTicketInfo}) => {
+
+const TicketingTheater = ({ ticketInfo, cinemaInfo, setTicketInfo }) => {
 
     function handleClick(event) {
-        // event.preventDefault()
-        console.log(event.target.name)
         setTicketInfo({ ...ticketInfo, cinema: event.target.name })
     }
 
     return (
-        <div >
-            <div className="d-grid gap-2">
-                <button name={cinemaInfo.cinemaName} className={`${ticketInfo.cinema === cinemaInfo.cinemaName ? styles.on : styles.btn}`} onClick={handleClick}>{cinemaInfo.cinemaName}</button>
-            </div>
+        <div className="d-grid gap-2">
+            <button name={cinemaInfo.cinemaName} className={`${ticketInfo.cinema === cinemaInfo.cinemaName ? styles.on : styles.btn}`} onClick={handleClick}>{cinemaInfo.cinemaName}</button>
         </div>
     )
 }

client/src/components/TicketingTimeTable/TicketingTimeTable.js

-const TicketingTimeTable = ({ticketInfo}) => {
+const TicketingTimeTable = ({ ticketInfo }) => {
+
     return (
-        <div>
-            <div className="text-center" style={{color:"white"}}>
-                {console.log(ticketInfo.movieId, ticketInfo.cinema)}
-                {ticketInfo.movieId && ticketInfo.cinema
-                    ? <div>{ticketInfo.movieId} {ticketInfo.cinema}</div>
-                    : <div>영화와 극장을 모두 선택해주세요.</div>}
-            </div>
+        <div className="text-center" style={{ color: "white" }}>
+            {ticketInfo.movieId && ticketInfo.cinema
+                ? <div>{ticketInfo.movieId} {ticketInfo.cinema}</div>
+                : <div>영화와 극장을 모두 선택해주세요.</div>}
         </div>
     )
 }

client/src/components/Video.js

 import { useEffect, useState } from 'react'
 import movieApi from '../apis/movie.api.js'
-const Video = ({movieId}) => {
+import catchErrors from "../utils/catchErrors.js"
+
+const Video = ({ movieId }) => {
     const [videoUrls, setVideoUrls] = useState([])
+    const [error, setError] = useState("")
+
     useEffect(() => {
         getVideos()
     }, [])
@@ -11,9 +15,10 @@ const Video = ({movieId}) => {
             const data = await movieApi.getVideosfromTM(movieId)
             setVideoUrls(data)
         } catch (error) {
-            console.log(error)
+            catchErrors(error, setError)
         }
     }
+
     return (
         <div>
             {videoUrls.length > 0

client/src/context/auth_context.js

-import { createContext,  useCallback, useContext, useEffect, useState } from "react";
+import { createContext, useCallback, useContext, useEffect, useState } from "react";
 import authApi from "../apis/auth.api";
 import catchErrors from "../utils/catchErrors";
 
 const AuthContext = createContext({
     error: "",
     loading: false,
-    user: {id:0, role:"user"},
+    user: { id: 0, role: "user" },
     setUser: () => { },
     login: () => Promise.resolve(false),
     logout: () => { },
@@ -16,17 +16,17 @@ const AuthContext = createContext({
 const AuthProvider = ({ children }) => {
     const [error, setError] = useState("");
     const [loading, setLoading] = useState(false);
-    const [user, setUser] = useState({id:0, role:"user"});
+    const [user, setUser] = useState({ id: 0, role: "user" });
 
-    const getUser = async() => {
-        const {id, role} = await authApi.getUser();
-        const user = {"id" : id, "role" : role};
+    const getUser = async () => {
+        const { id, role } = await authApi.getUser();
+        const user = { "id": id, "role": role };
         setUser(user);
     };
 
     useEffect(() => {
         getUser();
-    },[]);
+    }, []);
 
     const login = useCallback(async (id, password) => {
         try {
@@ -34,7 +34,7 @@ const AuthProvider = ({ children }) => {
             setLoading(true);
             const user = await authApi.login(id, password);
             setUser(user);
-            return true
+            return true;
         } catch (error) {
             catchErrors(error, setError);
             return false;
@@ -82,7 +82,6 @@ const AuthProvider = ({ children }) => {
                 if (data.redirectUrl) {
                     errorMsg = data.message;
                     console.log("Error response with redirected message:", errorMsg);
-                    console.log("redirect url", data.redirectUrl);
                     return await logout();
                 }
             }
@@ -93,7 +92,6 @@ const AuthProvider = ({ children }) => {
             errorMsg = error.message;
             console.log("Error message:", errorMsg);
         }
-
         displayError(errorMsg);
     }, []);
 

client/src/pages/HomePage.js

@@ -18,7 +18,6 @@ const HomePage = () => {
         try {
             setError("")
             const data = await movieApi.getListByCategoryfromDB(category)
-            console.log("sdad==", data)
             data.sort(function (a, b) {
                 return b.popularity - a.popularity
             })
@@ -27,6 +26,7 @@ const HomePage = () => {
             catchErrors(error, setError)
         }
     }
+    
     return (
         <>
             <BoxOffice TMDB_TopRated_Data={TMDB_TopRated_Data}  />

client/src/pages/MovieListPage.js

@@ -9,18 +9,9 @@ const MovieListPage = () => {
         <div className="container">
             <div className="text-center my-5">
                 <button className="mx-auto" style={{ color: "white", borderColor: "black", backgroundColor: "black", borderBottom: !state ? "3px solid" : "none", borderBottomColor: !state ? "#FEDC00" : "black" }} type="button" onClick={() => setState(0)}>무비차트</button>
-
                 <button className="mx-auto" style={{ color: "white", borderColor: "black", backgroundColor: "black", borderBottom: !state ? "none" : "3px solid", borderBottomColor: !state ? "black" : "#FEDC00" }} type="button" onClick={() => setState(1)}>상영예정작</button>
-
-            </div>
-            <div>
-                {state === 0
-                    ?
-                    <MovieChart />
-                    :
-                    <MovieComing />
-                }
             </div>
+            <div>{state === 0 ? <MovieChart /> : <MovieComing />}</div>
         </div>
     )
 }

client/src/pages/MoviePage.js

 import { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
-import movieApi from '../apis/movie.api.js'
-import Video from '../components/Video.js'
+import Video from '../components/Video.js';
+import movieApi from '../apis/movie.api.js';
+import catchErrors from "../utils/catchErrors.js";
 
 const MoviePage = ({ location }) => {
     const [movieInfo, setMovieInfo] = useState({
         ...location.state,
         stillCuts: [],
         cast: [],
-        director: [],
-        // attendance: ""
+        director: []
     })
     const [state, setState] = useState(0)
+    const [error, setError] = useState("")
 
     useEffect(() => {
         getImagesAndCredits()
@@ -23,9 +24,7 @@ const MoviePage = ({ location }) => {
             const still = images.backdrops.map(el => el.file_path)
             const credits = await movieApi.getCreditsfromTM(movieInfo.id)
             const castsInfo = credits.cast.map(el => el.name)
-            console.log(castsInfo)
-            const directorsInfo = await credits.crew.filter(element => element.job === "Director").map(el=>el.name)
-            console.log("directorInfo=", directorsInfo)
+            const directorsInfo = await credits.crew.filter(element => element.job === "Director").map(el => el.name)
             setMovieInfo({
                 ...movieInfo,
                 stillCuts: still,
@@ -33,13 +32,12 @@ const MoviePage = ({ location }) => {
                 director: directorsInfo
             })
         } catch (error) {
-            console.log(error)
+            catchErrors(error, setError)
         }
     }
 
     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
@@ -68,12 +66,12 @@ const MoviePage = ({ location }) => {
                 </div>
                 <div className="col-sm-6" style={{ color: "white" }}>
                     <h1 className="pb-3">{movieInfo.title}</h1>
-                    <p>예매율:{Math.round((movieInfo.ticket_sales / (movieInfo.totalReservationRate.totalReservationRate||1)) * 100)}% 누적관객수: {movieInfo.ticket_sales}명</p>
+                    <p>예매율:{Math.round((movieInfo.ticket_sales / (movieInfo.totalReservationRate.totalReservationRate || 1)) * 100)}% 누적관객수: {movieInfo.ticket_sales}명</p>
                     {movieInfo.director || movieInfo.cast
                         ?
                         <>
-                            <p>감독: {movieInfo.director.map(el => el)+' '}</p>
-                            <p>출연: {movieInfo.cast.slice(0, 5).map(el => el)+' '}</p>
+                            <p>감독: {movieInfo.director.map(el => el) + ' '}</p>
+                            <p>출연: {movieInfo.cast.slice(0, 5).map(el => el) + ' '}</p>
                         </>
                         :
                         <></>
@@ -95,7 +93,7 @@ const MoviePage = ({ location }) => {
                     </div>
                 </div>
             </div>
-            <div className="">
+            <div>
                 <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>

client/src/pages/MyPage.js

-import MyInfo from "../components/MyInfo/MyInfo";
-import ReservationDetails from "../components/ReservationDetails/ReservationDetails";
+import MyInfo from "../components/MyInfo/MyInfo"
+import ReservationDetails from "../components/ReservationDetails/index.js";
 
 const MyPage = () => {
     return (

client/src/pages/PaymentCompletePage.js

 import axios from 'axios'
-import { useAuth } from '../context/auth_context'
 import { useEffect, useState } from 'react'
+import { useAuth } from '../context/auth_context'
 import catchErrors from '../utils/catchErrors'
 import reservationApi from '../apis/reservation.api'
 
-
 const PaymentCompletePage = () => {
     const { user } = useAuth()
     const [error, setError] = useState()
@@ -89,9 +88,7 @@ const PaymentCompletePage = () => {
         <div className="text-center">
             <h3>예매가 정상적으로 완료되었습니다.</h3>
             <button>홈으로</button>
-            {
-                user.role === "member" ? <button>마이페이지</button> : <></>
-            }
+            {user.role === "member" ? <button>마이페이지</button> : <></>}
         </div>
     )
 }

client/src/pages/PaymentPage/PaymentPage.js

 import axios from 'axios'
 import { useEffect, useState } from 'react'
-import { useHistory } from 'react-router-dom'
 import authApi from '../../apis/auth.api'
 import reservationApi from '../../apis/reservation.api'
 import { useAuth } from '../../context/auth_context'
@@ -8,7 +7,6 @@ import catchErrors from '../../utils/catchErrors'
 import styles from './PaymentPage.module.scss'
 
 const Payment = ({ location }) => {
-    const history = useHistory();
     const { user } = useAuth()
     const [guestInfo, setGuestInfo] = useState({})
     const [guestID, setGuestID] = useState()
@@ -23,7 +21,6 @@ const Payment = ({ location }) => {
     const [error, setError] = useState("")
 
     useEffect(() => {
-        console.log(user.id)
         if (user.role === "member") {
             getUserInfo()
         }
@@ -31,10 +28,10 @@ const Payment = ({ location }) => {
 
     async function getUserInfo() {
         try {
+            setError("")
             const response = await axios.post(`/api/auth/getuserinfo`, {
                 id: user.id
             })
-            console.log(response.data)
             setUserInfo(response.data)
         } catch (error) {
             catchErrors(error, setError)
@@ -47,11 +44,12 @@ const Payment = ({ location }) => {
 
     async function handleClickGuest() {
         try {
-            const response = await authApi.saveGuestInfo({
+            setError("")
+            const response = await axios.post('/api/auth/guest/save', {
                 ...guestInfo
-            });
-            setGuestID(response.id);
-            alert("비회원 정보가 저장되었습니다.");
+            })
+            setGuestID(response.data.id)
+            alert("비회원 정보가 저장되었습니다.")
         } catch (error) {
             catchErrors(error, setError)
         }
@@ -69,6 +67,7 @@ const Payment = ({ location }) => {
 
     async function reservationComplete() {
         try {
+            setError("")
             if (user.role === "member") {
                 const response = await reservationApi.save({
                     userType: "member",
@@ -130,9 +129,6 @@ const Payment = ({ location }) => {
 
     return (
         <div className="container" style={{ color: "white" }}>
-            {console.log(ticketInfo)}
-            {/* {console.log(userInfo)} */}
-            {/* {console.log(guestInfo)} */}
             <div className="row justify-content-center my-5">
                 <div className="col-sm-4 ">
                     <h3 className="py-2 text-white text-center" style={{ border: "3px solid #000000", borderBottom: "3px solid #FEDC00" }}>결제하기</h3>

client/src/pages/PaymentPage/PaymentPage.module.scss

@@ -5,6 +5,6 @@
     margin-right: 1rem;
 }
 
-.warningText{
+.warningText {
     font-size: small;
 }
\ No newline at end of file