Skip to content

GitLab

Commit c42e9ffb authored by 한규민's avatar 한규민
Browse files

Merge branch 'master' into gyumin

parents 6aa99cb4 fdd2a316
Show whitespace changes
Inline Side-by-side
client/src/components/BoxOffice/BoxOffice.js
View file @ c42e9ffb
import axios from "axios"
import { baseUrl } from '../../utils/baseUrl.js'
import { useState, useEffect } from "react" import { useState, useEffect } from "react"
import styles from "./box-office.module.scss" import movieApi from '../../apis/movie.api.js'
import "./box-office.module.css"
const BoxOffice = () => { const BoxOffice = () => {
const [TMDB_TopRated_Data, setTMDB_TopRated_Data] = useState() const [TMDB_TopRated_Data, setTMDB_TopRated_Data] = useState()
useEffect(() => { useEffect(() => {
getTMDB_TopRated() // getTMDB_TopRated()
let items = document.querySelectorAll('.carousel-item') let items = document.querySelectorAll('.carousel .carousel-item')
console.log("item", items) // console.log("item", items)
items.forEach((el) => { items.forEach((el) => {
const minPerSlide = 4 const minPerSlide = 4
let next = el.nextElementSibling let next = el.nextElementSibling
for (let i = 1; i < minPerSlide; i++) { for (let i = 1; i < minPerSlide; i++) {
if (!next) { if (!next) {
// wrap carousel by using first child
next = items[0] next = items[0]
} }
let cloneChild = next.cloneNode(true) let cloneChild = next.cloneNode(true)
...@@ -24,18 +24,95 @@ const BoxOffice = () => { ...@@ -24,18 +24,95 @@ const BoxOffice = () => {
}, []) }, [])
async function getTMDB_TopRated() { async function getTMDB_TopRated() {
const category = "popular"
try { try {
const response = await axios.get(`${baseUrl}/api/movie`) const data = await movieApi.getMoviesfromTM(category)
console.log(response.data) console.log(data)
setTMDB_TopRated_Data(response.data) setTMDB_TopRated_Data(data)
} catch (error) { } catch (error) {
console.log(error)
} }
} }
return ( return (
<div className="container text-center my-3"> <div className="container text-center my-3">
{console.log(typeof (TMDB_TopRated_Data))} {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 className="row my-auto justify-content-center">
<div id="recipeCarousel" className="carousel slide" data-bs-ride="carousel" data-bs-interval="999999999"> <div id="recipeCarousel" className="carousel slide" data-bs-ride="carousel" data-bs-interval="999999999">
<div className={`carousel-inner`} role="listbox"> <div className={`carousel-inner`} role="listbox">
......
client/src/components/BoxOffice/box-office.module.css 0 → 100644
View file @ c42e9ffb
@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/box-office.module.scss deleted 100644 → 0
View file @ 6aa99cb4
/* // .cursor {
// cursor: pointer;
// }
// .dNone {
// display: none;
// }
\
// .dBlock {
// display: block;
// } */
// @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;
}
$breakpoint-tablet: 768px;
/* medium and up screens */
@media (min-width: $breakpoint-tablet) {
.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/CountButton.js 0 → 100644
View file @ c42e9ffb
import {useState} from 'react'
const CountButton = (props) => {
const name = props.name
function handleCount(event) {
if (event.target.name === "backbutton") {
props.setCount({...props.count, [name] :props.count[name] - 1})
} else if (event.target.name === "forwardbutton") {
props.setCount({...props.count, [name] :props.count[name] + 1})
} else {
props.setCount({...props.count, [name] :event.target.value})
}
}
return (
<span 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" />
<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>
</span>
)
}
export default CountButton
\ No newline at end of file
client/src/components/KakaoMap/KakaoMap.js deleted 100644 → 0
View file @ 6aa99cb4
import { useState, useEffect, useRef } from "react";
import styles from "./kakao-map.module.scss";
const { kakao } = window;
const KakaoMap = ({ keyword, cinemaInfo, setCinemaInfo }) => {
const kakaoMapDiv = useRef(null)
const menu = useRef(null)
const searchList = useRef(null)
const page = useRef(null)
const [places, setPlaces] = useState([])
let markers = []
useEffect(() => {
const container = kakaoMapDiv.current
const options = {
center: new kakao.maps.LatLng(33.450701, 126.570667),
level: 3
};
const map = new kakao.maps.Map(container, options);
const ps = new kakao.maps.services.Places();
const infowindow = new kakao.maps.InfoWindow({ zIndex: 1 });
searchPlaces(keyword)
// 키워드 검색을 요청하는 함수입니다
function searchPlaces(keyword) {
if (!keyword.replace(/^\s+|\s+$/g, '')) {
alert('키워드를 입력해주세요.');
return false
}
// 장소검색 객체를 통해 키워드로 장소검색을 요청합니다
ps.keywordSearch(keyword, placesSearchCB);
}
// 장소검색이 완료됐을 때 호출되는 콜백함수 입니다
function placesSearchCB(data, status, pagination) {
if (status === kakao.maps.services.Status.OK) {
displayPlaces(data);
displayPagination(pagination); // 페이지 번호를 표출합니다
} else if (status === kakao.maps.services.Status.ZERO_RESULT) {
alert('검색 결과가 존재하지 않습니다.');
return
} else if (status === kakao.maps.services.Status.ERROR) {
alert('검색 결과 중 오류가 발생했습니다.');
return
}
}
// 검색 결과 목록과 마커를 표출하는 함수입니다
function displayPlaces(places) {
let listEl = searchList.current,
menuEl = menu.current,
fragment = document.createDocumentFragment(),
bounds = new kakao.maps.LatLngBounds();
for (let i = 0; i < places.length; i++) {
// 마커를 생성하고 지도에 표시합니다
let placePosition = new kakao.maps.LatLng(places[i].y, places[i].x),
itemEl = getListItem(i, places[i]); // 검색 결과 항목 Element를 생성합니다
displayMarker(places[i], itemEl)
// 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해 LatLngBounds 객체에 좌표를 추가합니다
bounds.extend(placePosition);
fragment.appendChild(itemEl);
}
// 검색결과 항목들을 검색결과 목록 Elemnet에 추가합니다
listEl.appendChild(fragment);
menuEl.scrollTop = 0;
// 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다
map.setBounds(bounds);
}
function displayMarker(place, itemEl) {
let marker = new kakao.maps.Marker({
map: map,
position: new kakao.maps.LatLng(place.y, place.x),
})
kakao.maps.event.addListener(marker, 'mouseover', function () {
infowindow.setContent('<div style="padding:5px;font-size:12px;">' + place.place_name + '</div>')
infowindow.open(map, marker)
})
kakao.maps.event.addListener(marker, 'mouseout', function () {
infowindow.close();
})
itemEl.onmouseover = function () {
itemEl.style.background = 'rgba(0, 0, 0, 0.075)';
itemEl.style.cursor = 'pointer';
infowindow.setContent('<div style="padding:5px;font-size:12px;">' + place.place_name + '</div>')
infowindow.open(map, marker)
};
itemEl.onmouseout = function () {
itemEl.style.background = '#fff';
infowindow.close();
};
itemEl.onclick = function () {
setCinemaInfo({ ...cinemaInfo, address: place.address_name })
}
}
}, [keyword])
// 검색결과 목록 하단에 페이지번호를 표시는 함수입니다
function displayPagination(pagination) {
let paginationEl = page.current,
fragment = document.createDocumentFragment(),
i;
for (i = 1; i <= pagination.last; i++) {
// let el = <a>{i}</a>
let el = document.createElement('a');
// el.href = "#";
el.innerHTML = i;
if (i === pagination.current) {
el.className = 'on';
} else {
el.onclick = (function (i) {
return function () {
pagination.gotoPage(i);
}
})(i);
}
fragment.appendChild(el);
}
paginationEl.appendChild(fragment);
}
// 검색결과 항목을 Element로 반환하는 함수입니다
function getListItem(index, places) {
let el = document.createElement('div'),
itemStr = '<div className="info">' +
' <h5>' + places.place_name + '</h5>';
if (places.road_address_name) {
itemStr += ' <span>' + places.road_address_name + '</span>' +
' <span className="jibun gray">' + places.address_name + '</span>';
} else {
itemStr += ' <span>' + places.address_name + '</span>';
}
itemStr += ' <span className="tel">' + places.phone + '</span>' +
'</div>';
el.innerHTML = itemStr;
el.className = 'item';
return el;
}
return (
<>
<div ref={kakaoMapDiv} style={{ width: "500px", height: "400px" }}></div>
<div ref={menu} className={`${styles.menu} bg-white`}>
<div ref={searchList}></div>
<div ref={page}></div>
</div>
</>
)
}
export default KakaoMap
\ No newline at end of file
client/src/components/KakaoMap/index.js deleted 100644 → 0
View file @ 6aa99cb4
export { default } from "./KakaoMap"
\ No newline at end of file
client/src/components/KakaoMap/kakao-map.module.scss deleted 100644 → 0
View file @ 6aa99cb4
// .menu {
// position:absolute;
// top:0;
// left:0;
// bottom:0;
// width:250px;
// margin:10px 0 30px 10px;
// padding:5px;
// overflow-y:auto;
// background:rgba(255, 255, 255, 0.7);
// z-index: 1;
// font-size:12px;
// border-radius: 10px;
// }
\ No newline at end of file
client/src/components/MovieCard/MovieCard.js 0 → 100644
View file @ c42e9ffb
import { useState, useEffect } from "react"
import { Link } from 'react-router-dom'
import styles from './movie-card.module.scss'
const MovieCard = ({ list }) => {
const [movieList, setMovieList] = useState(list)
useEffect(() => {
setMovieList(list)
}, [list])
return (
<>
{movieList.map(movie => (
<div className="card h-100" style={{ backgroundColor: "black" }}>
<Link to={{
pathname: `/movie/${movie.id}`,
state: {
...movie
}
}} className={`${styles.layer}`} >
<img src={`https://image.tmdb.org/t/p/original${movie.poster_path}`} className={`card-img-top rounded ${styles.poster}`} alt="Movie Poster" />
<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>
<p className="card-text text-center"><small className="text-muted">{movie.release_date} 개봉</small></p>
</div>
<Link to={{
pathname:`/ticket`,
state: {movieId:movie.id,}
}} className="text-center">
<button className="btn btn-warning">예매하기</button>
</Link>
</div>
))}
</>
)
}
export default MovieCard
\ No newline at end of file
client/src/components/MovieCard/index.js 0 → 100644
View file @ c42e9ffb
export { default } from "./MovieCard.js"
\ No newline at end of file
client/src/components/MovieComming/movieComming.module.scss → client/src/components/MovieCard/movie-card.module.scss
View file @ c42e9ffb
.layer{ .layer{
position: relative; position: relative;
} }
// .poster{ .poster{
// opacity: 1; max-height: 20rem;
// &:hover{ object-fit: contain;
// opacity: 0.3; }
// }
// }
.description{ .description{
position: absolute; position: absolute;
top: 0%; top: 0%;
...@@ -28,3 +26,6 @@ ...@@ -28,3 +26,6 @@
opacity: 1; opacity: 1;
} }
} }
.txt{
font-size: 99%;
}
\ No newline at end of file
client/src/components/MovieChart.js 0 → 100644
View file @ c42e9ffb
import { useState, useEffect } from 'react'
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("")
const category = "popular"
useEffect(() => {
getTMDB_TopRated()
}, [])
async function getTMDB_TopRated() {
try {
setError("")
const data = await movieApi.getMoviesfromTM(category)
console.log("sdad==", data)
setTMDB_TopRated_Data([...data])
} catch (error) {
catchErrors(error, setError)
}
}
return (
<>
{TMDB_TopRated_Data.length !== 0 ?
<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>
}
</>
)
}
export default MovieChart
\ No newline at end of file
client/src/components/MovieChart/MovieChart.js deleted 100644 → 0
View file @ 6aa99cb4
import React,{useState, useEffect} from 'react'
import axios from 'axios'
import { baseUrl } from '../../utils/baseUrl.js'
import { Link } from 'react-router-dom';
import styles from "./movieChart.module.scss"
const MovieChart = () => {
const [TMDB_TopRated_Data, setTMDB_TopRated_Data] = useState()
useEffect(() => {
getTMDB_TopRated()
}, [])
async function getTMDB_TopRated() {
try {
const response = await axios.get(`${baseUrl}/api/movie`)
console.log(response.data)
setTMDB_TopRated_Data([...response.data])
} catch (error) {
}
}
return (
<div class="row row-cols-1 row-cols-md-4 g-4">
{console.log(TMDB_TopRated_Data)}
{TMDB_TopRated_Data
?
TMDB_TopRated_Data.map(movie => (
<div className="card h-100" style={{ backgroundColor: "black" }}>
<Link to={{
pathname: `/movie/${movie.id}`,
state: {
...movie
}
}} className={`${styles.layer}`} >
<img src={`https://image.tmdb.org/t/p/original${movie.poster_path}`} className={`card-img-top rounded ${styles.poster}`} alt="Movie Poster" />
<div className={`${styles.description}`}>{movie.overview}</div>
</Link>
<div className="card-body text-light">
<marquee onmouseover="this.stop()" className={`h2 card-title text-center ${styles.title}`}>{movie.title}</marquee>
<p className="card-text text-center">예매율: {movie.ticket_sales}0% | {movie.runtime}분</p>
<p className="card-text text-center"><small className="text-muted">{movie.release_date} 개봉</small></p>
</div>
<button className="btn btn-warning">예매하기</button>
</div>
))
: <div>영화정보를 로딩할 수 없습니다.</div>
}
</div>
)
}
export default MovieChart
\ No newline at end of file
client/src/components/MovieChart/index.js deleted 100644 → 0
View file @ 6aa99cb4
export { default } from './MovieChart'
\ No newline at end of file
client/src/components/MovieChart/movieChart.module.scss deleted 100644 → 0
View file @ 6aa99cb4
.layer{
position: relative;
}
// .poster{
// opacity: 1;
// &:hover{
// opacity: 0.3;
// }
// }
.description{
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
opacity: 0;
background-color:rgba(0, 0, 0, 0.6);
text-align: center;
color:white;
//ellipsis
text-overflow: ellipsis;
white-space: pre-line;
display: -webkit-box;
-webkit-line-clamp: 9;
-webkit-box-orient: vertical;
overflow: hidden;
&:hover{
opacity: 1;
}
}
.title{
}
\ No newline at end of file
client/src/components/MovieComing.js 0 → 100644
View file @ c42e9ffb
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 catchErrors from '../utils/catchErrors.js'
const MovieComing = () => {
const [TMDB_UpComing_Data, setTMDB_UpComing_Data] = useState([])
const [error, setError] = useState("")
const category = "upcoming"
useEffect(() => {
getTMDB_UpComing()
}, [])
async function getTMDB_UpComing() {
try {
setError("")
const response = await movieApi.getMoviesfromTM(category)
setTMDB_UpComing_Data([...response])
} catch (error) {
catchErrors(error, setError)
}
}
return (
<>
{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={{
pathname: `/movie/${movie.id}`,
state: {
...movie
}
}} className={`${styles.layer}`} >
<img src={`https://image.tmdb.org/t/p/original${movie.poster_path}`} className={`card-img-top rounded ${styles.poster}`} alt="Movie Poster" />
<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>
<p className="card-text text-center"><small className="text-muted">{movie.release_date} 개봉</small></p>
</div>
<Link to={{
pathname: `/ticket`,
state: { movieId: movie.id, }
}} className="text-center">
<button className="btn btn-warning">예매하기</button>
</Link>
</div>
))}
</div>
: <h2 className="text-white text-center my-5">영화정보를 로딩할 수 없습니다.</h2>
}
</>
)
}
export default MovieComing
\ No newline at end of file
client/src/components/MovieComming/MovieComming.js deleted 100644 → 0
View file @ 6aa99cb4
import React,{useState, useEffect} from 'react'
import axios from 'axios'
import { baseUrl } from '../../utils/baseUrl.js'
import { Link } from 'react-router-dom';
import styles from "./movieComming.module.scss"
const MovieComming = () => {
const [TMDB_UpComming_Data, setTMDB_UpComming_Data] = useState()
useEffect(() => {
getTMDB_UpComming()
}, [])
async function getTMDB_UpComming() {
try {
const response = await axios.get(`${baseUrl}/api/movie/upcomming`)
console.log(response.data)
setTMDB_UpComming_Data([...response.data])
} catch (error) {
}
}
return (
<div class="row row-cols-1 row-cols-md-4 g-4">
{TMDB_UpComming_Data
?
TMDB_UpComming_Data.map(movie => (
<div className="card h-100" style={{ backgroundColor: "black" }}>
<Link to={{
pathname: `/movie/${movie.id}`,
state: {
...movie
}
}} className={`${styles.layer}`} >
<img src={`https://image.tmdb.org/t/p/original${movie.poster_path}`} className={`card-img-top rounded ${styles.poster}`} alt="Movie Poster" />
<div className={`${styles.description}`}>{movie.overview}</div>
</Link>
<div className="card-body text-light">
<marquee onmouseover="this.stop()" className={`h2 card-title text-center ${styles.title}`}>{movie.title}</marquee>
<p className="card-text text-center">{movie.runtime}분</p>
<p className="card-text text-center"><small className="text-muted">{movie.release_date} 개봉</small></p>
</div>
<button className="btn btn-warning">예매하기</button>
</div>
))
: <div>영화정보를 로딩할 수 없습니다.</div>
}
</div>
)
}
export default MovieComming
\ No newline at end of file
client/src/components/MovieComming/index.js deleted 100644 → 0
View file @ 6aa99cb4
export { default } from './MovieComming'
\ No newline at end of file
client/src/components/MovieTable/MovieTable.js
View file @ c42e9ffb
...@@ -6,28 +6,37 @@ import styles from "./movie-table.module.scss"; ...@@ -6,28 +6,37 @@ import styles from "./movie-table.module.scss";
const MovieTable = ({ movieList }) => { const MovieTable = ({ movieList }) => {
const [error, setError] = useState("") const [error, setError] = useState("")
async function handleClick(e, movieId) { async function handleSubmit(e, movieId) {
e.preventDefault(); e.preventDefault();
try { try {
setError(""); setError("")
await movieApi.submit(movieId) await movieApi.submit(movieId)
alert("서버 등록이 완료되었습니다.") alert("서버 등록이 완료되었습니다.")
window.location.reload()
} catch (error) {
catchErrors(error, setError)
}
}
async function handleDelete(e, movieId) {
e.preventDefault()
try {
setError("")
await movieApi.remove(movieId)
alert("해당 영화 정보가 서버에서 삭제되었습니다.")
window.location.reload()
} catch (error) { } catch (error) {
catchErrors(error, setError) catchErrors(error, setError)
} }
} }
return ( return (
<table className={`table text-center ${styles.tableForm}`}> <table style={{ color:"white" }} className={`table text-center align-middle ${styles.tableForm}`}>
<thead className={`table-dark ${styles.dNone}`}> <thead className={`table-dark ${styles.dNone}`}>
<tr> <tr>
<th>제목</th> <th className="col-md-5">제목</th>
<th>감독</th> <th className="col-md-4">감독</th>
<th>상영일</th> <th className="col-md-3">상영일</th>
<th>줄거리</th>
<th>포스터</th>
<th>스틸컷</th>
<th>예고편</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
...@@ -35,24 +44,15 @@ const MovieTable = ({ movieList }) => { ...@@ -35,24 +44,15 @@ const MovieTable = ({ movieList }) => {
<> <>
<tr className={styles.Row} data-bs-toggle="collapse" data-bs-target={"#movie" + movie.id}> <tr className={styles.Row} data-bs-toggle="collapse" data-bs-target={"#movie" + movie.id}>
<td className="d-inline-block d-md-table-cell">{movie.title}</td> <td className="d-inline-block d-md-table-cell">{movie.title}</td>
<td data-label="- " className={`d-inline-block d-md-table-cell ${styles.data}`}>케이트 쇼트랜드</td> <td className="d-none d-md-table-cell">{movie.director}</td>
<td data-label="/ " className={`d-inline-block d-md-table-cell ${styles.data}`}>{movie.release_date}</td> <td className="d-none d-md-table-cell">{movie.release_date}</td>
<td className="d-none d-md-table-cell">{movie.overview !== '' ? 'O' : 'X'}</td>
<td className="d-none d-md-table-cell">{movie.poster_path !== '' ? 'O' : 'X'}</td>
<td className="d-none d-md-table-cell">{movie.backdrop_path !== '' ? 'O' : 'X'}</td>
<td className="d-none d-md-table-cell">{movie.video !== false ? 'O' : 'X'}</td>
</tr> </tr>
<tr className={styles.Row}> <tr className={styles.Row}>
<td colSpan="7" className="collapse" id={"movie" + movie.id}> <td colSpan="3" className="collapse" id={"movie" + movie.id}>
<div className={`d-inline-block d-md-none ${styles.word} mb-2`}> <div className={`d-inline-block d-md-none ${styles.word} mb-2`}>{movie.director} / {movie.release_date}</div>
줄거리 - {movie.overview !== '' ? 'O' : 'X'} /
포스터 - {movie.poster_path !== '' ? 'O' : 'X'} /
스틸컷 - {movie.backdrop_path !== '' ? 'O' : 'X'} /
예고편 - {movie.video !== false ? 'O' : 'X'}
</div>
<div className="d-flex justify-content-end"> <div className="d-flex justify-content-end">
<button type="button" className="btn btn-primary" onClick={(e) => handleClick(e, movie.id)}>등록</button> {movie.existed ? <button type="button" className="btn btn-danger" onClick={(e) => handleDelete(e, movie.id)}>삭제</button>
{/* <button type="button" className="btn btn-danger">삭제</button> */} : <button type="button" className="btn btn-primary" onClick={(e) => handleSubmit(e, movie.id)}>등록</button>}
</div> </div>
</td> </td>
</tr> </tr>
......
client/src/components/MovieTable/movie-table.module.scss
View file @ c42e9ffb
.Row:hover { .Row {
cursor: pointer;
&:hover {
background: rgba(0, 0, 0, 0.075); background: rgba(0, 0, 0, 0.075);
}
} }
.word { .word {
...@@ -17,11 +20,6 @@ ...@@ -17,11 +20,6 @@
& .Row { & .Row {
border-bottom: 2px solid; border-bottom: 2px solid;
& .data::before {
content: attr(data-label);
font-weight: bold;
}
} }
} }
}; };
\ No newline at end of file
client/src/components/Navs/MainNav.js
View file @ c42e9ffb
...@@ -3,7 +3,7 @@ import { useHistory } from "react-router"; ...@@ -3,7 +3,7 @@ import { useHistory } from "react-router";
import Search from "../Search"; import Search from "../Search";
const MainNav = () => { const MainNav = () => {
const [search, setSearch] = useState({ keyword: "" }) const [search, setSearch] = useState({ type: "home", keyword: "" })
const history = useHistory() const history = useHistory()
function searchMovie() { function searchMovie() {
...@@ -11,11 +11,11 @@ const MainNav = () => { ...@@ -11,11 +11,11 @@ const MainNav = () => {
} }
return ( return (
<nav class="nav justify-content-evenly border border-start-0 border-end-0 border-white border-2 py-1"> <nav className="nav justify-content-evenly border border-start-0 border-end-0 border-white border-2 py-1">
<a class="nav-link text-white" href="/movielist">영화</a> <a className="nav-link text-white" href="/movielist">영화</a>
<a class="nav-link text-white" href="/ticket">빠른예매</a> <a className="nav-link text-white" href="/ticket">빠른예매</a>
<a class="nav-link text-white" href="#">극장</a> <a className="nav-link text-white" href="/theater">극장</a>
<Search type="home" search={search} setSearch={setSearch} handleClick={searchMovie} /> <Search search={search} setSearch={setSearch} handleClick={searchMovie} />
</nav> </nav>
) )
} }
......
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