feat: 해시태그 선택 페이지 UI 제작

Author: sikkzz

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;
+}

src/components/SelectTag/SelectTag.tsx

@@ -0,0 +1,47 @@
+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 = () => {
+  return (
+    <div className={styles.SelectTag}>
+      <div className={styles.Top}>
+        <div className={styles.Title}>
+          <Text variant="titleM" color="primary">
+            어떠셨나요?
+          </Text>
+          <Text variant="bodySm" color="tertiary">
+            복수 가능
+          </Text>
+        </div>
+        <div className={styles.TagList}>
+          {TAG_LIST.map((tag) => (
+            <Tag text={tag} key={tag} />
+          ))}
+          <Tag variant="add" />
+        </div>
+      </div>
+
+      <div className={styles.Bottom}>
+        <Button text="다음" />
+      </div>
+    </div>
+  );
+};
+
+export default SelectTag;

src/pages/SelectTagPage.tsx

@@ -0,0 +1,13 @@
+import Navbar from "@/components/common/Navbar";
+import SelectTag from "@/components/SelectTag/SelectTag";
+
+const SelectTagPage = () => {
+  return (
+    <>
+      <Navbar />
+      <SelectTag />
+    </>
+  );
+};
+
+export default SelectTagPage;

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: <ReceiptEditPage />,
         },
+        {
+          path: "/select-tag",
+          element: <SelectTagPage />,
+        },
       ],
     },
   ]);