Commit 04e35c5c authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

Merge branch 'master' into jiwon

parents 2d84b4fb 47ca3f32
......@@ -13,17 +13,20 @@ import AdminPage from "./pages/AdminPage/AdminPage";
function App() {
return (
<div className="" style={{ backgroundColor: "black" }}>
<SubNav />
<Header />
<MainNav />
<Router>
<Switch>
<Route exact path="/" component={HomePage} />
<Route path="/movie" component={MovieListPage} />
</Switch>
</Router>
</div>
<div className="" style={{ backgroundColor: "black" }}>
<SubNav />
<Header />
<MainNav />
<Router>
<Switch>
<Route exact path="/" component={HomePage} />
<Route path="/login" component={LoginPage} />
<Route path="/signup" component={SignupPage} />
<Route path="/movie" component={MovieListPage} />
<Route path="/admin" component={AdminPage}/>
</Switch>
</Router>
</div>
);
}
......
import { Link, Route, Switch, useRouteMatch } from "react-router-dom";
import MovieEdit from "./MovieEdit";
import TheaterEdit from "./TheaterEdit";
import CinemaEdit from "./CinemaEdit";
import styles from "./admin.module.scss";
const Admin = () => {
const match = useRouteMatch()
return (
<div className={`d-md-flex align-items-md-start ${styles.box}`}>
<nav className={`col-md-3 col-lg-2 nav flex-md-column flex-row ${styles.navbar}`} id="v-pills-tab" role="tablist" aria-orientation="vertical">
<li className="nav-item">
<Link to={`${match.url}/movie`} className="nav-link text-dark text-center active">영화 관리</Link>
</li>
<li className="nav-item">
<Link to={`${match.url}/theater`} className="nav-link text-dark text-center">상영관 관리</Link>
</li>
<li className="nav-item">
<Link to={`${match.url}/cinema`} className="nav-link text-dark text-center">영화관 관리</Link>
</li>
</nav>
<div className="tab-content container col-md-9 col-lg-10 mt-3" id="v-pills-tabContent">
<Switch>
<Route path={`${match.path}/movie`}><MovieEdit /></Route>
<Route path={`${match.path}/theater`}><TheaterEdit /></Route>
<Route path={`${match.path}/cinema`}><CinemaEdit /></Route>
<Route path={`${match.path}`}><MovieEdit /></Route>
</Switch>
</div>
</div>
)
}
export default Admin
\ No newline at end of file
const CinemaEdit = () => {
function handleChange(e) {
const { name, value } = e.target
console.log("name=",name,"value=",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} />
<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>
</div>
<div className="mb-3">
<label for="parking" className="form-label">자가용/주차안내</label>
<textarea className="form-control" id="parking" name="parking" onChange={handleChange}></textarea>
</div>
<label>지도보기</label>
</>
)
}
export default CinemaEdit
\ No newline at end of file
import Search from "../Search";
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>
)
}
export default MovieEdit
\ No newline at end of file
const TheaterEdit = () => {
return (
<div>
</div>
)
}
export default TheaterEdit
\ No newline at end of file
@media screen and (max-width: 768px) {
.box {
margin-bottom: 100px;
& .navbar {
position: fixed;
bottom: 0;
left: 0px;
width: 100%;
justify-content: center;
background-color: #fff;
padding-top: 5px;
box-shadow: 0 -5px 3px 0 #FEDC00;
z-index: 10;
}
}
}
\ No newline at end of file
export { default } from "./Admin"
\ No newline at end of file
import { useState } from "react";
import styles from "./login.module.scss";
const Login = () => {
const [state, setState] = useState(true)
return (
<div className={`d-flex flex-column col-md-5 col-10`}>
{/* nav-tabs */}
<ul className="nav nav-fill nav-tabs w-100" id="loginTab" role="tablist">
<li className="nav-item fs-6" role="presentation">
<button className={`nav-link active px-2 ${styles.fontSize}`} style={{ color: state ? "black" : "yellow", backgroundColor: state ? "yellow" : "black"}}
id="login-tab" data-bs-toggle="tab" data-bs-target="#login" type="button" role="tab" aria-controls="login" aria-selected="true"
onClick={() => setState(true)}>로그인</button>
</li>
<li className="nav-item" role="presentation">
<button className={`nav-link px-2 ${styles.fontSize}`}
id="guest-tab" data-bs-toggle="tab" data-bs-target="#guest" type="button" role="tab" aria-controls="guest" aria-selected="false"
onClick={() => setState(false)} style={{ color: state ? "yellow" : "black", backgroundColor: state ? "black" : "yellow" }}>비회원 예매 확인</button>
</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">
<div className="d-flex flex-column ">
<input className={styles.input} type="text" name="id" id="id" placeholder="ID" />
<input className={styles.input} type="text" name="password" id="password" placeholder="Password" minlength="8" required />
<input className="bg-ButterYellow text-dark border-0 rounded-2 mt-2" type="submit" value="Login" />
<span><a href="./signup" className={styles.intoSignupPage}>회원이 아니십니까?</a></span>
</div>
</div>
{/* 비회원예매 학인 */}
<div className="tab-pane fade" id="guest" role="tabpanel" aria-labelledby="guest-tab">
<div className="d-flex flex-column">
<input className={styles.input} type="text" name="guestName" id="guestName" placeholder="이름" minlength="8" required />
<input className={styles.input} type="text" name="gusetBirthday" id="gusetBirthday" placeholder="생년월일" minlength="8" required />
<input className={styles.input} type="text" name="gusetMbnum" id="gusetMbnum" placeholder="휴대폰 번호" minlength="8" required />
<input className={styles.input} type="text" name="guestPassword" id="password" placeholder="비밀번호" minlength="8" required />
<p className={`text-white ${styles.fontSizeTwo}`}>
비회원 정보 입력 예매 내역 확인/취소 티켓 발권이 어려울 있으니 다시 한번 확인해 주시기 바랍니다.
</p>
<input className="bg-ButterYellow text-dark border-0 rounded-2 mt-2" type="submit" value="비회원 예매 확인" />
</div>
</div>
</div>
</div>
)
}
export default Login
\ No newline at end of file
export { default } from './Login'
\ No newline at end of file
.intoSignupPage{
font-size: 10px;
text-decoration: none;
color: white;
}
.intoSignupPage:hover {
text-decoration: none;
color: #FEDC00;
}
.input {
margin: 0.5rem 0 0 0;
padding: 0.5rem 0 0.5rem 0;
color:white;
border-radius: 3px;
}
.fontSize{
font-size: 16px;
}
.fontSizeTwo{
font-size: 10px;
}
\ No newline at end of file
......@@ -6,7 +6,7 @@ const MainNav = () => {
<a class="nav-link text-white" href="/movie">영화</a>
<a class="nav-link text-white" href="#">빠른예매</a>
<a class="nav-link text-white" href="#">극장</a>
<Search />
<Search type="home" />
</nav>
)
}
......
const SubNav = () => {
return (
<nav class="nav justify-content-end py-1">
<a class="nav-link text-white" href="#">로그인</a>
<a class="nav-link text-white" href="#">회원가입</a>
<a class="nav-link text-white" href="/login">로그인</a>
<a class="nav-link text-white" href="/signup">회원가입</a>
</nav>
)
}
......
import styles from "./search.module.scss";
const Search = () => {
const Search = ({ type }) => {
console.log("type==",type)
return (
<div className="d-flex">
<input className="form-control" type="text" id="search" />
<i className="bi bi-search align-self-center text-white" style={{ fontSize: "1.3rem" }}></i>
<input className="form-control" type="text" id={type === "home" ? styles.searchWhite : styles.search} />
<i className={`bi bi-search align-self-center ${type === "home" ? "text-white" : "mx-1"} ${styles.icon}`} style={{ fontSize: "1.3rem" }}></i>
</div>
)
}
......
input[type="text"] {
.icon {
cursor: pointer;
}
#searchWhite {
background: transparent;
border: none;
border-bottom: 2px solid #fff;
......@@ -7,16 +11,22 @@ input[type="text"] {
border-radius: 0;
color: #fff;
margin-bottom: 5px;
}
input[type="text"]:focus {
background: transparent;
-webkit-box-shadow: none;
box-shadow: none;
border-color: #fff;
color: #fff;
&:focus {
background: transparent;
-webkit-box-shadow: none;
box-shadow: none;
border-color: #fff;
color: #fff;
}
}
i {
cursor: pointer;
#search {
box-shadow: none;
-webkit-box-shadow: none;
&:focus {
-webkit-box-shadow: none;
box-shadow: none;
border-color: #000;
}
}
\ No newline at end of file
import styles from "./signup.module.scss";
const Signup = () => {
return (
<div className={`d-flex ${styles.signup} col-md-8 col-12 align-items-center`}>
<table>
<colgroup>
<col class="col1" />
<col />
</colgroup>
<tbody>
<tr>
<th>
<label for="guestName">이름</label>
</th>
<td><input type="text" placeholder="이름" /></td>
</tr>
<tr>
<th>
<label for="guestBirthday">생년월일</label>
</th>
<td><input type="text" placeholder="생년월일(6자리)" /></td>
</tr>
<tr>
<th>
<label for="guestMbnum">휴대폰 번호</label>
</th>
<td><input type="text" placeholder="'-'없이 입력" /></td>
</tr>
<tr>
<th>
<label for="guestPassword">비밀번호</label>
</th>
<td><input type="password" placeholder="숫자 4자리" /></td>
</tr>
<tr>
</tr>
</tbody>
</table>
<p>
비회원 정보 입력 예매 내역 확인/취소 티켓 발권이 어려울 있으니 다시 한번 확인해 주시기 바랍니다.
</p>
<div class="guestLoginBtn">
<input class="guestLoginBtn" type="submit" value="비회원 예매 확인" />
</div>
</div>
)
}
export default Signup
\ No newline at end of file
export { default } from './Signup'
\ No newline at end of file
import AdminLayout from "./AdminLayout";
import Admin from "../../components/Admin/Admin";
const AdminPage = () => {
return (
<AdminLayout>
<Admin />
</AdminLayout>
)
}
......
import Login from "../components/Login/Login";
const LoginPage = () => {
return (
<div>
<div className="d-flex justify-content-center py-5">
<Login />
</div>
)
}
......
import Signup from '../components/Signup'
const SignupPage = () => {
return (
<div>
<Signup/>
</div>
)
}
......
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