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,23 +42,25 @@ export default function ArticleDetailAnswerInput({ onSubmit, initialAnswer = '',
   return (
     <form
       onSubmit={handleSubmit}
-      className={styles.answer}
+      className={styles.answerWrapper}
     >
-      <textarea
+      <div className={styles.answer}>
-        maxLength={1000}
+        <textarea
-        value={answer}
+          maxLength={1000}
-        onChange={handleInput}
+          value={answer}
-        ref={textareaRef}
+          onChange={handleInput}
-        placeholder="답변 작성하기"
+          ref={textareaRef}
-        className={styles.input}
+          placeholder="답변 작성하기"
-      />
+          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>
   );
 }

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 {