[Feat/#22] 영수증 인식 정보 수정 UI 제작

src/components/ReceiptEdit/ReceiptEdit.module.scss

@@ -0,0 +1,55 @@
+.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;
+
+  .TitleBox {
+    display: flex;
+    justify-content: center;
+    margin-top: 2.5rem;
+  }
+}
+
+.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;
+}

src/components/ReceiptEdit/ReceiptEdit.tsx

@@ -0,0 +1,76 @@
+import { useState } from "react";
+
+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";
+
+import { useFocus } from "@/hooks/common/useFocus";
+
+const ReceiptEdit = () => {
+  const [placeName, setPlaceName] = useState("청담커피 앤 토스트");
+  const [foodName, setFoodName] = useState("카야토스트+음료세트");
+
+  const { isFocus: isPlaceFocus, onFocus: handlePlaceFocus, onBlur: handlePlaceBlur } = useFocus();
+  const { isFocus: isFoodFocus, onFocus: handleFoodFocus, onBlur: handleFoodBlur } = useFocus();
+
+  return (
+    <div className={styles.ReceiptEdit}>
+      <div className={styles.Top}>
+        <div className={styles.TitleBox}>
+          <Text variant="titleM" color="primary" as="h1" truncated>
+            {placeName}
+          </Text>
+          <Text variant="titleM" color="primary" as="h1">
+            에
+          </Text>
+        </div>
+        <Text variant="titleM" color="primary" as="h1" align="center">
+          다녀오셨네요!
+        </Text>
+
+        <div className={styles.InfoList}>
+          <div className={styles.InfoItem}>
+            <Text variant="bodyXsm" color="secondary">
+              가게명
+            </Text>
+            <Input
+              placeholder="가게 이름"
+              value={placeName}
+              onChange={(e) => setPlaceName(e.target.value)}
+              onFocus={handlePlaceFocus}
+              onBlur={handlePlaceBlur}
+              isFocus={isPlaceFocus}
+            />
+          </div>
+          <div className={styles.InfoItem}>
+            <Text variant="bodyXsm" color="secondary">
+              음식명
+            </Text>
+            <Input
+              placeholder="음식 이름"
+              value={foodName}
+              onChange={(e) => setFoodName(e.target.value)}
+              onFocus={handleFoodFocus}
+              onBlur={handleFoodBlur}
+              isFocus={isFoodFocus}
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className={styles.Bottom}>
+        {isPlaceFocus || isFoodFocus ? (
+          <Button text="수정하기" disabled={!placeName || !foodName} />
+        ) : (
+          <>
+            <Button text="다시 스캔하기" variant="secondary" />
+            <Button text="정보가 맞아요" disabled={!placeName || !foodName} />
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ReceiptEdit;

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

src/components/ui/Input/Input.tsx

@@ -1,31 +1,19 @@
-import { useState, forwardRef } from "react";
+import { forwardRef } from "react";
 
 import classNames from "classnames";
 
 import styles from "@/components/ui/Input/Input.module.scss";
 import type { InputProps } from "@/components/ui/Input/Input.types";
 
 const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, variant = "primary", ...props }, ref) => {
-    const [isFocused, setIsFocused] = useState(false);
-
-    const handleFocus = () => setIsFocused(true);
-    const handleBlur = () => setIsFocused(false);
-
+  ({ className, type, variant = "primary", isFocus, ...props }, ref) => {
     return (
       <div
         className={classNames(styles.InputWrapper, styles[`style-${variant}`], {
-          [styles.Focused]: isFocused,
+          [styles.Focused]: isFocus,
         })}
       >
-        <input
-          type={type}
-          ref={ref}
-          className={classNames(styles.Input, className)}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          {...props}
-        />
+        <input type={type} ref={ref} className={classNames(styles.Input, className)} {...props} />
         {variant === "primary" && <button>수정</button>}
       </div>
     );

src/components/ui/Input/Input.types.ts

@@ -2,4 +2,5 @@ type InputFieldVariant = "primary" | "secondary";
 
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   variant?: InputFieldVariant;
+  isFocus?: boolean;
 }

src/hooks/common/useFocus.ts

@@ -0,0 +1,15 @@
+import { useState } from "react";
+
+export const useFocus = () => {
+  const [isFocus, setIsFocus] = useState(false);
+
+  const onFocus = () => {
+    setIsFocus(true);
+  };
+
+  const onBlur = () => {
+    setIsFocus(false);
+  };
+
+  return { isFocus, onFocus, onBlur };
+};

src/pages/ReceiptEditPage.tsx

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

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: <RecognitionFailPage />,
         },
+        {
+          path: "/receipt-edit",
+          element: <ReceiptEditPage />,
+        },
       ],
     },
   ]);