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

src/apis/post/apis.ts

@@ -1,8 +1,16 @@
-import type { GetCategoriesRes, GetPostsReq, GetPostsRes } from './types'
+import type {
+  GetCategoriesRes,
+  GetPostsReq,
+  GetPostsRes,
+  GetSortOptionsReq
+} from './types'
 import { http } from '@utils/http'
 
 export const getCategories = () =>
   http.get<null, GetCategoriesRes>('/categories')
 
 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,6 +1,6 @@
 import { useInfiniteQuery, useQuery } from '@tanstack/react-query'
-import { getCategories, getPosts } from './apis'
-import type { GetPostsReq, GetPostsRes } from './types'
+import { getCategories, getPosts, getSortOption } from './apis'
+import type { GetPostsReq, GetPostsRes, GetSortOptionsReq } from './types'
 
 export const useGetCategoriesQuery = () =>
   useQuery({
@@ -18,9 +18,16 @@ 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

@@ -40,11 +40,11 @@ export type UpdateTradeStatusRes = number
 export type GetPostsReq = {
   sort?: string
   tradeType?: string
-  category?: string
+  category?: string | null
   sellerId?: number
   tradeStatus?: string
-  minPrice?: number
-  maxPrice?: number
+  minPrice?: number | null
+  maxPrice?: number | null
   lastId?: number | null
   limit?: number
 }
@@ -65,7 +65,7 @@ export type CreatePostRes = CommonCreation
 
 // TODO: 정확한 타입 BE 확인 필요
 export type GetSortOptionsReq = {
-  type: string
+  type: 'OFFER' | 'POST'
 }
 export type GetSortOptionsRes = SortOptionsShape
 

src/components/home/CategorySlider/index.tsx

@@ -1,4 +1,5 @@
 import { useMedia } from '@offer-ui/react'
+import { useRouter } from 'next/navigation'
 import { useState, useEffect, useRef, useCallback } from 'react'
 import type { ReactElement, TouchEventHandler } from 'react'
 import { Styled } from './styled'
@@ -13,6 +14,7 @@ const CategorySlider = (): ReactElement => {
   const [isLast, setIsLast] = useState<boolean>(false)
   const [isMoveFromArrowButton, setIsMoveArrowButton] = useState<number>(0)
   const isFirstCategory = containerRef.current?.scrollLeft === 0
+  const router = useRouter()
 
   const { data: categories } = useGetCategoriesQuery()
 
@@ -112,8 +114,8 @@ const CategorySlider = (): ReactElement => {
               return (
                 <Styled.CategoryItem
                   key={cateGory.name}
-                  onClick={(): void => {
-                    alert(cateGory.name)
+                  onClick={() => {
+                    router.push(`/result?category=${cateGory.code}`)
                   }}>
                   <Styled.CategoryImgWrapper>
                     <Styled.CategoryImg

src/components/result/CategoryHeader/index.tsx

@@ -2,13 +2,21 @@ import type { ReactElement } from 'react'
 import { Styled } from './styled'
 import type { ResultHeaderProps } from './types'
 
-const ResultHeader = ({ searchResult }: ResultHeaderProps): ReactElement => {
+const ResultHeader = ({
+  searchResult,
+  postData
+}: 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>999개</Styled.CategoryHeaderResultCount>
+      <Styled.CategoryHeaderResultCount>
+        {postCount}개
+      </Styled.CategoryHeaderResultCount>
     </Styled.CategoryHeaderWrapper>
   )
 }

src/components/result/CategoryHeader/types.ts

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

src/components/result/FilterSelect/index.tsx

@@ -1,58 +1,56 @@
-import { useMedia } from '@offer-ui/react'
-import { useEffect, useState } from 'react'
 import type { ReactElement } from 'react'
 import { Styled } from './styled'
 import type { FilterSelectProps } from './types'
 import { PriceDialog } from '../PriceDialog'
-
+import { useGetSortOptions } from '@apis/post/queries'
 const FilterSelect = ({
   categoryItems,
-  sortPriceItems,
   tradePeriodItems,
   selectedCategoryValue,
+  selectedTradePeriodValue,
   minPriceValue,
   maxPriceValue,
+  applyPrice,
+  postData,
   handleSortPriceChange,
   handleCategoryChange,
   handleTradePeriodChange,
   handleMinPriceInputChange,
   handleMaxPriceInputChange,
   handlePriceApplyClick
 }: FilterSelectProps): ReactElement => {
-  const { tablet, mobile } = useMedia()
+  const { data: priceSortOptions, isLoading } = useGetSortOptions({
+    type: 'POST'
+  })
 
-  const [disDesktop, setDIsDesktop] = useState(false)
+  const postCount =
+    postData && postData.reduce((acc, cur) => acc + cur.posts.length, 0)
 
-  useEffect(() => {
-    if (tablet || mobile) {
-      setDIsDesktop(true)
-    } else {
-      setDIsDesktop(false)
-    }
-  }, [tablet, mobile])
+  if (isLoading) {
+    // 로딩
+    return <></>
+  }
 
   return (
     <>
       <Styled.SelectWrapper>
         <Styled.LeftSelectWrapper>
-          {disDesktop ? (
-            <Styled.CategorySelect
-              colorType="dark"
-              items={categoryItems}
-              placeholder="전체"
-              value={selectedCategoryValue}
-              onChange={handleCategoryChange}
-            />
-          ) : (
-            <></>
-          )}
+          <Styled.CategorySelect
+            colorType="dark"
+            items={categoryItems}
+            placeholder={selectedCategoryValue}
+            value={selectedCategoryValue}
+            onChange={handleCategoryChange}
+          />
           <Styled.TradePeriodSelect
             colorType="light"
             items={tradePeriodItems}
             placeholder="거래방식"
+            value={selectedTradePeriodValue}
             onChange={handleTradePeriodChange}
           />
           <PriceDialog
+            applyPrice={applyPrice}
             handleMaxPriceInputChange={handleMaxPriceInputChange}
             handleMinPriceInputChange={handleMinPriceInputChange}
             handlePriceApplyClick={handlePriceApplyClick}
@@ -61,10 +59,10 @@ const FilterSelect = ({
           />
         </Styled.LeftSelectWrapper>
         <Styled.RightSelectWrapper>
-          {disDesktop && <Styled.ProductCount>전체 999개</Styled.ProductCount>}
+          <Styled.ProductCount>전체 {postCount}개</Styled.ProductCount>
           <Styled.PriceFilterSelect
             colorType="none"
-            items={sortPriceItems}
+            items={priceSortOptions}
             placeholder="높은 가격순"
             onChange={handleSortPriceChange}
           />

src/components/result/FilterSelect/styled.ts

@@ -12,16 +12,39 @@ const SelectWrapper = styled.div`
 
     margin-top: 25px;
   }
+
+  div::-webkit-scrollbar {
+    display: none;
+  }
+
+  div {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
 `
 
 const LeftSelectWrapper = styled.div`
   display: flex;
+  flex-wrap: wrap;
   gap: 8px;
 `
 const CategorySelect = styled(SelectBox)`
+  ${({ theme }): string => theme.mediaQuery.desktop} {
+    display: none;
+  }
+
+  ${({ theme }): string => theme.mediaQuery.tablet} {
+    display: inline;
+  }
+
+  ${({ theme }): string => theme.mediaQuery.mobile} {
+    display: inline;
+  }
+
   div:nth-of-type(1) {
     span {
       ${({ theme }): string => theme.fonts.body02B};
+      color: ${({ theme }): string => theme.colors.white};
     }
   }
 `
@@ -51,6 +74,17 @@ const PriceFilterSelect = styled(SelectBox)`
 `
 
 const ProductCount = styled.div`
+  ${({ theme }): string => theme.mediaQuery.desktop} {
+    display: none;
+  }
+
+  ${({ theme }): string => theme.mediaQuery.mobile} {
+    display: inline;
+  }
+
+  ${({ theme }): string => theme.mediaQuery.tablet} {
+    display: inline;
+  }
   margin-right: auto;
   ${({ theme }): string => theme.fonts.body01B}
 `

src/components/result/FilterSelect/types.ts

@@ -1,7 +1,11 @@
 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'
 
 export type FilterSelectProps = {
+  applyPrice: ApplyPriceType
+  postData?: GetPostsRes[]
   categoryItems: {
     code: string
     name: string