From e9e87988004f52b32601de2a77f26626ceb6264e Mon Sep 17 00:00:00 2001
From: jhynsoo <jhynsoo@gmail.com>
Date: Tue, 13 Aug 2024 16:41:50 +0900
Subject: [PATCH] =?UTF-8?q?design:=20=EB=8B=B5=EB=B3=80=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=A1=B0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ArticleDetailAnswerInput.jsx              | 34 ++++++++++---------
 .../ArticleDetailAnswerInput.module.css       | 11 ++++++
 2 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswerInput.jsx b/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswerInput.jsx
index 86ec83e..9d00777 100644
--- a/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswerInput.jsx
+++ b/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswerInput.jsx
@@ -42,23 +42,25 @@ export default function ArticleDetailAnswerInput({ onSubmit, initialAnswer = '',
   return (
     <form
       onSubmit={handleSubmit}
-      className={styles.answer}
+      className={styles.answerWrapper}
     >
-      <textarea
-        maxLength={1000}
-        value={answer}
-        onChange={handleInput}
-        ref={textareaRef}
-        placeholder="답변 작성하기"
-        className={styles.input}
-      />
-      {answer && answer.length > 999 && <div className={styles.textLength}>최대 1000글자까지 작성할 수 있습니다.</div>}
-      <button
-        type="submit"
-        className={styles.button}
-      >
-        <SendIcon />
-      </button>
+      <div className={styles.answer}>
+        <textarea
+          maxLength={1000}
+          value={answer}
+          onChange={handleInput}
+          ref={textareaRef}
+          placeholder="답변 작성하기"
+          className={styles.input}
+        />
+        <button
+          type="submit"
+          className={styles.button}
+        >
+          <SendIcon />
+        </button>
+      </div>
+      {answer && answer.length > 999 && <span>최대 1000글자까지 작성할 수 있습니다.</span>}
     </form>
   );
 }
diff --git a/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswerInput.module.css b/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswerInput.module.css
index cb2b8b9..b9dc325 100644
--- a/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswerInput.module.css
+++ b/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswerInput.module.css
@@ -1,3 +1,13 @@
+.answerWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  & > span {
+    align-self: end;
+  }
+}
+
 .answer {
   border: 1px solid var(--border-color);
   padding: 8px;
@@ -17,6 +27,7 @@
 }
 
 .button {
+  align-self: end;
   display: flex;
   justify-content: center;
   align-items: center;