Skip to content

GitLab

Commit 31cef7c3 authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

Merge branch 'kimpen'

parents 53792c65 ba5429cf
Show whitespace changes
Inline Side-by-side
client/src/App.js
View file @ 31cef7c3
......@@ -24,10 +24,8 @@ function App() {
<AuthProvider>
<Router>
<Switch>
<>
<Route path="/admin" component={AdminPage} />
<div style={{ backgroundColor: "black" }}>
<Router>
<SubNav />
<Header />
<MainNav />
......@@ -38,17 +36,15 @@ function App() {
<Route path="/movielist" component={MovieListPage} />
<Route path="/movie/:movieId" component={MoviePage} />
<Route path="/mypage" component={MyPage} />
<Route path="/guest" component={GuestPage} />
<Route path="/ticket/seat" component={TicketingSeatPage} />
<Route path="/guest" component={GuestPage}/>
<Route path="/ticket/seat" component={TicketingSeatPage}/>
<Route path="/ticket" component={TicketingPage} />
<Route path="/payment" component={Payment} />
<Route path="/paymentcomplete" component={PaymentCompletePage} />
<Route path="/theater" component={TheaterPage}/>
<Route path="/search" component={SearchPage} />
</Switch>
</Router>
</div>
</>
</Switch>
</Router>
</AuthProvider>
......
client/src/apis/movie.api.js
View file @ 31cef7c3
import axios from "axios";
import { baseUrl, TMDBUrl } from "../utils/baseUrl.js";
const getAllfromTM = async () => {
const getAllfromTM = async (pageNum) => {
const payload = {
params: {
pageNum: 1
pageNum
}
}
const { data } = await axios.get(`${baseUrl}/api/movie/all`, payload)
return data
}
const getMovieIdfromTM = async (movieId) => {
const { data } = await axios.get(`${baseUrl}/api/movie/${movieId}`)
return 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`)
......@@ -42,10 +39,12 @@ const getListfromDB = async () => {
const { data } = await axios.get(`${baseUrl}/api/movie`)
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
......@@ -56,10 +55,11 @@ const remove = async (movieId) => {
return data
}
const search = async ({ type, keyword }) => {
const search = async ({ type, keyword }, pageNum) => {
const payload = {
params: {
keyword
keyword,
pageNum
}
}
const { data } = await axios.get(`${baseUrl}/api/movie/search/${type}`, payload)
......@@ -74,7 +74,6 @@ const movieApi = {
getCreditsfromTM,
getVideosfromTM,
getListfromDB,
getMovieIdfromTM,
submit,
remove,
search,
......
client/src/components/Admin/CinemaEdit.js
View file @ 31cef7c3
......@@ -2,6 +2,7 @@ import { useState, useEffect, useRef } from "react";
import TicketEditForm from "./TicketEditForm.js";
import TicketFeeTable from "./TicketFeeTable.js";
import cinemaApi from "../../apis/cinema.api.js";
import theaterApi from "../../apis/theater.api.js";
import catchErrors from "../../utils/catchErrors.js";
import styles from "./admin.module.scss";
......@@ -15,12 +16,15 @@ const INIT_CINEMAINFO = {
const CinemaEdit = () => {
const [cinemaInfo, setCinemaInfo] = useState(INIT_CINEMAINFO)
const [theaterTypeList, setTheaterTypeList] = useState([])
const [selectTheater, setSelectTheater] = useState(0)
const [ticketFee, setTicketFee] = useState({})
const [error, setError] = useState("")
const formRef = useRef(null)
useEffect(() => {
getInfo()
getTicketFeeInfo()
}, [])
function handleChange(e) {
......@@ -49,6 +53,15 @@ const CinemaEdit = () => {
}
}
async function getTicketFeeInfo() {
try {
const res = await theaterApi.getTheaterType()
setTheaterTypeList(res)
} catch (error) {
catchErrors(error, setError)
}
}
return (
<>
<h2 className="border-bottom border-2 text-center pb-2 me-2">현재 영화관 정보</h2>
......@@ -73,7 +86,14 @@ const CinemaEdit = () => {
<p className="mb-0">영화관람료 설정</p>
<p className="text-danger">*추가금액 정보를 입력바랍니다. 필요에 따라 기본가격 또한 변경 가능합니다.</p>
<TicketEditForm editFee={ticketFee} formRef={formRef} />
<TicketFeeTable setEditFee={setTicketFee} formRef={formRef} />
<label className="form-label">영화관람료 안내</label>
<nav aria-label="breadcrumb">
<ol className={"breadcrumb" + (theaterTypeList.length === 0 ? " d-flex justify-content-center" : "" )}>
{theaterTypeList.length !== 0 ? theaterTypeList.map(theater => <li className={`breadcrumb-item ${styles.cursor}`} key={theater.id} onClick={() => setSelectTheater(theater.id)}>{theater.theaterTypeName}</li>)
: <li>등록된 관람료 관련 정보가 없습니다.</li>}
</ol>
</nav>
<TicketFeeTable selectTheater={selectTheater} setEditFee={setTicketFee} formRef={formRef} />
<div className="mb-3">
<label htmlfor="moreFeeInfo" className="form-label">관람료 추가정보</label>
<textarea className={`form-control ${styles.shadowNone} ${styles.textarea}`} rows="7" id="moreFeeInfo" name="moreFeeInfo" value={cinemaInfo.moreFeeInfo} onChange={handleChange}></textarea>
......
client/src/components/Admin/MovieEdit.js
View file @ 31cef7c3
......@@ -8,39 +8,53 @@ import catchErrors from "../../utils/catchErrors.js";
const MovieEdit = () => {
const [search, setSearch] = useState({ type: "admin", keyword: "" })
const [movieList, setMovieList] = useState([])
const [totalPages, setTotalPages] = useState(0)
const [activePage, setActivePage] = useState(1)
const [error, setError] = useState("")
useEffect(() => {
getMovieList()
paginate(activePage)
}, [])
async function getMovieList() {
async function paginate(pageNum) {
try {
setError("")
const getMovieList = await movieApi.getAllfromTM()
setMovieList(getMovieList)
const { TMDBmovies, totalPage } = (search.keyword !== '') ? await movieApi.search(search, pageNum) : await movieApi.getAllfromTM(pageNum)
setActivePage(pageNum)
setTotalPages(totalPage)
setMovieList(TMDBmovies)
} catch (error) {
catchErrors(error, setError)
catchErrors(error, setError);
}
}
async function searchMovie() {
try {
setError("")
const findMovie = await movieApi.search(search)
setMovieList(findMovie)
} catch (error) {
catchErrors(error, setError)
const prevPage = () => {
if (activePage > 1) {
paginate(activePage - 1)
} else {
paginate(1);
}
};
const nextPage = () => {
if (activePage < totalPages) {
paginate(activePage + 1)
} else {
paginate(totalPages);
}
};
return (
<>
<div className="d-flex justify-content-md-end justify-content-center mb-3">
<Search search={search} setSearch={setSearch} handleClick={searchMovie} />
<Search search={search} setSearch={setSearch} handleClick={paginate} />
</div>
<MovieTable movieList={movieList} />
<Pagination />
<Pagination
totalPages={totalPages}
activePage={activePage}
prevPage={prevPage}
nextPage={nextPage}
paginate={paginate} />
</>
)
}
......
client/src/components/Admin/TicketFeeTable.js
View file @ 31cef7c3
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 { useAuth } from '../../context/auth_context';
import styles from "./admin.module.scss";
const TicketFeeTable = ({ setEditFee, formRef }) => {
const TicketFeeTable = ({ selectTheater, setEditFee, formRef }) => {
const [ticketFee, setTicketFee] = useState([])
const [error, setError] = useState("")
const { user } = useAuth()
useEffect(() => {
getInfo()
}, [])
if (selectTheater !== 0) getOne(selectTheater)
}, [selectTheater])
async function getInfo() {
async function getOne(theatertypeId) {
try {
const res = await cinemaApi.getTicketFee()
setTicketFee(res)
setError("")
const res = await cinemaApi.getTicketFeeOne(theatertypeId)
setTicketFee([res])
} catch (error) {
catchErrors(error, setError)
}
......@@ -40,7 +40,7 @@ const TicketFeeTable = ({ setEditFee, formRef }) => {
setError("")
await cinemaApi.removeTicketFee(theatertypeId)
alert("해당 관람료 정보를 성공적으로 삭제했습니다.")
getInfo()
window.location.reload()
} catch (error) {
catchErrors(error, setError)
}
......@@ -51,8 +51,7 @@ const TicketFeeTable = ({ setEditFee, formRef }) => {
}
return (
<table style={{ color: user.role==="admin"?"":"white" }} className={`table caption-top text-center align-middle ${styles.tableForm}`}>
<caption className="text-dark">영화관람료 안내</caption>
<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>
......@@ -61,10 +60,7 @@ const TicketFeeTable = ({ setEditFee, formRef }) => {
<th>청소년</th>
<th>일반</th>
<th>경로</th>
{user.role === "admin"
?
<th style={{ width: "14%" }}></th>
: <></>}
{user.role === "admin" ? <th style={{ width: "14%" }}></th> : <></>}
</tr>
</thead>
<tbody>
......@@ -129,7 +125,7 @@ const TicketFeeTable = ({ setEditFee, formRef }) => {
</tr>
</>)
: <tr>
<td colSpan="7">등록된 관람료 관련 정보가 없습니다.</td>
<td colSpan="7">상단의 상영관을 선택해주십시오.</td>
</tr>}
</tbody>
</table>
......
client/src/components/Admin/TimeTable.js
View file @ 31cef7c3
......@@ -43,7 +43,7 @@ const TimeTable = () => {
<h5 className="mb-0">{el.theaterName} 관 / <p className="d-inline fs-6 mb-0">{el.theatertype.theaterTypeName}</p></h5>
{el.timetable.map(time => <div className="d-inline-flex flex-column m-2">
<div className="d-flex justify-content-end">
<button type="button" className={`btn btn-dark btn-sm ${styles.customBtn}`} onClick={() => deleteTime(time.id)}>X</button>
<button type="button" className={`btn btn-dark btn-sm shadow-none ${styles.customBtn}`} onClick={() => deleteTime(time.id)}>X</button>
</div>
<div className="card">
<div className="card-body py-1">{moment(time.start_time).format('HH:mm')} ~ {moment(time.end_time).format('HH:mm')}</div>
......
client/src/components/Admin/TimeTableEditForm.js
View file @ 31cef7c3
......@@ -146,7 +146,7 @@ const TimeTableEditForm = () => {
}
return (
<form className="col-12 col-lg-6 me-lg-1" onSubmit={handleSubmit}>
<form className="col-12 col-lg-6 me-lg-1 mb-5 mb-lg-0" onSubmit={handleSubmit}>
<h5 className={`border-top border-dark border-2 pt-3 mb-3 ${styles.borderLg}`}>상영시간표 등록</h5>
<select className={`form-select mb-3 ${styles.shadowNone} ${styles.selectInput}`} id="movieId" name="movieId" value={selectId} onChange={handleChange} aria-label="select movie" defaultValue="0">
{movieList.length !== 0 ?
......
client/src/components/Admin/admin.module.scss
View file @ 31cef7c3
......@@ -68,6 +68,10 @@
}
}
.cursor {
cursor: pointer;
}
.textarea {
resize: none;
}
......
client/src/components/BoxOffice/BoxOffice.js
View file @ 31cef7c3
......@@ -36,3 +36,151 @@ const BoxOffice = ({TMDB_TopRated_Data}) => {
}
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/Calender/DatePicker.js 0 → 100644
View file @ 31cef7c3
import { useState, useEffect } from "react";
import moment from "moment";
import styles from "./calender.module.scss";
const DatePicker = ({ selectDate, setSelectDate, month }) => {
const [week, setWeek] = useState([])
useEffect(() => {
generate()
}, [month])
function generate() {
const weekly = []
const startWeek = moment(month.cur).startOf('month').week()
const endWeek = moment(month.cur).endOf('month').week() === 1 ? 53 : moment(month.cur).endOf('month').week()
for (let week = startWeek; week <= endWeek; week++) {
weekly.push(<tr key={week}>{
Array(7).fill(0).map((n, i) => {
let current = moment(month.cur).clone().week(week).startOf('week').add(n + i, 'day')
let isSelected = moment(selectDate).format('YYYYMMDD') === current.format('YYYYMMDD') ? `${styles.selectDate}` : ''
let isColor = current.format('MM') !== moment(month.cur).format('MM') ? 'text-secondary ' : ((i === 0) ? "text-danger" : (i === 6) ? "text-primary" : "")
return <td className={`text-center p-1 ${styles.cursor}`} key={i} data-bs-dismiss="modal" onClick={() => setSelectDate(current.format('YYYY-MM-DD'))}>
<span className={`d-block ${isColor} ${isSelected}`}>{current.format('D')}</span>
</td>
})}</tr>)
}
setWeek(weekly)
}
return (
<tbody>{week.length !== 0 ? week.map(row => row) : ''}</tbody>
)
}
export default DatePicker
\ No newline at end of file
client/src/components/Calender/HorizontalCalender.js
View file @ 31cef7c3
import { useState, useEffect } from "react";
import moment from "moment";
import DatePicker from "./DatePicker.js";
import styles from "./calender.module.scss";
const Calender = ({ selectDate, setSelectDate }) => {
const [dateList, setDateList] = useState([])
const [dateArr, setDateArr] = useState([])
const [weekly, setWeekly] = useState([])
const [week, setWeek] = useState(["일", "월", "화", "수", "목", "금", "토"])
const [month, setMonth] = useState({ pre: moment(selectDate).subtract(1, 'months').format('YYYY-MM'), cur: moment(selectDate).format('YYYY-MM'), next: moment(selectDate).add(1, 'months').format('YYYY-MM') })
useEffect(() => {
setMonth({ ...month, pre: moment(selectDate).subtract(1, 'months').format('YYYY-MM'), cur: moment(selectDate).format('YYYY-MM'), next: moment(selectDate).add(1, 'months').format('YYYY-MM') })
getDate(selectDate)
}, [])
getWeek(selectDate)
}, [selectDate])
function getWeek(oneDay) {
let dateArr = []
dateArr = Array(7).fill(0).map((n, i) => {
let current = moment(oneDay).add((n + i), 'days')
return <div className="col-auto align-self-end text-center" onClick={() => setSelectDate(current)}>
{current.isSame(oneDay) || current.format("DD") === "01" ? <strong className={styles.yearmonth}>{current.format('YYYY.MM')}</strong> : ""}
<div className={`d-flex flex-column ${styles.cursor} ` + ((current.format("d") === "0" || current.format("d") === "6") ? ((current.format("d") === "0") ? "text-danger" : "text-primary") : "")}>
<strong className={current.isSame(oneDay) ? styles.selectDate : ""}>{current.format('DD')}</strong>
<strong>{current.isSame(oneDay) ? "오늘" : week[Number(current.format("d"))]}</strong>
</div>
</div>
})
console.log("Dadsa--===", dateArr)
setWeekly(dateArr)
}
function getDate(oneDay) {
let dateArr = []
......@@ -20,7 +42,7 @@ const Calender = ({ selectDate, setSelectDate }) => {
}
const resultArr = dateArr.map(el => <div className="col-2 align-self-end text-center" onClick={() => setSelectDate(el.date)}>
{moment(el.date).isSame(oneDay) || el.date.split('-')[2] === "01" ? <strong className={styles.yearmonth}>{moment(el.date).format('YYYY.MM')}</strong> : ""}
<div className={"d-flex flex-column " + ((Number(el.day) === 0 || Number(el.day) === 6) ? ((Number(el.day) === 0) ? "text-danger" : "text-primary") : "")}>
<div className={`d-flex flex-column ${styles.cursor} ` + ((Number(el.day) === 0 || Number(el.day) === 6) ? ((Number(el.day) === 0) ? "text-danger" : "text-primary") : "")}>
<strong className={moment(el.date).isSame(oneDay) ? styles.selectDate : ""}>{moment(el.date).format('DD')}</strong>
<strong>{moment(el.date).isSame(oneDay) ? "오늘" : week[el.day]}</strong>
</div>
......@@ -28,14 +50,58 @@ const Calender = ({ selectDate, setSelectDate }) => {
setDateList(resultArr)
}
function preWeek() {
// let dateArr = []
// dateArr = Array(7).fill(0).map((n, i) => {
// let current = moment(oneDay).add((n + i), 'days')
// return <div className="col-auto align-self-end text-center" onClick={() => setSelectDate(current)}>
// {current.isSame(oneDay) || current.format("DD") === "01" ? <strong className={styles.yearmonth}>{current.format('YYYY.MM')}</strong> : ""}
// <div className={`d-flex flex-column ${styles.cursor} ` + ((current.format("d") === "0" || current.format("d") === "6") ? ((current.format("d") === "0") ? "text-danger" : "text-primary") : "")}>
// <strong className={current.isSame(oneDay) ? styles.selectDate : ""}>{current.format('DD')}</strong>
// <strong>{current.isSame(oneDay) ? "오늘" : week[Number(current.format("d"))]}</strong>
// </div>
// </div>
// })
// console.log("Dadsa--===", dateArr)
// setWeekly(dateArr)
}
function nextWeek() {
}
return (
<>
{console.log("date==", selectDate)}
<div className="d-flex position-relative border-bottom border-dark border-2 p-3">
<i className={`bi bi-calendar2 position-absolute top-0 ${styles.calender}`}></i>
<i className="col-1 bi bi-chevron-left align-self-center text-center"></i>
<div className={`d-flex col-10 ${styles.box}`}>{dateList.map(el => el)}</div>
<i className="col-1 bi bi-chevron-right align-self-center text-center"></i>
<i className={`bi bi-calendar2 position-absolute top-0 ${styles.calender} ${styles.cursor}`} data-bs-toggle="modal" data-bs-target="#calenderModal"></i>
<div className="modal" id="calenderModal" tabindex="-1" aria-labelledby="calenderModal" aria-hidden="true">
<div className={`modal-dialog position-absolute bg-white ${styles.datepicker}`}>
<div className="modal-content">
<div className="modal-body px-1 pt-1 pb-0">
<div className="d-flex justify-content-between bg-dark rounded py-1">
<i className={`bi bi-chevron-left align-self-center text-center text-white ${styles.cursor}`} onClick={() => setMonth({ ...month, pre: moment(month.pre).subtract(1, 'months').format('YYYY-MM'), cur: month.pre, next: month.cur })}></i>
<div className="text-white">{moment(month.cur).format('YYYY년 MM월')}</div>
<i className={`bi bi-chevron-right align-self-center text-center text-white ${styles.cursor}`} onClick={() => setMonth({ ...month, pre: month.cur, cur: month.next, next: moment(month.next).add(1, 'months').format('YYYY-MM') })}></i>
</div>
<table className="table mb-0">
<thead>
<tr>{week.map(day => <th>{day}</th>)}</tr>
</thead>
<DatePicker selectDate={selectDate} setSelectDate={setSelectDate} month={month} />
<tfoot>
<tr>
<td colSpan="7" align="center"><button type="button" className={`btn btn-dark btn-sm shadow-none ${styles.customBtn}`} data-bs-dismiss="modal" onClick={() => setSelectDate(moment().format('YYYY-MM-DD'))}>오늘</button></td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
<i className={`col-1 bi bi-chevron-left align-self-center text-center ${styles.cursor}`} onClick={preWeek}></i>
<div className={`d-flex justify-content-between col-10 ${styles.box}`}>{weekly.map(el => el)}</div>
<i className={`col-1 bi bi-chevron-right align-self-center text-center ${styles.cursor}`} onClick={nextWeek}></i>
</div>
</>
)
......
client/src/components/Calender/calender.module.scss
View file @ 31cef7c3
......@@ -7,15 +7,32 @@
width: 100%;
font-size: 10px;
}
& .selectDate {
background-color: #000;
color: #fff;
border-radius: 50%;
}
}
.calender {
right: 13px;
font-size: 1.5em;
}
.datepicker {
top: 92px;
right: 12px;
& .customBtn {
&:hover {
border-color: #FEDC00;
background-color: #FEDC00;
color: #000;
}
}
}
.cursor {
cursor: pointer;
}
.selectDate {
background-color: #000;
color: #fff;
border-radius: 50%;
}
\ No newline at end of file
client/src/components/Collection.js
View file @ 31cef7c3
......@@ -8,7 +8,6 @@ const Collection = ({ TMDB_TopRated_Data }) => {
useEffect(() => {
if (TMDB_TopRated_Data.length > 0) {
console.log("야이쒸===", TMDB_TopRated_Data)
getVideos()
}
}, [TMDB_TopRated_Data])
......@@ -18,8 +17,7 @@ const Collection = ({ TMDB_TopRated_Data }) => {
const data = await movieApi.getVideosfromTM(TMDB_TopRated_Data[0].id)
setVideoUrls(data)
} catch (error) {
// catchErrors(error, setError)
console.log(error)
catchErrors(error, setError)
}
}
return (
......
client/src/components/CountButton.js
View file @ 31cef7c3
......@@ -9,6 +9,7 @@ const CountButton = ({name, count, setCount}) => {
}
}
return (
<>
<button type="button" name="backbutton" style={{ backgroundColor: "black", border: "0" }} onClick={handleCount}>
......
client/src/components/Login/Login.js
View file @ 31cef7c3
import { useState } from "react";
import styles from "./login.module.scss";
import { Redirect } from "react-router-dom";
import catchErrors from "../../utils/catchErrors";
import { useAuth } from "../../context/auth_context.js";
import catchErrors from "../../utils/catchErrors";
import styles from "./login.module.scss";
const Login = () => {
const { login, guestLogin, loading } = useAuth();
......@@ -15,7 +15,6 @@ const Login = () => {
});
const [error, setError] = useState("");
const [success, setSuccess] = useState(false);
const [guest, setGuset] = useState({
guestName: "",
guestEmail: "",
......@@ -24,10 +23,7 @@ const Login = () => {
guestPassword: ""
})
//input태그에 걸려있는 onchange에서 실행할 함수설정
const handleLoginOnChange = (e) => {
// ... 전개 연산자
// 현재 state에 방금 변화한 값을 다시 저장함
setUser({
...user,
[e.target.name]: e.target.value
......@@ -55,7 +51,6 @@ const Login = () => {
setSuccess("guest");
alert('로그인이 완료되었습니다.')
}
}
} catch (error) {
catchErrors(error, setError);
......@@ -99,7 +94,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"/>
......@@ -108,7 +102,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="10"/>
......
client/src/components/MovieChart.js
View file @ 31cef7c3
......@@ -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("")
......@@ -17,7 +16,6 @@ const MovieChart = () => {
try {
setError("")
const data = await movieApi.getListByCategoryfromDB(category)
console.log("sdad==", data)
setTMDB_TopRated_Data([...data])
} catch (error) {
catchErrors(error, setError)
......
client/src/components/MovieComing.js
View file @ 31cef7c3
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/movie-card.module.scss'
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([])
......@@ -29,7 +28,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={{
......
client/src/components/MyInfo/MyInfo.js
View file @ 31cef7c3
import styles from "./my-info.module.scss";
import { useState, useEffect } from "react";
import authApi from "../../apis/auth.api";
import catchErrors from "../../utils/catchErrors.js";
import styles from "./my-info.module.scss";
const MyInfo = () => {
const [userNickName, setUserNickName] = useState("사용자");
const [img, setImg] = useState("");
const [profile, setProfile] = useState("");
const [startTime, setStartTime] = useState("");
// 사용자 이름 가져오는 함수
const getMember = async () => {
const member = await authApi.getMember();
setUserNickName(member.nickname);
setProfile(member.img);
}
const [page, setPage] = useState(true);
//현재 비밀번호 state
const [presentPw, setPresentPw] = useState("");
const [loading, setLoading] = useState(false);
//변경할 데이터 입력받는 state
const [userRe, setUserRe] = useState({
userName: "",
userEmail: "",
......@@ -32,9 +21,7 @@ const MyInfo = () => {
})
const [confirmMb, setConfirmMb] = useState(false);
const [number, setNumber] = useState(null);
//각 타입별 error 유무 state
const [mbError,setMbError] = useState(false);
const [mbError, setMbError] = useState(false);
const [error, setError] = useState("");
const [errorMsg, setErrorMsg] = useState({
errorName: false,
......@@ -48,11 +35,16 @@ const MyInfo = () => {
getMember();
}, [])
const getMember = async () => {
const member = await authApi.getMember();
setUserNickName(member.nickname);
setProfile(member.img);
}
const handlePwOnChange = (e) => {
setPresentPw(e.target.value)
}
//입력할때마다 state에 저장
const handleUserOnChange = (e) => {
setUserRe({
...userRe,
......@@ -87,16 +79,13 @@ const MyInfo = () => {
catchErrors(error, setError);
}
}
//기존 비밀번호 확인
const handleOnSummitVerify = async (e) => {
e.preventDefault();
try {
setError("");
setLoading(true);
const pw = presentPw;
console.log(pw);
const confirmPw = await authApi.comparePw(pw);
console.log("confirmPw : ", confirmPw);
if (confirmPw) {
setPage(false);
setPresentPw("");
......@@ -118,14 +107,13 @@ const MyInfo = () => {
setLoading(true);
const phone = userRe.userMbnum;
const message = await authApi.confirmMbnum(phone);
if(message.isSuccess){
if (message.isSuccess) {
setMbError("보냄");
setStartTime(message.startTime);
}
} catch (error) {
console.log('error'+ error)
}finally {
catchErrors(error, setError);
} finally {
setLoading(false);
}
}
......@@ -139,60 +127,58 @@ const MyInfo = () => {
try {
setError("");
setLoading(true);
const confirmNum = {userMbnum : userRe.userMbnum, number : number, startTime : startTime};
const confirmNum = { userMbnum: userRe.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(userRe.userPassword !== userRe.userRePassword){
return false;
}else{return true;}
if (userRe.userPassword !== userRe.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 = userRe;
//서버로 전송
const error = await authApi.modifyUser(userData);
if(error === "성공"){
if (error === "성공") {
alert("회원정보수정에 성공하였습니다.")
}else{
} else {
setErrorMsg(error);
alert("형식에 맞게 다시 작성해주세요");
}
}else{
} else {
throw new Error("비밀번호가 일치하지 않습니다.");
}
}else{
} else {
throw new Error("핸드폰 번호를 인증해주세요.");
}
} catch (error) {
//에러전송
catchErrors(error, setError);
} finally {
setLoading(false);
}
}
const handleOnclickOut = (e) => {
setConfirmMb(false);
}
const handleOnClick = (e) => {
e.preventDefault();
handleOnclickOut(e);
......@@ -201,7 +187,6 @@ const MyInfo = () => {
return (
<>
{/* 마이페이지 창 */}
<div className={`${styles.main}`}>
<span className={styles.title}>마이페이지</span>
<div className={`d-flex justify-content-around`}>
......@@ -215,7 +200,6 @@ const MyInfo = () => {
</div>
</div>
</div>
{/* 프로필 변경 모달창 */}
<div className="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabIndex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div className="modal-dialog modal-dialog-centered">
<form className="modal-content" onSubmit={handleOnSummitForm}>
......@@ -233,12 +217,10 @@ const MyInfo = () => {
</form>
</div>
</div>
{/* 기존 비밀번호 확인 모달창 */}
<div className="modal fade" id="verifyPassword" data-bs-backdrop="static" data-bs-keyboard="false" aria-hidden="true" aria-labelledby="verifyPasswordLabel" tabIndex="-1">
<div className="modal-dialog modal-dialog-centered modal-dialog-centered">
{page ?
<><form className="modal-content" onSubmit={handleOnSummitVerify}>
<form className="modal-content" onSubmit={handleOnSummitVerify}>
<div className="modal-header">
<h5 className="modal-title" id="verifyPasswordLabel">기존 비밀번호 확인</h5>
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close" onClick={handleOnClick}></button>
......@@ -254,8 +236,8 @@ const MyInfo = () => {
<div className="modal-footer">
<button type="submit" className={`rounded my-3 fs-5 ${styles.butterYellowAndBtn} ${styles.btnHover}`} disabled={loading}>확인</button>
</div>
</form></>
: <><form className={`modal-content d-flex col-md-6 col-12 justify-content-center d-flex flex-column`} onSubmit={handleOnSummit}>
</form>
: <form className={`modal-content d-flex col-md-6 col-12 justify-content-center d-flex flex-column`} onSubmit={handleOnSummit}>
<div className="modal-header">
<h5 className="modal-title" id="modifyLabel">회원정보 수정</h5>
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close" onClick={handleOnClick}></button>
......@@ -293,7 +275,6 @@ const MyInfo = () => {
</div>
{errorMsg.errorMbnum && <p className={styles.passwordConfirmError}>-없이 숫자 11자리를 입력해주세요.</p>}
<div className="collapse" id="collapseExample">
{/* <div className="d-flex col-md-auto justify-content-end"> */}
<div className="d-flex justify-content-around mt-3">
<label className={`${styles.confirm}`}>인증하기</label>
<div>
......@@ -331,7 +312,7 @@ const MyInfo = () => {
<button type="button" className="btn btn-secondary rounded my-3 py-2 fs-5" data-bs-dismiss="modal" onClick={handleOnClick} disabled={loading}>닫기</button>
<button type="submit" className={`rounded my-3 py-2 fs-5 ${styles.butterYellowAndBtn} ${styles.btnHover}`} disabled={loading}>수정하기</button>
</div>
</form></>}
</form>}
</div>
</div>
</>
......
client/src/components/MyInfo/my-info.module.scss
View file @ 31cef7c3
.main{
.main {
display: flex;
flex-direction: column;
align-items: center;
......@@ -6,7 +6,7 @@
width: 100%;
}
.title{
.title {
display: flex;
justify-content: center;
color: #FEDC00;
......@@ -14,7 +14,7 @@
margin: 2rem 0;
}
.confirm{
.confirm {
color: black;
padding-right: 8px;
text-align: center;
......@@ -25,107 +25,116 @@
.input2 {
width: 9.01rem;
}
.userName{
.userName {
color: white;
font-size: 1.5rem;
}
}
.contents{
.contents {
display: flex;
width: 100%;
justify-content: spa;
align-items: center;
padding-top: 5px;
}
}
.signupLabel{
.signupLabel {
color: black;
padding-right: 8px;
text-align: left;
}
.input_file_button{
}
.input_file_button {
padding: 6px 25px;
background-color:#FF6600;
background-color: #FF6600;
border-radius: 4px;
color: white;
cursor: pointer;
}
.inputContent{
}
.inputContent {
display: flex;
justify-content: space-around;
align-items: center;
margin: 1rem 0;
}
.box{
width:12rem;
}
.box {
width: 12rem;
margin: 0px 3rem;
position: relative;
display: flex;
align-items: center;
}
.box:hover{
&:hover {
display: block;
}
.hoverTxt{
}
.hoverTxt {
display: none;
position:absolute;
top:4rem;
left:1.6rem;
color : #FEDC00;
position: absolute;
top: 4rem;
left: 1.6rem;
color: #FEDC00;
font-size: 1.5rem;
}
.box:hover .hoverTxt{
.box:hover .hoverTxt {
display: block;
}
.profile{
.profile {
width: 10rem;
height: 10rem;
}
.profile:hover{
&:hover {
opacity: 0.5;
}
}
.input {
.input {
margin: 0.5rem 0 0 0;
padding: 0.5rem 0 0.5rem 0;
border-radius: 3px;
text-align: center;
}
}
input[type=password]{
input[type=password] {
font-family: 'Courier New', Courier, monospace;
}
}
input::placeholder{
input::placeholder {
font-family: 'HangeulNuriB'
}
}
.inputSize{
.inputSize {
width: 15.3rem;
}
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
}
.butterYellowAndBtn{
.butterYellowAndBtn {
color: black;
font-size: 1rem;
background-color: #FEDC00;
border: 1px solid black;
text-align: center;
}
}
.btnHover:hover{
.btnHover:hover {
background-color: black;
color: #FEDC00;
transition: ease-out;
border: 1px solid #FEDC00 ;
border: 1px solid #FEDC00;
text-align: center;
}
}
.passwordConfirmError{
.passwordConfirmError {
margin-bottom: 0;
margin-top: 0.5rem;
margin-right: 3rem;
......@@ -133,36 +142,38 @@
font-size: 13px;
font-weight: bold;
color: black;
}
}
@media (max-width: 576px) {
.title{
@media (max-width: 576px) {
.title {
display: flex;
justify-content: center;
color: #FEDC00;
font-size: 2rem;
margin: 2rem 0;
}
.box{
width:8rem;
.box {
width: 8rem;
margin: 0px 1rem;
position: relative;
}
.profile{
.profile {
width: 8rem;
height: 8rem;
}
.userName{
.userName {
color: white;
font-size: 1.1rem;
}
.hoverTxt{
}
.hoverTxt {
display: none;
position:absolute;
top:3.2rem;
left:1.7rem;
position: absolute;
top: 3.2rem;
left: 1.7rem;
color : #FEDC00;
font-size: 1rem;
}
......
client/src/components/Navs/SubNav.js
View file @ 31cef7c3
import { Link } from "react-router-dom";
import { useAuth } from "../../context/auth_context.js"
const SubNav = () => {
const { user, logout } = useAuth();
return (
<nav className="nav justify-content-end py-1">
{(user.id === 0) ? <>
{(user.id === 0)
?
<>
<Link className="nav-link text-white" to="/login">로그인</Link>
<Link className="nav-link text-white" to="/signup" >회원가입</Link> </>
: <>{(user.role === "admin") ?
<Link className="nav-link text-white" to="/signup" >회원가입</Link>
</>
:
<>
{(user.role === "admin")
?
<Link className="nav-link text-white" to="/admin">관리자페이지</Link>
: ((user.role === "member") ?
: ((user.role === "member")
?
<Link className="nav-link text-white" to="/mypage">마이페이지</Link>
: <Link className="nav-link text-white" to="/guest">예매확인</Link>)}
<Link className="nav-link text-white" to="/" onClick={logout}>로그아웃</Link></>
: <Link className="nav-link text-white" to="/guest">예매확인</Link>)
}
<Link className="nav-link text-white" to="/" onClick={logout}>로그아웃</Link>
</>
}
</nav>
)
}
export default SubNav
\ No newline at end of file
export default SubNav
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment