[#518] Input 컴포넌트 style 추가 (#519)

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

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

* style: line style에서 px 제거

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} />

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}
       />