수빈

client/package-lock.json

@@ -6736,6 +6736,11 @@
         "to-regex-range": "^5.0.1"
       }
     },
+    "filter-obj": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-1.1.0.tgz",
+      "integrity": "sha1-mzERErxsYSehbgFsbF1/GeCAXFs="
+    },
     "finalhandler": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
@@ -10790,6 +10795,22 @@
         "prepend-http": "^1.0.0",
         "query-string": "^4.1.0",
         "sort-keys": "^1.0.0"
+      },
+      "dependencies": {
+        "query-string": {
+          "version": "4.3.4",
+          "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz",
+          "integrity": "sha1-u7aTucqRXCMlFbIosaArYJBD2+s=",
+          "requires": {
+            "object-assign": "^4.1.0",
+            "strict-uri-encode": "^1.0.0"
+          }
+        },
+        "strict-uri-encode": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
+          "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
+        }
       }
     },
     "npm-run-path": {
@@ -12645,12 +12666,14 @@
       "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA=="
     },
     "query-string": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz",
-      "integrity": "sha1-u7aTucqRXCMlFbIosaArYJBD2+s=",
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/query-string/-/query-string-7.0.1.tgz",
+      "integrity": "sha512-uIw3iRvHnk9to1blJCG3BTc+Ro56CBowJXKmNNAm3RulvPBzWLRqKSiiDk+IplJhsydwtuNMHi8UGQFcCLVfkA==",
       "requires": {
-        "object-assign": "^4.1.0",
-        "strict-uri-encode": "^1.0.0"
+        "decode-uri-component": "^0.2.0",
+        "filter-obj": "^1.1.0",
+        "split-on-first": "^1.0.0",
+        "strict-uri-encode": "^2.0.0"
       }
     },
     "querystring": {
@@ -14441,6 +14464,11 @@
         }
       }
     },
+    "split-on-first": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
+      "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw=="
+    },
     "split-string": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
@@ -14571,9 +14599,9 @@
       "integrity": "sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ=="
     },
     "strict-uri-encode": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
