From a033b61ceb063b9ad8f885689034c463e9446e2b Mon Sep 17 00:00:00 2001 From: yoouung Date: Thu, 9 Jan 2025 22:42:22 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EC=A7=80=EC=97=AD=20=EC=B6=94=EA=B0=80?= =?UTF-8?q?=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 지역 검색 Cascader 컴포넌트 생성 --- src/app/components/(layout)/Header.tsx | 3 +- src/app/components/RegionCascader.tsx | 41 +++++++++++++++++++++++ src/app/courses/add-region/page.tsx | 45 ++++++++++++++++++++++++++ src/app/courses/page.tsx | 9 +++++- src/app/layout.tsx | 26 +++++++++++---- 5 files changed, 116 insertions(+), 8 deletions(-) create mode 100644 src/app/components/RegionCascader.tsx create mode 100644 src/app/courses/add-region/page.tsx diff --git a/src/app/components/(layout)/Header.tsx b/src/app/components/(layout)/Header.tsx index 3c327eb..3634451 100644 --- a/src/app/components/(layout)/Header.tsx +++ b/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 (
diff --git a/src/app/components/RegionCascader.tsx b/src/app/components/RegionCascader.tsx new file mode 100644 index 0000000..465e2b4 --- /dev/null +++ b/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 ( + + ) +} diff --git a/src/app/courses/add-region/page.tsx b/src/app/courses/add-region/page.tsx new file mode 100644 index 0000000..6db73c0 --- /dev/null +++ b/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('') + + useEffect(() => { + const handleSubmit = () => { + if (selectedRegion) { + router.push('/courses') + } + } + handleSubmit() + }, [selectedRegion]) + + return ( +
+
+ + + +

+ 관심 지역 추가하기 +

+
+
+ + + +
+ +
+
+ ) +} diff --git a/src/app/courses/page.tsx b/src/app/courses/page.tsx index 5158eb9..623b987 100644 --- a/src/app/courses/page.tsx +++ b/src/app/courses/page.tsx @@ -24,7 +24,14 @@ export default function Page() { - +
diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 2a02eaf..e2dc2fb 100644 --- a/src/app/layout.tsx +++ b/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({
- -
- {children} - -
- + + +
+ {children} + +
+ +