[FE] 20260303 #241 기능추가출석 출석하기 페이지 수정#274
Merged
discipline24 merged 9 commits intomainfrom Mar 3, 2026
Hidden character warning
The head ref may contain hidden characters: "20260303_#241-\uae30\ub2a5\ucd94\uac00\ucd9c\uc11d-\ucd9c\uc11d\ud558\uae30-\ud398\uc774\uc9c0-\uc218\uc815"
Merged
Conversation
Walkthrough출석 페이지의 아키텍처를 리팩토링하여 클라이언트 측 데이터 페칭을 도입하고, SessionSelectBox 및 SessionManage 컴포넌트를 Props 기반 설계로 전환했습니다. 함께 UI 텍스트와 스타일링을 업데이트했습니다. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (3)
frontend/src/components/attendance/SessionManage.jsx (2)
13-17:formatDate에 locale 설정을 추가하는 것을 고려해주세요.
formatTime은'ko-KR'locale을 명시적으로 사용하지만,formatDate는 locale 없이toLocaleDateString()을 호출합니다. 브라우저 기본 locale에 따라 날짜 형식이 달라질 수 있습니다.💡 locale 일관성 적용
const formatDate = (dateValue) => { if (!dateValue) return '-'; const date = new Date(dateValue); - return Number.isNaN(date.getTime()) ? '-' : date.toLocaleDateString(); + return Number.isNaN(date.getTime()) ? '-' : date.toLocaleDateString('ko-KR'); };🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/components/attendance/SessionManage.jsx` around lines 13 - 17, The formatDate function omits an explicit locale, causing inconsistent date output across browsers; update formatDate (the function named formatDate) to call toLocaleDateString with the same 'ko-KR' locale used by formatTime so dates render consistently, while keeping the existing guards (return '-' when dateValue is falsy or invalid) and preserving the Date construction and NaN check.
85-85: 에러 표시에 스타일링 추가를 고려해주세요.현재 에러 메시지가 스타일 없이 plain
<div>로 렌더링됩니다. 사용자에게 더 명확한 피드백을 위해 에러 스타일을 적용하면 좋겠습니다.💡 에러 스타일링 예시
- if (error) return <div>{error}</div>; + if (error) return <div className={styles.card} style={{ color: '#dc2626', textAlign: 'center', padding: '40px' }}>{error}</div>;🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/components/attendance/SessionManage.jsx` at line 85, SessionManage.jsx currently returns a plain <div> for errors ("if (error) return <div>{error}</div>;")—replace this with a styled error element: wrap the message in a semantic element (e.g., <div role="alert"> or <p>) and apply a CSS class like "session-error" (or a styled-component) to add visible styling (red text/background, padding, border-radius) and ensure accessibility (role="alert" and aria-live if needed); update SessionManage.jsx to use that class/component and add corresponding CSS rules in the component stylesheet or module.frontend/src/pages/Attendance.jsx (1)
47-52: 로딩 중 사용자에게 시각적 피드백 제공을 고려해주세요.현재
loading상태일 때SessionManage에서 빈 테이블만 표시됩니다. 스피너나 스켈레톤 UI를 추가하면 사용자 경험이 개선될 수 있습니다.💡 로딩 인디케이터 추가 예시
<SessionManage sessions={attendanceSessions} selectedSession={selectedSession} loading={loading} error={error} /> + {loading && <div style={{ textAlign: 'center', padding: '20px' }}>로딩 중...</div>}또는
SessionManage내부에서 로딩 상태를 처리하는 방식도 좋습니다.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/pages/Attendance.jsx` around lines 47 - 52, The UI shows an empty table while data is loading; use the existing loading prop to render a visible loading indicator instead. Update the SessionManage component (or conditionally in Attendance.jsx before rendering SessionManage) to check the loading prop and render a spinner or skeleton UI when loading===true, otherwise render the regular table with sessions={attendanceSessions} and selectedSession behavior; ensure the loading branch uses the same props signature (loading) so callers like Attendance.jsx need no other changes.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@frontend/src/components/attendance/SessionManage.jsx`:
- Around line 13-17: The formatDate function omits an explicit locale, causing
inconsistent date output across browsers; update formatDate (the function named
formatDate) to call toLocaleDateString with the same 'ko-KR' locale used by
formatTime so dates render consistently, while keeping the existing guards
(return '-' when dateValue is falsy or invalid) and preserving the Date
construction and NaN check.
- Line 85: SessionManage.jsx currently returns a plain <div> for errors ("if
(error) return <div>{error}</div>;")—replace this with a styled error element:
wrap the message in a semantic element (e.g., <div role="alert"> or <p>) and
apply a CSS class like "session-error" (or a styled-component) to add visible
styling (red text/background, padding, border-radius) and ensure accessibility
(role="alert" and aria-live if needed); update SessionManage.jsx to use that
class/component and add corresponding CSS rules in the component stylesheet or
module.
In `@frontend/src/pages/Attendance.jsx`:
- Around line 47-52: The UI shows an empty table while data is loading; use the
existing loading prop to render a visible loading indicator instead. Update the
SessionManage component (or conditionally in Attendance.jsx before rendering
SessionManage) to check the loading prop and render a spinner or skeleton UI
when loading===true, otherwise render the regular table with
sessions={attendanceSessions} and selectedSession behavior; ensure the loading
branch uses the same props signature (loading) so callers like Attendance.jsx
need no other changes.
ℹ️ Review info
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
frontend/src/components/Sidebar.jsxfrontend/src/components/attendance/SessionManage.jsxfrontend/src/components/attendance/SessionManage.module.cssfrontend/src/components/attendance/SessionSelectBox.jsxfrontend/src/components/attendance/SessionSelectBox.module.cssfrontend/src/pages/Attendance.jsxfrontend/src/pages/Attendance.module.cssfrontend/src/utils/attendanceList.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
출석조회 api 연결
출석조회 목록 항목 수정
Summary by CodeRabbit
릴리스 노트
새로운 기능
버그 수정
스타일