diff --git a/public/assets/img/img-style-cute.png b/public/assets/img/img-style-cute.png new file mode 100644 index 0000000..2010cfa Binary files /dev/null and b/public/assets/img/img-style-cute.png differ diff --git a/public/assets/img/img-style-friendly.png b/public/assets/img/img-style-friendly.png new file mode 100644 index 0000000..920c03a Binary files /dev/null and b/public/assets/img/img-style-friendly.png differ diff --git a/public/assets/img/img-style-trust.png b/public/assets/img/img-style-trust.png new file mode 100644 index 0000000..1566502 Binary files /dev/null and b/public/assets/img/img-style-trust.png differ diff --git a/src/assets/svg/ic-empty-circle.svg b/src/assets/svg/ic-empty-circle.svg new file mode 100644 index 0000000..3b83fd7 --- /dev/null +++ b/src/assets/svg/ic-empty-circle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/SelectStyle/SelectStyle.module.scss b/src/components/SelectStyle/SelectStyle.module.scss new file mode 100644 index 0000000..2622b94 --- /dev/null +++ b/src/components/SelectStyle/SelectStyle.module.scss @@ -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; +} diff --git a/src/components/SelectStyle/SelectStyle.tsx b/src/components/SelectStyle/SelectStyle.tsx new file mode 100644 index 0000000..e2965c2 --- /dev/null +++ b/src/components/SelectStyle/SelectStyle.tsx @@ -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 ( +
+
+ + 나는 어떤 미식가인가요? + + + 선택지에 따라 리뷰 어조가 달라져요 + +
+ +
+ {`${selectedStyle.name}-img`} +
+ +
+ {IMG_STYLE_DATA.slice(1, 4).map((style) => ( +
handleStyleClick(style)} + > + + {style.name} + + +
+ ))} +
+ +
+
+
+ ); +}; + +export default SelectStyle; diff --git a/src/components/ui/Icon/Icon.tsx b/src/components/ui/Icon/Icon.tsx index e22f3a4..6cbdeb0 100644 --- a/src/components/ui/Icon/Icon.tsx +++ b/src/components/ui/Icon/Icon.tsx @@ -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, }; // 추후 사이즈, 컬러등 추가 가능 diff --git a/src/pages/SelectStylePage.tsx b/src/pages/SelectStylePage.tsx new file mode 100644 index 0000000..346aecb --- /dev/null +++ b/src/pages/SelectStylePage.tsx @@ -0,0 +1,13 @@ +import Navbar from "@/components/common/Navbar"; +import SelectStyle from "@/components/SelectStyle/SelectStyle"; + +const SelectStylePage = () => { + return ( + <> + + + + ); +}; + +export default SelectStylePage; diff --git a/src/router/AppRouter.tsx b/src/router/AppRouter.tsx index 65bcc3e..db2dccc 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 SelectStylePage from "@/pages/SelectStylePage"; import SelectTagPage from "@/pages/SelectTagPage"; const AppRouter = () => { @@ -29,6 +30,10 @@ const AppRouter = () => { path: "/select-tag", element: , }, + { + path: "/select-style", + element: , + }, ], }, ]);