[FE] 수업 유효성 항목 추가 #264
[FE] 수업 유효성 항목 추가 #264
Conversation
- 강의명, 대학명, 학수번호 유효성 검사 추가 - 강의 명이 숫자일 경우 줄바꿈 적용 안 되는 버그 수정
WalkthroughThe pull request introduces two changes. First, it updates the course card CSS to include Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant M as CourseModal
U->>M: onBlur event on input field (name/code/university)
M->>M: Validate field length
alt Input Valid
M->>U: No error message displayed
else Input Exceeds Limit
M->>U: Display appropriate error message
end
Suggested labels
Suggested reviewers
Poem
Tip CodeRabbit's docstrings feature is now available as part of our Pro Plan! Simply use the command ✨ Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
front-end/src/pages/professor/home/components/CourseCard.module.css (1)
292-293: Consider applying these properties to.titleinstead of.textThe text-wrapping properties are applied to the
.large .textcontainer which affects all child elements. For consistency with the medium layout (where you applied it to.title), consider applying these properties directly to.large .titleinstead..large .text { display: flex; flex-direction: column; gap: 42px; - word-break: break-all; - overflow-wrap: break-word; } .large .university { font: var(--web-caption1-bold); color: var(--sub-orange-500); } .large .title { font: var(--web-title1-bold); color: var(--gray-900); + word-break: break-all; + overflow-wrap: break-word; }front-end/src/pages/professor/home/modal/CourseModal.tsx (1)
114-121: Consider adding the new validation checks to the initial formError stateFor consistency, consider adding error messages for character limit violations to the initial formError state, especially for cases where the initial value from props might exceed the limits.
const [formError, setFormError] = useState<CourseError>({ name: '', code: '', capacity: '', university: '', classType: courseForm.classType === '' ? '강의 유형을 선택해 주세요' : '', schedule: '', }); + // Add initial validation for character limits + useEffect(() => { + if (courseForm.name.length > 30) { + setFormError(prev => ({ ...prev, name: '강의 이름은 30자 이하로 입력해 주세요' })); + } + if (courseForm.code.length > 10) { + setFormError(prev => ({ ...prev, code: '학수번호는 10자 이하로 입력해 주세요' })); + } + if (courseForm.university.length > 20) { + setFormError(prev => ({ ...prev, university: '대학이름은 20자 이하로 입력해 주세요' })); + } + }, []);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
front-end/src/pages/professor/home/components/CourseCard.module.css(2 hunks)front-end/src/pages/professor/home/modal/CourseModal.tsx(3 hunks)
🔇 Additional comments (3)
front-end/src/pages/professor/home/components/CourseCard.module.css (1)
174-175: Looks good! These CSS properties will help with text overflow.Adding
word-break: break-allandoverflow-wrap: break-wordto the medium title ensures that long text, including numeric content, will break properly and not overflow the container.front-end/src/pages/professor/home/modal/CourseModal.tsx (2)
341-345: Validation looks good for code fieldThe validation for the code field correctly checks for a 10-character limit and provides an appropriate error message.
397-401: Validation looks good for university fieldThe validation for the university field correctly checks for a 20-character limit and provides an appropriate error message.
| } else if (courseForm.name.length > 35) { | ||
| setFormError((prev) => ({ | ||
| ...prev, | ||
| name: '강의 이름은 30자 이하로 입력해 주세요', | ||
| })); |
There was a problem hiding this comment.
Fix inconsistent character limit messaging
There's a discrepancy between the check and the error message. The check tests for length > 35, but the error message indicates a 30-character limit.
- } else if (courseForm.name.length > 35) {
+ } else if (courseForm.name.length > 30) {
setFormError((prev) => ({
...prev,
name: '강의 이름은 30자 이하로 입력해 주세요',
}));📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| } else if (courseForm.name.length > 35) { | |
| setFormError((prev) => ({ | |
| ...prev, | |
| name: '강의 이름은 30자 이하로 입력해 주세요', | |
| })); | |
| } else if (courseForm.name.length > 30) { | |
| setFormError((prev) => ({ | |
| ...prev, | |
| name: '강의 이름은 30자 이하로 입력해 주세요', | |
| })); |
#️⃣ 연관된 이슈
📝 작업 내용
Summary by CodeRabbit
Style
New Features