-      "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
+      "integrity": "sha1-ucczDHBChi9rFC3CdLvMWGbONUY="
     },
     "string-length": {
       "version": "4.0.2",

client/package.json

@@ -10,6 +10,7 @@
     "bootstrap": "^5.0.2",
     "bootstrap-icons": "^1.5.0",
     "node-sass": "^6.0.1",
+    "query-string": "^7.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",

client/src/App.js

@@ -11,26 +11,28 @@ import TheaterPage from "./pages/TheaterPage";
 import MyPage from "./pages/MyPage";
 import AdminPage from "./pages/AdminPage/AdminPage";
 import TicketingPage from "./pages/TicketingPage";
+import SearchPage from "./pages/SearchPage";
 
 function App() {
 
   return (
     <div className="" style={{ backgroundColor: "black" }}>
+      <Router 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="/movielist" component={MovieListPage} />
-          <Route path="/movie/:movieId" component={MoviePage}/>
-          <Route path="/ticket" component={TicketingPage}/>
-          <Route path="/admin" component={AdminPage}/>
+          <Route path="/movie/:movieId" component={MoviePage} />
+          <Route path="/ticket" component={TicketingPage} />
+          <Route path="/search" component={SearchPage} />
+          <Route path="/admin" component={AdminPage} />
         </Switch>
       </Router>
-    </div>
+    // </div>
   );
 }
 

client/src/components/Admin/MovieEdit.js

@@ -7,6 +7,7 @@ import catchErrors from "../../utils/catchErrors.js";
 import styles from "./admin.module.scss";
 
 const MovieEdit = () => {
+    const [search, setSearch] = useState({ kind: "", keyword: "" })
     const [movieList, setMovieList] = useState([])
     const [error, setError] = useState("")
 
@@ -16,7 +17,7 @@ const MovieEdit = () => {
 
     async function getMovieList() {
         try {
-            setError("");
+            setError("")
             const getMovieList = await movieApi.getUpcomingfromTM()
             setMovieList(getMovieList)
         } catch (error) {
@@ -24,11 +25,19 @@ const MovieEdit = () => {
         }
     }
 
+    async function searchMovie() {
+        try {
+            setError("")
+        } catch (error) {
+            catchErrors(error, setError)
+        }
+    }
+
     return (
         <>
-        {console.log("List==",movieList)}
-            <div className="d-flex justify-content-end mb-3">
-                <Search type="admin" />
+        {console.log("search==",search)}
+            <div className="d-flex justify-content-md-end justify-content-center mb-3">
+                <Search type="admin" search={search} setSearch={setSearch} handleClick={searchMovie} />
             </div>
             <MovieTable movieList={movieList} />
             <div className="d-flex flex-wrap">

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

-@media screen and (max-width: 767px) {
+@media screen and (max-width: 768px) {
     .box {
         margin-bottom: 100px;
 

client/src/components/KakaoMap/KakaoMap.js

@@ -106,6 +106,7 @@ const KakaoMap = ({ keyword, cinemaInfo, setCinemaInfo }) => {
             i;
 
         for (i = 1; i <= pagination.last; i++) {
+            // let el = <a>{i}</a>
             let el = document.createElement('a');
             // el.href = "#";
             el.innerHTML = i;

client/src/components/MovieTable/movie-table.module.scss

@@ -6,7 +6,7 @@
     word-break: keep-all;
 }
 
-@media screen and (max-width: 767px) {
+@media screen and (max-width: 768px) {
     .tableForm {
         border-top: 2px solid;
 

client/src/components/Navs/MainNav.js

+import { useState } from "react";
+import { useHistory } from "react-router";
 import Search from "../Search";
 
 const MainNav = () => {
+    const [search, setSearch] = useState({ keyword: "" })
+    const history = useHistory()
+
+    function searchMovie() {
+        history.push(`/search?title=${search.keyword}`)
+    }
+
     return (
         <nav class="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 class="nav-link text-white" href="/ticket">빠른예매</a>
             <a class="nav-link text-white" href="#">극장</a>
-            <Search type="home" />
+            <Search type="home" search={search} setSearch={setSearch} handleClick={searchMovie} />
         </nav>
     )
 }

client/src/components/Search/Search.js

 import styles from "./search.module.scss";
 
-const Search = ({ type }) => {
-    console.log("type==",type)
+const Search = ({ type, search, setSearch, handleClick }) => {
+    function handleSearch(e) {
+        const { name, value } = e.target
+        setSearch({ ...search, [name]: value })
+    }
+    console.log("type==", type)
     return (
         <div className="d-flex">
-            <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-2"} ${styles.icon}`} style={{ fontSize: "1.3rem" }}></i>
+            {type === "home" ? null :
+                <select className={`form-select ${styles.search}`} name="kind" aria-label="select search" onChange={handleSearch}>
+                    <option selected value="title">제목</option>
+                    <option value="director">감독명</option>
+                </select>
+            }
+            <input className={`form-control ${type === "home" ? styles.searchWhite : `${styles.search}`}`} name="keyword" type="text" onChange={handleSearch} />
+            <i className={`bi bi-search align-self-center ${type === "home" ? "text-white" : "mx-2"} ${styles.icon}`} onClick={handleClick} style={{ fontSize: "1.3rem" }}></i>
         </div>
     )
 }

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

@@ -2,7 +2,7 @@
     cursor: pointer;
 }
 
-#searchWhite {
+.searchWhite {
     background: transparent;
     border: none;
     border-bottom: 2px solid #fff;
@@ -21,8 +21,7 @@
     }
 }
 
-#search {
-    background: transparent;
+.search {
     border: none;
     border-bottom: 2px solid #000;
     border-radius: 0;

client/src/components/SearchResult.js

+import { useLocation } from 'react-router-dom';
+import queryString from 'query-string';
+import MovieChart from "./MovieChart/index.js";
+
+const SearchResult = () => {
+    const { search } = useLocation()
+    const { title } = queryString.parse(search)
+
+    console.log("search==",search,"title==",title)
+    return (
+        <>
+            <h3 className="text-white text-center my-5">'{title}' 에 관한 검색 결과입니다.</h3>
+            <MovieChart />
+        </>
+    )
+}
+
+export default SearchResult
\ No newline at end of file

client/src/pages/SearchPage.js

+import SearchResult from "../components/SearchResult.js";
+
+const SearchPage = () => {
+    return (
+        <SearchResult />
+    )
+}
+
+export default SearchPage
\ No newline at end of file

client/src/scss/custom.scss

@@ -41,7 +41,7 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
   font-style: normal;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 768px) {
     // .carousel-inner .carousel-item > div {
     //     display: none;
     // }