fix: maxLength 50 일괄 적용, 강의 카드 크기 오류 수정, 강의 생성 maxLength 스타일 적용

This commit is contained in:
정기영 2024-08-13 10:23:41 +09:00
parent 7651ac24f5
commit 1992ca4c81
6 changed files with 58 additions and 43 deletions

View File

@ -50,8 +50,8 @@ export default function EditArticle({ topic, title, prevTitle, prevContent, onSu
value={articleTitle} value={articleTitle}
onChange={(e) => setArticleTitle(e.target.value)} 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>
<div className={styles.fieldWrapper}> <div className={styles.fieldWrapper}>
<label className={styles.label}>내용</label> <label className={styles.label}>내용</label>
<textarea <textarea
@ -63,7 +63,7 @@ export default function EditArticle({ topic, title, prevTitle, prevContent, onSu
onChange={handleInput} onChange={handleInput}
></textarea> ></textarea>
{articleContent.length > 950 && <div className={styles.textLength}>{articleContent.length} / 1000</div>} {articleContent.length > 950 && <div className={styles.textLength}>{articleContent.length} / 1000</div>}
</div> </div>
<button <button
type="button" type="button"
className={styles.button} className={styles.button}

View File

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

View File

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

View File

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

View File

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

View File

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