design: 답변 수정 디자인 조정

This commit is contained in:
jhynsoo 2024-08-13 16:41:50 +09:00
parent 1f60d52842
commit e9e8798800
2 changed files with 29 additions and 16 deletions

View File

@ -42,8 +42,9 @@ export default function ArticleDetailAnswerInput({ onSubmit, initialAnswer = '',
return ( return (
<form <form
onSubmit={handleSubmit} onSubmit={handleSubmit}
className={styles.answer} className={styles.answerWrapper}
> >
<div className={styles.answer}>
<textarea <textarea
maxLength={1000} maxLength={1000}
value={answer} value={answer}
@ -52,13 +53,14 @@ export default function ArticleDetailAnswerInput({ onSubmit, initialAnswer = '',
placeholder="답변 작성하기" placeholder="답변 작성하기"
className={styles.input} className={styles.input}
/> />
{answer && answer.length > 999 && <div className={styles.textLength}>최대 1000글자까지 작성할 있습니다.</div>}
<button <button
type="submit" type="submit"
className={styles.button} className={styles.button}
> >
<SendIcon /> <SendIcon />
</button> </button>
</div>
{answer && answer.length > 999 && <span>최대 1000글자까지 작성할 있습니다.</span>}
</form> </form>
); );
} }

View File

@ -1,3 +1,13 @@
.answerWrapper {
display: flex;
flex-direction: column;
gap: 8px;
& > span {
align-self: end;
}
}
.answer { .answer {
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
padding: 8px; padding: 8px;
@ -17,6 +27,7 @@
} }
.button { .button {
align-self: end;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;