feat: searchPage 생성, 라우터 추가

codestates-seb · Jul 17, 2023 · 249833f · 249833f
1 parent 2a319f9
commit 249833f
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 4 deletions.
diff --git a/client/public/mockupdata/searchdata.json b/client/public/mockupdata/searchdata.json
@@ -0,0 +1,39 @@
+{
+    "data": [
+          {
+            "docId": "K28661",
+            "title": "스파이더맨: 어크로스 더 유니버스",
+            "repRlsDate": "20230602",
+            "score": 4.6,
+            "posterUrl": "https://i.namu.wiki/i/YaOX0b7cNnR9sLNgLAncoYcIHJ71PLcvP1FC89HWvwGxoXG6wuUlXAsBFHI_f6lvahFXRhljZis-zI4PFA1ys4wJtoBgYIINQCAPNWqW-uo2Lk3nNu_NMLvMI9vbWPhfBoqYdY8s5C7NOtKPMFiqGA.webp"
+          },
+          {
+            "docId": "K28662",
+            "title": "인터스텔라",
+            "repRlsDate": "20141107",
+            "score": 4.5,
+            "posterUrl": "https://i.namu.wiki/i/ei0XJc1X5aV2Z9rEN1L9BnJVfQ0VfizGdGK3QTFwhz5QXOxGSeZ2zWcJsvFZ2FjXl23ajEOeCE4msO1EZ6xHFMDi_YafkaoFB9jPS7HExnYJMmwbJxh2XStOdh4Wtp24sTKvTAsltpYceUiOcgwa-Q.webp"
+          },
+          {
+            "docId": "K28663",
+            "title": "겨울왕국",
+            "repRlsDate": "20131127",
+            "score": 4.3,
+            "posterUrl": "https://i.namu.wiki/i/mvGynWOsOvDngjMlad2Kz5JxZQ1BqcTtPkAg2P3oE5FA6RAvYTAlcbt8rP8iNjBC4kQ3z4JLJRg1m6IzLkKrOjAmss32AVu_4uedeWfsjmunm61tfxeDGQd-VYt51nhpJjMaoxTwhm9KLmxcMJrsdQ.webp"
+          },
+          {
+            "docId": "K28664",
+            "title": "범죄와의 전쟁",
+            "repRlsDate": "20120202",
+            "score": 4.1,
+            "posterUrl": "https://i.namu.wiki/i/kUuVAVNy0jTXcSQ6xPvGDpN9BUOkdxtPuki4RCYHpb9eD5YFYbvbsPWNerBfqTIqGeTzB2OF9EJ1RyA6PNXVi0vRzY0d3dQsSzgkpRw75xsonNpl3ZPX2uhr9Gc6NBLLKqy4UT0DmeqdIy9SnpvnoQ.webp"
+          },
+          {
+            "docId": "K28665",
+            "title": "해리포터와 마법사의 돌",
+            "repRlsDate": "20011114",
+            "score": 4.0,
+            "posterUrl": "https://i.namu.wiki/i/_pr1mVcm6gjM8u7gz6kDuVfUSOn0UeYrXDPNWNHAVRS0FikoDjTpg9hBOBo3erF-FK5FRkkJgqZd8GmfHia3Y-8JpbWdXxBqF0vQCAD--iXiAb1D2O82ZgHCZlxS1whQdPiwgTxvCV4BN9bxdXZTYQ.webp"
+          }
+    ]
+}
diff --git a/client/src/main.tsx b/client/src/main.tsx
@@ -11,6 +11,7 @@ import SignupPage from './pages/SignupPage/SignupPage';
 import LoginPage from './pages/LoginPage/LoginPage';
 import DetailsPage from './pages/DetailsPage/DetailsPage';
 import MainPage from './pages/MainPage/MainPage';
+import SearchPage from './pages/SearchPage/SearchPage';
 
 const router = createBrowserRouter([
   {
@@ -22,6 +23,7 @@ const router = createBrowserRouter([
       { path: '/redirect', element: <RedirectPage /> },
       { path: '/signup', element: <SignupPage /> },
       { path: '/login', element: <LoginPage /> },
+      { path: '/search', element: <SearchPage /> },
       { path: '/movies/:movieId', element: <DetailsPage /> },
     ],
   },

diff --git a/client/src/pages/DetailsPage/DetailsPage.tsx b/client/src/pages/DetailsPage/DetailsPage.tsx
@@ -53,7 +53,7 @@ const DetailsPage = () => {
   }, [dispatch, pageNumber]);
 
   // 모달 열기, 닫기
-  // 로그인 기능 완성시, 아래 주석 사용
+  // 로그인 기능 완성시, 아래 주석 삭제
   const openModal = () => {
     if (!isLoggedIn) {
       alert('로그인을 해주세요.');
@@ -98,13 +98,14 @@ const DetailsPage = () => {
         <></>
       ) : (
         <>
+          {/* 영화정보 */}
           <MovieTitle windowWidth={windowWidth} />
           <div
             className="absolute bottom-0 left-0 z-10 w-full bg-white" //  duration-500 ease-out 고민
             style={{ height: `${scrollPosition}px` }}
           >
             <MovieInfo />
-
+            {/* 리뷰 */}
             <div className="mx-auto my-0 max-w-[1320px] p-8">
               <div className="mb-6 flex justify-between">
                 <p className="text-xl font-medium">리뷰 {movieDetail?.movie.review_count}개</p>
@@ -118,11 +119,10 @@ const DetailsPage = () => {
               {movieDetail?.movie.reviews.map((review, index) => {
                 return <Review key={index} review={review} />;
               })}
-
               <div className="flex justify-center text-3xl">
                 <Pagination totalReviews={totalReviews} movieId={movieId} pageNumber={pageNumber} />
               </div>
-
+              {/* 추천영화 */}
               <p className="pt-20 text-xl font-bold">비슷한 장르의 영화</p>
               <div className="flex justify-between">
                 {movieDetail?.recommend.map((movie, index) => (
@@ -138,6 +138,7 @@ const DetailsPage = () => {
                 ))}
               </div>
             </div>
+            {/* 리뷰작성모달 */}
             {isModalOpen && <ReviewModal movieId={movieId} closeModal={closeModal} />}
           </div>
         </>

diff --git a/client/src/pages/SearchPage/SearchPage.tsx b/client/src/pages/SearchPage/SearchPage.tsx
@@ -0,0 +1,5 @@
+const SearchPage = () => {
+  return <div></div>;
+};
+
+export default SearchPage;