Merge pull request #12 from MARU-EGG/atom-component-refactor

[USER]: Feat Text-input component

src/ui/components/atom/icon/icon-button.stories.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import IconButton from './icon-button';
-import { ReactComponent as MenuIcon } from '../../../../../public/Menu.svg';
-import { ReactComponent as SendIcon } from '../../../../../public/Send.svg';
-import { ReactComponent as XIcon } from '../../../../../public/X.svg';
-import { ReactComponent as RefreshIcon } from '../../../../../public/Refresh.svg';
+import { ReactComponent as MenuIcon } from '../../../../assets/Menu.svg';
+import { ReactComponent as SendIcon } from '../../../../assets/Send.svg';
+import { ReactComponent as XIcon } from '../../../../assets/X.svg';
+import { ReactComponent as RefreshIcon } from '../../../../assets/Refresh.svg';
 
 const meta = {
   title: 'Example/IconButton',

src/ui/components/atom/text-input/text-input.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import TextArea from './text-input';
+
+const meta = {
+  title: 'Example/TextArea',
+  component: TextArea,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    onValueChange: (value: string) => console.log(value),
+  },
+} satisfies Meta<typeof TextArea>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    placeholder: 'Enter text here...',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    placeholder: 'Enter text here...',
+    disabled: true,
+  },
+};
+
+export const WithValue: Story = {
+  args: {
+    value: '마루에그에게 물어보고싶어요',
+  },
+};

src/ui/components/atom/text-input/text-input.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { cn } from '../../../../utils/style';
+
+export interface TextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  value?: string;
+  onValueChange?: (value: string) => void;
+  disabled?: boolean;
+  defaultValue?: string;
+}
+
+const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(function TextArea(
+  { disabled = false, placeholder, onValueChange, defaultValue, value },
+  ref,
+) {
+  return (
+    <input
+      ref={ref}
+      type="text"
+      className={cn(`w-full rounded-2xl bg-transparent px-5 py-2 text-body3`, `placeholder:text-[#72777A]`)}
+      value={value}
+      placeholder={placeholder}
+      disabled={disabled}
+      onChange={(e) => {
+        onValueChange?.(e.target.value);
+      }}
+    />
+  );
+});
+
+export default TextInput;