Merge branch 'master' into jiwon

client/src/App.js

@@ -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>
   );
 }
 

client/src/components/Admin/Admin.js

+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

client/src/components/Admin/CinemaEdit.js

+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

client/src/components/Admin/MovieEdit.js

+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

client/src/components/Admin/TheaterEdit.js

+const TheaterEdit = () => {
+    return (
+        <div>
+
+        </div>
+    )
+}
+export default TheaterEdit
\ No newline at end of file

client/src/components/Admin/admin.module.scss

+@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

client/src/components/Admin/index.js

+export { default } from "./Admin"
\ No newline at end of file

client/src/components/Login/Login.js

+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

client/src/components/Login/index.js

+export { default } from './Login'
\ No newline at end of file

client/src/components/Login/login.module.scss

+.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

client/src/components/Navs/MainNav.js

@@ -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>
     )
 }

client/src/components/Navs/SubNav.js

 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>
     )
 }

client/src/components/Search/Search.js

 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>
     )
 }

client/src/components/Search/search.module.scss

-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

client/src/components/Signup/Signup.js

+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

client/src/components/Signup/index.js

+export { default } from './Signup'
\ No newline at end of file

client/src/pages/AdminPage/AdminPage.js

 import AdminLayout from "./AdminLayout";
+import Admin from "../../components/Admin/Admin";
 
 const AdminPage = () => {
     return (
         <AdminLayout>
-            
+            <Admin />
         </AdminLayout>
     )
 }

client/src/pages/LoginPage.js

+import Login from "../components/Login/Login";
+
+
 const LoginPage = () => {
     return (
-        <div>
-            
+        <div className="d-flex justify-content-center py-5">
+            <Login />
         </div>
     )
 }

client/src/pages/SignupPage.js

+import Signup from '../components/Signup'
+
 const SignupPage = () => {
     return (
         <div>
-            
+            <Signup/>
         </div>
     )
 }