Merge remote-tracking branch 'origin/kimpen'

client/src/components/Admin/Admin.js

+import { Link, Route, Switch, useRouteMatch } from "react-router-dom";
+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-center text-dark active">영화 관리</Link>
+                </li>
+                <li className="nav-item">
+                    <Link to={`${match.url}/theater`} className="nav-link text-center text-dark">상영관 관리</Link>
+                </li>
+                <li className="nav-item">
+                    <Link to={`${match.url}/cinema`} className="nav-link text-center text-dark">영화관 관리</Link>
+                </li>
+            </nav>
+            <div className="col-md-9 col-lg-10 tab-content" id="v-pills-tabContent">
+                <Switch>
+                    <Route path={`${match.path}/movie`}></Route>
+                    <Route path={`${match.path}/theater`}></Route>
+                    <Route path={`${match.path}/cinema`}></Route>
+                    <Route path={`${match.path}`}></Route>
+                </Switch>
+            </div>
+        </div>
+    )
+}
+
+export default Admin
\ No newline at end of file

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

+@media screen and (max-width: 768px) {
+    .box {
+        margin-bottom: 110px;
+
+        & .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/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/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 {
+    &: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/pages/AdminPage/AdminPage.js

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