2024.10.02 기록

모브박스 - 영화검색 기능

영화이름, 영화코드, 영화포스터

영화진흥위원회 - 영화이름, 영화고유코드
kmdb 한국영화데이터베이스 - 영화포스터url주소

[id]값 순서가 같기때문에 데이터 객체를 합침..!

const dataComb = dailyBoxOffice.map((movie, id) => {
	return {
		movie, code: movieCode[id], poster: posterUrl[id]
       		}
})

console.log(dataComb, 'dataComb')

    let [searchInput, setSearchInput] = useState('');
    let [searchValue, setSearchValue] = useState([]);
    let [searchView, setSearchView] = useState(false);

    const submitSearch = (e) => {
        e.preventDefault()
        if (searchInput === '') {
            setSearchView(false)
            return;
        }

        let d = dataComb.filter((obj) => (
            (obj.movie.includes(searchInput)) || (obj.code.includes(searchInput))
        ))
        setSearchValue(d);
        setSearchInput('');
        setSearchView(true);
    }

합친 데이터 dataComb에 filter 메소드에 검색 input값과 같은
영화이름 또는 영화코드 중에 searchValue에 담아 결과를 출력한다.
searchView의 (false)값을 (true)값을 넣어 결과 창을 active한다.
searchInput값은 공백으로 초기화한다.

<nav>
	<form onSubmit={submitSearch}>
		<input type="text" value={searchInput} onChange={(e) => { setSearchInput(e.target.value) }} />
 		<Image src='/images/search_icon.png' alt='search' width={18} height={18} />
	</form>
    
	<Link href={{
				pathname: '/reserve',
				query: {
						posterUrlList: JSON.stringify(posterUrl)
                        }
                    }}
		>Ticket</Link>
	<Link href={isLogined ? "/" : "/login"} onClick={logout}>{isLogined ? 'Logout' : 'Login'}</Link>
	<Link href={isLogined ? "/mypage" : "/login"}>My page</Link>
</nav>

    const searchBack = () => {
        setSearchView(false)
        setSearchValue([]);
    }


    useEffect(() => {
    }, [searchValue])

    const menuClick = () => {
        setMenuOn(!menuOn);
        setSearchView(false);
        setSearchValue([]);
    }

검색결과 값 창에 X버튼을 두지않고 바깥쪽 빈 배경을 눌렀을때
닫히게 하기 위해서 가장 바깥쪽에 div태그로 한번 더 전체 감쌌다.
searchBack 눌렀을 때 searchView(false)로 변경해 결과창을 닫고
searchValue([ ]) 결과 값을 빈 배열로 초기화한다.

<div onClick={searchBack}>
	{
		searchView && (
 		<div className={`search_board ${searchValue.length > 0 ? 'active' : ''}`} >
		{
		searchValue.map((obj, k) => (
		<div key={k} className='searchEl'>
			<Link href={{
					pathname: '/detail',
					query: {
							posterUrlDetail: obj.poster,
							movieCd: obj.code
							}
						}}>
					<Image src={obj.poster}
							width={200} height={280}
							alt="poster"
							/>
			</Link>
			<div className='searchEl_title'>{obj.movie}</div>
		</div>
					))
		}
	</div>
	)}
</div>

결과 포스터를 눌렀을때 링크 태그로 영화 /detail로 이동하고
query에 포스터url과 영화code 값을 보내 영화 디테일창이 열리도록 하였다.