feat: suspense 적용

packages/client/api/api.ts

@@ -639,7 +639,7 @@ export interface PageResponseQuestionPostSimpleResponse {
     * @type {Array<QuestionPostSimpleResponse>}
     * @memberof PageResponseQuestionPostSimpleResponse
     */
-   content?: Array<QuestionPostSimpleResponse>
+   content: Array<QuestionPostSimpleResponse>
    /**
     *
     * @type {number}

packages/client/app/(withLayout)/layout.tsx

@@ -1,5 +1,5 @@
-// import { Suspense } from 'react'
-// import { MainLoader } from '@shared/ui'
+import { Suspense } from 'react'
+import { MainLoader } from '@shared/ui'
 import { AuthLayout } from '../../src/apps/layout/ui'
 
 interface Props {
@@ -9,9 +9,9 @@ interface Props {
 export default function Layout({ children }: Props) {
    return (
       <AuthLayout>
-         {/* <Suspense fallback={<MainLoader loading height={944} />}> */}
-         {children}
-         {/* </Suspense> */}
+         <Suspense fallback={<MainLoader loading height={944} />}>
+            {children}
+         </Suspense>
       </AuthLayout>
    )
 }

packages/client/src/clientPages/home/api/question.ts

@@ -1,4 +1,8 @@
-import { useQuery, UseQueryOptions } from '@tanstack/react-query'
+import {
+   useQuery,
+   UseQueryOptions,
+   useSuspenseQuery,
+} from '@tanstack/react-query'
 
 import {
    APIApi,
@@ -13,9 +17,9 @@ export const useFetchQuestions = (
       condition: QuestionPostSearchCondition
       pageable: Pageable
    },
-   options?: UseQueryOptions,
+   options?: UseQueryOptions<PageResponseQuestionPostSimpleResponse>,
 ) =>
-   useQuery({
+   useSuspenseQuery({
       ...options,
       queryKey: ['/question-posts/search', dto.condition, dto.pageable],
       queryFn: async () =>
@@ -24,5 +28,5 @@ export const useFetchQuestions = (
                dto.condition,
                dto.pageable,
             )
-         ).data as PageResponseQuestionPostSimpleResponse,
+         ).data,
    })

packages/client/src/clientPages/home/ui/ClientHomePage.tsx

@@ -167,9 +167,8 @@ export function ClientHomePage() {
                <div className={styles.DividerWrapper}>
                   <Divider />
                </div>
-
                <QuestionList
-                  data={questions ?? []}
+                  data={questions}
                   selectedAdGroup={selectedJobGroups}
                   setSelectedJobGroups={setSelectedJobGroups}
                />

packages/client/src/clientPages/search/ui/ClientSearchPage.tsx

@@ -8,9 +8,11 @@ import {
 import { IconFilter } from '@gds/icon'
 import { useState } from 'react'
 import { JOB_GROUPS } from '@shared/model/job'
-import { data } from 'src/clientPages/home/ui/ClientHomePage'
 import QuestionCard from '@shared/ui/QuestionList/Question'
 import { MAX_SELECT_JOB_LENGTH } from '@shared/model'
+import { useFetchQuestions } from 'src/clientPages/home/api/question'
+import { useRouter } from 'next/navigation'
+import { MainLoader } from '@shared/ui'
 import * as styles from './style.css'
 
 interface Prop {
@@ -19,17 +21,40 @@ interface Prop {
 
 export function ClientSearchPage({ input }: Prop) {
    const [searchInput, setSearchInput] = useState<string>(decodeURI(input))
-
    const [selectedJobGroups, setSelectedJobGroups] = useState<SelectItemType[]>(
       [],
    )
+   const router = useRouter()
 
    const handleSelect = (selectedItems: SelectItemType[]) => {
       if (selectedItems.length <= MAX_SELECT_JOB_LENGTH) {
          setSelectedJobGroups(selectedItems)
       }
    }
 
+   const {
+      data: searchQuestionsData,
+      status: searchQuestionsDataStatus,
+      isError: searchQuestionsDataIsError,
+      error: searchQuestionsDataError,
+   } = useFetchQuestions({
+      condition: {
+         keyword: decodeURI(input),
+         jobGroups: selectedJobGroups.map((jobGroup) => jobGroup.label),
+         isChosen: false,
+      },
+      pageable: {
+         page: 0,
+         size: 100,
+      },
+   })
+
+   if (searchQuestionsDataIsError && searchQuestionsDataError) {
+      router.push('/home')
+      // TODO: toast로 수정 필요
+      alert(searchQuestionsDataError.message || '서버 오류가 발생했습니다.')
+   }
+
    return (
       <div className={styles.Container}>
          <SearchHeader input={searchInput} setSearchInput={setSearchInput} />
@@ -49,10 +74,10 @@ export function ClientSearchPage({ input }: Prop) {
             />
          </div>
          <div className={styles.SearchCountBox}>
-            <span>검색결과 nnn건</span>
+            <span>검색결과 {searchQuestionsData?.content?.length}건</span>
          </div>
          <div className={styles.QuestionContainer}>
-            {data.map((question) => {
+            {searchQuestionsData.content.map((question) => {
                return (
                   <QuestionCard data={question} key={question.questionPostId} />
                )

packages/client/src/widgets/Home/ui/QuestionList/index.tsx

@@ -14,7 +14,7 @@ import { MAX_SELECT_JOB_LENGTH } from '@shared/model'
 import * as styles from './index.css'
 
 interface Props {
-   data: PageResponseQuestionPostSimpleResponse
+   data?: PageResponseQuestionPostSimpleResponse
    selectedAdGroup: SelectItemType[]
    setSelectedJobGroups: (selectedItems: SelectItemType[]) => void
 }