refactor: Input 컴포넌트 ref, onchange 추가

coffee-meet · Nov 3, 2023 · f6cc37e · f6cc37e
1 parent 3bb3694
commit f6cc37e
Showing 1 changed file with 29 additions and 21 deletions.
diff --git 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