diff --git a/src/components/SelectTag/SelectTag.module.scss b/src/components/SelectTag/SelectTag.module.scss new file mode 100644 index 0000000..0342d81 --- /dev/null +++ b/src/components/SelectTag/SelectTag.module.scss @@ -0,0 +1,48 @@ +.SelectTag { + padding-left: 1.25rem; + padding-right: 1.25rem; + padding-bottom: 2.5rem; + height: calc(100vh - 2.75rem); + display: flex; + flex-direction: column; + justify-content: space-between; + background: var(--color-bg-gradient); + + &::before { + content: ""; + background: url("/src/assets/svg/img-graphic-main.svg") center no-repeat; + background-size: 100% 16.375rem; + filter: blur(4.625rem); + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 0; + } +} + +.Top { + z-index: 1; + + .Title { + margin-top: 2.5rem; + display: flex; + align-items: center; + gap: 0.625rem; + } + + .TagList { + display: flex; + flex-wrap: wrap; + gap: 0.625rem; + margin-top: 2.5rem; + } +} + +.Bottom { + display: flex; + align-items: center; + gap: 0.875rem; + z-index: 1; +} diff --git a/src/components/SelectTag/SelectTag.tsx b/src/components/SelectTag/SelectTag.tsx new file mode 100644 index 0000000..4d1cc43 --- /dev/null +++ b/src/components/SelectTag/SelectTag.tsx @@ -0,0 +1,67 @@ +import { useState } from "react"; + +import styles from "@/components/SelectTag/SelectTag.module.scss"; +import Button from "@/components/ui/Button/Button"; +import Tag from "@/components/ui/Tag/Tag"; +import Text from "@/components/ui/Text/Text"; + +// 임시 데이터 +const TAG_LIST = [ + "음식이 맛있어요", + "양이 많아요", + "가성비가 좋아요", + "메뉴 구성이 알차요", + "매장이 넓어요", + "단체모임 하기 좋아요", + "뷰가 좋아요", + "아늑해요", + "분위기가 좋아요", + "친절해요", + "매장이 청결해요", +]; + +const SelectTag = () => { + const [selectedTagList, setSelectedTagList] = useState([]); + + const handleTagClick = (e: React.MouseEvent) => { + const tag = e.currentTarget.textContent || ""; + + if (selectedTagList.includes(tag)) { + setSelectedTagList(selectedTagList.filter((selectedTag) => selectedTag !== tag)); + } else { + setSelectedTagList([...selectedTagList, tag]); + } + }; + + return ( +
+
+
+ + 어떠셨나요? + + + 복수 가능 + +
+
+ {TAG_LIST.map((tag) => ( + + ))} + +
+
+ +
+
+
+ ); +}; + +export default SelectTag; diff --git a/src/pages/SelectTagPage.tsx b/src/pages/SelectTagPage.tsx new file mode 100644 index 0000000..eb9c3e2 --- /dev/null +++ b/src/pages/SelectTagPage.tsx @@ -0,0 +1,13 @@ +import Navbar from "@/components/common/Navbar"; +import SelectTag from "@/components/SelectTag/SelectTag"; + +const SelectTagPage = () => { + return ( + <> + + + + ); +}; + +export default SelectTagPage; diff --git a/src/router/AppRouter.tsx b/src/router/AppRouter.tsx index 0dbcde1..65bcc3e 100644 --- a/src/router/AppRouter.tsx +++ b/src/router/AppRouter.tsx @@ -5,6 +5,7 @@ import App from "@/App"; import HomePage from "@/pages/HomePage"; import ReceiptEditPage from "@/pages/ReceiptEditPage"; import RecognitionFailPage from "@/pages/RecognitionFailPage"; +import SelectTagPage from "@/pages/SelectTagPage"; const AppRouter = () => { const router = createBrowserRouter([ @@ -24,6 +25,10 @@ const AppRouter = () => { path: "/receipt-edit", element: , }, + { + path: "/select-tag", + element: , + }, ], }, ]);