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

src/apis/post/apis.ts

@@ -1,10 +1,10 @@
 import type {
   GetCategoriesRes,
+  GetPostsReq,
+  GetPostsRes,
   GetPostRes,
   CreatePostReq,
-  CreatePostRes,
-  GetPostsReq,
-  GetPostsRes
+  CreatePostRes
 } from './types'
 import { http } from '@utils/http'
 

src/apis/post/queries.ts

@@ -1,6 +1,6 @@
 import { useMutation, useQuery, useInfiniteQuery } from '@tanstack/react-query'
-import { getPost, getCategories, createPost, getPosts } from './apis'
-import type { CreatePostReq, GetPostsReq, GetPostsRes } from './types'
+import { getCategories, getPosts, getPost, createPost } from './apis'
+import type { GetPostsReq, GetPostsRes, CreatePostReq } from './types'
 
 export const useCreatePostMutation = () =>
   useMutation({

src/apis/post/types.ts

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

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,18 @@ import type { ReactElement } from 'react'
 import { Styled } from './styled'
 import type { ResultHeaderProps } from './types'
 
-const ResultHeader = ({ searchResult }: ResultHeaderProps): ReactElement => {
+const ResultHeader = ({
+  searchResult,
+  postSummaries
+}: ResultHeaderProps): ReactElement => {
   return (
     <Styled.CategoryHeaderWrapper>
       <Styled.CategoryHeader>
         &quot;{searchResult}&quot;의 검색결과
       </Styled.CategoryHeader>
-      <Styled.CategoryHeaderResultCount>999개</Styled.CategoryHeaderResultCount>
+      <Styled.CategoryHeaderResultCount>
+        {postSummaries && postSummaries}개
+      </Styled.CategoryHeaderResultCount>
     </Styled.CategoryHeaderWrapper>
   )
 }

src/components/result/CategoryHeader/types.ts

@@ -1,3 +1,4 @@
 export type ResultHeaderProps = {
   searchResult: string
+  postSummaries: number
 }

src/components/result/FilterSelect/index.tsx

@@ -1,58 +1,44 @@
-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 { SORT_OPTIONS } from '@constants/app'
 const FilterSelect = ({
   categoryItems,
-  sortPriceItems,
   tradePeriodItems,
   selectedCategoryValue,
+  selectedTradePeriodValue,
   minPriceValue,
   maxPriceValue,
+  applyPrice,
+  postSummaries,
   handleSortPriceChange,
   handleCategoryChange,
   handleTradePeriodChange,
   handleMinPriceInputChange,
   handleMaxPriceInputChange,
   handlePriceApplyClick
 }: FilterSelectProps): ReactElement => {
-  const { tablet, mobile } = useMedia()
-
-  const [disDesktop, setDIsDesktop] = useState(false)
-
-  useEffect(() => {
-    if (tablet || mobile) {
-      setDIsDesktop(true)
-    } else {
-      setDIsDesktop(false)
-    }
-  }, [tablet, mobile])
-
   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 +47,12 @@ const FilterSelect = ({
           />
         </Styled.LeftSelectWrapper>
         <Styled.RightSelectWrapper>
-          {disDesktop && <Styled.ProductCount>전체 999개</Styled.ProductCount>}
+          <Styled.ProductCount>
+            전체 {postSummaries && postSummaries}개
+          </Styled.ProductCount>
           <Styled.PriceFilterSelect
             colorType="none"
-            items={sortPriceItems}
+            items={SORT_OPTIONS}
             placeholder="높은 가격순"
             onChange={handleSortPriceChange}
           />

src/components/result/FilterSelect/styled.ts

@@ -12,16 +12,35 @@ 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;
+  }
+
   div:nth-of-type(1) {
     span {
       ${({ theme }): string => theme.fonts.body02B};
+      color: ${({ theme }): string => theme.colors.white};
     }
   }
 `
@@ -51,6 +70,13 @@ const PriceFilterSelect = styled(SelectBox)`
 `
 
 const ProductCount = styled.div`
+  ${({ theme }): string => theme.mediaQuery.desktop} {
+    display: none;
+  }
+
+  ${({ theme }): string => theme.mediaQuery.tablet} {
+    display: inline;
+  }
   margin-right: auto;
   ${({ theme }): string => theme.fonts.body01B}
 `

src/components/result/FilterSelect/types.ts

@@ -1,16 +1,18 @@
 import type { SelectOnChangeHandler } from '@offer-ui/react'
 import type { ChangeEventHandler } from 'react'
+import type { TRADE_TYPES } from '@constants/app'
+import type { GetPostsRes } from '@apis'
+import type { ApplyPriceType } from '@hooks'
 
 export type FilterSelectProps = {
+  applyPrice: ApplyPriceType
+  postData?: GetPostsRes[]
   categoryItems: {
     code: string
     name: string
     selected: boolean
   }[]
-  tradePeriodItems: {
-    code: string
-    name: string
-  }[]
+  tradePeriodItems: typeof TRADE_TYPES
   sortPriceItems: {
     code: string
     name: string
@@ -20,6 +22,7 @@ export type FilterSelectProps = {
   selectedSortPriceValue: string
   minPriceValue: string
   maxPriceValue: string
+  postSummaries: number
   handleSortPriceChange: SelectOnChangeHandler
   handleCategoryChange: SelectOnChangeHandler
   handleTradePeriodChange: SelectOnChangeHandler