refactor: Input 컴포넌트 ref, onchange 추가 (#90)

* refactor: Input 컴포넌트 ref, onchange 추가 * refactor: pr 수정사항 반영
coffee-meet · Nov 8, 2023 · 2ea0a9a · 2ea0a9a
1 parent 4f9db62
commit 2ea0a9a
Showing 1 changed file with 34 additions and 26 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 (
-    <>
-      <InputWrapper>
-        <StyleInput
+const Input = React.forwardRef(
+  (
+    {
+      placeholder,
+      placeholderSize,
+      placeholderColor,
+      width,
+      height,
+      borderColor,
+      borderWidth,
+      borderRadius,
+      inputTextColor,
+      inputTextSize,
+      inputBackgroundColor,
+      onChange,
+    }: InputProps,
+    ref: ForwardedRef<HTMLInputElement>,
+  ) => {
+    return (
+      <StyledInputWrapper>
+        <StyledInput
+          ref={ref}
+          onChange={onChange}
           placeholder={placeholder}
           placeholderSize={placeholderSize}
           placeholderColor={placeholderColor}
@@ -42,23 +50,22 @@ const Input = ({
           inputTextSize={inputTextSize}
           inputBackgroundColor={inputBackgroundColor}
           borderRadius={borderRadius}
-        ></StyleInput>
-      </InputWrapper>
-    </>
-  )
-}
+        />
+      </StyledInputWrapper>
+    )
+  },
+)
+Input.displayName = 'Input'
 
-const InputWrapper = styled.div`
+const StyledInputWrapper = styled.div`
   position: relative;
 `
 
-const StyleInput = styled.input<InputProps>`
+const StyledInput = styled.input<InputProps>`
   ::placeholder {
     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;
 `
 
 export default Input