From 1023796a18f00f19db93eda6bf1483107d63386c Mon Sep 17 00:00:00 2001
From: sikkzz <sling0623@gmail.com>
Date: Sat, 1 Feb 2025 02:00:44 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=98=81=EC=88=98=EC=A6=9D=20=EC=A0=95?=
 =?UTF-8?q?=EB=B3=B4=20=EC=88=98=EC=A0=95=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?focus,=20disabled=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ReceiptEdit/ReceiptEdit.module.scss       |  5 +-
 src/components/ReceiptEdit/ReceiptEdit.tsx    | 59 ++++++++++++++++---
 src/components/ui/Input/Input.tsx             | 20 ++-----
 src/components/ui/Input/Input.types.ts        |  1 +
 src/hooks/common/useFocus.ts                  | 15 +++++
 5 files changed, 75 insertions(+), 25 deletions(-)
 create mode 100644 src/hooks/common/useFocus.ts

diff --git a/src/components/ReceiptEdit/ReceiptEdit.module.scss b/src/components/ReceiptEdit/ReceiptEdit.module.scss
index 89af27b..43f03b1 100644
--- a/src/components/ReceiptEdit/ReceiptEdit.module.scss
+++ b/src/components/ReceiptEdit/ReceiptEdit.module.scss
@@ -27,9 +27,10 @@
 .Top {
   z-index: 1;
 
-  & > h1 {
+  .TitleBox {
+    display: flex;
+    justify-content: center;
     margin-top: 2.5rem;
-    white-space: pre-line;
   }
 }
 
diff --git a/src/components/ReceiptEdit/ReceiptEdit.tsx b/src/components/ReceiptEdit/ReceiptEdit.tsx
index 7b0b9e6..b40792b 100644
--- a/src/components/ReceiptEdit/ReceiptEdit.tsx
+++ b/src/components/ReceiptEdit/ReceiptEdit.tsx
@@ -1,28 +1,73 @@
+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 = "청담커피 앤 토스트";
+  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}>
-        <Text variant="titleM" color="primary" align="center" as="h1">
-          {`${placeName}에\n다녀오셨네요!`}
+        <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}>
-            <p>가게명</p>
-            <Input placeholder="가게 이름" />
+            <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}>
-        <Button text="다시 스캔하기" variant="secondary" />
-        <Button text="정보가 맞아요" />
+        {isPlaceFocus || isFoodFocus ? (
+          <Button text="수정하기" disabled={!placeName || !foodName} />
+        ) : (
+          <>
+            <Button text="다시 스캔하기" variant="secondary" />
+            <Button text="정보가 맞아요" disabled={!placeName || !foodName} />
+          </>
+        )}
       </div>
     </div>
   );
diff --git a/src/components/ui/Input/Input.tsx b/src/components/ui/Input/Input.tsx
index ada5aed..5d04c14 100644
--- a/src/components/ui/Input/Input.tsx
+++ b/src/components/ui/Input/Input.tsx
@@ -1,4 +1,4 @@
-import { useState, forwardRef } from "react";
+import { forwardRef } from "react";
 
 import classNames from "classnames";
 
@@ -6,26 +6,14 @@ 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>
     );
diff --git a/src/components/ui/Input/Input.types.ts b/src/components/ui/Input/Input.types.ts
index b60af66..bd0bd8b 100644
--- a/src/components/ui/Input/Input.types.ts
+++ b/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;
 }
diff --git a/src/hooks/common/useFocus.ts b/src/hooks/common/useFocus.ts
new file mode 100644
index 0000000..c72405c
--- /dev/null
+++ b/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 };
+};