jhynsoo/edufocus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/Article/EditArticle/EditArticle.jsx
View File

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

4
frontend/src/components/Article/EditFreeboard/EditFreeboard.jsx
View File

@ -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"

4
frontend/src/components/Article/EditQna/EditQna.jsx
View File

@ -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"

3
frontend/src/components/ClassCard/ClassCard.module.css
View File

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

79
frontend/src/components/LectureForm/LectureForm.jsx
View File

@ -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 titleRef = useRef('');
const descriptionRef = useRef('');
const planRef = useRef('');
const startDateRef = useRef('');
const endDateRef = useRef('');
const timeRef = useRef('');
const [lectureTitle, setLectureTitle] = useState('');
const [description, setDescription] = useState('');
const [plan, setPlan] = useState('');
const [startDate, setStartDate] = useState('');
const [endDate, setEndDate] = useState('');
const [time, setTime] = useState('');
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 endDate = new Date(endDateRef.current.value);
if (startDate > endDate) {
const start = new Date(startDate);
const end = new Date(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,
description: descriptionRef.current.value,
plan: planRef.current.value,
startDate: new Date(startDateRef.current.value).toISOString(),
endDate: new Date(endDateRef.current.value).toISOString(),
time: timeRef.current.value,
title: lectureTitle,
description: description,
plan: plan,
startDate: new Date(startDate).toISOString(),
endDate: new Date(endDate).toISOString(),
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}>

5
frontend/src/components/LectureForm/LectureForm.module.css
View File

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