feat: category/reesult 페이지 분류 (#244)

src/components/common/PostSection/index.tsx

@@ -0,0 +1,46 @@
+import { Styled } from './styled'
+import type { PostSectionProps } from './types'
+import { useGetCategoriesQuery } from '@apis/post'
+import { SearchOptions, CategorySlideFilter, ProductList } from '@components'
+
+export const PostSection = ({
+  infinitePosts,
+  postsCount = 0,
+  searchOptions,
+  onChangeSearchOption
+}: PostSectionProps) => {
+  const getCategoriesQuery = useGetCategoriesQuery()
+  const categories =
+    getCategoriesQuery.data?.map(({ code, name }) => ({
+      code,
+      name
+    })) || []
+
+  return (
+    <>
+      <Styled.CategorySliderWrapper>
+        <CategorySlideFilter
+          categories={categories}
+          selectedCategory={searchOptions.category}
+          onClickCategory={code => onChangeSearchOption('category', code)}
+        />
+      </Styled.CategorySliderWrapper>
+      <SearchOptions
+        categories={categories}
+        postsCount={postsCount}
+        searchOptions={searchOptions}
+        onChangeSearchOption={onChangeSearchOption}
+      />
+      {postsCount > 0 ? (
+        <ProductList {...infinitePosts} />
+      ) : (
+        <Styled.Placeholder>
+          <Styled.PlaceholderTitle>검색 결과 없음</Styled.PlaceholderTitle>
+          <Styled.PlaceholderDescription>
+            찾으시는 검색 결과가 없어요
+          </Styled.PlaceholderDescription>
+        </Styled.Placeholder>
+      )}
+    </>
+  )
+}

src/components/common/PostSection/styled.ts

@@ -0,0 +1,38 @@
+import { css } from '@emotion/react'
+import styled from '@emotion/styled'
+
+const CategorySliderWrapper = styled.div`
+  /* TODO: useMedia를 사용한 조건부 렌더링시 hydration 에러가 발생해 스타일로 우선 적용 했습니다. */
+  ${({ theme }) => theme.mediaQuery.tablet} {
+    display: none;
+  }
+`
+
+const Placeholder = styled.div`
+  width: 100%;
+  height: 100%;
+  margin: 120px 0;
+
+  text-align: center;
+`
+
+const PlaceholderTitle = styled.p`
+  margin-bottom: 8px;
+
+  ${({ theme }) => theme.fonts.subtitle01B}
+`
+
+const PlaceholderDescription = styled.p`
+  ${({ theme }) => css`
+    color: ${theme.colors.grayScale70};
+
+    ${theme.fonts.body01M};
+  `}
+`
+
+export const Styled = {
+  CategorySliderWrapper,
+  Placeholder,
+  PlaceholderTitle,
+  PlaceholderDescription
+}

src/components/common/PostSection/types.ts

@@ -0,0 +1,12 @@
+import type {
+  SearchOptionsState,
+  OnChangeSearchOptions
+} from '../../result/SearchOptions/types'
+import type { ProductListProps } from '@components/home'
+
+export type PostSectionProps = {
+  postsCount?: number
+  infinitePosts: ProductListProps
+  searchOptions: SearchOptionsState
+  onChangeSearchOption: OnChangeSearchOptions
+}

src/components/common/index.ts

@@ -3,3 +3,4 @@ export * from './CommonModal'
 export * from './Header'
 export * from './AlertModal'
 export * from './Dialog'
+export * from './PostSection'

src/components/home/CategorySlider/index.tsx

@@ -4,6 +4,8 @@ import { useState, useEffect, useRef, useCallback } from 'react'
 import type { ReactElement, TouchEventHandler } from 'react'
 import { Styled } from './styled'
 import { useGetCategoriesQuery } from '@apis/post'
+import { SORT_OPTIONS } from '@constants/app'
+import { toQueryString } from '@utils/format'
 
 const CategorySlider = (): ReactElement => {
   const containerRef = useRef<HTMLDivElement | null>(null)
@@ -84,7 +86,7 @@ const CategorySlider = (): ReactElement => {
           onTouchMove={isDrag ? onDragMove : undefined}
           onTouchStart={onDragStart}>
           {isDesktop && (
-            <Styled.ArrowBox>
+            <>
               {isFirstCategory ? (
                 <div />
               ) : (
@@ -105,14 +107,17 @@ const CategorySlider = (): ReactElement => {
                   onClick={handleRightArrowClick}
                 />
               )}
-            </Styled.ArrowBox>
+            </>
           )}
           <Styled.CateGoryBoxWrapper
             isMoveFromArrowButton={isMoveFromArrowButton}>
             {getCategoryQuery.data?.map(({ code, name, imageUrl }) => {
               return (
                 <Styled.CategoryItem key={name}>
-                  <Styled.CategoryLink href={`/result?category=${code}`}>
+                  <Styled.CategoryLink
+                    href={`/categories/${code}?${toQueryString({
+                      sort: SORT_OPTIONS[0].code
+                    })}`}>
                     <Styled.CategoryImgWrapper>
                       <Styled.CategoryImg
                         key={name}

src/components/home/CategorySlider/styled.ts

@@ -4,6 +4,7 @@ import { IconButton } from '@offer-ui/react'
 import Image from 'next/image'
 import Link from 'next/link'
 import type { CateGoryBoxWrapperProps } from './types'
+import { theme } from '@styles'
 
 export const CategoryHeader = styled.div`
   ${({ theme }): string => theme.fonts.headline02B}
@@ -81,43 +82,46 @@ export const CateGoryBox = styled.div`
   }
 `
 
-export const ArrowBox = styled.div`
+const arrowStyle = css`
   position: absolute;
-  z-index: 999;
-  display: flex;
-  align-self: center;
-  justify-content: space-between;
-
-  width: 100%;
-  margin-bottom: 30px;
-`
+  top: 32px;
+  z-index: ${theme.zIndex.common};
 
-export const LeftArrow = styled(IconButton)`
   width: 24px;
   height: 24px;
   border-radius: 100%;
 
-  background-color: ${({ theme }): string => theme.colors.white};
+  background-color: ${theme.colors.white};
 
   filter: drop-shadow(0 2px 6px rgb(0 0 0 / 25%));
 `
 
-export const RightArrow = styled(IconButton)`
-  width: 24px;
-  height: 24px;
-  border-radius: 100%;
+export const LeftArrow = styled(IconButton)`
+  left: 0;
+
+  ${arrowStyle}
+`
 
-  background-color: ${({ theme }): string => theme.colors.white};
+export const RightArrow = styled(IconButton)`
+  right: 0;
 
-  filter: drop-shadow(0 2px 6px rgb(0 0 0 / 25%));
+  ${arrowStyle}
 
   transform: scaleX(-1);
 `
 
-export const CategoryItem = styled.div`
+export const CategoryItem = styled.button`
+  display: flex;
+  justify-content: center;
+
   width: 100%;
   max-width: 108px;
   height: 118px;
+  border: none;
+
+  background: transparent;
+
+  cursor: pointer;
 
   transition: 0.5s;
 
@@ -142,6 +146,7 @@ export const CategoryImgWrapper = styled.div`
   width: 108px;
   height: 86px;
 
+  cursor: pointer;
   ${({ theme }) => css`
     border-radius: ${theme.radius.round12};
 
@@ -192,7 +197,6 @@ export const Styled = {
   CateGoryBoxWrapper,
   CateGoryBox,
   CategoryLink,
-  ArrowBox,
   LeftArrow,
   RightArrow,
   CategoryItem,

src/components/home/ProductList/types.ts

@@ -3,14 +3,10 @@ import type {
   InfiniteData,
   InfiniteQueryObserverResult
 } from '@tanstack/react-query'
-import type { GetPostsReq, GetPostsRes } from '@apis/post'
+import type { GetPostsRes } from '@apis/post'
 
 export type ProductListProps = {
   postData?: GetPostsRes[]
-  filterOption?: Pick<
-    GetPostsReq,
-    'sort' | 'category' | 'minPrice' | 'maxPrice'
-  >
   hasNextPage?: boolean
   fetchNextPage?(
     options?: FetchNextPageOptions

src/components/result/CategoryHeader/index.tsx

@@ -3,14 +3,12 @@ import { Styled } from './styled'
 import type { ResultHeaderProps } from './types'
 
 const ResultHeader = ({
-  searchResult,
+  resultMessage,
   postsCount
 }: ResultHeaderProps): ReactElement => {
   return (
     <Styled.CategoryHeaderWrapper>
-      <Styled.CategoryHeader>
-        &quot;{searchResult}&quot;의 검색결과
-      </Styled.CategoryHeader>
+      <Styled.CategoryHeader>{resultMessage}</Styled.CategoryHeader>
       <Styled.CategoryHeaderResultCount>
         {postsCount}개
       </Styled.CategoryHeaderResultCount>

src/components/result/CategoryHeader/types.ts

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

src/components/result/SearchOptions/types.ts

@@ -9,14 +9,15 @@ export type SearchOptionsState = {
     max?: number
   }
 }
+
 export type OnChangeSearchOptions = (
   name: KeyOf<SearchOptionsState>,
   value: ValueOf<SearchOptionsState>
 ) => void
 
 export type SearchOptionsProps = {
-  categories: Pick<Category, 'code' | 'name'>[]
   postsCount?: number
+  categories: Pick<Category, 'code' | 'name'>[]
   searchOptions: SearchOptionsState
   onChangeSearchOption: OnChangeSearchOptions
 }