feat: 텍스트area 컴포넌트

packages/design-system/Text.tsx

@@ -24,6 +24,7 @@ export const textVariants = cva("leading-[150%] tracking-[-2%]", {
       "title/12_m": "font-medium text-[12px]",
       "title/12_r": "font-normal text-[12px]",
       "body/16_sb": "font-semibold text-[16px]",
+      "body/14_m": "font-medium text-[14px]",
     },
   },
 });

packages/design-system/TextArea.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { TextArea } from "./TextArea";
+
+const meta: Meta = {
+  title: "ds/TextArea",
+  tags: ["autodocs"],
+};
+export default meta;
+
+export const Default: StoryObj = {
+  render: () => {
+    return (
+      <div className="w-full mt-[160px] bg-white-yellow py-5 px-4">
+        <TextArea />
+      </div>
+    );
+  },
+};

packages/design-system/TextArea.tsx

@@ -0,0 +1,33 @@
+import { useState } from "react";
+import { MaxWidthBox } from "./MaxWidthBox";
+import { Text, textVariants } from "./Text";
+import { cn } from "./cn";
+
+export const TextArea = () => {
+  const [text, setText] = useState("");
+
+  return (
+    <MaxWidthBox className="w-full min-h-[343px] relative">
+      <textarea
+        placeholder="내용을 입력해주세요"
+        maxLength={1000}
+        wrap="hard"
+        required={true}
+        onChange={(e) => setText(e.target.value)}
+        className={cn(
+          textVariants({ variant: "title/16_m" }),
+          "w-full h-full min-h-[343px] bg-yellow-green py-[10px] px-[15px] rounded-3 text-gray-600 placeholder:gray-400",
+        )}
+      />
+      <Text
+        variant="body/14_m"
+        className={cn(
+          "absolute bottom-[9px] right-[14px] text-gray-300",
+          text.length > 0 && "text-gray-500",
+        )}
+      >
+        {text.length}
+      </Text>
+    </MaxWidthBox>
+  );
+};

packages/design-system/ToggleBar.tsx

@@ -15,9 +15,7 @@ export const ToggleBar: React.FC = () => {
       </Text>
       <ToggleButtonGroup
         value={value}
-        onChange={(newValue) => {
-          setValue(newValue ?? "created");
-        }}
+        onChange={(newValue) => setValue(newValue ?? "created")}
         allowToggle={false}
       >
         <Flex className="gap-x-4">
@@ -27,7 +25,6 @@ export const ToggleBar: React.FC = () => {
           >
             생성일 순
           </ToggleButton>
-
           <ToggleButton
             value="updated"
             className={cn("text-gray-300 data-[state=selected]:text-gray-500")}