diff --git a/src/components/ReceiptEdit/ReceiptEdit.module.scss b/src/components/ReceiptEdit/ReceiptEdit.module.scss new file mode 100644 index 0000000..89af27b --- /dev/null +++ b/src/components/ReceiptEdit/ReceiptEdit.module.scss @@ -0,0 +1,54 @@ +.ReceiptEdit { + padding-left: 1.25rem; + padding-right: 1.25rem; + padding-bottom: 2.5rem; + height: calc(100vh - 2.75rem); + overflow: hidden; + position: relative; + 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; + + & > h1 { + margin-top: 2.5rem; + white-space: pre-line; + } +} + +.InfoList { + display: flex; + flex-direction: column; + gap: 0.875rem; + margin-top: 1.5rem; +} + +.InfoItem { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.Bottom { + display: flex; + align-items: center; + gap: 0.875rem; + z-index: 1; +} diff --git a/src/components/ReceiptEdit/ReceiptEdit.tsx b/src/components/ReceiptEdit/ReceiptEdit.tsx new file mode 100644 index 0000000..7b0b9e6 --- /dev/null +++ b/src/components/ReceiptEdit/ReceiptEdit.tsx @@ -0,0 +1,31 @@ +import styles from "@/components/ReceiptEdit/ReceiptEdit.module.scss"; +import Button from "@/components/ui/Button/Button"; +import Input from "@/components/ui/Input/Input"; +import Text from "@/components/ui/Text/Text"; + +const ReceiptEdit = () => { + const placeName = "청담커피 앤 토스트"; + + return ( +
+
+ + {`${placeName}에\n다녀오셨네요!`} + +
+
+

가게명

+ +
+
+
+ +
+
+
+ ); +}; + +export default ReceiptEdit; diff --git a/src/components/ui/Input/Input.module.scss b/src/components/ui/Input/Input.module.scss index f3ed52c..c833aae 100644 --- a/src/components/ui/Input/Input.module.scss +++ b/src/components/ui/Input/Input.module.scss @@ -43,7 +43,7 @@ button { @include bodySm; - color: var(--color-purple); + color: var(--color-primary-purple); line-height: 1.3125rem; } } diff --git a/src/pages/ReceiptEditPage.tsx b/src/pages/ReceiptEditPage.tsx new file mode 100644 index 0000000..fbbd80b --- /dev/null +++ b/src/pages/ReceiptEditPage.tsx @@ -0,0 +1,13 @@ +import Navbar from "@/components/common/Navbar"; +import ReceiptEdit from "@/components/ReceiptEdit/ReceiptEdit"; + +const ReceiptEditPage = () => { + return ( + <> + + + + ); +}; + +export default ReceiptEditPage; diff --git a/src/router/AppRouter.tsx b/src/router/AppRouter.tsx index f5a6b6f..0dbcde1 100644 --- a/src/router/AppRouter.tsx +++ b/src/router/AppRouter.tsx @@ -3,6 +3,7 @@ import { RouterProvider, createBrowserRouter } from "react-router-dom"; import App from "@/App"; import HomePage from "@/pages/HomePage"; +import ReceiptEditPage from "@/pages/ReceiptEditPage"; import RecognitionFailPage from "@/pages/RecognitionFailPage"; const AppRouter = () => { @@ -19,6 +20,10 @@ const AppRouter = () => { path: "/recognition-fail", element: , }, + { + path: "/receipt-edit", + element: , + }, ], }, ]);