Skip to content

GitLab

Commit 769bcb79 authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

Merge branch 'kimpen'

parents a2aad3e6 d1206e75
Hide whitespace changes
Inline Side-by-side
client/public/index.html
View file @ 769bcb79
......@@ -24,6 +24,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey= a04f2d1d1722f5fbadd556e742465d9f&libraries=services"></script>
<title>Butter Studio</title>
</head>
<body>
......
client/src/components/Admin/CinemaEdit.js
View file @ 769bcb79
import { useState } from "react";
import KakaoMap from "../KakaoMap";
import styles from "./admin.module.scss";
const CinemaEdit = () => {
const [cinemaInfo, setCinemaInfo] = useState({ cinema: "", transportation: "", parking: "", adress: "" })
const [search, setSearch] = useState("")
function handleChange(e) {
const { name, value } = e.target
console.log("name=",name,"value=",value)
setCinemaInfo({ ...cinemaInfo, [name]: value })
}
return (
<>
<h2 className="border-bottom border-2 text-center pb-2 me-2">현재 영화관 정보</h2>
<input type="text" className="form-control" id="cinema" name="cinema" onChange={handleChange} />
<input type="text" className={`form-control mb-2 ${styles.shadowNone}`} id="cinema" name="cinema" onChange={handleChange} />
<p>총 상영관 수: 8개관 | 총 좌석 수: 1,282석</p>
<div className="mb-3">
<label for="transportation" className="form-label">대중교통 안내</label>
<textarea className="form-control" id="transportation" name="transportation" onChange={handleChange}></textarea>
<textarea className={`form-control ${styles.shadowNone} ${styles.textarea}`} rows="7" id="transportation" name="transportation" onChange={handleChange}></textarea>
</div>
<div className="mb-3">
<label for="parking" className="form-label">자가용/주차안내</label>
<textarea className="form-control" id="parking" name="parking" onChange={handleChange}></textarea>
<textarea className={`form-control ${styles.shadowNone} ${styles.textarea}`} rows="7" id="parking" name="parking" onChange={handleChange}></textarea>
</div>
<label for="adress" className="form-label">지도보기</label>
<div className="input-group mb-3">
<span className="input-group-text" id="currentMap"><i className="bi bi-geo-alt-fill"></i></span>
<input type="text" className={`form-control ${styles.shadowNone}`} id="adress" name="adress" aria-label="map" aria-describedby="currentMap" onChange={handleChange} />
<button className="btn btn-dark" type="button" id="currentMap" onClick={() => setSearch(cinemaInfo.adress)}><i className="bi bi-search"></i></button>
</div>
<div className="d-flex justify-content-center mb-5">
<KakaoMap adress={search} />
</div>
<label>지도보기</label>
</>
)
}
......
client/src/components/Admin/MovieEdit.js
View file @ 769bcb79
import Search from "../Search";
import MovieTable from "../MovieTable";
import Pagination from "../Pagination";
const MovieEdit = () => {
return (
<div className="d-flex justify-content-around">
<button type="button" className="btn btn-dark" style={{ width: "5em" }}>등록</button>
<Search type="admin" />
</div>
<>
<div className="d-flex justify-content-end mb-3">
<Search type="admin" />
</div>
<MovieTable />
<div className="d-flex align-items-center">
<Pagination />
<button type="button" className="btn btn-dark" style={{ width: "5em" }}>등록</button>
</div>
</>
)
}
export default MovieEdit
\ No newline at end of file
client/src/components/Admin/admin.module.scss
View file @ 769bcb79
@media screen and (max-width: 768px) {
@media screen and (max-width: 767px) {
.box {
margin-bottom: 100px;
......@@ -14,4 +14,16 @@
z-index: 10;
}
}
}
.shadowNone {
&:focus {
-webkit-box-shadow: none;
box-shadow: none;
border-color: #000;
}
}
.textarea {
resize: none;
}
\ No newline at end of file
client/src/components/BoxOffice/BoxOffice.js
View file @ 769bcb79
import { useEffect } from "react"
import styles from "./boxoffice.module.scss"
import styles from "./box-office.module.scss"
const BoxOffice = () => {
useEffect(() => {
......
client/src/components/KakaoMap.js 0 → 100644
View file @ 769bcb79
import { useEffect, useRef } from "react";
const { kakao } = window;
const KakaoMap = ({ adress }) => {
const kakaoMapDiv = useRef(null)
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 geocoder = new kakao.maps.services.Geocoder();
geocoder.addressSearch(`${adress}`, 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
});
map.setCenter(coords);
} else if (adress != '') {
alert("찾을 수 없는 주소입니다. 다시 입력해주세요.")
}
});
}, [adress])
return (
<div ref={kakaoMapDiv} style={{ width: "500px", height: "400px" }}></div>
)
}
export default KakaoMap
\ No newline at end of file
client/src/components/MovieTable/MovieTable.js 0 → 100644
View file @ 769bcb79
import styles from "./movie-table.module.scss";
const MovieTable = () => {
return (
<table className={`table text-center ${styles.tableForm}`}>
<thead className={`table-dark ${styles.dNone}`}>
<tr>
<th>제목</th>
<th>감독</th>
<th>줄거리</th>
<th>포스터</th>
<th>스틸컷</th>
<th>예고편</th>
</tr>
</thead>
<tbody>
<tr className={styles.Row} data-bs-toggle="collapse" data-bs-target={"#movie"}>
<td className={styles.dInLine}>블랙위도우</td>
<td data-label="- " className={`${styles.data} ${styles.dInLine}`}>케이트 쇼트랜드</td>
<td className={styles.dNone}>O</td>
<td className={styles.dNone}>O</td>
<td className={styles.dNone}>X</td>
<td className={styles.dNone}>X</td>
</tr>
<tr>
<div className="collapse" id={"movie"}>
<td className={`${styles.data} ${styles.allDNone} ${styles.dInLine}`}>줄거리 - O</td>
<td className={`${styles.data} ${styles.allDNone} ${styles.dInLine}`}>포스터 - O</td>
<td className={`${styles.data} ${styles.allDNone} ${styles.dInLine}`}>스틸컷 - X</td>
<td className={`${styles.data} ${styles.allDNone} ${styles.dInLine}`}>예고편 - X</td>
<div className="d-flex justify-content-end mt-1">
<button type="button" className="btn btn-primary mx-2">수정</button>
<button type="button" className="btn btn-danger">삭제</button>
</div>
</div>
</tr>
</tbody>
</table>
)
}
export default MovieTable
\ No newline at end of file
client/src/components/MovieTable/index.js 0 → 100644
View file @ 769bcb79
export { default } from "./MovieTable"
\ No newline at end of file
client/src/components/MovieTable/movie-table.module.scss 0 → 100644
View file @ 769bcb79
.Row:hover {
background: rgba(0, 0, 0, 0.075);
}
.allDNone {
display: none;
}
@media screen and (max-width: 767px) {
.tableForm {
border-top: 2px solid;
& .dNone {
display: none;
border: 0;
}
& .dInLine {
display: inline-block;
}
& .Row {
border-bottom: 2px solid;
& .data::before {
content: attr(data-label);
font-weight: bold;
}
}
}
};
\ No newline at end of file
client/src/components/Pagination.js 0 → 100644
View file @ 769bcb79
const Pagination = () => {
return (
<nav aria-label="Page navigation example">
<ul className="pagination justify-content-center">
<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>
)
}
export default Pagination
\ No newline at end of file
client/src/scss/custom.scss
View file @ 769bcb79
......@@ -48,6 +48,9 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
.carousel-inner .carousel-item > div:first-child {
display: block;
}
.table > :not(caption) > * > * {
border-bottom-width: 0;
}
}
/* medium and up screens */
......@@ -67,8 +70,4 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start {
transform: translateX(0);
}
// .nav-link{
// color: yellow;
// }
\ No newline at end of file
}
\ No newline at end of file
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