From b3c8c7f15e29eeaf24b3242caf8ee3ef63995168 Mon Sep 17 00:00:00 2001
From: kyuran kim <57716832+gxxrxn@users.noreply.github.com>
Date: Mon, 15 Apr 2024 21:07:17 +0900
Subject: [PATCH] =?UTF-8?q?[#518]=20Input=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20style=20=EC=B6=94=EA=B0=80=20(#519)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: Input 컴포넌트 style prop 추가

* feat: Input 컴포넌트 스토리 추가

* style: line style에서 px 제거
---
 src/stories/base/Input.stories.tsx | 19 ++++++++++++++++
 src/v1/base/Input.tsx              | 36 ++++++++++++++++++++++++++----
 2 files changed, 51 insertions(+), 4 deletions(-)

diff --git a/src/stories/base/Input.stories.tsx b/src/stories/base/Input.stories.tsx
index 062f2df8..db99431a 100644
--- a/src/stories/base/Input.stories.tsx
+++ b/src/stories/base/Input.stories.tsx
@@ -7,6 +7,12 @@ import ErrorMessage from '@/v1/base/ErrorMessage';
 const meta: Meta<typeof Input> = {
   title: 'Base/Input',
   component: Input,
+  args: {
+    fontSize: 'small',
+  },
+  argTypes: {
+    fontSize: { control: 'select', options: ['small', 'large'] },
+  },
   tags: ['autodocs'],
 };
 
@@ -106,11 +112,24 @@ export const Default: Story = {
   },
 };
 
+export const Line: Story = {
+  args: {
+    fontSize: 'large',
+    error: false,
+  },
+  render: args => (
+    <Input inputStyle="line" defaultValue="프롱이 리팩터링 스터디" {...args} />
+  ),
+};
+
 export const Invalid: Story = {
   args: {
     placeholder: '입력해 주세요.',
     error: true,
   },
+  argTypes: {
+    inputStyle: { control: 'select', options: ['default', 'line'] },
+  },
   render: args => (
     <div className="flex flex-col gap-[0.5rem]">
       <Input {...args} />
diff --git a/src/v1/base/Input.tsx b/src/v1/base/Input.tsx
index 7faefac2..206c0130 100644
--- a/src/v1/base/Input.tsx
+++ b/src/v1/base/Input.tsx
@@ -1,20 +1,48 @@
 import { ComponentPropsWithoutRef, forwardRef, Ref } from 'react';
 
+type InputStyle = 'default' | 'line';
+type FontSize = 'small' | 'large';
 interface InputProps extends ComponentPropsWithoutRef<'input'> {
+  inputStyle?: InputStyle;
+  fontSize?: FontSize;
   error?: boolean;
 }
 
+const FONT_SIZE_CLASSES = {
+  small: 'text-sm',
+  large: 'text-lg font-bold',
+};
+
+const getInputStyleClasses = (inputStyle: InputStyle) => {
+  switch (inputStyle) {
+    case 'line':
+      return 'border-b-[0.1rem] border-black-400 bg-transparent';
+    case 'default':
+    default:
+      return 'rounded-[0.5rem] border-[0.05rem] px-[1rem]';
+  }
+};
+
 const Input = (
-  { error, children, ...props }: InputProps,
+  {
+    inputStyle = 'default',
+    fontSize = 'small',
+    error = false,
+    children,
+    ...props
+  }: InputProps,
   ref: Ref<HTMLInputElement>
 ) => {
-  const borderColor = error
+  const inputStyleClass = getInputStyleClasses(inputStyle);
+  const fontSizeClass = FONT_SIZE_CLASSES[fontSize];
+  const borderColorClass = error
     ? 'border-warning-800 focus:border-warning-800'
     : 'border-black-400 focus:border-main-900';
+
   return (
-    <div className="text-sm">
+    <div className={fontSizeClass}>
       <input
-        className={`w-full rounded-[0.5rem] border-[0.05rem] px-[1rem] py-[1.3rem] outline-none ${borderColor}`}
+        className={`w-full py-[1.3rem] outline-none ${inputStyleClass} ${borderColorClass}`}
         {...props}
         ref={ref}
       />