Merge branch 'FE/Fix' into 'frontend'

[Front-End] fix: 강의카드 크기 오류 수정 및

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

frontend/src/components/Article/EditArticle/EditArticle.jsx

@@ -50,7 +50,7 @@ export default function EditArticle({ topic, title, prevTitle, prevContent, onSu
             value={articleTitle}
             onChange={(e) => setArticleTitle(e.target.value)}
           />
-          {articleTitle.length > 190 && <div className={styles.textLength}>{articleTitle.length} / 200</div>}
+          {articleTitle.length > 49 && <div className={styles.textLength}>{articleTitle.length} / 50</div>}
         </div>
         <div className={styles.fieldWrapper}>
           <label className={styles.label}>내용</label>

frontend/src/components/Article/EditFreeboard/EditFreeboard.jsx

@@ -50,7 +50,7 @@ export default function EditFreeboard({ topic, title, prevContent, prevTitle, on
             value={articleTitle}
             onChange={(e) => setArticleTitle(e.target.value)}
           />
-          {articleTitle.length > 190 && <div className={styles.textLength}>{articleTitle.length} / 200</div>}
+          {articleTitle.length > 49 && <div className={styles.textLength}>{articleTitle.length} / 50</div>}
         </div>
         <div className={styles.fieldWrapper}>
           <label className={styles.label}>내용</label>
@@ -62,7 +62,7 @@ export default function EditFreeboard({ topic, title, prevContent, prevTitle, on
             value={articleContent}
             onChange={handleInput}
           ></textarea>
-          {articleContent.length > 950 && <div className={styles.textLength}>{articleContent.length} / 1000</div>}
+          {articleContent.length > 999 && <div className={styles.textLength}>{articleContent.length} / 1000</div>}
         </div>
         <button
           type="button"

frontend/src/components/Article/EditQna/EditQna.jsx

@@ -50,7 +50,7 @@ export default function EditQna({ topic, title, prevContent, prevTitle, onSubmit
             value={articleTitle}
             onChange={(e) => setArticleTitle(e.target.value)}
           />
-          {articleTitle.length > 190 && <div className={styles.textLength}>{articleTitle.length} / 200</div>}
+          {articleTitle.length > 49 && <div className={styles.textLength}>{articleTitle.length} / 50</div>}
         </div>
         <div className={styles.fieldWrapper}>
           <label className={styles.label}>내용</label>
@@ -62,7 +62,7 @@ export default function EditQna({ topic, title, prevContent, prevTitle, onSubmit
             value={articleContent}
             onChange={handleInput}
           ></textarea>
-          {articleContent.length > 950 && <div className={styles.textLength}>{articleContent.length} / 1000</div>}
+          {articleContent.length > 999 && <div className={styles.textLength}>{articleContent.length} / 1000</div>}
         </div>
         <button
           type="button"

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

@@ -6,6 +6,9 @@
   line-height: 1.4;
   font-weight: 400;
   color: var(--text-color);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .thumbnail {

frontend/src/components/LectureForm/LectureForm.jsx

@@ -1,19 +1,27 @@
-import { useRef, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import styles from './LectureForm.module.css';
 import EditIcon from '/src/assets/icons/edit.svg?react';
 import BackIcon from '/src/assets/icons/back.svg?react';
 
 export default function LectureForm({ title, topic, to = '..', initialValues = {}, onSubmit, onCreate = false }) {
-  // TODO: 디자인 필요, 필요시 useState로 수정하고 버튼 비활성화 기능 추가 및 이미지 파일 입력 처리
+  const [lectureTitle, setLectureTitle] = useState('');
-  const titleRef = useRef('');
+  const [description, setDescription] = useState('');
-  const descriptionRef = useRef('');
+  const [plan, setPlan] = useState('');
-  const planRef = useRef('');
+  const [startDate, setStartDate] = useState('');
-  const startDateRef = useRef('');
+  const [endDate, setEndDate] = useState('');
-  const endDateRef = useRef('');
+  const [time, setTime] = useState('');
-  const timeRef = useRef('');
   const [imageFile, setImageFile] = useState(null);
 
+  useEffect(() => {
+    if (initialValues.title) setLectureTitle(initialValues.title);
+    if (initialValues.description) setDescription(initialValues.description);
+    if (initialValues.plan) setPlan(initialValues.plan);
+    if (initialValues.startDate) setStartDate(new Date(initialValues.startDate).toISOString().split('T')[0]);
+    if (initialValues.endDate) setEndDate(new Date(initialValues.endDate).toISOString().split('T')[0]);
+    if (initialValues.time) setTime(initialValues.time);
+  }, [initialValues]);
+
   const handleImageChange = (event) => {
     const file = event.target.files[0];
 
@@ -28,41 +36,30 @@ export default function LectureForm({ title, topic, to = '..', initialValues = {
     event.target.value = null;
   };
 
-  useEffect(() => {
-    if (initialValues.title) titleRef.current.value = initialValues.title;
-    if (initialValues.description) descriptionRef.current.value = initialValues.description;
-    if (initialValues.plan) planRef.current.value = initialValues.plan;
-    if (initialValues.startDate)
-      startDateRef.current.value = new Date(initialValues.startDate).toISOString().split('T')[0];
-    if (initialValues.endDate) endDateRef.current.value = new Date(initialValues.endDate).toISOString().split('T')[0];
-    if (initialValues.time) timeRef.current.value = initialValues.time;
-  }, [initialValues]);
-
-  console.log(startDateRef.current.value, endDateRef.current.value);
-
   const handleSubmit = async (e) => {
     e.preventDefault();
-    const startDate = new Date(startDateRef.current.value);
+    const start = new Date(startDate);
-    const endDate = new Date(endDateRef.current.value);
+    const end = new Date(endDate);
-    if (startDate > endDate) {
+    if (start > end) {
       window.alert('시작 날짜가 끝나는 날짜보다 더 늦습니다.');
       return;
     }
 
-    if (startDate <= new Date(Date.now() - 86400000)) {
+    if (start <= new Date(Date.now() - 86400000)) {
       window.alert('시작 날짜는 오늘 이후여야 합니다.');
       return;
     }
 
     const lectureObject = {
-      title: titleRef.current.value,
+      title: lectureTitle,
-      description: descriptionRef.current.value,
+      description: description,
-      plan: planRef.current.value,
+      plan: plan,
-      startDate: new Date(startDateRef.current.value).toISOString(),
+      startDate: new Date(startDate).toISOString(),
-      endDate: new Date(endDateRef.current.value).toISOString(),
+      endDate: new Date(endDate).toISOString(),
-      time: timeRef.current.value,
+      time: time,
     };
     console.log(lectureObject);
+
     const formData = new FormData();
     formData.append('lectureCreateRequest', new Blob([JSON.stringify(lectureObject)], { type: 'application/json' }));
 
@@ -93,30 +90,36 @@ export default function LectureForm({ title, topic, to = '..', initialValues = {
           <label className={styles.label}>강의명</label>
           <input
             className={styles.input}
-            ref={titleRef}
+            value={lectureTitle}
             maxLength={50}
+            onChange={(e) => setLectureTitle(e.target.value)}
             type="text"
             placeholder="강의명을 입력하세요"
             required
           />
+          {lectureTitle.length > 49 && <div className={styles.textLength}>{lectureTitle.length} / 50</div>}
         </div>
         <div className={styles.inputField}>
           <label className={styles.label}>설명</label>
           <textarea
-            ref={descriptionRef}
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
             className={styles.textarea}
             maxLength={2000}
             placeholder="강의에 대한 설명을 입력하세요"
           ></textarea>
+          {description.length > 1999 && <div className={styles.textLength}>{description.length} / 2000</div>}
         </div>
         <div className={styles.inputField}>
           <label className={styles.label}>강의 계획</label>
           <textarea
-            ref={planRef}
+            value={plan}
+            onChange={(e) => setPlan(e.target.value)}
             className={styles.textarea}
             maxLength={2000}
             placeholder="강의 계획을 입력하세요"
           ></textarea>
+          {plan.length > 1999 && <div className={styles.textLength}>{plan.length} / 2000</div>}
         </div>
         <div className={styles.inputField}>
           <label className={styles.label}>강의 기간</label>
@@ -124,7 +127,8 @@ export default function LectureForm({ title, topic, to = '..', initialValues = {
             <div className={styles.date}>
               <input
                 className={styles.input}
-                ref={startDateRef}
+                value={startDate}
+                onChange={(e) => setStartDate(e.target.value)}
                 type="date"
                 required
               />
@@ -133,7 +137,8 @@ export default function LectureForm({ title, topic, to = '..', initialValues = {
             <div className={styles.date}>
               <input
                 className={styles.input}
-                ref={endDateRef}
+                value={endDate}
+                onChange={(e) => setEndDate(e.target.value)}
                 type="date"
                 required
               />
@@ -145,11 +150,13 @@ export default function LectureForm({ title, topic, to = '..', initialValues = {
           <label className={styles.label}>수업 시간</label>
           <input
             type="text"
-            ref={timeRef}
+            value={time}
+            onChange={(e) => setTime(e.target.value)}
             maxLength={50}
             className={styles.input}
             placeholder="실제 강의 진행 시간을 입력하세요"
           />
+          {time.length > 49 && <div className={styles.textLength}>{time.length} / 50</div>}
         </div>
         {onCreate && (
           <div className={styles.inputField}>

frontend/src/components/LectureForm/LectureForm.module.css

@@ -117,3 +117,8 @@
   border-radius: 8px;
   cursor: pointer;
 }
+
+.textLength {
+  align-self: end;
+  color: var(--error-color);
+}