From 1d501927339b00c10e317111507194d9805ddceb Mon Sep 17 00:00:00 2001
From: minjeoong <orange_mj@naver.com>
Date: Fri, 17 Jan 2025 02:15:26 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20textArea=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/TextArea/TextArea.css.ts        | 24 +++++++++++++++++++
 .../community/component/TextArea/TextArea.tsx | 21 ++++++++++++++++
 src/page/community/write/Write.tsx            | 24 +++++++++++++++----
 3 files changed, 65 insertions(+), 4 deletions(-)
 create mode 100644 src/page/community/component/TextArea/TextArea.css.ts
 create mode 100644 src/page/community/component/TextArea/TextArea.tsx

diff --git a/src/page/community/component/TextArea/TextArea.css.ts b/src/page/community/component/TextArea/TextArea.css.ts
new file mode 100644
index 00000000..538871e2
--- /dev/null
+++ b/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({});
diff --git a/src/page/community/component/TextArea/TextArea.tsx b/src/page/community/component/TextArea/TextArea.tsx
new file mode 100644
index 00000000..80112f7c
--- /dev/null
+++ b/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;
diff --git a/src/page/community/write/Write.tsx b/src/page/community/write/Write.tsx
index d7988f0d..7df94e17 100644
--- a/src/page/community/write/Write.tsx
+++ b/src/page/community/write/Write.tsx
@@ -1,8 +1,24 @@
+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
\ No newline at end of file
+export default Write;

From b7ed09ab32a2c4f7b02c872b7c8a53fcaac2670e Mon Sep 17 00:00:00 2001
From: minjeoong <orange_mj@naver.com>
Date: Fri, 17 Jan 2025 08:46:46 +0900
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=ED=85=9C=ED=94=8C=EB=A6=BF=20?=
 =?UTF-8?q?=EB=A6=AC=ED=84=B0=EB=9F=B4=EB=A1=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/community/write/Write.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/page/community/write/Write.tsx b/src/page/community/write/Write.tsx
index 7df94e17..9cbb6e0e 100644
--- a/src/page/community/write/Write.tsx
+++ b/src/page/community/write/Write.tsx
@@ -12,9 +12,7 @@ const Write = () => {
         value={value}
         onChange={onChange}
         placeholder={
-          "커뮤니티에 올릴 게시글 내용을 작성해 주세요." +
-          "\n\n" +
-          "(예시: ~한 증상은 어디로 가야 하나요?)"
+          "커뮤니티에 올릴 게시글 내용을 작성해 주세요.\n\n (예시: ~한 증상은 어디로 가야 하나요?)"
         }
       />
     </div>