KL-176/refactor: apply CodeRabbit suggestions

src/hooks/useDebouncedSearch.jsx

@@ -2,11 +2,10 @@ import React, { useState, useCallback } from 'react'
 import styled from 'styled-components'
 import { debounce } from 'lodash-es'
 import { Divider } from 'antd'
-import router from '@/router'
 import theme from '@styles/theme'
 import { modalIndex } from '@constants/navIndex'
 import kyInstance from '@utils/kyInstance'
-import initializeSearchState from '@utils/initializeSearchState'
+import useSearchedState from './useSearchedState'
 
 const SearchMapping = {
   products: '리뷰',
@@ -18,6 +17,8 @@ const SearchMapping = {
 
 const useDebouncedSearch = (setModalState) => {
   const [results, setResults] = useState([])
+  const handleResultClick = useSearchedState()
+
   const debouncedSearch = useCallback(
     debounce(async (inputValue) => {
       if (inputValue === '') {
@@ -55,13 +56,7 @@ const useDebouncedSearch = (setModalState) => {
                   key={content.name}
                   onClick={() => {
                     setModalState(modalIndex.NONE)
-                    const searchState = initializeSearchState(category, content)
-                    router.navigate('/feed', {
-                      state: {
-                        from: window.location.pathname,
-                        data: searchState,
-                      },
-                    })
+                    handleResultClick(category, content)
                   }}
                 >
                   {content.name}

src/hooks/useInitializeLocationState.js

@@ -10,7 +10,7 @@ const useInitializeLocationState = () => {
     const deleteDataState = (state) => {
       if (!state?.usr) return state
       const newState = { ...state, usr: { ...state.usr } }
-      if ('data' in newState.usr) delete newState.usr.data
+      if ('data' in newState.usr) newState.usr.data = undefined
       return newState
     }
     const { history } = window

src/hooks/useSearchedState.js

@@ -0,0 +1,18 @@
+import { useNavigate } from 'react-router-dom'
+import initializeSearchState from '@utils/initializeSearchState'
+
+const useSearchedState = () => {
+  const navigate = useNavigate()
+  const setSearchState = (category, content) => {
+    const searchState = initializeSearchState(category, content)
+    navigate('/feed', {
+      state: {
+        from: window.location.pathname,
+        data: searchState,
+      },
+    })
+  }
+  return setSearchState
+}
+
+export default useSearchedState

src/pages/FeedPage/components/Thumbnail/Thumbnail.jsx

@@ -5,8 +5,6 @@ import ThumbnailArea from './Thumbnail.style'
 
 function Thumbnail() {
   const selectedCountryId = useFeedStore((state) => state.selectedCountry.id)
-  const defaultWallpaper =
-    'https://image.fmkorea.com/files/attach/new3/20231020/3655109/5782408085/6302086124/a35751389c84e91bfa145bce6f81e5ba.jpg'
   const { data: wallpaper } = useKyQuery(
     `countries/${selectedCountryId}`,
     ['countryWallpaper', selectedCountryId],
@@ -19,7 +17,7 @@ function Thumbnail() {
   )
 
   return (
-    <ThumbnailArea $url={wallpaper || defaultWallpaper}>
+    <ThumbnailArea $url={wallpaper}>
       <div>
         <div className="title">기념품 둘러보기</div>
         <div className="description">기념품을 둘러보세요.</div>

src/pages/FeedPage/components/Thumbnail/Thumbnail.style.js

@@ -1,9 +1,13 @@
 import styled from 'styled-components'
 
+const defaultWallpaper =
+  'https://image.fmkorea.com/files/attach/new3/20231020/3655109/5782408085/6302086124/a35751389c84e91bfa145bce6f81e5ba.jpg'
+
 const ThumbnailArea = styled.div`
   width: 100%;
   height: 50vh;
-  background: 50% 4% / cover ${(props) => `url(${props.$url})`};
+  background: 50% 4% / cover
+    ${(props) => `url(${props.$url})` || defaultWallpaper};
   display: flex;
   justify-content: center;
   position: relative;

src/pages/HomePage/MainBanner.jsx

@@ -1,10 +1,9 @@
 import React, { useState, useEffect } from 'react'
 import styled from 'styled-components'
 import PropTypes from 'prop-types'
-import { useNavigate } from 'react-router-dom'
 import Flickity from 'flickity'
 import theme from '@styles/theme'
-import initializeSearchState from '@utils/initializeSearchState'
+import useSearchedState from '@hooks/useSearchedState'
 import StyledFlickity from '@components/Carousel/Carousel'
 
 const flickityOptions = {
@@ -18,7 +17,7 @@ const flickityOptions = {
 
 export default function MainBanner({ contents }) {
   const [curIndex, setCurIndex] = useState(0)
-  const navigate = useNavigate()
+  const handleBannerClick = useSearchedState()
 
   useEffect(() => {
     const flicktyContainer = new Flickity('.main-banner', flickityOptions)
@@ -40,15 +39,7 @@ export default function MainBanner({ contents }) {
             <StyledContainer
               key={content.id}
               $url={content.wallpaper}
-              onClick={() => {
-                const searchState = initializeSearchState('countries', content)
-                navigate('/feed', {
-                  state: {
-                    from: window.location.pathname,
-                    data: searchState,
-                  },
-                })
-              }}
+              onClick={() => handleBannerClick('countries', content)}
               className="carousel-cell"
             />
           )

src/pages/LogoutPage/LogoutPage.jsx

@@ -13,9 +13,9 @@ function LogoutPage() {
   useEffect(() => {
     const logout = async () => {
       if (isLogin) {
-        setLogout()
         try {
           await mutateAsync()
+          setLogout()
         } catch (error) {
           alert('로그아웃에 실패했습니다. 다시 시도해주세요.')
         }

src/utils/initializeSearchState.js

@@ -1,14 +1,25 @@
 const initializeSearchState = (searchedCategory, searchedContent) => {
+  const validCategories = ['countries', 'cities', 'categories', 'subcategories']
+
+  if (!validCategories.includes(searchedCategory)) {
+    throw new Error(`Invalid searchedCategory: ${searchedCategory}`)
+  }
+
+  if (!searchedContent || typeof searchedContent !== 'object') {
+    throw new Error('searchedContent must be a non-null object')
+  }
+
+  if (!searchedContent.id || !searchedContent.name) {
+    throw new Error('searchedContent must have id and name properties')
+  }
+
   const data = {
     id: searchedContent.id,
     name: searchedContent.name,
   }
-  const result = {
-    countries: [],
-    cities: [],
-    categories: [],
-    subcategories: [],
-  }
+  const result = Object.fromEntries(
+    validCategories.map((category) => [category, []])
+  )
   result[searchedCategory].push(data)
   return result
 }