From f0a04b0417b2bc544ed5a01fe753260cd1ab2bf1 Mon Sep 17 00:00:00 2001
From: eeseung <seunghee9941@gmail.com>
Date: Fri, 10 Nov 2023 17:11:54 +0900
Subject: [PATCH 1/8] =?UTF-8?q?feat:=20#63=20-=20Dropdown=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20defaultIndex=20prop=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Dropdown/Dropdown.tsx         | 4 ++++
 src/components/common/Dropdown/hooks/useDropdown.ts | 4 +++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/common/Dropdown/Dropdown.tsx b/src/components/common/Dropdown/Dropdown.tsx
index d456b868..cb7010e2 100644
--- a/src/components/common/Dropdown/Dropdown.tsx
+++ b/src/components/common/Dropdown/Dropdown.tsx
@@ -3,6 +3,7 @@
 import { useRef } from 'react'
 import { cls } from '@/utils'
 import { ChevronDownIcon } from '@heroicons/react/20/solid'
+import { useSearchParams } from 'next/navigation'
 import DropdownItem from './DropdownItem'
 import { DROPDOWN_OPTIONS, PLACEMENTS, VERTICAL_PADDING } from './constants'
 import useDropdown from './hooks/useDropdown'
@@ -11,6 +12,7 @@ export interface DropdownProps {
   type: 'space' | 'link' | 'search' | 'user_edit' | 'user_invite' | 'tag'
   size?: 'large' | 'medium' | 'small'
   placement?: 'left' | 'right'
+  defaultIndex?: number
   tags?: string[]
   onChange: (e: React.MouseEvent<HTMLButtonElement>) => void
 }
