167 질문 검색 페이지 api 연동 (#185)

* feat: 질문 검색 페이지 추가

- 질문 검색 페이지 레이아웃 구현
- 질문 검색 페이지 라우팅

* feat: MainHeader 기능 추가

- logo 클릭 시 메인페이지로 이동
- 검색어 입력 시 검색페이지로 이동

* feat: QuestionList Props 추가

- 질문 검색 페이지에서 재사용 할 수 있도록 props 추가

* fix: build 에러를 막기 위한 log

- 다음 작업을 위해 만든 props에 뜨는 value never read 에러 막기 위해 console.log

* fix: 페이지네이션 error 해결

- 마지막 페이지에서 다음 페이지로 가지는 error 수정

* refactor: 질문리스트 컴포넌트 수정

- fetch를 외부에서 하고 props로 questionListData를 받아서 렌더링하도록 수정

* refactor: Pagination 컴포넌트 수정

- 시작페이지 1로 수정 (queryString과 비교 용이)
- 컴포넌트 렌더링시 특정 state 초기화 (검색어 변경 대비)

* refactor: MainPage 수정

- queryString 으로 페이지네이션 처리
- Pagination 컴포넌트 호출

* feat: 질문 검색 페이지 api 연동

- queryString에 따라 질문 검색 api 호출
- queryString으로 페이지네이션 처리
- Pagination 컴포넌트 호출

* feat: 질문 리스트 검색 결과 없음 로직 추가

질문 리스트에 리스트 아이템이 하나도 없다면 아이템이 없다는 문구를 보여주는 로직 추가

---------

Co-authored-by: MayOwall <[email protected]>

FE/src/components/Pagination/Pagination.tsx

@@ -76,7 +76,7 @@ export function Pagination({
   useEffect(() => {
     setIsFirstPage(currentPage === 1);
     setIsLastPage(currentPage === wholePageCount);
-  }, [currentPage]);
+  }, [currentPage, wholePageCount]);
 
   return (
     <S.Pagination>

FE/src/components/QuestionList/QuestionList.tsx

@@ -98,7 +98,8 @@ export function QuestionList({ questionListData }: QuestionListProps) {
   return (
     <QuestionListContainer>
       <ul>
-        {!!questionListData &&
+        {!questionListData?.length && <div>결과가 존재하지 않습니다</div>}
+        {!!questionListData?.length &&
           questionListData.map((itemData, idx) => (
             <Item key={idx} itemData={itemData} />
           ))}

FE/src/pages/QuestionCreationPage/QuestionCreationPage.tsx

@@ -40,13 +40,13 @@ const BUTTON_LABEL_LIST = ['질문 등록하기', '임시 등록', '작성 취
 
 const BUTTON_ONCLICK_HANDLER = [
   () => {
-    console.log('질문 등록하기');
+    //console.log('질문 등록하기');
   },
   () => {
-    console.log('임시 등록');
+    //console.log('임시 등록');
   },
   () => {
-    console.log('작성 취소하기');
+    //console.log('작성 취소하기');
   },
 ];
 

FE/src/pages/QuestionSearchPage/QuestionSearchPage.tsx

@@ -1,17 +1,58 @@
-import { useLocation } from 'react-router-dom';
-//import { QuestionList } from '../../components';
+import { useEffect, useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { ItemData } from '../../types/type';
+import { getQuestionList } from '../../api';
+import { Pagination, QuestionList } from '../../components';
 import { Main, Header, InnerDiv } from './QuestionSearchPage.style';
 
+const PAGINATION_SPLIT_NUMBER = 10;
+
 const QuestionSearchPage = () => {
+  const navigate = useNavigate();
   const location = useLocation();
-  const searchQuery = new URLSearchParams(location.search).get('query');
-  alert(searchQuery);
+  const queryParams = new URLSearchParams(location.search);
+  const searchQuery = queryParams.get('query') as string;
+  const page = Number(queryParams.get('page')) || 1;
+
+  const [questionListData, setQuestionListData] = useState<
+    ItemData[] | undefined
+  >(undefined);
+  const [wholePageCount, setwholePageCount] = useState<number | null>(null);
+
+  const getQuestionListData = async () => {
+    const { questions, totalPage } = await getQuestionList({
+      page: page,
+      title: searchQuery,
+    });
+    setQuestionListData(questions);
+    setwholePageCount(totalPage);
+  };
+
+  const handleCurrentPage = (page: number) => {
+    navigate(
+      `/search?query=${encodeURIComponent(
+        searchQuery,
+      )}&page=${encodeURIComponent(page)}`,
+    );
+  };
+
+  useEffect(() => {
+    getQuestionListData();
+  }, [searchQuery, page]);
 
   return (
     <Main>
       <InnerDiv className="inner">
         <Header>검색 결과</Header>
-        {/* <QuestionList isSearching={true} /> */}
+        <QuestionList questionListData={questionListData} />
+        {!!wholePageCount && (
+          <Pagination
+            wholePageCount={wholePageCount}
+            currentPage={page}
+            handleCurrentPage={handleCurrentPage}
+            splitNumber={PAGINATION_SPLIT_NUMBER}
+          />
+        )}
       </InnerDiv>
     </Main>
   );