From 0f5ad343be935b703a1925120c28569f41ff49af Mon Sep 17 00:00:00 2001
From: HyeongKyeom Kim <97586683+Brokyeom@users.noreply.github.com>
Date: Wed, 20 Nov 2024 17:44:58 +0900
Subject: [PATCH] =?UTF-8?q?fix(ui):=20TextField=20value=20optional?=
 =?UTF-8?q?=EB=A1=9C=20=EC=88=98=EC=A0=95,=20generic=20parameter=20?=
 =?UTF-8?q?=EC=82=AD=EC=A0=9C,=20forwardRef=20=EC=A0=84=EB=8B=AC.=20(#210)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: TextField value optional로 수정

* cs

* forwardRef 추가

* change cs

* fix: remove generic parameter.

* remove

* fix: remove generic type in stories

* remove number type
---
 .changeset/fluffy-countries-flash.md        |  5 ++
 apps/docs/src/App.tsx                       |  2 +-
 apps/docs/src/stories/Fonts.stories.tsx     | 69 +++++++++++++--------
 apps/docs/src/stories/TextField.stories.tsx |  2 +-
 packages/ui/Input/TextField.tsx             | 17 ++---
 5 files changed, 59 insertions(+), 36 deletions(-)
 create mode 100644 .changeset/fluffy-countries-flash.md

diff --git a/.changeset/fluffy-countries-flash.md b/.changeset/fluffy-countries-flash.md
new file mode 100644
index 00000000..8b8f5bcc
--- /dev/null
+++ b/.changeset/fluffy-countries-flash.md
@@ -0,0 +1,5 @@
+---
+'@sopt-makers/ui': patch
+---
+
+TextField value prop optinal 로 변경, forwardRef 추가.
diff --git a/apps/docs/src/App.tsx b/apps/docs/src/App.tsx
index bdafc9d1..5fe76400 100644
--- a/apps/docs/src/App.tsx
+++ b/apps/docs/src/App.tsx
@@ -54,7 +54,7 @@ function App() {
   return (
     <>
       <Test text='Test Component' size='big' color='blue' />
-      <TextField<string>
+      <TextField
         placeholder='Placeholder...'
         required
         labelText='Label'
diff --git a/apps/docs/src/stories/Fonts.stories.tsx b/apps/docs/src/stories/Fonts.stories.tsx
index 105a4101..511edf17 100644
--- a/apps/docs/src/stories/Fonts.stories.tsx
+++ b/apps/docs/src/stories/Fonts.stories.tsx
@@ -3,8 +3,8 @@ import { ChangeEvent, useState } from 'react';
 import { TextField } from '@sopt-makers/ui';
 
 export default {
-  title: 'fonts/Fonts'
-}
+  title: 'fonts/Fonts',
+};
 
 type FontName = keyof typeof fontsObject;
 
@@ -13,10 +13,10 @@ const useInput = (defaultValue: string) => {
 
   const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
     setInput(e.target.value);
-  }
+  };
 
   return [input, handleInputChange] as const;
-}
+};
 
 export const Default = () => {
   const [text, handleTextChange] = useInput('SOPT에 없던 새로운 가치를 프로덕트를 통해 만들어 갑니다.');
@@ -32,26 +32,41 @@ export const Default = () => {
       case 'LABEL':
         return '#346FFA';
     }
-  }
-
-  return <div className="fonts-wrap">
-    <p style={{ fontSize: '20px' }}>* 공통 스타일 - fontFamily : SUIT / fontStyle : normal *</p>
-    <TextField<string> value={text} onChange={handleTextChange} placeholder="예시 문장을 입력해주세요" />
-
-    {Object.keys(fontsObject).map((fontName) => {
-      const fontObject = fontsObject[fontName as FontName];
-
-      return <div key={fontName} className="fonts-group">
-        <p style={{ color: getFontColor(fontName.split('_')[0]) }}>{fontName}</p>
-        <div>
-          <p><span>fontWeight : </span>{fontObject.fontWeight}</p>
-          <p><span>fontSize : </span>{fontObject.fontSize}</p>
-          <p><span>lineHeight : </span>{fontObject.lineHeight}</p>
-          <p><span>letterSpacing : </span>{fontObject.letterSpacing}</p>
-        </div>
-        <p style={fontObject}>{text}</p>
-      </div>
-    }
-    )}
-  </div>
-}
\ No newline at end of file
+  };
+
+  return (
+    <div className='fonts-wrap'>
+      <p style={{ fontSize: '20px' }}>* 공통 스타일 - fontFamily : SUIT / fontStyle : normal *</p>
+      <TextField value={text} onChange={handleTextChange} placeholder='예시 문장을 입력해주세요' />
+
+      {Object.keys(fontsObject).map((fontName) => {
+        const fontObject = fontsObject[fontName as FontName];
+
+        return (
+          <div key={fontName} className='fonts-group'>
+            <p style={{ color: getFontColor(fontName.split('_')[0]) }}>{fontName}</p>
+            <div>
+              <p>
+                <span>fontWeight : </span>
+                {fontObject.fontWeight}
+              </p>
+              <p>
+                <span>fontSize : </span>
+                {fontObject.fontSize}
+              </p>
+              <p>
+                <span>lineHeight : </span>
+                {fontObject.lineHeight}
+              </p>
+              <p>
+                <span>letterSpacing : </span>
+                {fontObject.letterSpacing}
+              </p>
+            </div>
+            <p style={fontObject}>{text}</p>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
diff --git a/apps/docs/src/stories/TextField.stories.tsx b/apps/docs/src/stories/TextField.stories.tsx
index 491fd47a..1b315fb9 100644
--- a/apps/docs/src/stories/TextField.stories.tsx
+++ b/apps/docs/src/stories/TextField.stories.tsx
@@ -17,7 +17,7 @@ const useTextField = (props: TextFieldProps) => {
     setText(e.target.value);
   };
 
-  return <TextField<string> {...props} value={text} onChange={handleTextChange} />;
+  return <TextField {...props} value={text} onChange={handleTextChange} />;
 };
 
 export default {
diff --git a/packages/ui/Input/TextField.tsx b/packages/ui/Input/TextField.tsx
index 959a8081..49d2e5e7 100644
--- a/packages/ui/Input/TextField.tsx
+++ b/packages/ui/Input/TextField.tsx
@@ -1,8 +1,8 @@
-import type { ReactNode, InputHTMLAttributes } from 'react';
+import { type ReactNode, type InputHTMLAttributes, forwardRef } from 'react';
 import { FieldBox } from 'FieldBox';
 import * as S from './style.css';
 
-interface TextFieldProps<T> extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value'> {
+interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value'> {
   className?: string;
   topAddon?: ReactNode;
   bottomAddon?: ReactNode;
@@ -10,13 +10,13 @@ interface TextFieldProps<T> extends Omit<InputHTMLAttributes<HTMLInputElement>,
   descriptionText?: string;
   required?: boolean;
   errorMessage?: string;
-  value: T;
+  value?: string;
   // isError -> validationFn 순서로 적용
   isError?: boolean;
-  validationFn?: (input: T) => boolean;
+  validationFn?: (input: string) => boolean;
 }
 
-function TextField<T extends string | number>(props: TextFieldProps<T>) {
+const TextField = forwardRef<HTMLInputElement, TextFieldProps>((props, ref) => {
   const {
     className,
     topAddon,
@@ -34,7 +34,7 @@ function TextField<T extends string | number>(props: TextFieldProps<T>) {
   const hasError = () => {
     if (inputProps.disabled || inputProps.readOnly) return false;
     if (isError !== undefined) return isError;
-    if (validationFn && !validationFn(value)) return true;
+    if (validationFn && value && !validationFn(value)) return true;
     return false;
   };
 
@@ -47,6 +47,7 @@ function TextField<T extends string | number>(props: TextFieldProps<T>) {
         />
       }
       className={className}
+      ref={ref}
       topAddon={
         labelText || descriptionText ? (
           <FieldBox.Label description={descriptionText} label={labelText} required={required} />
@@ -58,6 +59,8 @@ function TextField<T extends string | number>(props: TextFieldProps<T>) {
       <input {...inputProps} className={`${S.input} ${hasError() ? S.inputError : ''}`} value={value} />
     </FieldBox>
   );
-}
+});
+
+TextField.displayName = 'TextField';
 
 export default TextField;