feat: router back to select page

src/app/board/[boardId]/_components/Header/SelectModeHeader.tsx

@@ -4,15 +4,21 @@ import { useSelect } from '@/app/board/[boardId]/_contexts/SelectModeContext'
 import { useBoard } from '@/app/board/[boardId]/_contexts/BoardContext'
 import { twMerge } from 'tailwind-merge'
 import { getBoardStyle } from '@/lib/utils/board'
+import BackIcon from 'public/icons/arrow_back_ios.svg'
 
 const SelectModeHeader = () => {
-  const { selectedIds, MAX_SELECT_COUNT } = useSelect()
+  const { selectedIds, MAX_SELECT_COUNT, setIsSelectMode } = useSelect()
   const { board } = useBoard()
   const maxLength = Math.min(board.items.length, MAX_SELECT_COUNT)
   const { selectCountClassName, titleClassName } = getBoardStyle(board)
 
+  const toUnselectMode = () => {
+    setIsSelectMode(false)
+  }
+
   return (
     <Header
+      leftButton={<BackIcon onClick={toUnselectMode} />}
       title={
         <div className="flex flex-col items-center justify-center gap-[3px] text-center text-md font-semiBold leading-6">
           <h1>꾸미고 싶은 폴라로이드를 골라주세요</h1>

src/app/board/[boardId]/_contexts/SelectModeContext.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import { createContext, ReactNode, useContext, useMemo, useState } from 'react'
+import { createContext, ReactNode, useContext, useMemo } from 'react'
+import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 
 interface SelectContextProps {
   isSelectMode: boolean
@@ -23,18 +24,30 @@ export const SelectContextProvider = ({
 }: {
   children: ReactNode
 }) => {
-  const [isSelectMode, setIsSelectMode] = useState(false)
-  const [selectedIds, setSelectedIds] = useState<number[]>([])
+  const searchParams = useSearchParams()
+  const router = useRouter()
+  const pathname = usePathname()
+  const isSelectMode = searchParams.get('isSelectMode') === 'true'
+  const setIsSelectMode = (mode: boolean) => {
+    router.push(`${pathname}?isSelectMode=${mode}`)
+  }
+
+  const selectedIds = searchParams.getAll('selectedId').map((id) => Number(id))
 
   const addSelectedId = (id: number) => {
     if (selectedIds.length === 9) {
       return
     }
-    setSelectedIds((prev) => [...prev, id])
+
+    const params = new URLSearchParams(searchParams.toString())
+    params.append('selectedId', id.toString())
+    router.push(`${pathname}?${params}`)
   }
 
   const removeSelectedId = (id: number) => {
-    setSelectedIds((prev) => prev.filter((selectedId) => selectedId !== id))
+    const params = new URLSearchParams(searchParams.toString())
+    params.delete('selectedId', id.toString())
+    router.push(`${pathname}?${params}`)
   }
 
   const toggleSelectedId = (id: number) => {