refactor: text field props

src/components/TextField/PasswordTextField/PasswordTextField.type.ts

@@ -1,6 +1,6 @@
 import { TextFieldProps } from '../TextField.type';
 
-export interface PasswordTextFieldProps extends TextFieldProps {
+export interface PasswordTextFieldProps extends Omit<TextFieldProps, 'suffix' | 'searchPrefix'> {
   /** 입력된 내용을 보지 못하게 할 것인지 나타내는 속성 */
   isMarked?: boolean;
 }

src/components/TextField/SimpleTextField/SimpleTextField.stories.tsx

@@ -1,6 +1,5 @@
 import { useState } from 'react';
 
-import { Stories, Primary as PrimaryBlock, Controls, Title } from '@storybook/blocks';
 import { Meta, StoryObj } from '@storybook/react';
 
 import { SimpleTextField } from './SimpleTextField';
@@ -10,58 +9,6 @@ const meta: Meta<typeof SimpleTextField> = {
   component: SimpleTextField,
   parameters: {
     layout: 'centered',
-    docs: {
-      page: () => (
-        <>
-          <Title />
-          <PrimaryBlock />
-          <Controls />
-          <h2> 주의사항 </h2>
-          <ol>
-            <li>
-              TextField의 종류에 따라 suffix, searchPrefix 속성 값이 일부 정해져 있습니다.
-              <br />
-              <br />
-              <table>
-                <tr>
-                  <th>종류</th>
-                  <th>suffix</th>
-                  <th>searchPrefix</th>
-                </tr>
-                <tr>
-                  <td>SimpleTextField</td>
-                  <td>IcXLine</td>
-                  <td>설정 불가</td>
-                </tr>
-                <tr>
-                  <td>SuffixTextField</td>
-                  <td>사용자가 설정한 값</td>
-                  <td>설정 불가</td>
-                </tr>
-                <tr>
-                  <td>SearchTextField</td>
-                  <td>IcXLine</td>
-                  <td>IcSearchLine</td>
-                </tr>
-                <tr>
-                  <td>PasswordTextField</td>
-                  <td>IcEyeclosedLine 또는 IcEyeopenLine</td>
-                  <td>설정 불가</td>
-                </tr>
-              </table>
-            </li>
-            <br />
-            <li>
-              boolean 타입 속성의 우선순위는 아래와 같습니다.
-              <br />
-              disabled &gt; isNegative &gt; isPositive
-            </li>
-          </ol>
-          <br />
-          <Stories />
-        </>
-      ),
-    },
   },
 };
 export default meta;

src/components/TextField/SimpleTextField/SimpleTextField.type.ts

@@ -1,6 +1,6 @@
 import { TextFieldProps } from '../TextField.type';
 
-export interface SimpleTextFieldProps extends TextFieldProps {
+export interface SimpleTextFieldProps extends Omit<TextFieldProps, 'suffix' | 'searchPrefix'> {
   /** x 버튼을 클릭했을 때 이벤트 핸들러 */
   onClickClearButton?: () => void;
 }

src/components/TextField/SuffixTextField/SuffixTextField.tsx

@@ -2,6 +2,6 @@ import { TextField } from '../TextField';
 
 import { SuffixTextFieldProps } from './SuffixTextField.type';
 
-export const SuffixTextField = ({ ...props }: SuffixTextFieldProps) => {
-  return <TextField suffix={props.suffix} {...props} />;
+export const SuffixTextField = ({ suffix, ...props }: SuffixTextFieldProps) => {
+  return <TextField suffix={suffix} {...props} />;
 };

src/components/TextField/SuffixTextField/SuffixTextField.type.ts

@@ -1,3 +1,6 @@
 import { TextFieldProps } from '../TextField.type';
 
-export interface SuffixTextFieldProps extends TextFieldProps {}
+export interface SuffixTextFieldProps extends Omit<TextFieldProps, 'searchPrefix'> {
+  /** TextField 오른쪽에 들어갈 텍스트 */
+  suffix?: string;
+}

src/components/TextField/TextField.stories.tsx

@@ -0,0 +1,72 @@
+import { Controls, Title } from '@storybook/blocks';
+import { Meta } from '@storybook/react';
+
+import { TextField } from './TextField';
+
+const meta: Meta = {
+  title: 'Atoms/TextField',
+  component: TextField,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <h2>주의사항</h2>
+          <ol>
+            <li>
+              TextField의 종류에 따라 suffix, searchPrefix 속성 값이 일부 정해져 있습니다.
+              <br />
+              <br />
+              <table>
+                <tbody>
+                  <tr>
+                    <th>종류</th>
+                    <th>suffix</th>
+                    <th>searchPrefix</th>
+                  </tr>
+                  <tr>
+                    <td>SimpleTextField</td>
+                    <td>IcXLine</td>
+                    <td>설정 불가</td>
+                  </tr>
+                  <tr>
+                    <td>SuffixTextField</td>
+                    <td>사용자가 설정한 값</td>
+                    <td>설정 불가</td>
+                  </tr>
+                  <tr>
+                    <td>SearchTextField</td>
+                    <td>IcXLine</td>
+                    <td>IcSearchLine</td>
+                  </tr>
+                  <tr>
+                    <td>PasswordTextField</td>
+                    <td>IcEyeclosedLine 또는 IcEyeopenLine</td>
+                    <td>설정 불가</td>
+                  </tr>
+                </tbody>
+              </table>
+            </li>
+            <br />
+            <li>
+              boolean 타입 속성의 우선순위는 아래와 같습니다.
+              <br />
+              disabled &gt; isNegative &gt; isPositive
+            </li>
+          </ol>
+          <br />
+          <h2>TextField 속성</h2>
+          <Controls />
+        </>
+      ),
+    },
+  },
+};
+export default meta;
+
+const TextFieldStory = () => {};
+
+export const Primary = {
+  render: TextFieldStory,
+};

src/components/TextField/index.ts

@@ -3,3 +3,6 @@ export type { SimpleTextFieldProps } from './SimpleTextField/SimpleTextField.typ
 
 export { SuffixTextField } from './SuffixTextField/SuffixTextField';
 export type { SuffixTextFieldProps } from './SuffixTextField/SuffixTextField.type';
+
+export { PasswordTextField } from './PasswordTextField/PasswordTextField';
+export type { PasswordTextFieldProps } from './PasswordTextField/PasswordTextField.type';

src/components/index.ts

@@ -30,3 +30,6 @@ export type { SimpleTextFieldProps } from './TextField';
 
 export { SuffixTextField } from './TextField';
 export type { SuffixTextFieldProps } from './TextField';
+
+export { PasswordTextField } from './TextField';
+export type { PasswordTextFieldProps } from './TextField';