feat: 검색 기능 구현 (#241)

shinhyojeong · web-flow · commit 8f8cc49ced66 · 2024-01-24T00:43:14.000+09:00
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -47,6 +47,11 @@
             "group": "internal",
             "position": "after"
           },
+          {
+            "pattern": "@atoms",
+            "group": "internal",
+            "position": "after"
+          },
           {
             "pattern": "@layouts",
             "group": "internal",
diff --git a/src/apis/post/types.ts b/src/apis/post/types.ts
@@ -42,6 +42,7 @@ export type GetPostsReq = {
   category?: string
   sellerId?: number
   tradeStatus?: string
+  searchKeyword?: string
   minPrice?: number
   maxPrice?: number
   lastId?: number | null
diff --git a/src/atoms/index.ts b/src/atoms/index.ts
@@ -0,0 +1 @@
+export * from './search'
diff --git a/src/atoms/search.ts b/src/atoms/search.ts
@@ -0,0 +1,3 @@
+import { atom } from 'jotai'
+
+export const searchKeywordAtom = atom('')
diff --git a/src/components/common/Header/SearchArea/index.tsx b/src/components/common/Header/SearchArea/index.tsx
@@ -2,11 +2,19 @@ import React from 'react'
 import { Styled } from './styled'
 import type { SearchAreaProps } from './types'
 
-export const SearchArea = ({ onClose }: SearchAreaProps) => {
+export const SearchArea = ({ onClose, onSubmitValue }: SearchAreaProps) => {
+  const handleSubmitValue = (value: string) => {
+    onSubmitValue(value)
+    onClose()
+  }
+
   return (
     <Styled.SearchAreaWrapper>
       <Styled.InputWrapper>
-        <Styled.SearchInput placeholder="검색어를 입력하세요" />
+        <Styled.SearchInput
+          placeholder="검색어를 입력하세요"
+          onSubmitValue={handleSubmitValue}
+        />
         <Styled.CancelButton styleType="ghost" onClick={onClose}>
           취소
         </Styled.CancelButton>
diff --git a/src/components/common/Header/SearchArea/types.ts b/src/components/common/Header/SearchArea/types.ts
@@ -1,4 +1,5 @@
 export type SearchAreaProps = {
   isOpen: boolean
   onClose(): void
+  onSubmitValue(value: string): void
 }
diff --git a/src/components/common/Header/index.tsx b/src/components/common/Header/index.tsx
@@ -1,4 +1,5 @@
 import { Avatar, Divider, IconButton, Button } from '@offer-ui/react'
+import { useSetAtom } from 'jotai'
 import Image from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
@@ -9,45 +10,69 @@ import { SideBar } from './SideBar'
 import { Styled } from './styled'
 import { CommonModal } from '../CommonModal'
 import { Dialog } from '../Dialog'
-import { OAUTH_URL } from '@constants/oauth'
-import { useAuth } from '@hooks/useAuth'
-import { IMAGE } from '@constants'
-import { useModal } from '@hooks'
+import { toQueryString } from '@utils/format'
+import { searchKeywordAtom } from '@atoms'
+import { IMAGE, OAUTH_URL } from '@constants'
+import { useModal, useAuth } from '@hooks'
 
 const PREVENT_ACTIVE_PATHS = ['/post']
+const initDialog = {
+  logout: false,
+  search: false
+}
 
 const Header = (): ReactElement => {
   const router = useRouter()
   const isActivePath = !PREVENT_ACTIVE_PATHS.includes(router.pathname)
   const { isLogin, user, handleLogout } = useAuth()
   const { isOpen, openModal, closeModal } = useModal()
   const [isOpenSideBar, setIsOpenSideBar] = useState(false)
-  const [isOpenDialog, setIsOpenDialog] = useState({
-    logout: false,
-    search: false
-  })
+  const [isOpenDialog, setIsOpenDialog] = useState(initDialog)
+  const setSearchKeyword = useSetAtom(searchKeywordAtom)
 
   const handleOpenLoginModal = () => {
     openModal()
   }
 
+  const handleSubmitValue = (value?: string) => {
+    if (value) {
+      setSearchKeyword(value)
+      router.push(
+        `/result?${toQueryString({
+          searchKeyword: value
+        })}`
+      )
+    }
+  }
+
   const handleClickLogin = () => {
     router.replace(OAUTH_URL.KAKAO)
   }
 
+  const handleClickLogo = () => {
+    setIsOpenDialog(initDialog)
+    router.push('/')
+  }
+
+  const handleClickSideBar = () => {
+    setIsOpenDialog(initDialog)
+    setIsOpenSideBar(true)
+  }
+
   return (
     <>
       <Styled.HeaderWrapper>
         <Styled.HeaderContent>
           <Styled.LogoInputSection>
-            <Link href="/">
-              <Styled.LogoButton styleType="ghost">
-                <Image alt="Logo" height={40} src={IMAGE.LOGO} width={72} />
-              </Styled.LogoButton>
-            </Link>
+            <Styled.LogoButton styleType="ghost" onClick={handleClickLogo}>
+              <Image alt="Logo" height={40} src={IMAGE.LOGO} width={72} />
+            </Styled.LogoButton>
             {isActivePath && (
               <Styled.InputWrapper>
-                <Styled.SearchInput placeholder="검색어를 입력하세요" />
+                <Styled.SearchInput
+                  placeholder="검색어를 입력하세요"
+                  onSubmitValue={handleSubmitValue}
+                />
               </Styled.InputWrapper>
             )}
           </Styled.LogoInputSection>
@@ -134,11 +159,7 @@ const Header = (): ReactElement => {
                 })
               }
             />
-            <IconButton
-              icon="menu"
-              size={24}
-              onClick={() => setIsOpenSideBar(true)}
-            />
+            <IconButton icon="menu" size={24} onClick={handleClickSideBar} />
           </Styled.MenuSection>
         </Styled.HeaderContent>
       </Styled.HeaderWrapper>
@@ -151,6 +172,7 @@ const Header = (): ReactElement => {
               search: false
             })
           }
+          onSubmitValue={handleSubmitValue}
         />
       )}
       <SideBar
diff --git a/src/components/home/ProductItem/styled.ts b/src/components/home/ProductItem/styled.ts
@@ -5,10 +5,14 @@ import { Image, ToggleButton } from '@offer-ui/react'
 const Container = styled.div`
   flex: 1 0 22%;
 
+  max-width: 22%;
+
   cursor: pointer;
 
   ${({ theme }) => theme.mediaQuery.mobile} {
     flex: 1 0 44%;
+
+    max-width: 44%;
   }
 `
 
diff --git a/src/components/home/ProductList/styled.ts b/src/components/home/ProductList/styled.ts
@@ -18,22 +18,13 @@ const ProductListWrapper = styled.div`
   display: flex;
   flex-wrap: wrap;
   gap: 30px;
+  justify-content: start;
 
   ${({ theme }): string => theme.mediaQuery.tablet} {
-    grid-template-columns: repeat(4, minmax(10%, 166px));
     gap: 18px 20px;
-    justify-content: center;
   }
   ${({ theme }): string => theme.mediaQuery.mobile} {
-    grid-template-columns: repeat(2, minmax(30%, 200px));
     gap: 15px 50px;
-    justify-content: center;
-  }
-
-  @media (width <= 510px) {
-    grid-template-columns: repeat(2, minmax(10%, 160px));
-    gap: 8px 20px;
-    justify-content: center;
   }
 `
 
diff --git a/src/components/post/PriceOfferCard/index.tsx b/src/components/post/PriceOfferCard/index.tsx
@@ -110,7 +110,7 @@ const PriceOfferCard = ({
       })
 
       router.push(
-        `/messagebox${toQueryString({
+        `/messagebox?${toQueryString({
           roomId: res.id
         })}`
       )
diff --git a/src/components/result/PriceDialog/types.ts b/src/components/result/PriceDialog/types.ts
@@ -1,5 +1,5 @@
 export type PriceRange = {
-  min: number
+  min?: number
   max?: number
 }
 
diff --git a/src/components/result/SearchOptions/types.ts b/src/components/result/SearchOptions/types.ts
@@ -5,7 +5,7 @@ export type SearchOptionsState = {
   category?: string
   tradeType?: TradeTypeCodes
   priceRange: {
-    min: number
+    min?: number
     max?: number
   }
 }
diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -3,3 +3,4 @@ export * from './images'
 export * from './app'
 export * from './env'
 export * from './message'
+export * from './oauth'
diff --git a/src/constants/oauth.ts b/src/constants/oauth.ts
@@ -6,7 +6,7 @@ const OAUTH_ENDPOINT = {
 }
 
 export const OAUTH_URL = {
-  KAKAO: `${OAUTH_ENDPOINT.KAKAO}${toQueryString({
+  KAKAO: `${OAUTH_ENDPOINT.KAKAO}?${toQueryString({
     response_type: 'code',
     client_id: env.KAKAO_REST_API_KEY || '',
     redirect_uri: env.KAKAO_REDIRECT_URI || ''
diff --git a/src/pages/messagebox/index.tsx b/src/pages/messagebox/index.tsx
@@ -55,7 +55,7 @@ const MessageBoxPage = ({ roomId: defaultRoomId }: Props): ReactElement => {
     setRoomId(id)
 
     router.push(
-      `/messagebox${toQueryString({
+      `/messagebox?${toQueryString({
         roomId: String(id)
       })}`
     )
diff --git a/src/pages/post/[postId]/index.tsx b/src/pages/post/[postId]/index.tsx
@@ -113,7 +113,7 @@ const PostDetailPage = ({ postId }: Props): ReactElement => {
                           onClose={tradeStatusDialog.closeModal}>
                           <DialogButtonContainer>
                             <Link
-                              href={`/post${toQueryString({
+                              href={`/post?${toQueryString({
                                 type: 'edit',
                                 postId
                               })}`}>
diff --git a/src/pages/result/index.tsx b/src/pages/result/index.tsx
@@ -1,53 +1,99 @@
 import styled from '@emotion/styled'
-import type { NextPage } from 'next'
+import { useAtomValue } from 'jotai'
+import type { GetServerSideProps, NextPage } from 'next'
+import { useRouter } from 'next/router'
 import { useState } from 'react'
 import type {
   SearchOptionsState,
   OnChangeSearchOptions
 } from '@components/result/SearchOptions/types'
 import { useGetCategoriesQuery, useGetInfinitePostsQuery } from '@apis'
+import { searchKeywordAtom } from '@atoms'
 import {
   SearchOptions,
   ResultHeader,
   CategorySlideFilter,
   ProductList
 } from '@components'
+import type { SortOptionCodes, TradeTypeCodes } from '@types'
+import { toQueryString, removeNullish } from '@utils'
 
 const DEFAULT_POST_PAGE_NUMBER = 8
 
-const ResultPage: NextPage = () => {
+type ResultPageProps = {
+  keyword?: string
+  category?: string | null
+  sort?: SortOptionCodes
+  minPrice?: number
+  maxPrice?: number
+  tradeType?: TradeTypeCodes
+}
+export const getServerSideProps: GetServerSideProps<ResultPageProps> = async ({
+  query
+}) => ({
+  props: {
+    keyword: (query.keyword as string) || '',
+    category: (query.category as string) || null,
+    sort: (query.sort as SortOptionCodes) || 'CREATED_DATE_DESC',
+    minPrice: Number(query.min_price),
+    maxPrice: Number(query.max_price),
+    tradeType: (query.tradeType as TradeTypeCodes) || null
+  }
+})
+
+const ResultPage: NextPage = ({
+  keyword,
+  category,
+  sort,
+  minPrice,
+  maxPrice,
+  tradeType
+}: ResultPageProps) => {
   const getCategoriesQuery = useGetCategoriesQuery()
-  const categories =
-    getCategoriesQuery.data?.map(({ code, name }) => ({ code, name })) || []
+  const router = useRouter()
+  const searchKeyword = useAtomValue(searchKeywordAtom)
   const [searchOptions, setSearchOptions] = useState<SearchOptionsState>({
     sort: 'CREATED_DATE_DESC',
-    priceRange: {
-      min: 0
-    }
+    priceRange: {}
   })
+  const currentKeyword = searchKeyword ?? keyword
+  const searchParams = removeNullish({
+    category: searchOptions?.category ?? category,
+    minPrice: searchOptions.priceRange?.min ?? minPrice,
+    maxPrice: searchOptions.priceRange?.max ?? maxPrice,
+    tradeType: searchOptions.tradeType ?? tradeType,
+    sort: searchOptions.sort ?? sort,
+    searchKeyword: currentKeyword
+  })
+
+  const categories =
+    getCategoriesQuery.data?.map(({ code, name }) => ({ code, name })) || []
+
   const infinitePosts = useGetInfinitePostsQuery({
     lastId: null,
     limit: DEFAULT_POST_PAGE_NUMBER,
-    category: searchOptions?.category,
-    minPrice: searchOptions.priceRange?.min,
-    maxPrice: searchOptions.priceRange?.max,
-    tradeType: searchOptions.tradeType,
-    sort: searchOptions.sort
+    ...searchParams
   })
   // TODO: 포스트 전체 갯수 내려달라고 요청해놓았습니다
   const postsCount = 0
 
   const handleChangeSearchOptions: OnChangeSearchOptions = (name, value) => {
-    setSearchOptions(prev => ({
-      ...prev,
+    const nextSearchOptions = {
+      ...searchOptions,
       [name]: value
-    }))
+    }
+    setSearchOptions(nextSearchOptions)
+
+    router.push(`/result?${toQueryString(searchParams)}`)
   }
 
   return (
     <Layout>
       <ResultWrapper>
-        <ResultHeader postsCount={postsCount} searchResult="###" />
+        <ResultHeader
+          postsCount={postsCount}
+          searchResult={currentKeyword || ''}
+        />
         <CategorySliderWrapper>
           <CategorySlideFilter
             categories={categories}
diff --git a/src/utils/format/format.test.ts b/src/utils/format/format.test.ts
@@ -25,6 +25,6 @@ describe('format/toQueryString', () => {
     const result = toQueryString(object)
 
     // Then
-    expect(result).toBe('?content_id=123&type=user')
+    expect(result).toBe('content_id=123&type=user')
   })
 })
diff --git a/src/utils/format/index.ts b/src/utils/format/index.ts
diff --git a/tsconfig.path.json b/tsconfig.path.json

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import { atom } from 'jotai'`
	`2`	`+`
	`3`	`+export const searchKeywordAtom = atom('')`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`export type SearchAreaProps = {`
`2`	`2`	`isOpen: boolean`
`3`	`3`	`onClose(): void`
	`4`	`+ onSubmitValue(value: string): void`
`4`	`5`	`}`
Original file line number	Diff line number	Diff line change
`@@ -5,10 +5,14 @@ import { Image, ToggleButton } from '@offer-ui/react'`
`5`	`5`	const Container = styled.div`
`6`	`6`	`flex: 1 0 22%;`
`7`	`7`
	`8`	`+ max-width: 22%;`
	`9`	`+`
`8`	`10`	`cursor: pointer;`
`9`	`11`
`10`	`12`	`${({ theme }) => theme.mediaQuery.mobile} {`
`11`	`13`	`flex: 1 0 44%;`
	`14`	`+`
	`15`	`+ max-width: 44%;`
`12`	`16`	`}`
`13`	`17`	`
`14`	`18`
Original file line number	Diff line number	Diff line change
`@@ -110,7 +110,7 @@ const PriceOfferCard = ({`
`110`	`110`	`})`
`111`	`111`
`112`	`112`	`router.push(`
`113`		- `/messagebox${toQueryString({
	`113`	+ `/messagebox?${toQueryString({
`114`	`114`	`roomId: res.id`
`115`	`115`	})}`
`116`	`116`	`)`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`export type PriceRange = {`
`2`		`- min: number`
	`2`	`+ min?: number`
`3`	`3`	`max?: number`
`4`	`4`	`}`
`5`	`5`
Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@ export type SearchOptionsState = {`
`5`	`5`	`category?: string`
`6`	`6`	`tradeType?: TradeTypeCodes`
`7`	`7`	`priceRange: {`
`8`		`- min: number`
	`8`	`+ min?: number`
`9`	`9`	`max?: number`
`10`	`10`	`}`
`11`	`11`	`}`
Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@ const OAUTH_ENDPOINT = {`
`6`	`6`	`}`
`7`	`7`
`8`	`8`	`export const OAUTH_URL = {`
`9`		- KAKAO: `${OAUTH_ENDPOINT.KAKAO}${toQueryString({
	`9`	+ KAKAO: `${OAUTH_ENDPOINT.KAKAO}?${toQueryString({
`10`	`10`	`response_type: 'code',`
`11`	`11`	`client_id: env.KAKAO_REST_API_KEY \|\| '',`
`12`	`12`	`redirect_uri: env.KAKAO_REDIRECT_URI \|\| ''`
Original file line number	Diff line number	Diff line change
`@@ -55,7 +55,7 @@ const MessageBoxPage = ({ roomId: defaultRoomId }: Props): ReactElement => {`
`55`	`55`	`setRoomId(id)`
`56`	`56`
`57`	`57`	`router.push(`
`58`		- `/messagebox${toQueryString({
	`58`	+ `/messagebox?${toQueryString({
`59`	`59`	`roomId: String(id)`
`60`	`60`	})}`
`61`	`61`	`)`