From 131b0119d39419b20716ae29e88a54b6796fedc3 Mon Sep 17 00:00:00 2001 From: beom Date: Sat, 25 Jan 2025 21:52:10 +0900 Subject: [PATCH 1/3] =?UTF-8?q?Rename:=20s3=20=EC=9D=B4=EB=AF=B8=EC=A7=80?= =?UTF-8?q?=20=EC=A3=BC=EC=86=8C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- next.config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/next.config.ts b/next.config.ts index 7d36864d..bcd69237 100644 --- a/next.config.ts +++ b/next.config.ts @@ -17,7 +17,7 @@ const nextConfig: NextConfig = { remotePatterns: [ { protocol: 'https', - hostname: 'slid-todo.s3.ap-northeast-2.amazonaws.com', + hostname: 'zzikzzik-bucket.s3.ap-northeast-2.amazonaws.com', }, ], }, From 337e93a5917f6a1ebe68bd216dff9ed2a14eab72 Mon Sep 17 00:00:00 2001 From: beom Date: Sat, 25 Jan 2025 21:55:34 +0900 Subject: [PATCH 2/3] =?UTF-8?q?Refactor:=20=EA=B2=80=EC=83=89=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20searchParams=20=EC=82=AC=EC=9A=A9=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(route)/search/page.tsx | 28 ++++++++++++----- src/components/Search/SearchContent/index.tsx | 29 ++++++++++------- src/components/Search/SearchInput/index.tsx | 31 +++++++++++++------ src/store/useSearchStore.ts | 25 --------------- 4 files changed, 59 insertions(+), 54 deletions(-) delete mode 100644 src/store/useSearchStore.ts diff --git a/src/app/(route)/search/page.tsx b/src/app/(route)/search/page.tsx index 51d4093c..08b76288 100644 --- a/src/app/(route)/search/page.tsx +++ b/src/app/(route)/search/page.tsx @@ -2,25 +2,39 @@ import { useEffect } from 'react'; +import { useSearchParams, useRouter } from 'next/navigation'; import { PageContainer } from '@/components/common/PageContainer'; import { SearchContent } from '@/components/Search/SearchContent'; import { SearchHeader } from '@/components/Search/SearchHeader'; import { SearchInput } from '@/components/Search/SearchInput'; -import { useSearchStore } from '@/store/useSearchStore'; export default function SearchPage() { - const { setSearchFilter, setSearchKeyword } = useSearchStore(); + const searchParams = useSearchParams(); + const router = useRouter(); + + const searchFilter = searchParams.get('filter') || '유저명'; + const searchKeyword = searchParams.get('keyword') || ''; useEffect(() => { - setSearchFilter('유저명'); - setSearchKeyword(''); - }, [setSearchFilter, setSearchKeyword]); + if (!searchParams.has('filter') || !searchParams.has('keyword')) { + const newParams = new URLSearchParams(searchParams); + newParams.set('filter', '유저명'); + newParams.set('keyword', ''); + router.push(`?${newParams.toString()}`); + } + }, [router, searchParams]); return ( - - + + ); } diff --git a/src/components/Search/SearchContent/index.tsx b/src/components/Search/SearchContent/index.tsx index d91b94bf..6e7b6876 100644 --- a/src/components/Search/SearchContent/index.tsx +++ b/src/components/Search/SearchContent/index.tsx @@ -1,46 +1,51 @@ 'use client'; import { useEffect } from 'react'; - -import { useSearchStore } from '@/store/useSearchStore'; import { useSearchQuery } from '@/hooks/apis/Search/useSearchQuery'; import { SearchUserList } from './SearchUserList'; import { SearchGoalList } from './SearchGoalList'; -export const SearchContent = () => { - const { searchFilter, searchKeyword } = useSearchStore(); +interface SearchContentProps { + currentFilter: string; + currentKeyword: string; +} + +export const SearchContent = ({ + currentFilter, + currentKeyword, +}: SearchContentProps) => { const { data: searchData, refetch, isError, error, } = useSearchQuery({ - searchField: searchFilter, - keyword: searchKeyword, + searchField: currentFilter, + keyword: currentKeyword, }); useEffect(() => { - if (searchKeyword || searchFilter) { + if (currentFilter || currentKeyword) { refetch(); } - }, [searchKeyword, searchFilter, refetch]); + }, [currentFilter, currentKeyword, refetch]); return ( -
- {searchFilter === '유저명' ? ( +
+ {currentFilter === '유저명' ? ( ) : ( )}
diff --git a/src/components/Search/SearchInput/index.tsx b/src/components/Search/SearchInput/index.tsx index 55f59854..fe63f4dc 100644 --- a/src/components/Search/SearchInput/index.tsx +++ b/src/components/Search/SearchInput/index.tsx @@ -2,15 +2,24 @@ import { ChangeEvent, KeyboardEvent, useState } from 'react'; import { FaSearch } from 'react-icons/fa'; +import { useRouter } from 'next/navigation'; import { Input } from '@/components/common/Input'; import { PLACEHOLDERS } from '@/constants/Placeholders'; -import { useSearchStore } from '@/store/useSearchStore'; import { SearchFilterDropdown } from './SearchFilterDropdown'; -export const SearchInput = () => { - const [localKeyword, setLocalKeyword] = useState(''); - const [localFilter, setLocalFilter] = useState('유저명'); - const { setSearchKeyword, setSearchFilter } = useSearchStore(); +interface SearchInputProps { + currentFilter: string; + currentKeyword: string; +} + +export const SearchInput = ({ + currentFilter, + currentKeyword, +}: SearchInputProps) => { + const router = useRouter(); + + const [localKeyword, setLocalKeyword] = useState(currentKeyword); + const [localFilter, setLocalFilter] = useState(currentFilter); const handleKeyword = (e: ChangeEvent) => { setLocalKeyword(e.target.value); @@ -18,13 +27,15 @@ export const SearchInput = () => { const handleKeyPress = (e: KeyboardEvent) => { if (e.key === 'Enter') { - handleClick(); + updateSearchParams(); } }; - const handleClick = () => { - setSearchKeyword(localKeyword); - setSearchFilter(localFilter); + const updateSearchParams = () => { + const newParams = new URLSearchParams(); + newParams.set('filter', localFilter); + newParams.set('keyword', localKeyword); + router.push(`?${newParams.toString()}`); }; return ( @@ -44,7 +55,7 @@ export const SearchInput = () => {
); diff --git a/src/store/useSearchStore.ts b/src/store/useSearchStore.ts deleted file mode 100644 index 592e6507..00000000 --- a/src/store/useSearchStore.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { create } from 'zustand'; - -interface SearchState { - searchFilter: string; - searchKeyword: string; - isSearchClicked: boolean; - setSearchFilter: (searchFilter: string) => void; - setSearchKeyword: (searchKeyword: string) => void; - setIsSearchClicked: (clicked: boolean) => void; -} - -export const useSearchStore = create((set) => ({ - searchFilter: '유저명', - setSearchFilter: (searchFilter: string) => { - set({ searchFilter: searchFilter }); - }, - searchKeyword: '', - setSearchKeyword: (searchKeyword: string) => { - set({ searchKeyword: searchKeyword }); - }, - isSearchClicked: false, - setIsSearchClicked: (clicked: boolean) => { - set({ isSearchClicked: clicked }); - }, -})); From d8dddfcc89e564f4b2fb3e8b5c208149e8719ea3 Mon Sep 17 00:00:00 2001 From: beom Date: Sat, 25 Jan 2025 22:34:26 +0900 Subject: [PATCH 3/3] =?UTF-8?q?Fix:=20=EB=B9=8C=EB=93=9C=EC=98=A4=EB=A5=98?= =?UTF-8?q?=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(route)/search/layout.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 src/app/(route)/search/layout.tsx diff --git a/src/app/(route)/search/layout.tsx b/src/app/(route)/search/layout.tsx new file mode 100644 index 00000000..9581c4b3 --- /dev/null +++ b/src/app/(route)/search/layout.tsx @@ -0,0 +1,9 @@ +import { Suspense } from 'react'; + +export default function SearchLayout({ + children, +}: { + children: React.ReactNode; +}) { + return {children}; +}