[기능] 관심 지역 추가 페이지 구현 및 지역 검색 컴포넌트 생성

src/app/components/(layout)/Header.tsx

@@ -14,9 +14,10 @@ export default function Header() {
   const isLogin = path.includes('/login')
   const isNew = path.includes('/new')
   const isComment = path.includes('/comments')
+  const isAddRegion = path.includes('/add-region')
   const [isSearch, setIsSearch] = useState(false)
 
-  if (isLogin || isNew || isComment) return null
+  if (isLogin || isNew || isComment || isAddRegion) return null
 
   return (
     <header className='max-w-[375px] relative bg-white w-full h-[55px] pr-[10px] min-h-[55px] flex justify-between items-center border-b-[1px] border-b-header-line'>

src/app/components/RegionCascader.tsx

@@ -0,0 +1,41 @@
+import { Cascader } from 'antd'
+import getData from '@/app/getData'
+import { DefaultOptionType } from 'antd/es/cascader'
+
+interface CascaderProps {
+  placeholder: string
+  setSelectedRegion: (value: string) => void
+}
+
+export default function RegionCascader({
+  placeholder,
+  setSelectedRegion,
+}: CascaderProps) {
+  const { data } = getData()
+
+  const onChange = (value: (string | number | null)[]) => {
+    if (value) setSelectedRegion(value[1] as string)
+  }
+
+  const filter = (inputValue: string, path: DefaultOptionType[]) =>
+    path.some(
+      (option) =>
+        (option.label as string)
+          .toLowerCase()
+          .indexOf(inputValue.toLowerCase()) > -1
+    )
+
+  return (
+    <Cascader
+      options={data}
+      placeholder={placeholder}
+      onChange={onChange}
+      size='large'
+      showSearch={{ filter }}
+      style={{
+        width: '300px',
+      }}
+      expandTrigger='hover'
+    />
+  )
+}

src/app/courses/add-region/page.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import Link from 'next/link'
+import { ChevronLeft } from 'lucide-react'
+import Spacer from '@/app/components/(layout)/Spacer'
+import { useEffect, useState } from 'react'
+import RegionCascader from '@/app/components/RegionCascader'
+import { useRouter } from 'next/navigation'
+
+export default function Page() {
+  const router = useRouter()
+  const [selectedRegion, setSelectedRegion] = useState<string>('')
+
+  useEffect(() => {
+    const handleSubmit = () => {
+      if (selectedRegion) {
+        router.push('/courses')
+      }
+    }
+    handleSubmit()
+  }, [selectedRegion])
+
+  return (
+    <div className='h-100% flex flex-col'>
+      <section className='max-w-[375px] relative bg-white w-full h-[55px] px-[20px] min-h-[55px] flex justify-between items-center border-b-[1px] border-b-header-line'>
+        <Link href={`/courses`} className='cursor-pointer'>
+          <ChevronLeft size={24} />
+        </Link>
+        <p className='font-bold text-[17px]  px-[20px] py-[8px] rounded-[20px]'>
+          관심 지역 추가하기
+        </p>
+        <div className='w-[24px] h-[24px]' />
+      </section>
+
+      <Spacer height={20} />
+
+      <div className='flex align-center justify-center'>
+        <RegionCascader
+          placeholder='관심 지역 등록하고 빠르게 코스들 구경해요'
+          setSelectedRegion={setSelectedRegion}
+        />
+      </div>
+    </div>
+  )
+}

src/app/courses/page.tsx

@@ -24,7 +24,14 @@ export default function Page() {
             </span>
           </div>
 
-          <button className='border-none'>추가하기</button>
+          <button
+            className='border-none'
+            onClick={() => {
+              router.push('/courses/add-region')
+            }}
+          >
+            추가하기
+          </button>
         </div>
 
         <div className='flex flex-row items-center h-[30px] gap-[8px] my-[15px] overflow-auto px-[20px]'>

src/app/layout.tsx

@@ -5,6 +5,7 @@ import Footer from '@components/(layout)/Footer'
 import LayoutSpacer from '@components/(layout)/LayoutSpacer'
 import localFont from 'next/font/local'
 import { AnimatePresence } from 'framer-motion'
+import { ConfigProvider } from 'antd'
 
 export const metadata: Metadata = {
   title: 'WOOCO - 우코',
@@ -21,6 +22,17 @@ const pretendard = localFont({
   variable: '--font-pretendard',
 })
 
+const theme = {
+  token: {
+    borderRadius: 20,
+    colorPrimary: '#5A59F2',
+    colorBgContainer: '#F7F7F7',
+    colorBorder: '#ffffff',
+    colorText: 'rgba(0, 0, 0, 0.5)',
+    fontSize: 11,
+  },
+}
+
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -30,12 +42,14 @@ export default function RootLayout({
     <html lang='kr' className={`h-vh ${pretendard.variable}`}>
       <body className='h-full flex items-center flex-col overflow-y-scroll'>
         <Header />
-        <AnimatePresence>
-          <div className='mx-auto flex-1 text-black w-full max-w-[375px]'>
-            {children}
-            <LayoutSpacer />
-          </div>
-        </AnimatePresence>
+        <ConfigProvider theme={theme}>
+          <AnimatePresence>
+            <div className='mx-auto flex-1 text-black w-full max-w-[375px]'>
+              {children}
+              <LayoutSpacer />
+            </div>
+          </AnimatePresence>
+        </ConfigProvider>
         <Footer />
       </body>
     </html>