From 317bd522f8e56f5ac427ddf386bd2b4fc706b15f Mon Sep 17 00:00:00 2001 From: yoouung Date: Wed, 18 Dec 2024 18:18:54 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EB=A9=94=EC=9D=B8=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80UI=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(legal)/privacy/page.tsx | 3 + src/app/(legal)/terms/page.tsx | 3 + src/app/components/SectionDivider.tsx | 3 + src/app/getData.ts | 43 +++++++++++ src/app/page.tsx | 107 +++++++++++++++++++++++++- src/types/Categories.ts | 12 +++ 6 files changed, 170 insertions(+), 1 deletion(-) create mode 100644 src/app/(legal)/privacy/page.tsx create mode 100644 src/app/(legal)/terms/page.tsx create mode 100644 src/app/components/SectionDivider.tsx create mode 100644 src/app/getData.ts create mode 100644 src/types/Categories.ts diff --git a/src/app/(legal)/privacy/page.tsx b/src/app/(legal)/privacy/page.tsx new file mode 100644 index 0000000..c174313 --- /dev/null +++ b/src/app/(legal)/privacy/page.tsx @@ -0,0 +1,3 @@ +export default function Page() { + return null +} diff --git a/src/app/(legal)/terms/page.tsx b/src/app/(legal)/terms/page.tsx new file mode 100644 index 0000000..c174313 --- /dev/null +++ b/src/app/(legal)/terms/page.tsx @@ -0,0 +1,3 @@ +export default function Page() { + return null +} diff --git a/src/app/components/SectionDivider.tsx b/src/app/components/SectionDivider.tsx new file mode 100644 index 0000000..c67b4c4 --- /dev/null +++ b/src/app/components/SectionDivider.tsx @@ -0,0 +1,3 @@ +export default function SectionDivider() { + return
+} diff --git a/src/app/getData.ts b/src/app/getData.ts new file mode 100644 index 0000000..cb981f5 --- /dev/null +++ b/src/app/getData.ts @@ -0,0 +1,43 @@ +interface Data { + value: string + label: string + children?: Data[] +} + +export default function getData() { + const data: Data[] = [ + { + value: 'seoul', + label: '서울특별시', + children: [ + { value: 'gangnam', label: '강남구' }, + { value: 'gangdong', label: '강동구' }, + { value: 'gangbuk', label: '강북구' }, + { value: 'gangseo', label: '강서구' }, + { value: 'gwanak', label: '관악구' }, + { value: 'gwangjin', label: '광진구' }, + { value: 'guro', label: '구로구' }, + { value: 'geumcheon', label: '금천구' }, + { value: 'nowon', label: '노원구' }, + { value: 'dobong', label: '도봉구' }, + { value: 'dongdaemun', label: '동대문구' }, + { value: 'dongjak', label: '동작구' }, + { value: 'mapo', label: '마포구' }, + { value: 'seodaemun', label: '서대문구' }, + { value: 'seocho', label: '서초구' }, + { value: 'seongdong', label: '성동구' }, + { value: 'seongbuk', label: '성북구' }, + { value: 'songpa', label: '송파구' }, + { value: 'yangcheon', label: '양천구' }, + { value: 'yeongdeungpo', label: '영등포구' }, + { value: 'yongsan', label: '용산구' }, + { value: 'eunpyeong', label: '은평구' }, + { value: 'jongno', label: '종로구' }, + { value: 'jung', label: '중구' }, + { value: 'jungrang', label: '중랑구' }, + ], + }, + ] + + return data +} diff --git a/src/app/page.tsx b/src/app/page.tsx index 0d2d94d..e8a9465 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,3 +1,108 @@ +'use client' + +import { Carousel, Cascader, CascaderProps, GetProp } from 'antd' +import Link from 'next/link' +import { useState } from 'react' +import SectionDivider from './components/SectionDivider' +import { categories } from '@/types/Categories' +import getData from './getData' +import { useRouter } from 'next/navigation' + +type DefaultOptionType = GetProp[number] + export default function Page() { - return
gd
+ const router = useRouter() + const [selectedRegion, setSelectedRegion] = useState('') + const [selectedCatetories, setSelectedCategories] = useState([]) + + const onChange = (value: string[]) => { + setSelectedRegion(value[1]) + } + + const filter = (inputValue: string, path: DefaultOptionType[]) => + path.some( + (option) => + (option.label as string) + .toLowerCase() + .indexOf(inputValue.toLowerCase()) > -1 + ) + + const handleTagClick = (category: number) => { + if (selectedCatetories.includes(category)) { + setSelectedCategories((prev) => prev.filter((tag) => tag !== category)) + } else { + setSelectedCategories((prev) => [...prev, category]) + } + } + + const handleSearch = () => { + router.push('/courses') + } + + return ( +
+
+ 어디로 가볼까요? + + + * 원하는 태그를 눌러보세요. 딱 맞는 코스만 골라 드릴게요! + +
+ {categories.map((category, index) => ( +
handleTagClick(category.id)} + className={`text-[12px] py-[5px] px-[13px] border rounded-[10px] transition-all duration-200 cursor-pointer ${ + selectedCatetories.includes(category.id) + ? 'bg-blue-100 border-blue-100' + : 'border-gray-300' + }`} + > + {category.value} +
+ ))} +
+ +
+ + + +
+ +
+ 서비스 소개 +
+
+ 서비스 소개2 +
+ +
+ +
+ (주) 우코 + 대표이사 김지홍 | 사업자등록번호 000-00-00000 + 통신판매업신고번호: 제 0000-0000호 + 대표전화: 000-0000-0000 + 서울특별시 어쩌구 + +
+ 서비스 이용약관 + | + 개인정보 처리방침 +
+
+
+ ) } diff --git a/src/types/Categories.ts b/src/types/Categories.ts new file mode 100644 index 0000000..944ceba --- /dev/null +++ b/src/types/Categories.ts @@ -0,0 +1,12 @@ +interface Category { + id: number + value: string +} + +export const categories: Category[] = [ + { id: 1, value: '맛집' }, + { id: 2, value: '액티비티' }, + { id: 3, value: 'SNS 핫플' }, + { id: 4, value: '문화/예술' }, + { id: 5, value: '기타' }, +]