Commit 19e3ba65 authored by Kim, Subin's avatar Kim, Subin
Browse files

수빈

parent 40e9133a
...@@ -6736,6 +6736,11 @@ ...@@ -6736,6 +6736,11 @@
"to-regex-range": "^5.0.1" "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": { "finalhandler": {
"version": "1.1.2", "version": "1.1.2",
"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz", "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
...@@ -10790,6 +10795,22 @@ ...@@ -10790,6 +10795,22 @@
"prepend-http": "^1.0.0", "prepend-http": "^1.0.0",
"query-string": "^4.1.0", "query-string": "^4.1.0",
"sort-keys": "^1.0.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": { "npm-run-path": {
...@@ -12645,12 +12666,14 @@ ...@@ -12645,12 +12666,14 @@
"integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==" "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA=="
}, },
"query-string": { "query-string": {
"version": "4.3.4", "version": "7.0.1",
"resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz", "resolved": "https://registry.npmjs.org/query-string/-/query-string-7.0.1.tgz",
"integrity": "sha1-u7aTucqRXCMlFbIosaArYJBD2+s=", "integrity": "sha512-uIw3iRvHnk9to1blJCG3BTc+Ro56CBowJXKmNNAm3RulvPBzWLRqKSiiDk+IplJhsydwtuNMHi8UGQFcCLVfkA==",
"requires": { "requires": {
"object-assign": "^4.1.0", "decode-uri-component": "^0.2.0",
"strict-uri-encode": "^1.0.0" "filter-obj": "^1.1.0",
"split-on-first": "^1.0.0",
"strict-uri-encode": "^2.0.0"
} }
}, },
"querystring": { "querystring": {
...@@ -14441,6 +14464,11 @@ ...@@ -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": { "split-string": {
"version": "3.1.0", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz", "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
...@@ -14571,9 +14599,9 @@ ...@@ -14571,9 +14599,9 @@
"integrity": "sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==" "integrity": "sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ=="
}, },
"strict-uri-encode": { "strict-uri-encode": {
"version": "1.1.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz", "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
"integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=" "integrity": "sha1-ucczDHBChi9rFC3CdLvMWGbONUY="
}, },
"string-length": { "string-length": {
"version": "4.0.2", "version": "4.0.2",
......
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
"bootstrap": "^5.0.2", "bootstrap": "^5.0.2",
"bootstrap-icons": "^1.5.0", "bootstrap-icons": "^1.5.0",
"node-sass": "^6.0.1", "node-sass": "^6.0.1",
"query-string": "^7.0.1",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-router-dom": "^5.2.0", "react-router-dom": "^5.2.0",
......
...@@ -11,26 +11,28 @@ import TheaterPage from "./pages/TheaterPage"; ...@@ -11,26 +11,28 @@ import TheaterPage from "./pages/TheaterPage";
import MyPage from "./pages/MyPage"; import MyPage from "./pages/MyPage";
import AdminPage from "./pages/AdminPage/AdminPage"; import AdminPage from "./pages/AdminPage/AdminPage";
import TicketingPage from "./pages/TicketingPage"; import TicketingPage from "./pages/TicketingPage";
import SearchPage from "./pages/SearchPage";
function App() { function App() {
return ( return (
<div className="" style={{ backgroundColor: "black" }}> <div className="" style={{ backgroundColor: "black" }}>
<SubNav /> <Router style={{ backgroundColor: "black" }}>
<Header /> <SubNav />
<MainNav /> <Header />
<Router> <MainNav />
<Switch> <Switch>
<Route exact path="/" component={HomePage} /> <Route exact path="/" component={HomePage} />
<Route path="/login" component={LoginPage} /> <Route path="/login" component={LoginPage} />
<Route path="/signup" component={SignupPage} /> <Route path="/signup" component={SignupPage} />
<Route path="/movielist" component={MovieListPage} /> <Route path="/movielist" component={MovieListPage} />
<Route path="/movie/:movieId" component={MoviePage}/> <Route path="/movie/:movieId" component={MoviePage} />
<Route path="/ticket" component={TicketingPage}/> <Route path="/ticket" component={TicketingPage} />
<Route path="/admin" component={AdminPage}/> <Route path="/search" component={SearchPage} />
<Route path="/admin" component={AdminPage} />
</Switch> </Switch>
</Router> </Router>
</div> // </div>
); );
} }
......
...@@ -7,6 +7,7 @@ import catchErrors from "../../utils/catchErrors.js"; ...@@ -7,6 +7,7 @@ import catchErrors from "../../utils/catchErrors.js";
import styles from "./admin.module.scss"; import styles from "./admin.module.scss";
const MovieEdit = () => { const MovieEdit = () => {
const [search, setSearch] = useState({ kind: "", keyword: "" })
const [movieList, setMovieList] = useState([]) const [movieList, setMovieList] = useState([])
const [error, setError] = useState("") const [error, setError] = useState("")
...@@ -16,7 +17,7 @@ const MovieEdit = () => { ...@@ -16,7 +17,7 @@ const MovieEdit = () => {
async function getMovieList() { async function getMovieList() {
try { try {
setError(""); setError("")
const getMovieList = await movieApi.getUpcomingfromTM() const getMovieList = await movieApi.getUpcomingfromTM()
setMovieList(getMovieList) setMovieList(getMovieList)
} catch (error) { } catch (error) {
...@@ -24,11 +25,19 @@ const MovieEdit = () => { ...@@ -24,11 +25,19 @@ const MovieEdit = () => {
} }
} }
async function searchMovie() {
try {
setError("")
} catch (error) {
catchErrors(error, setError)
}
}
return ( return (
<> <>
{console.log("List==",movieList)} {console.log("search==",search)}
<div className="d-flex justify-content-end mb-3"> <div className="d-flex justify-content-md-end justify-content-center mb-3">
<Search type="admin" /> <Search type="admin" search={search} setSearch={setSearch} handleClick={searchMovie} />
</div> </div>
<MovieTable movieList={movieList} /> <MovieTable movieList={movieList} />
<div className="d-flex flex-wrap"> <div className="d-flex flex-wrap">
......
@media screen and (max-width: 767px) { @media screen and (max-width: 768px) {
.box { .box {
margin-bottom: 100px; margin-bottom: 100px;
......
...@@ -106,6 +106,7 @@ const KakaoMap = ({ keyword, cinemaInfo, setCinemaInfo }) => { ...@@ -106,6 +106,7 @@ const KakaoMap = ({ keyword, cinemaInfo, setCinemaInfo }) => {
i; i;
for (i = 1; i <= pagination.last; i++) { for (i = 1; i <= pagination.last; i++) {
// let el = <a>{i}</a>
let el = document.createElement('a'); let el = document.createElement('a');
// el.href = "#"; // el.href = "#";
el.innerHTML = i; el.innerHTML = i;
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
word-break: keep-all; word-break: keep-all;
} }
@media screen and (max-width: 767px) { @media screen and (max-width: 768px) {
.tableForm { .tableForm {
border-top: 2px solid; border-top: 2px solid;
......
import { useState } from "react";
import { useHistory } from "react-router";
import Search from "../Search"; import Search from "../Search";
const MainNav = () => { const MainNav = () => {
const [search, setSearch] = useState({ keyword: "" })
const history = useHistory()
function searchMovie() {
history.push(`/search?title=${search.keyword}`)
}
return ( return (
<nav class="nav justify-content-evenly border border-start-0 border-end-0 border-white border-2 py-1"> <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="/movielist">영화</a>
<a class="nav-link text-white" href="/ticket">빠른예매</a> <a class="nav-link text-white" href="/ticket">빠른예매</a>
<a class="nav-link text-white" href="#">극장</a> <a class="nav-link text-white" href="#">극장</a>
<Search type="home" /> <Search type="home" search={search} setSearch={setSearch} handleClick={searchMovie} />
</nav> </nav>
) )
} }
......
import styles from "./search.module.scss"; import styles from "./search.module.scss";
const Search = ({ type }) => { const Search = ({ type, search, setSearch, handleClick }) => {
console.log("type==",type) function handleSearch(e) {
const { name, value } = e.target
setSearch({ ...search, [name]: value })
}
console.log("type==", type)
return ( return (
<div className="d-flex"> <div className="d-flex">
<input className="form-control" type="text" id={type === "home" ? styles.searchWhite : styles.search} /> {type === "home" ? null :
<i className={`bi bi-search align-self-center ${type === "home" ? "text-white" : "mx-2"} ${styles.icon}`} style={{ fontSize: "1.3rem" }}></i> <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> </div>
) )
} }
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
cursor: pointer; cursor: pointer;
} }
#searchWhite { .searchWhite {
background: transparent; background: transparent;
border: none; border: none;
border-bottom: 2px solid #fff; border-bottom: 2px solid #fff;
...@@ -21,8 +21,7 @@ ...@@ -21,8 +21,7 @@
} }
} }
#search { .search {
background: transparent;
border: none; border: none;
border-bottom: 2px solid #000; border-bottom: 2px solid #000;
border-radius: 0; border-radius: 0;
......
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
import SearchResult from "../components/SearchResult.js";
const SearchPage = () => {
return (
<SearchResult />
)
}
export default SearchPage
\ No newline at end of file
...@@ -41,7 +41,7 @@ $theme-colors: map-merge($theme-colors, $custom-colors); ...@@ -41,7 +41,7 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
font-style: normal; font-style: normal;
} }
@media (max-width: 767px) { @media (max-width: 768px) {
// .carousel-inner .carousel-item > div { // .carousel-inner .carousel-item > div {
// display: none; // display: none;
// } // }
......
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