[#19] 텍스트필드 v2 컴포넌트 구현

package.json

@@ -29,6 +29,7 @@
     "lucide-react": "^0.417.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.2.1",
     "react-hook-form": "^7.52.1",
     "react-router-dom": "^6.25.1",
     "tailwind-merge": "^2.4.0",

src/components/common/TextFieldV2/TextFieldV2.stories.tsx

@@ -0,0 +1,31 @@
+import { Meta, StoryObj } from '@storybook/react';
+import TextFieldV2 from '@/components/common/TextFieldV2/index.tsx';
+import { RiDeleteBinLine } from 'react-icons/ri';
+
+const meta: Meta = {
+  title: '텍스트 필드 V2',
+  component: TextFieldV2,
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof TextFieldV2>;
+
+export const Default: Story = {
+  args: {
+    label: '레이블',
+    placeholder: '플레이스 홀더',
+  },
+};
+
+export const WithTrailingIcon: Story = {
+  args: {
+    label: '레이블',
+    placeholder: '플레이스 홀더',
+    trailingIcon: (
+      <div className={'cursor-pointer'}>
+        <RiDeleteBinLine size={24} color={'#B0B8C1'} />
+      </div>
+    ),
+  },
+};

src/components/common/TextFieldV2/index.tsx

@@ -0,0 +1,50 @@
+import { Input, InputProps } from '@/components/ui/input.tsx';
+import { Label } from '@/components/ui/label.tsx';
+import { ReactNode, useId } from 'react';
+import { cn } from '@/utils.ts';
+
+export interface TextFieldV2Props extends Omit<InputProps, 'id' | 'type' | 'className'> {
+  label: string;
+  labelClassName?: string;
+  inputClassName?: string;
+  trailingIcon?: ReactNode;
+}
+
+const TextFieldV2 = ({
+  label,
+  labelClassName,
+  inputClassName,
+  trailingIcon,
+  ...rest
+}: TextFieldV2Props) => {
+  const id = useId();
+
+  return (
+    <div className="grid w-full items-center gap-2.5">
+      <Label
+        className={cn('text-small-writing text-gray-800 font-medium px-2.5', labelClassName)}
+        htmlFor={id}
+      >
+        {label}
+      </Label>
+      <div
+        className={cn(
+          'w-full px-2.5 pt-0 pb-3 flex flex-row justify-between items-center border-b-2 border-gray-100',
+          inputClassName,
+        )}
+      >
+        <Input
+          className={
+            'border-none rounded-none p-0 text-regular-title font-semibold placeholder:text-gray-400 focus-visible:ring-transparent focus-visible:ring-offset-0 caret-blue-500 text-gray-800'
+          }
+          id={id}
+          type={'text'}
+          {...rest}
+        />
+        {trailingIcon}
+      </div>
+    </div>
+  );
+};
+
+export default TextFieldV2;

src/components/ui/input.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+import { cn } from '@/utils';
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Input.displayName = 'Input';
+
+export { Input };