@@ -19,6 +21,7 @@ const Dropdown = ({
   type,
   size = 'medium',
   placement = 'left',
+  defaultIndex,
   tags,
   onChange,
 }: DropdownProps) => {
@@ -32,6 +35,7 @@ const Dropdown = ({
       : tags && ['전체', ...tags]
   const dropdownRef = useRef<HTMLDivElement | null>(null)
   const { isOpen, setIsOpen, index, handleClick } = useDropdown({
+    defaultIndex,
     el: dropdownRef,
     onChange,
   })
diff --git a/src/components/common/Dropdown/hooks/useDropdown.ts b/src/components/common/Dropdown/hooks/useDropdown.ts
index aad00161..8c56f681 100644
--- a/src/components/common/Dropdown/hooks/useDropdown.ts
+++ b/src/components/common/Dropdown/hooks/useDropdown.ts
@@ -9,11 +9,13 @@ import {
 } from 'react'
 
 export interface useDropdownProps {
+  defaultIndex?: number
   el: React.RefObject<HTMLDivElement>
   onChange: (e: React.MouseEvent<HTMLButtonElement>) => void
 }
 
 const useDropdown = ({
+  defaultIndex,
   el,
   onChange,
 }: useDropdownProps): {
@@ -23,7 +25,7 @@ const useDropdown = ({
   handleClick: (e: React.MouseEvent<HTMLButtonElement>, i: number) => void
 } => {
   const [isOpen, setIsOpen] = useState(false)
-  const [index, setIndex] = useState(0)
+  const [index, setIndex] = useState(defaultIndex ?? 0)
 
   useEffect(() => {
     const handleOutsideClose = (e: { target: any }) => {

From a62102dd1f334b136d4bd210dd97382974c7db9d Mon Sep 17 00:00:00 2001
From: eeseung <seunghee9941@gmail.com>
Date: Sat, 11 Nov 2023 11:06:41 +0900
Subject: [PATCH 2/8] =?UTF-8?q?refactor:=20#63=20-=20CategoryList=20prop?=
 =?UTF-8?q?=20defaultIndex=20=ED=9B=85=EC=9C=BC=EB=A1=9C=20=EC=9D=B4?=
 =?UTF-8?q?=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/CategoryList/CategoryList.tsx    | 10 ++++------
 .../common/CategoryList/hooks/useCategoryList.ts       |  5 +++--
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/components/common/CategoryList/CategoryList.tsx b/src/components/common/CategoryList/CategoryList.tsx
index 5b059add..e7bf0344 100644
--- a/src/components/common/CategoryList/CategoryList.tsx
+++ b/src/components/common/CategoryList/CategoryList.tsx
@@ -1,6 +1,5 @@
 'use client'
 
-import { useEffect } from 'react'
 import { cls } from '@/utils'
 import CategoryListItem from './CategoryListItem'
 import { CATEGORIES } from './constants'
@@ -19,11 +18,10 @@ const CategoryList = ({
   defaultIndex,
   onChange,
 }: CategoryListProps) => {
-  const { index, setIndex, handleClick } = useCategoryList({ onChange })
-
-  useEffect(() => {
-    defaultIndex && setIndex(defaultIndex)
-  }, [defaultIndex, setIndex])
+  const { index, handleClick } = useCategoryList({
+    defaultIndex,
+    onChange,
+  })
 
   return (
     <ul
diff --git a/src/components/common/CategoryList/hooks/useCategoryList.ts b/src/components/common/CategoryList/hooks/useCategoryList.ts
index b2dfeead..eae4ef4b 100644
--- a/src/components/common/CategoryList/hooks/useCategoryList.ts
+++ b/src/components/common/CategoryList/hooks/useCategoryList.ts
@@ -1,11 +1,12 @@
 import { useState } from 'react'
 
 export interface useCategoryListProps {
+  defaultIndex?: number
   onChange: (e: React.MouseEvent<HTMLButtonElement>) => void
 }
 
-const useCategoryList = ({ onChange }: useCategoryListProps) => {
-  const [index, setIndex] = useState(0)
+const useCategoryList = ({ defaultIndex, onChange }: useCategoryListProps) => {
+  const [index, setIndex] = useState(defaultIndex ?? 0)
 
   const handleClick = (e: React.MouseEvent<HTMLButtonElement>, i: number) => {
     setIndex(i)

From 07532fad5d8b953d62ff7f3c9c4a3704c00870a3 Mon Sep 17 00:00:00 2001
From: eeseung <seunghee9941@gmail.com>
Date: Sun, 12 Nov 2023 05:29:13 +0900
Subject: [PATCH 3/8] =?UTF-8?q?feat:=20#63=20-=20Dropdown=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=83=81=EC=88=98=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Dropdown/constants/index.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/common/Dropdown/constants/index.ts b/src/components/common/Dropdown/constants/index.ts
index d1fbddcd..282aa67d 100644
--- a/src/components/common/Dropdown/constants/index.ts
+++ b/src/components/common/Dropdown/constants/index.ts
@@ -4,15 +4,15 @@ export const DROPDOWN_OPTIONS = {
   search: { 스페이스: 'space', 유저: 'user' },
   user_edit: { '편집 허용': 'edit', '읽기 허용': 'view', 제거: 'remove' },
   user_invite: { '편집 허용': 'eidt', '읽기 허용': 'view' },
-} as const
+}
 
 export const VERTICAL_PADDING = {
   large: 'py-2.5',
   medium: 'py-1.5',
   small: 'py-0.5',
-} as const
+}
 
 export const PLACEMENTS = {
   left: 'left-0',
   right: 'right-0',
-} as const
+}

From f6e2bfb7ed51b75e89837e8d9a1a9251f4f26c34 Mon Sep 17 00:00:00 2001
From: eeseung <seunghee9941@gmail.com>
Date: Sun, 12 Nov 2023 06:21:13 +0900
Subject: [PATCH 4/8] =?UTF-8?q?feat:=20#63=20-=20Input=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20buttonType=20prop=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Input/Input.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/common/Input/Input.tsx b/src/components/common/Input/Input.tsx
index 982236b0..da042aaf 100644
--- a/src/components/common/Input/Input.tsx
+++ b/src/components/common/Input/Input.tsx
@@ -7,6 +7,7 @@ export interface InputProps {
   placeholder?: string
   inputButton?: boolean
   buttonText?: string
+  buttonType?: 'button' | 'submit' | 'reset'
   buttonColor?: 'green' | 'gray'
   validation?: string
   disabled?: boolean
@@ -21,6 +22,7 @@ const Input = forwardRef(
       placeholder,
       inputButton,
       buttonText = '추가',
+      buttonType = 'button',
       buttonColor = 'green',
       validation,
       disabled,
@@ -52,7 +54,7 @@ const Input = forwardRef(
           />
           {inputButton && (
             <button
-              type="button"
+              type={buttonType}
               className={cls(
                 'absolute right-0 top-0 flex rounded-r-md border px-4 py-2.5 text-sm font-semibold text-white',
                 buttonColor === 'green'

From c0108e3dfdb25a5f83fdde52d4e03ef04d4f8184 Mon Sep 17 00:00:00 2001
From: eeseung <seunghee9941@gmail.com>
Date: Sun, 12 Nov 2023 09:02:26 +0900
Subject: [PATCH 5/8] =?UTF-8?q?feat:=20#63=20-=20Input=20submit=20buttonTy?=
 =?UTF-8?q?pe=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 스페이스 댓글 페이지 & 검색 모달
---
 src/app/(routes)/space/[spaceId]/comment/page.tsx | 1 +
 src/components/common/SearchModal/SearchModal.tsx | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/app/(routes)/space/[spaceId]/comment/page.tsx b/src/app/(routes)/space/[spaceId]/comment/page.tsx
index fdf53f48..6cc50e07 100644
--- a/src/app/(routes)/space/[spaceId]/comment/page.tsx
+++ b/src/app/(routes)/space/[spaceId]/comment/page.tsx
@@ -124,6 +124,7 @@ const SpaceCommentPage = () => {
             {...register('comment', { required: true })}
             inputButton={true}
             buttonText="작성"
+            buttonType="submit"
             buttonColor="gray"
             placeholder="댓글을 작성해 주세요"
           />
diff --git a/src/components/common/SearchModal/SearchModal.tsx b/src/components/common/SearchModal/SearchModal.tsx
index a2a727da..68bfbc8c 100644
--- a/src/components/common/SearchModal/SearchModal.tsx
+++ b/src/components/common/SearchModal/SearchModal.tsx
@@ -60,6 +60,7 @@ const SearchModal = ({ onClose }: SearchModalProps) => {
               placeholder="검색어를 입력하세요."
               inputButton={true}
               buttonText="검색"
+              buttonType="submit"
             />
           </div>
         </form>

From aa979f3ccb045cad36d549761f5d34532952fc3d Mon Sep 17 00:00:00 2001
From: eeseung <seunghee9941@gmail.com>
Date: Sun, 12 Nov 2023 16:31:19 +0900
Subject: [PATCH 6/8] =?UTF-8?q?feat:=20#63=20-=20=EA=B2=80=EC=83=89=20?=
 =?UTF-8?q?=EA=B2=B0=EA=B3=BC=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(routes)/search/page.tsx | 74 +++++++++++++++++++++++++++++++-
 src/hooks/useSearch.ts           | 59 +++++++++++++++++++++++++
 2 files changed, 132 insertions(+), 1 deletion(-)
 create mode 100644 src/hooks/useSearch.ts

diff --git a/src/app/(routes)/search/page.tsx b/src/app/(routes)/search/page.tsx
index 5d1ece0e..fd71e7fa 100644
--- a/src/app/(routes)/search/page.tsx
+++ b/src/app/(routes)/search/page.tsx
@@ -1,5 +1,77 @@
+'use client'
+
+import { CategoryList, Dropdown } from '@/components'
+import Space from '@/components/common/Space/Space'
+import User from '@/components/common/User/User'
+import useSearch from '@/hooks/useSearch'
+import { cls } from '@/utils'
+
 const SearchPage = () => {
-  return <></>
+  const {
+    target,
+    sortIndex,
+    categoryIndex,
+    keyword,
+    result,
+    handleSortChange,
+    handleCategoryChange,
+  } = useSearch()
+  return (
+    <>
+      <div
+        className={cls(
+          'flex items-center px-4',
+          target === 'space' ? 'pt-4' : 'py-4',
+        )}>
+        <h2 className="grow overflow-hidden text-ellipsis whitespace-nowrap pr-2 font-bold text-gray9">
+          &apos;{keyword}&apos; 에 대한{' '}
+          {target === 'space' ? '스페이스' : target === 'user' ? '유저' : ''}{' '}
+          검색 결과
+        </h2>
+        {target === 'space' && (
+          <div className="shrink-0">
+            <Dropdown
+              type="space"
+              placement="right"
+              defaultIndex={sortIndex}
+              onChange={handleSortChange}
+            />
+          </div>
+        )}
+      </div>
+      {target === 'space' && (
+        <CategoryList
+          type="all"
+          defaultIndex={categoryIndex}
+          onChange={handleCategoryChange}
+        />
+      )}
+      <section className="flex flex-col gap-y-2 px-4">
+        {result.spaces?.map((space) => (
+          <Space
+            type="Card"
+            spaceId={space.spaceId}
+            userName={space.userName}
+            spaceName={space.spaceName}
+            spaceImage={space.spaceImage}
+            description={space.description}
+            category={space.category}
+            scrap={space.scrap}
+            favorite={space.favorite}
+            key={space.spaceId}
+          />
+        ))}
+        {result.users?.map((user) => (
+          <User
+            id={user.id}
+            name={user.name}
+            profile={user.profile}
+            key={user.id}
+          />
+        ))}
+      </section>
+    </>
+  )
 }
 
 export default SearchPage
diff --git a/src/hooks/useSearch.ts b/src/hooks/useSearch.ts
new file mode 100644
index 00000000..eb49f1a4
--- /dev/null
+++ b/src/hooks/useSearch.ts
@@ -0,0 +1,59 @@
+import { useCallback } from 'react'
+import { CATEGORIES } from '@/components/common/CategoryList/constants'
+import { DROPDOWN_OPTIONS } from '@/components/common/Dropdown/constants'
+import { mock_spacesData, mock_usersData } from '@/data'
+import { usePathname, useRouter, useSearchParams } from 'next/navigation'
+
+const useSearch = () => {
+  const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const target = searchParams.get('target')
+  const sort = searchParams.get('sort')
+  const category = searchParams.get('category')
+  const sortIndex = sort
+    ? Object.values(DROPDOWN_OPTIONS['space']).indexOf(sort)
+    : 0
+  const categoryIndex = category ? CATEGORIES['all'].indexOf(category) : 0
+  const keyword = searchParams.get('keyword')
+  const result =
+    target === 'space'
+      ? { spaces: mock_spacesData, users: [] }
+      : target === 'user'
+      ? { spaces: [], users: mock_usersData }
+      : {}
+
+  const createQueryString = useCallback(
+    (name: string, value: string) => {
+      const params = new URLSearchParams(searchParams)
+      params.set(name, value)
+
+      return params.toString()
+    },
+    [searchParams],
+  )
+
+  const handleSortChange = (e: React.MouseEvent<HTMLButtonElement>) => {
+    router.replace(
+      pathname + '?' + createQueryString('sort', e.currentTarget.value),
+    )
+  }
+
+  const handleCategoryChange = (e: React.MouseEvent<HTMLButtonElement>) => {
+    router.replace(
+      pathname + '?' + createQueryString('category', e.currentTarget.value),
+    )
+  }
+
+  return {
+    target,
+    sortIndex,
+    categoryIndex,
+    keyword,
+    result,
+    handleSortChange,
+    handleCategoryChange,
+  }
+}
+
+export default useSearch

From 20e90aedd93d50b603b08533467686416a31c614 Mon Sep 17 00:00:00 2001
From: eeseung <seunghee9941@gmail.com>
Date: Sun, 12 Nov 2023 16:41:39 +0900
Subject: [PATCH 7/8] =?UTF-8?q?feat:=20#63=20-=20Header=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B2=80=EC=83=89=20=EB=AA=A8?=
 =?UTF-8?q?=EB=8B=AC=20searchParams=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Header/Header.tsx | 37 +++++++++++++++++++++++--
 1 file changed, 35 insertions(+), 2 deletions(-)

diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx
index a50c38b0..5eb34655 100644
--- a/src/components/common/Header/Header.tsx
+++ b/src/components/common/Header/Header.tsx
@@ -21,6 +21,26 @@ const Header = () => {
     .split(/[^a-zA-Z]/)[1] // 라우터명
     .replace(/^[a-z]/, (char) => char.toUpperCase()) // 첫글자 대문자 치환
 
+  const createQueryString = useCallback(
+    (name: string, value: string) => {
+      const params = new URLSearchParams(searchParams)
+      params.set(name, value)
+
+      return params.toString()
+    },
+    [searchParams],
+  )
+
+  const deleteQueryString = useCallback(
+    (name: string) => {
+      const params = new URLSearchParams(searchParams)
+      params.delete(name)
+
+      return params.toString()
+    },
+    [searchParams],
+  )
+
   return (
     <>
       <div className="fixed z-50 flex w-full max-w-[500px] items-center justify-between border-b border-slate-100 bg-bgColor px-4 py-2.5 dark:border-slate-800">
@@ -42,7 +62,12 @@ const Header = () => {
           </Button>
           <Button
             className="flex h-8 w-8 items-center justify-center"
-            onClick={() => router.push(`${pathname}?search=true`)}>
+            onClick={() =>
+              router.replace(
+                pathname + '?' + createQueryString('search', 'true'),
+                { scroll: false },
+              )
+            }>
             <MagnifyingGlassCircleIcon className="h-6 w-6 text-slate9" />
           </Button>
           <Button
@@ -53,7 +78,15 @@ const Header = () => {
         </div>
       </div>
       {isSidebarOpen && <Sidebar onClose={() => setIsSidebarOpen(false)} />}
-      {isSearchModalOpen && <SearchModal onClose={() => router.back()} />}
+      {isSearchModalOpen && (
+        <SearchModal
+          onClose={() =>
+            router.replace(pathname + '?' + deleteQueryString('search'), {
+              scroll: false,
+            })
+          }
+        />
+      )}
     </>
   )
 }

From f767e1db34d068838123ea803a7b8fc0515b2510 Mon Sep 17 00:00:00 2001
From: eeseung <seunghee9941@gmail.com>
Date: Sun, 12 Nov 2023 16:43:17 +0900
Subject: [PATCH 8/8] =?UTF-8?q?feat:=20#63=20-=20=EB=A9=94=EC=9D=B8=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20Dropdown=20&=20CategoryList=20def?=
 =?UTF-8?q?aultIndex=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/page.tsx     | 11 ++++++++++-
 src/hooks/useHome.ts | 19 ++++++++++++++++++-
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 4de9a0ef..64a040f7 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -5,7 +5,14 @@ import Space from '@/components/common/Space/Space'
 import useHome from '@/hooks/useHome'
 
 export default function Home() {
-  const { links, spaces, handleSortChange, handleCategoryChange } = useHome()
+  const {
+    links,
+    spaces,
+    sortIndex,
+    categoryIndex,
+    handleSortChange,
+    handleCategoryChange,
+  } = useHome()
   return (
     <>
       <section className="px-4 pb-10">
@@ -27,11 +34,13 @@ export default function Home() {
             <Dropdown
               type="space"
               placement="right"
+              defaultIndex={sortIndex}
               onChange={handleSortChange}
             />
           </div>
           <CategoryList
             type="all_follow"
+            defaultIndex={categoryIndex}
             onChange={handleCategoryChange}
           />
         </div>
diff --git a/src/hooks/useHome.ts b/src/hooks/useHome.ts
index 30840e46..d933169c 100644
--- a/src/hooks/useHome.ts
+++ b/src/hooks/useHome.ts
@@ -1,4 +1,6 @@
 import { useCallback } from 'react'
+import { CATEGORIES } from '@/components/common/CategoryList/constants'
+import { DROPDOWN_OPTIONS } from '@/components/common/Dropdown/constants'
 import { mock_LinkData, mock_spacesData } from '@/data'
 import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 
@@ -6,6 +8,14 @@ const useHome = () => {
   const router = useRouter()
   const pathname = usePathname()
   const searchParams = useSearchParams()
+  const sort = searchParams.get('sort')
+  const category = searchParams.get('category')
+  const categoryIndex = category
+    ? CATEGORIES['all_follow'].indexOf(category)
+    : 0
+  const sortIndex = sort
+    ? Object.values(DROPDOWN_OPTIONS['space']).indexOf(sort)
+    : 0
   const links = mock_LinkData.slice(0, 5)
   const spaces = mock_spacesData
 
@@ -33,7 +43,14 @@ const useHome = () => {
     )
   }
 
-  return { links, spaces, handleSortChange, handleCategoryChange }
+  return {
+    links,
+    spaces,
+    sortIndex,
+    categoryIndex,
+    handleSortChange,
+    handleCategoryChange,
+  }
 }
 
 export default useHome