feat : TextArea 개발 완료 (#118)

* feat : Text Area 개발 완료

* story : TextArea 스토리 작성

src/components/Common/TextArea/TextArea.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { TextArea } from './TextArea';
+
+const meta: Meta<typeof TextArea> = {
+    component: TextArea,
+    title: 'atoms/TextArea',
+    tags: ['autodocs'],
+    argTypes: {}
+};
+export default meta;
+
+type Story = StoryObj<typeof TextArea>;
+
+export const Default: Story = {
+    args: {}
+};

src/components/Common/TextArea/TextArea.tsx

@@ -0,0 +1,48 @@
+import React, { useRef, useEffect } from 'react';
+
+type TextAreaProps = {
+    value: string;
+    setValue: (value: string) => void;
+};
+
+export const TextArea = ({ value, setValue }: TextAreaProps) => {
+    const textAreaRef = useRef<HTMLTextAreaElement>(null);
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        let inputValue = e.target.value;
+
+        if (textAreaRef.current) {
+            const textAreaHeight = textAreaRef.current.scrollHeight;
+            const textAreaLineHeight = parseInt(
+                window.getComputedStyle(textAreaRef.current).lineHeight
+            );
+
+            const linesCount = Math.floor(textAreaHeight / textAreaLineHeight);
+
+            if (linesCount > 8) {
+                inputValue = value;
+            }
+        }
+
+        const lines = inputValue.split('\n');
+        if (lines.length <= 8) {
+            setValue(inputValue);
+        }
+    };
+
+    useEffect(() => {
+        if (textAreaRef.current) {
+            textAreaRef.current.style.height = 'auto';
+            textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`;
+        }
+    }, [value]);
+    return (
+        <textarea
+            className="absolute w-9/12 px-2 bg-transparent border-none resize-none mt-[42%] leading-[260%] overflow-hidden h-auto"
+            ref={textAreaRef}
+            placeholder="편지를 작성하세요..."
+            value={value}
+            onChange={handleInputChange}
+        />
+    );
+};