feat(ui): TextField rigntAddon 옵션 추가. (#238)

* feat: Add rightAddon option. * feat: Enhance TextField component with additional props and rightAddon support * cs * refactor: Change TextFieldProps to interface for consistency
sopt-makers · Jan 16, 2025 · fc0cc0a · fc0cc0a
1 parent 78be213
commit fc0cc0a
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 6 deletions.
diff --git a/.changeset/tough-mails-camp.md b/.changeset/tough-mails-camp.md
@@ -0,0 +1,5 @@
+---
+'@sopt-makers/ui': patch
+---
+
+Add rightAddon prop in TextField.
diff --git a/apps/docs/src/stories/TextField.stories.tsx b/apps/docs/src/stories/TextField.stories.tsx
@@ -1,13 +1,21 @@
-import { ChangeEvent, useState, type InputHTMLAttributes } from 'react';
+import { ChangeEvent, ReactNode, useState, type InputHTMLAttributes } from 'react';
 import { StoryObj } from '@storybook/react';
 import { TextField } from '@sopt-makers/ui';
+import { IconSend } from '@sopt-makers/icons';
 
 interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value'> {
+  className?: string;
+  topAddon?: ReactNode;
+  bottomAddon?: ReactNode;
+  rightAddon?: ReactNode;
   labelText?: string;
   descriptionText?: string;
-  value: string;
+  required?: boolean;
   errorMessage?: string;
+  value?: string;
+  // isError -> validationFn 순서로 적용
   isError?: boolean;
+  validationFn?: (input: string) => boolean;
 }
 
 const useTextField = (props: TextFieldProps) => {
@@ -20,6 +28,10 @@ const useTextField = (props: TextFieldProps) => {
   return <TextField {...props} value={text} onChange={handleTextChange} />;
 };
 
+/**
+ * `TextField` 컴포넌트는 **[FieldBox](https://main--6571c88390d085ed7efcce84.chromatic.com/?path=/docs/components-fieldbox--docs)**를 부모 컴포넌트로 삼는 Input 컴포넌트입니다.
+ */
+
 export default {
   title: 'Components/Input/TextField',
   component: useTextField,
@@ -137,3 +149,15 @@ export const Error: StoryObj<TextFieldProps> = {
     disabled: false,
   },
 };
+
+export const HasRightAddon: StoryObj<TextFieldProps> = {
+  args: {
+    labelText: 'Label',
+    descriptionText: 'Description',
+    placeholder: 'Placeholder...',
+    rightAddon: <IconSend style={{ width: '24px', height: '24px' }} />,
+    required: true,
+    readOnly: false,
+    disabled: false,
+  },
+};
diff --git a/packages/ui/Input/TextField.tsx b/packages/ui/Input/TextField.tsx
@@ -6,6 +6,7 @@ interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'va
   className?: string;
   topAddon?: ReactNode;
   bottomAddon?: ReactNode;
+  rightAddon?: ReactNode;
   labelText?: string;
   descriptionText?: string;
   required?: boolean;
@@ -21,6 +22,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>((props, ref) => {
     className,
     topAddon,
     bottomAddon,
+    rightAddon,
     labelText,
     descriptionText,
     required,
@@ -60,7 +62,10 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>((props, ref) => {
         )
       }
     >
-      <input {...inputProps} className={`${S.input} ${hasError() ? S.inputError : ''}`} value={value} />
+      <div className={`${S.inputWrapper} ${hasError() ? S.inputError : ''}`}>
+        <input {...inputProps} className={S.input} value={value} />
+        {rightAddon}
+      </div>
     </FieldBox>
   );
 });

diff --git a/packages/ui/Input/style.css.ts b/packages/ui/Input/style.css.ts
@@ -23,8 +23,8 @@ export const label = style({
   color: theme.colors.white,
 });
 
-export const input = style({
-  ...theme.fontsObject.BODY_2_16_M,
+export const inputWrapper = style({
+  'display': 'flex',
   'background': theme.colors.gray800,
   'border': '1px solid transparent',
   'borderRadius': '10px',
@@ -34,11 +34,23 @@ export const input = style({
   'color': theme.colors.white,
   'boxSizing': 'border-box',
 
+  ':focus-within': {
+    border: `1px solid ${theme.colors.gray200}`,
+  },
+});
+
+export const input = style({
+  ...theme.fontsObject.BODY_2_16_M,
+  'flex': 1,
+  'border': 0,
+  'background': 'transparent',
+  'color': theme.colors.white,
+  'boxSizing': 'border-box',
+
   '::placeholder': {
     color: theme.colors.gray300,
   },
   ':focus': {
-    border: `1px solid ${theme.colors.gray200}`,
     outline: 'none',
   },
   ':disabled': {