refactor: input 수정

Author: sikkzz

src/components/ReceiptEdit/ReceiptEdit.tsx

@@ -17,7 +17,10 @@ const ReceiptEdit = () => {
 
   const { setOcrText } = useCreateReviewStore();
 
-  const [formData, setFormData] = useState<{ [key: string]: string }[]>([]);
+  const [formData, setFormData] = useState<{ [key: string]: string }[]>([
+    { test: "abc" },
+    { test2: "aadsasf" },
+  ]);
   const [focusState, setFocusState] = useState<{ [key: string]: boolean }>({});
 
   useEffect(() => {

src/components/ui/Input/Input.module.scss

@@ -1,30 +1,46 @@
 @use "@/styles/_mixins.scss" as *;
 
 .InputWrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  button {
+    position: absolute;
+    right: 0.875rem;
+    color: var(--color-primary-purple);
+    line-height: 1.3125rem;
+
+    @include bodySm;
+  }
+}
+
+.Input {
   width: 100%;
   height: 3rem;
   border-radius: 0.875rem;
   padding: 0.75rem 0.875rem;
   border: 1px solid transparent;
-  display: flex;
-  align-items: center;
-  gap: 0.625rem;
+  color: var(--color-text-primary);
+  line-height: 1.5rem;
+
+  @include bodyM;
+
+  &::placeholder {
+    color: var(--color-text-tertiary);
+  }
 
   &.style-primary {
     background-color: var(--color-white);
     box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.04);
-
-    & > input {
-      width: calc(100% - 2.25rem);
-    }
   }
 
   &.style-secondary {
     background-color: var(--color-gray100);
+  }
 
-    & > input {
-      width: 100%;
-    }
+  &:focus {
+    border-color: var(--color-primary-purple);
   }
 
   &.Focused {
@@ -34,22 +50,6 @@
   &.Error {
     border-color: var(--color-text-error);
   }
-
-  .Input {
-    @include bodyM;
-    color: var(--color-text-primary);
-    line-height: 1.5rem;
-
-    &::placeholder {
-      color: var(--color-text-tertiary);
-    }
-  }
-
-  button {
-    @include bodySm;
-    color: var(--color-primary-purple);
-    line-height: 1.3125rem;
-  }
 }
 
 .InputStory {

src/components/ui/Input/Input.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useRef } from "react";
+import { forwardRef, useEffect, useState } from "react";
 
 import classNames from "classnames";
 
@@ -7,37 +7,42 @@ import type { InputProps } from "@/components/ui/Input/Input.types";
 
 const Input = forwardRef<HTMLInputElement, InputProps>(
   ({ className, type, variant = "primary", onFocus, isFocus, onBlur, isError, ...props }, ref) => {
-    const inputRef = useRef<HTMLInputElement>(null);
+    const [focused, setFocused] = useState(isFocus || false);
 
-    const handleDivClick = () => {
-      if (onFocus) {
-        const fakeEvent = { target: inputRef.current } as React.FocusEvent<HTMLInputElement>;
-        onFocus(fakeEvent);
-      }
+    const inputRef = ref as React.RefObject<HTMLInputElement>;
+
+    const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
+      setFocused(true);
+      onFocus && onFocus(e);
     };
 
-    const handleDivBlur = () => {
-      if (onBlur) {
-        const fakeEvent = { target: inputRef.current } as React.FocusEvent<HTMLInputElement>;
-        onBlur(fakeEvent);
-      }
+    const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+      setFocused(false);
+      onBlur && onBlur(e);
     };
 
+    useEffect(() => {
+      if (isFocus !== undefined) {
+        setFocused(isFocus);
+      }
+    }, [isFocus]);
+
     return (
-      <div
-        className={classNames(
-          styles.InputWrapper,
-          styles[`style-${variant}`],
-          {
-            [styles.Focused]: isFocus,
-            [styles.Error]: isError,
-          },
-          className,
-        )}
-        onClick={handleDivClick}
-        onBlur={handleDivBlur}
-      >
-        <input type={type} ref={ref} className={styles.Input} {...props} onBlur={handleDivBlur} />
+      <div className={styles.InputWrapper}>
+        <input
+          type={type}
+          ref={inputRef}
+          className={classNames(
+            styles.Input,
+            styles[`style-${variant}`],
+            focused && styles.Focused,
+            isError && styles.Error,
+            className,
+          )}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          {...props}
+        />
         {variant === "primary" && <button>수정</button>}
       </div>
     );