Merge pull request #248 from vi-wolhwa/hotfix/input_component_update

Input 컴포넌트 사이즈 추가
woowacourse-teams · Aug 2, 2024 · 8c8d0f8 · 8c8d0f8
2 parents 49ecb89 + c9a2f4f
commit 8c8d0f8
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 5 deletions.
diff --git a/frontend/src/components/Input/Input.stories.tsx b/frontend/src/components/Input/Input.stories.tsx
@@ -17,7 +17,7 @@ const meta: Meta<typeof Input> = {
     size: {
       control: {
         type: 'radio',
-        options: ['small', 'medium'],
+        options: ['small', 'medium', 'large'],
       },
     },
     isValid: {

diff --git a/frontend/src/components/Input/Input.style.ts b/frontend/src/components/Input/Input.style.ts
@@ -8,18 +8,29 @@ const sizes = {
     gap: 0.5rem;
 
     height: 2rem;
-    padding: 0.625rem 0.75rem;
+    padding: 0 0.75rem;
 
     font-size: 0.75rem;
     line-height: 100%;
 
     border-radius: 8px;
   `,
   medium: css`
+    gap: 0.875rem;
+
+    height: 2.5rem;
+    padding: 0 0.875rem;
+
+    font-size: 0.875rem;
+    line-height: 100%;
+
+    border-radius: 10px;
+  `,
+  large: css`
     gap: 0.75rem;
 
     height: 3rem;
-    padding: 1rem;
+    padding: 0 1rem;
 
     font-size: 1rem;
     line-height: 100%;

diff --git a/frontend/src/components/Input/Input.tsx b/frontend/src/components/Input/Input.tsx
@@ -11,12 +11,12 @@ import {
 import * as S from './Input.style';
 
 export interface BaseProps extends HTMLAttributes<HTMLDivElement> {
-  size?: 'small' | 'medium';
+  size?: 'small' | 'medium' | 'large';
   variant?: 'filled' | 'outlined' | 'text';
   isValid?: boolean;
 }
 export interface TextFieldProps extends InputHTMLAttributes<HTMLInputElement> {
-  inputSize?: 'small' | 'medium';
+  inputSize?: 'small' | 'medium' | 'large';
 }
 
 export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {}