{props.title}
+
+ Top Searches
+ {!isLoading
+ ? // 데이터를 불러오는데 성공하고 데이터가 0개가 아닐 때 렌더링
+ getBoardIsSuccess && getBoard!.pages
+ ? getBoard!.pages.map((page_data: any, page_num: any) => {
+ const board_page = page_data.board_page;
+ //console.log(board_page);
+
+ return board_page?.map((item: any, idx: any) => {
+ if (
+ // 마지막 요소에 ref 달아주기
+ getBoard!.pages.length - 1 === page_num &&
+ board_page.length - 1 === idx
+ ) {
+ return (
+ // 마지막 요소에 ref 넣기 위해 div로 감싸기
+
+ );
+};
+
+export default InitialList;
+
+const ListTitle = styled.h1`
+ font-size: 27px;
+ font-weight: 700;
+ line-height: 20px;
+ letter-spacing: -0.07339449226856232px;
+
+ margin: 0;
+ padding: 21px 10px 21px 10px;
+
+ color: #ffffff;
+`;
diff --git a/src/components/searchPage/SearchBox.tsx b/src/components/searchPage/SearchBox.tsx
new file mode 100644
index 0000000..bd4e16f
--- /dev/null
+++ b/src/components/searchPage/SearchBox.tsx
@@ -0,0 +1,58 @@
+import styled from 'styled-components';
+import useInput from '../../hooks/useInput';
+import { useEffect } from 'react';
+import { useSetRecoilState } from 'recoil';
+import { searchWordState } from '../../states/searchState';
+
+const SearchBox = () => {
+ const search = useInput('');
+ const setSearchWord = useSetRecoilState(searchWordState);
+
+ useEffect(() => {
+ setSearchWord(search.value);
+ }, [search.value]);
+
+ return (
+
+ );
+};
+
+export default SearchBox;
+
+const Form = styled.form`
+ width: 100%;
+ height: 52px;
+
+ margin-top: 40px;
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ background: #424242;
+`;
+
+const Input = styled.input`
+ width: 270px;
+ height: 31px;
+
+ font-family: 'SF Pro Display';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 15.213px;
+ line-height: 31px;
+
+ letter-spacing: 0.206667px;
+
+ border: none;
+ margin: 11px 24px 10px 7.19px;
+
+ color: #c4c4c4;
+ background: none;
+`;
+
+const SearchImg = styled.img``;
diff --git a/src/components/searchPage/SearchItem.tsx b/src/components/searchPage/SearchItem.tsx
new file mode 100644
index 0000000..0173db2
--- /dev/null
+++ b/src/components/searchPage/SearchItem.tsx
@@ -0,0 +1,104 @@
+import Link from 'next/link';
+import React from 'react';
+import styled from 'styled-components';
+import { IMovies } from '../../interfaces/interface';
+
+const SearchItem = (props: IMovies) => {
+ return (
+
+
+ );
+ } else {
+ return
+ Top Searches
+ {!isLoading
+ ? // 데이터를 불러오는데 성공하고 데이터가 0개가 아닐 때 렌더링
+ getBoardIsSuccess && getBoard!.pages
+ ? getBoard!.pages.map((page_data: any, page_num: any) => {
+ const board_page = page_data.board_page;
+
+ return board_page?.map((item: any, idx: any) => {
+ if (
+ // 마지막 요소에 ref 달아주기
+ getBoard!.pages.length - 1 === page_num &&
+ board_page.length - 1 === idx
+ ) {
+ return (
+ // 마지막 요소에 ref 넣기 위해 div로 감싸기
+
+ );
+};
+
+export default SearchList;
+
+const ListTitle = styled.h1`
+ font-size: 27px;
+ font-weight: 700;
+ line-height: 20px;
+ letter-spacing: -0.07339449226856232px;
+
+ margin: 0;
+ padding: 21px 10px 21px 10px;
+
+ color: #ffffff;
+`;
diff --git a/src/components/searchPage/SkeletonItem.tsx b/src/components/searchPage/SkeletonItem.tsx
new file mode 100644
index 0000000..2fdfd70
--- /dev/null
+++ b/src/components/searchPage/SkeletonItem.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const SkeletonItem = () => {
+ return (
+
+
+ );
+ } else {
+ return Previews
+ {description}
+
+
+ );
+};
+
+export default LandingPage;
diff --git a/src/pages/search/index.tsx b/src/pages/search/index.tsx
new file mode 100644
index 0000000..e1b9a89
--- /dev/null
+++ b/src/pages/search/index.tsx
@@ -0,0 +1,82 @@
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+import { useRecoilState } from 'recoil';
+import styled from 'styled-components';
+import { getPopular, searchMovies } from '../../api/getMovies';
+import Footer from '../../components/elements/Footer';
+import SearchBox from '../../components/searchPage/SearchBox';
+
+import { useDebounce } from '../../hooks/useDebounce';
+import { selectedContentState } from '../../states/footerState';
+import { searchedMoviesState, searchWordState } from '../../states/searchState';
+import { useInfiniteScrollQuery } from '../../components/searchPage/useInfiniteScrollQuery';
+import { useInView } from 'react-intersection-observer';
+import InitialList from '../../components/searchPage/InitialList';
+import SearchList from '../../components/searchPage/SearchList';
+
+const SearchPage = () => {
+ const router = useRouter();
+ const [selectedIcon, setSelectedIcon] = useRecoilState(selectedContentState);
+ const pageName = router.asPath.slice(1);
+ const [searchWord, setSearchWord] = useRecoilState(searchWordState);
+ const debouncedSearchWord = useDebounce(searchWord, 500);
+ const [searchedMovies, setSearchedMovies] = useRecoilState(searchedMoviesState);
+ const [isLoading, setIsLoading] = useState