Merge branch 'fe/fixClassCard' into 'frontend'

[Front-End] Fe/fix class card

See merge request s11-webmobile1-sub2/S11P12A701!194

frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswerInput.jsx

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

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;

frontend/src/components/ClassCard/ClassCard.module.css

@@ -9,6 +9,7 @@
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .thumbnail {