[feat/#74] textArea 컴포넌트로 구현

src/page/community/component/TextArea/TextArea.css.ts

@@ -0,0 +1,24 @@
+import { color, font } from "@style/styles.css";
+import { style } from "@vanilla-extract/css";
+
+export const textareaContainer = style([
+  font.body01,
+  {
+    fontWeight: 500,
+    color: color.gray.gray900,
+    width: "100%",
+    minHeight: "23.5rem",
+    padding: "1.2rem",
+    borderRadius: "0.8rem",
+    border: `0.1rem solid ${color.gray.gray200}`,
+    background: color.gray.gray000,
+    "::placeholder": {
+      color: color.gray.gray600,
+    },
+    ":focus": {
+      outline: "none",
+    },
+  },
+]);
+
+export const child = style({});

src/page/community/component/TextArea/TextArea.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { textareaContainer } from "./TextArea.css";
+
+interface TextAreaProps {
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  placeholder?: string;
+}
+
+const TextArea = ({ value, onChange, placeholder }: TextAreaProps) => {
+  return (
+    <textarea
+      value={value}
+      placeholder={placeholder}
+      onChange={onChange}
+      className={textareaContainer}
+    ></textarea>
+  );
+};
+
+export default TextArea;

src/page/community/write/Write.tsx

@@ -1,8 +1,22 @@
+import TextArea from "@page/community/component/TextArea/TextArea.tsx";
+import React, { useState } from "react";
 
 const Write = () => {
+  const [value, setValue] = useState("");
+  const onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setValue(e.target.value);
+  };
   return (
-    <div>Write</div>
-  )
-}
+    <div>
+      <TextArea
+        value={value}
+        onChange={onChange}
+        placeholder={
+          "커뮤니티에 올릴 게시글 내용을 작성해 주세요.\n\n (예시: ~한 증상은 어디로 가야 하나요?)"
+        }
+      />
+    </div>
+  );
+};
 
-export default Write
+export default Write;