feat: 어조 선택 페이지 UI 제작

Author: sikkzz

public/assets/img/img-style-cute.png

@@ -0,0 +1,72 @@
+.SelectStyle {
+  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;
+  }
+}
+
+.Title {
+  z-index: 1;
+  margin-top: 2.5rem;
+
+  & > h2 {
+    margin-top: 0.625rem;
+  }
+}
+
+.Image {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1;
+
+  & > img {
+    width: 13.125rem;
+    height: 13.125rem;
+  }
+}
+
+.StyleButtonList {
+  display: flex;
+  flex-direction: column;
+  gap: 0.875rem;
+  z-index: 1;
+
+  & > div {
+    height: 3rem;
+    padding: 0.75rem 0.875rem;
+    border-radius: 0.875rem;
+    background-color: var(--color-white);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    &.isSelected {
+      background-color: var(--color-text-primary);
+    }
+  }
+}
+
+.Bottom {
+  display: flex;
+  align-items: center;
+  gap: 0.875rem;
+  z-index: 1;
+}

public/assets/img/img-style-friendly.png

@@ -0,0 +1,68 @@
+import { useState } from "react";
+
+import classNames from "classnames";
+
+import styles from "@/components/SelectStyle/SelectStyle.module.scss";
+import Button from "@/components/ui/Button/Button";
+import Icon from "@/components/ui/Icon/Icon";
+import Text from "@/components/ui/Text/Text";
+
+interface StyleProps {
+  name: string;
+  image: string;
+}
+
+const IMG_STYLE_DATA = [
+  { name: "default", image: "/assets/img/img-graphic-logo.png" },
+  { name: "친절한 미식가", image: "/assets/img/img-style-friendly.png" },
+  { name: "믿음직한 미식가", image: "/assets/img/img-style-trust.png" },
+  { name: "귀여운 미식가", image: "/assets/img/img-style-cute.png" },
+];
+
+const SelectStyle = () => {
+  const [selectedStyle, setSelectedStyle] = useState(IMG_STYLE_DATA[0]);
+
+  const handleStyleClick = (style: StyleProps) => {
+    setSelectedStyle((prevStyle) => (prevStyle.name === style.name ? IMG_STYLE_DATA[0] : style));
+  };
+
+  return (
+    <div className={styles.SelectStyle}>
+      <div className={styles.Title}>
+        <Text variant="titleM" color="primary" align="center" as="h1">
+          나는 어떤 미식가인가요?
+        </Text>
+        <Text variant="bodyLg" color="secondary" align="center" as="h2">
+          선택지에 따라 리뷰 어조가 달라져요
+        </Text>
+      </div>
+
+      <div className={styles.Image}>
+        <img src={selectedStyle.image} alt={`${selectedStyle.name}-img`} />
+      </div>
+
+      <div className={styles.StyleButtonList}>
+        {IMG_STYLE_DATA.slice(1, 4).map((style) => (
+          <div
+            key={style.name}
+            className={classNames({
+              [styles.isSelected]: selectedStyle.name === style.name,
+            })}
+            onClick={() => handleStyleClick(style)}
+          >
+            <Text color={selectedStyle.name === style.name ? "white" : "secondary"} variant="bodyM">
+              {style.name}
+            </Text>
+            <Icon name={selectedStyle.name === style.name ? "checkCircle" : "emptyCircle"} />
+          </div>
+        ))}
+      </div>
+
+      <div className={styles.Bottom}>
+        <Button text="리뷰 만들기" />
+      </div>
+    </div>
+  );
+};
+
+export default SelectStyle;

public/assets/img/img-style-trust.png

@@ -1,11 +1,21 @@
 import CameraIcon from "@/assets/svg/ic-camera.svg?react";
+import CheckCircleIcon from "@/assets/svg/ic-check-circle.svg?react";
 import CloseIcon from "@/assets/svg/ic-close.svg?react";
+import EmptyCircleIcon from "@/assets/svg/ic-empty-circle.svg?react";
 import GalleryIcon from "@/assets/svg/ic-gallery.svg?react";
 import LeftArrowIcon from "@/assets/svg/ic-left-arrow.svg?react";
 import PasteIcon from "@/assets/svg/ic-paste.svg?react";
 import PlusIcon from "@/assets/svg/ic-plus.svg?react";
 
-export type IconNameType = "camera" | "close" | "gallery" | "leftArrow" | "paste" | "plus";
+export type IconNameType =
+  | "camera"
+  | "close"
+  | "gallery"
+  | "leftArrow"
+  | "paste"
+  | "plus"
+  | "checkCircle"
+  | "emptyCircle";
 
 export interface IconProps {
   name: IconNameType;
@@ -18,6 +28,8 @@ export const ICONS = {
   leftArrow: LeftArrowIcon,
   paste: PasteIcon,
   plus: PlusIcon,
+  checkCircle: CheckCircleIcon,
+  emptyCircle: EmptyCircleIcon,
 };
 
 // 추후 사이즈, 컬러등 추가 가능

src/assets/svg/ic-empty-circle.svg

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

src/components/SelectStyle/SelectStyle.module.scss

@@ -5,6 +5,7 @@ import App from "@/App";
 import HomePage from "@/pages/HomePage";
 import ReceiptEditPage from "@/pages/ReceiptEditPage";
 import RecognitionFailPage from "@/pages/RecognitionFailPage";
+import SelectStylePage from "@/pages/SelectStylePage";
 import SelectTagPage from "@/pages/SelectTagPage";
 
 const AppRouter = () => {
@@ -29,6 +30,10 @@ const AppRouter = () => {
           path: "/select-tag",
           element: <SelectTagPage />,
         },
+        {
+          path: "/select-style",
+          element: <SelectStylePage />,
+        },
       ],
     },
   ]);