From f6cc37e88007130355d3d56ebd23bfbad61d089e Mon Sep 17 00:00:00 2001
From: from1to2 <ngcd12345@gmail.com>
Date: Sat, 4 Nov 2023 01:08:25 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20Input=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20ref,=20onchange=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Input/index.tsx | 50 ++++++++++++++++-----------
 1 file changed, 29 insertions(+), 21 deletions(-)

diff --git a/src/components/common/Input/index.tsx b/src/components/common/Input/index.tsx
index 28e71169..ab73dbb3 100644
--- a/src/components/common/Input/index.tsx
+++ b/src/components/common/Input/index.tsx
@@ -1,4 +1,5 @@
 import styled from '@emotion/styled'
+import React, { ForwardedRef } from 'react'
 
 type InputProps = {
   placeholder?: string
@@ -12,25 +13,32 @@ type InputProps = {
   inputTextSize?: string
   inputBackgroundColor?: string
   borderRadius?: string
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
 }
 
-const Input = ({
-  placeholder,
-  placeholderSize,
-  placeholderColor,
-  width,
-  height,
-  borderColor,
-  borderWidth,
-  borderRadius,
-  inputTextColor,
-  inputTextSize,
-  inputBackgroundColor,
-}: InputProps) => {
-  return (
-    <>
+const Input = React.forwardRef(
+  (
+    {
+      placeholder,
+      placeholderSize,
+      placeholderColor,
+      width,
+      height,
+      borderColor,
+      borderWidth,
+      borderRadius,
+      inputTextColor,
+      inputTextSize,
+      inputBackgroundColor,
+      onChange,
+    }: InputProps,
+    ref: ForwardedRef<HTMLInputElement>,
+  ) => {
+    return (
       <InputWrapper>
         <StyleInput
+          ref={ref}
+          onChange={onChange}
           placeholder={placeholder}
           placeholderSize={placeholderSize}
           placeholderColor={placeholderColor}
@@ -42,11 +50,12 @@ const Input = ({
           inputTextSize={inputTextSize}
           inputBackgroundColor={inputBackgroundColor}
           borderRadius={borderRadius}
-        ></StyleInput>
+        />
       </InputWrapper>
-    </>
-  )
-}
+    )
+  },
+)
+Input.displayName = 'Input'
 
 const InputWrapper = styled.div`
   position: relative;
@@ -57,8 +66,6 @@ const StyleInput = styled.input<InputProps>`
     font-size: ${(props) => props.placeholderSize};
     color: ${(props) => props.placeholderColor};
   }
-  position: relative;
-  placeholder: ${(props) => props.placeholder};
   width: ${(props) => props.width};
   height: ${(props) => props.height};
   border-color: ${(props) => props.borderColor};
@@ -67,6 +74,7 @@ const StyleInput = styled.input<InputProps>`
   background-color: ${(props) => props.inputBackgroundColor};
   border-radius: ${(props) => props.borderRadius};
   font-size: ${(props) => props.inputTextSize};
+  position: relative; // This should be adjusted if needed.
 `
 
 export default Input