feat:결과페이지 api 및 스타일 작업

src/apis/post/apis.ts

@@ -2,7 +2,6 @@ import type {
   GetCategoriesRes,
   GetPostsReq,
   GetPostsRes,
-  GetSortOptionsReq,
   GetPostRes,
   CreatePostReq,
   CreatePostRes
@@ -20,6 +19,3 @@ export const getCategories = () =>
 
 export const getPosts = (params: GetPostsReq) =>
   http.get<GetPostsReq, GetPostsRes>('/posts', params)
-
-export const getSortOption = (params: GetSortOptionsReq) =>
-  http.get<GetSortOptionsReq, GetPostsRes>(`/sorts?type=${params.type}`)

src/apis/post/queries.ts

@@ -1,17 +1,6 @@
 import { useMutation, useQuery, useInfiniteQuery } from '@tanstack/react-query'
-import {
-  getCategories,
-  getPosts,
-  getSortOption,
-  getPost,
-  createPost
-} from './apis'
-import type {
-  GetPostsReq,
-  GetPostsRes,
-  GetSortOptionsReq,
-  CreatePostReq
-} from './types'
+import { getCategories, getPosts, getPost, createPost } from './apis'
+import type { GetPostsReq, GetPostsRes, CreatePostReq } from './types'
 
 export const useCreatePostMutation = () =>
   useMutation({
@@ -40,16 +29,9 @@ export const useGetInfinitePostsQuery = (params: GetPostsReq) =>
   useInfiniteQuery<GetPostsRes>({
     queryKey: ['getPosts'],
     queryFn: () => getPosts(params),
-    refetchOnMount: 'always',
     initialPageParam: null,
     getNextPageParam: lastPage =>
       lastPage?.hasNext
         ? lastPage.posts[lastPage.posts.length - 1].id
         : undefined
   })
-
-export const useGetSortOptions = (params: GetSortOptionsReq) =>
-  useQuery({
-    queryKey: ['getSortOption'],
-    queryFn: () => getSortOption(params)
-  })

src/apis/post/types.ts

@@ -4,7 +4,6 @@ import type {
   PostDetail,
   PostSummaries,
   ProductConditionCodes,
-  SortOptionsShape,
   TradeStatusType,
   TradeTypeCodes
 } from '@types'
@@ -65,10 +64,4 @@ export type CreatePostReq = {
 }
 export type CreatePostRes = CommonCreation
 
-// TODO: 정확한 타입 BE 확인 필요
-export type GetSortOptionsReq = {
-  type: 'OFFER' | 'POST'
-}
-export type GetSortOptionsRes = SortOptionsShape
-
 export type GetCategoriesRes = (OptionShape & { imageUrl: string })[]

src/components/result/CategoryHeader/index.tsx

@@ -4,18 +4,15 @@ import type { ResultHeaderProps } from './types'
 
 const ResultHeader = ({
   searchResult,
-  postData
+  postSummaries
 }: ResultHeaderProps): ReactElement => {
-  const postCount =
-    postData && postData.reduce((acc, cur) => acc + cur.posts.length, 0)
-
   return (
     <Styled.CategoryHeaderWrapper>
       <Styled.CategoryHeader>
         &quot;{searchResult}&quot;의 검색결과
       </Styled.CategoryHeader>
       <Styled.CategoryHeaderResultCount>
-        {postCount}개
+        {postSummaries && postSummaries}개
       </Styled.CategoryHeaderResultCount>
     </Styled.CategoryHeaderWrapper>
   )

src/components/result/CategoryHeader/types.ts

@@ -1,6 +1,4 @@
-import type { GetPostsRes } from '@apis/post'
-
 export type ResultHeaderProps = {
   searchResult: string
-  postData?: GetPostsRes[]
+  postSummaries: number
 }

src/components/result/FilterSelect/index.tsx

@@ -2,7 +2,7 @@ import type { ReactElement } from 'react'
 import { Styled } from './styled'
 import type { FilterSelectProps } from './types'
 import { PriceDialog } from '../PriceDialog'
-import { useGetSortOptions } from '@apis/post/queries'
+import { SORT_OPTIONS } from '@constants/app'
 const FilterSelect = ({
   categoryItems,
   tradePeriodItems,
@@ -11,26 +11,14 @@ const FilterSelect = ({
   minPriceValue,
   maxPriceValue,
   applyPrice,
-  postData,
+  postSummaries,
   handleSortPriceChange,
   handleCategoryChange,
   handleTradePeriodChange,
   handleMinPriceInputChange,
   handleMaxPriceInputChange,
   handlePriceApplyClick
 }: FilterSelectProps): ReactElement => {
-  const { data: priceSortOptions, isLoading } = useGetSortOptions({
-    type: 'POST'
-  })
-
-  const postCount =
-    postData && postData.reduce((acc, cur) => acc + cur.posts.length, 0)
-
-  if (isLoading) {
-    // 로딩
-    return <></>
-  }
-
   return (
     <>
       <Styled.SelectWrapper>
@@ -59,10 +47,12 @@ const FilterSelect = ({
           />
         </Styled.LeftSelectWrapper>
         <Styled.RightSelectWrapper>
-          <Styled.ProductCount>전체 {postCount}개</Styled.ProductCount>
+          <Styled.ProductCount>
+            전체 {postSummaries && postSummaries}개
+          </Styled.ProductCount>
           <Styled.PriceFilterSelect
             colorType="none"
-            items={priceSortOptions}
+            items={SORT_OPTIONS}
             placeholder="높은 가격순"
             onChange={handleSortPriceChange}
           />

src/components/result/FilterSelect/styled.ts

@@ -37,10 +37,6 @@ const CategorySelect = styled(SelectBox)`
     display: inline;
   }
 
-  ${({ theme }): string => theme.mediaQuery.mobile} {
-    display: inline;
-  }
-
   div:nth-of-type(1) {
     span {
       ${({ theme }): string => theme.fonts.body02B};
@@ -78,10 +74,6 @@ const ProductCount = styled.div`
     display: none;
   }
 
-  ${({ theme }): string => theme.mediaQuery.mobile} {
-    display: inline;
-  }
-
   ${({ theme }): string => theme.mediaQuery.tablet} {
     display: inline;
   }

src/components/result/FilterSelect/types.ts

@@ -1,7 +1,8 @@
 import type { SelectOnChangeHandler } from '@offer-ui/react'
 import type { ChangeEventHandler } from 'react'
-import type { GetPostsRes } from '@apis/post'
-import type { ApplyPriceType } from '@hooks/result/useSelectBoxFilter'
+import type { TRADE_TYPES } from '@constants/app'
+import type { GetPostsRes } from '@apis'
+import type { ApplyPriceType } from '@hooks'
 
 export type FilterSelectProps = {
   applyPrice: ApplyPriceType
@@ -11,10 +12,7 @@ export type FilterSelectProps = {
     name: string
     selected: boolean
   }[]
-  tradePeriodItems: {
-    code: string
-    name: string
-  }[]
+  tradePeriodItems: typeof TRADE_TYPES
   sortPriceItems: {
     code: string
     name: string
@@ -24,6 +22,7 @@ export type FilterSelectProps = {
   selectedSortPriceValue: string
   minPriceValue: string
   maxPriceValue: string
+  postSummaries: number
   handleSortPriceChange: SelectOnChangeHandler
   handleCategoryChange: SelectOnChangeHandler
   handleTradePeriodChange: SelectOnChangeHandler

src/components/result/PriceDialog/index.tsx

@@ -15,7 +15,8 @@ const PriceDialog = ({
   const [isOpen, setIsOpen] = useState<boolean>(false)
   const { desktop } = useMedia()
 
-  const isApplied = applyPrice.maxPrice !== null && applyPrice.minPrice !== null
+  const isApplied =
+    applyPrice.maxPrice !== undefined && applyPrice.minPrice !== undefined
 
   useEffect(() => {
     setIsOpen(isOpen)

src/hooks/index.ts

@@ -2,3 +2,5 @@ export * from './useResponsive'
 export * from './useAuth'
 export * from './useModal'
 export * from './useProfile'
+export * from './result/useCategoryFilterList'
+export * from './result/useSelectBoxFilter'

src/hooks/result/useCategoryFilterList.ts

@@ -2,7 +2,7 @@ import type { SelectOnChangeHandler } from '@offer-ui/react'
 import { useSearchParams } from 'next/navigation'
 import { useEffect, useState } from 'react'
 import { useGetCategoriesQuery } from '@apis/post'
-import { manipulateArray } from '@utils/result'
+import { transRateUseToCategorySelectBoxData } from '@utils/result'
 export type CheckItemType = {
   code: string
   name: string
@@ -34,8 +34,11 @@ const useCategoryFilterList = (): ReturnType => {
 
   useEffect(() => {
     if (isSuccess) {
-      const cateGoryList = manipulateArray(categories, defaultCategory)
-      setList(cateGoryList)
+      const categoryList = transRateUseToCategorySelectBoxData(
+        categories,
+        defaultCategory
+      )
+      setList(categoryList)
       setSelectedCategoryValue(defaultCategory ? defaultCategory : 'ALL')
     }
   }, [categories, defaultCategory, isSuccess])

src/hooks/result/useSelectBoxFilter.ts

@@ -14,7 +14,7 @@ export type ApplyPriceType = {
 }
 
 type ReturnType = {
-  tradePeriodItems: any
+  tradePeriodItems: typeof TRADE_TYPES
   sortPriceItems: SelectItemsType[]
   selectedTradePeriodValue: string
   selectedSortPriceValue: string
@@ -80,7 +80,6 @@ const useSelectBoxFilter = (): ReturnType => {
   }
 
   const handlePriceApplyClick = (): void => {
-    //필터적용
     setApplyPrice({
       minPrice: Number(minPriceValue.replace(/,/g, '')),
       maxPrice: Number(maxPriceValue.replace(/,/g, ''))

src/pages/result/index.tsx

@@ -50,12 +50,7 @@ const Result: NextPage = () => {
   const categoryFilterOption =
     selectedCategoryValue === 'ALL' ? null : selectedCategoryValue
 
-  const {
-    data: postList,
-    fetchNextPage,
-    hasNextPage,
-    refetch
-  } = useGetInfinitePostsQuery({
+  const infinitePosts = useGetInfinitePostsQuery({
     lastId: null,
     limit: DEFAULT_POST_PAGE_NUMBER,
     category: categoryFilterOption,
@@ -65,20 +60,29 @@ const Result: NextPage = () => {
     sort: selectedSortPriceValue
   })
 
+  const postSummaries = infinitePosts?.data?.pages?.reduce(
+    (acc, cur) => acc + cur?.posts?.length,
+    0
+  )
+
   useEffect(() => {
-    refetch()
+    infinitePosts?.refetch()
   }, [
     applyPrice,
     selectedCategoryValue,
     selectedTradePeriodValue,
     selectedSortPriceValue,
-    refetch
+    infinitePosts?.refetch,
+    infinitePosts
   ])
 
   return (
     <Layout>
       <ResultWrapper>
-        <ResultHeader postData={postList?.pages} searchResult="###" />
+        <ResultHeader
+          postSummaries={Number(postSummaries)}
+          searchResult="###"
+        />
         {isDesktop && (
           <CategorySlideFilter
             cateGoryList={checkFilterList}
@@ -96,17 +100,17 @@ const Result: NextPage = () => {
           handleTradePeriodChange={handleTradePeriodSelectChange}
           maxPriceValue={maxPriceValue}
           minPriceValue={minPriceValue}
-          postData={postList?.pages}
+          postSummaries={Number(postSummaries)}
           selectedCategoryValue={selectedCategoryValue}
           selectedSortPriceValue={selectedSortPriceValue}
           selectedTradePeriodValue={selectedTradePeriodValue}
           sortPriceItems={sortPriceItems}
           tradePeriodItems={tradePeriodItems}
         />
         <ProductList
-          fetchNextPage={fetchNextPage}
-          hasNextPage={hasNextPage}
-          postData={postList?.pages}
+          fetchNextPage={infinitePosts?.fetchNextPage}
+          hasNextPage={infinitePosts?.hasNextPage}
+          postData={infinitePosts?.data?.pages}
         />
       </ResultWrapper>
     </Layout>

src/utils/result/index.ts

@@ -1,7 +1,7 @@
 import type { GetCategoriesRes } from '@apis/post'
 import type { CheckItemType } from '@hooks/result/useCategoryFilterList'
 
-export const manipulateArray = (
+export const transRateUseToCategorySelectBoxData = (
   categories: GetCategoriesRes,
   searchParams: string | null
 ) => {