[Feat/#18] 영수증 인식 실패 UI 제작

src/components/RecognitionFail/RecognitionFail.module.scss

@@ -0,0 +1,36 @@
+.RecognitionFail {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+  padding-bottom: 2.5rem;
+  height: calc(100vh - 2.75rem);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background: var(--color-bg-gradient);
+
+  .Title {
+    padding-top: 5rem;
+    padding-bottom: 1.25rem;
+
+    display: flex;
+    flex-direction: column;
+    gap: 0.625rem;
+
+    & > span {
+      white-space: pre-line;
+    }
+  }
+
+  .Image {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .Bottom {
+    display: flex;
+    align-items: center;
+    gap: 0.875rem;
+  }
+}

src/components/RecognitionFail/RecognitionFail.tsx

@@ -0,0 +1,27 @@
+import styles from "@/components/RecognitionFail/RecognitionFail.module.scss";
+import Button from "@/components/ui/Button/Button";
+import Text from "@/components/ui/Text/Text";
+
+const RecognitionFail = () => {
+  return (
+    <div className={styles.RecognitionFail}>
+      <div className={styles.Title}>
+        <Text size="lg" color="primary" weight="bold" align="center" as="h1">
+          영수증 인식에 실패했어요
+        </Text>
+        <Text weight="medium" align="center" color="secondary">
+          {`깨끗한 배경에 영수증을 놓고\n전체가 잘 나오도록 촬영해 주세요`}
+        </Text>
+      </div>
+      <div className={styles.Image}>
+        <img src="/src/assets/img/img-recognition-fail.png" alt="recognitionFailImg" />
+      </div>
+      <div className={styles.Bottom}>
+        <Button text="직접 입력하기" variant="secondary" />
+        <Button text="다시 촬영하기" variant="secondary" />
+      </div>
+    </div>
+  );
+};
+
+export default RecognitionFail;

src/pages/RecognitionFailPage.tsx

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

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 RecognitionFailPage from "@/pages/RecognitionFailPage";
 
 const AppRouter = () => {
   const router = createBrowserRouter([
@@ -14,6 +15,10 @@ const AppRouter = () => {
           path: "",
           element: <HomePage />,
         },
+        {
+          path: "/recognition-fail",
+          element: <RecognitionFailPage />,
+        },
       ],
     },
   ]);