feat:결과페이지 api 및 스타일 작업 (#174)

src/apis/post/apis.ts

@@ -1,10 +1,10 @@
 import type {
   GetCategoriesRes,
+  GetPostsReq,
+  GetPostsRes,
   GetPostRes,
   CreatePostReq,
   CreatePostRes,
-  GetPostsReq,
-  GetPostsRes,
   UpdateTradeStatusReq,
   UpdateTradeStatusRes,
   DeletePostReq,

src/apis/post/types.ts

@@ -4,7 +4,6 @@ import type {
   PostDetail,
   PostSummaries,
   ProductConditionCodes,
-  SortOptionsShape,
   TradeStatusCodes,
   TradeTypeCodes
 } from '@types'
@@ -63,10 +62,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 { useState, useEffect, useRef, useCallback } from 'react'
 import type { ReactElement, TouchEventHandler } from 'react'
 import { Styled } from './styled'
@@ -110,21 +111,20 @@ const CategorySlider = (): ReactElement => {
             isMoveFromArrowButton={isMoveFromArrowButton}>
             {categories?.map(cateGory => {
               return (
-                <Styled.CategoryItem
-                  key={cateGory.name}
-                  onClick={(): void => {
-                    alert(cateGory.name)
-                  }}>
-                  <Styled.CategoryImgWrapper>
-                    <Styled.CategoryImg
-                      key={cateGory.name}
-                      alt={`category-${cateGory.name}`}
-                      height={58}
-                      src={cateGory.imageUrl}
-                      width={58}
-                    />
-                  </Styled.CategoryImgWrapper>
-                  <Styled.CateGoryName>{cateGory.name}</Styled.CateGoryName>
+                <Styled.CategoryItem key={cateGory.name}>
+                  <Styled.CategoryLink
+                    href={`/result?category=${cateGory.code}`}>
+                    <Styled.CategoryImgWrapper>
+                      <Styled.CategoryImg
+                        key={cateGory.name}
+                        alt={`category-${cateGory.name}`}
+                        height={58}
+                        src={cateGory.imageUrl}
+                        width={58}
+                      />
+                    </Styled.CategoryImgWrapper>
+                    <Styled.CateGoryName>{cateGory.name}</Styled.CateGoryName>
+                  </Styled.CategoryLink>
                 </Styled.CategoryItem>
               )
             })}

src/components/home/CategorySlider/styled.ts

@@ -2,6 +2,7 @@ import { css } from '@emotion/react'
 import styled from '@emotion/styled'
 import { IconButton } from '@offer-ui/react'
 import Image from 'next/image'
+import Link from 'next/link'
 import type { CateGoryBoxWrapperProps } from './types'
 
 export const CategoryHeader = styled.div`
@@ -31,6 +32,14 @@ export const CateGoryWrapper = styled.div`
     scrollbar-width: none; /* Firefox */
   }
 `
+
+export const CategoryLink = styled(Link)`
+  background: transparent;
+
+  color: ${({ theme }) => theme.colors.grayScale90};
+  text-decoration: none;
+`
+
 export const CateGoryBoxWrapper = styled.div<CateGoryBoxWrapperProps>`
   display: flex;
   gap: 12px;
@@ -182,6 +191,7 @@ export const Styled = {
   CateGoryWrapper,
   CateGoryBoxWrapper,
   CateGoryBox,
+  CategoryLink,
   ArrowBox,
   LeftArrow,
   RightArrow,

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,
+  postSummariesLength
+}: ResultHeaderProps): ReactElement => {
   return (
     <Styled.CategoryHeaderWrapper>
       <Styled.CategoryHeader>
         &quot;{searchResult}&quot;의 검색결과
       </Styled.CategoryHeader>
-      <Styled.CategoryHeaderResultCount>999개</Styled.CategoryHeaderResultCount>
+      <Styled.CategoryHeaderResultCount>
+        {postSummariesLength && postSummariesLength}개
+      </Styled.CategoryHeaderResultCount>
     </Styled.CategoryHeaderWrapper>
   )
 }

src/components/result/CategoryHeader/types.ts

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

src/components/result/FilterSelect/index.tsx

@@ -1,71 +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 { SORT_OPTIONS } from '@constants/app'
 const FilterSelect = ({
   categoryItems,
-  sortPriceItems,
   tradePeriodItems,
   selectedCategoryValue,
-  minPriceValue,
-  maxPriceValue,
+  selectedTradePeriodValue,
+  selectedSortPriceValue,
+  inputPrice,
+  applyPrice,
+  postSummariesLength,
   handleSortPriceChange,
   handleCategoryChange,
   handleTradePeriodChange,
-  handleMinPriceInputChange,
-  handleMaxPriceInputChange,
+  handlePriceInputChange,
   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
-            handleMaxPriceInputChange={handleMaxPriceInputChange}
-            handleMinPriceInputChange={handleMinPriceInputChange}
+            applyPrice={applyPrice}
             handlePriceApplyClick={handlePriceApplyClick}
-            maxPriceValue={maxPriceValue}
-            minPriceValue={minPriceValue}
+            handlePriceInputChange={handlePriceInputChange}
+            inputPrice={inputPrice}
           />
         </Styled.LeftSelectWrapper>
         <Styled.RightSelectWrapper>
-          {disDesktop && <Styled.ProductCount>전체 999개</Styled.ProductCount>}
+          <Styled.ProductCount>
+            전체 {postSummariesLength && postSummariesLength}개
+          </Styled.ProductCount>
           <Styled.PriceFilterSelect
             colorType="none"
-            items={sortPriceItems}
-            placeholder="높은 가격순"
+            items={SORT_OPTIONS}
+            value={selectedSortPriceValue}
             onChange={handleSortPriceChange}
           />
         </Styled.RightSelectWrapper>

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,29 +1,26 @@
 import type { SelectOnChangeHandler } from '@offer-ui/react'
 import type { ChangeEventHandler } from 'react'
+import type { GetPostsRes } from '@apis'
+import type { ApplyPriceType } from '@hooks'
+import type { TradeTypes, SortOptionCodes, TradeTypeCodes } from '@types'
 
 export type FilterSelectProps = {
+  applyPrice: ApplyPriceType
+  inputPrice: ApplyPriceType
+  postData?: GetPostsRes[]
   categoryItems: {
     code: string
     name: string
     selected: boolean
   }[]
-  tradePeriodItems: {
-    code: string
-    name: string
-  }[]
-  sortPriceItems: {
-    code: string
-    name: string
-  }[]
+  tradePeriodItems: TradeTypes
   selectedCategoryValue: string
-  selectedTradePeriodValue: string
-  selectedSortPriceValue: string
-  minPriceValue: string
-  maxPriceValue: string
+  selectedTradePeriodValue: TradeTypeCodes | ''
+  selectedSortPriceValue: SortOptionCodes
+  postSummariesLength: number
   handleSortPriceChange: SelectOnChangeHandler
   handleCategoryChange: SelectOnChangeHandler
   handleTradePeriodChange: SelectOnChangeHandler
-  handleMinPriceInputChange: ChangeEventHandler
-  handleMaxPriceInputChange: ChangeEventHandler
+  handlePriceInputChange: ChangeEventHandler
   handlePriceApplyClick(): void
 }