20260403 fe add adminpage absent list

[yyunee]

overflow 설정을 수정하여, 세션 수정/삭제를 위한 드롭다운 메뉴 버튼이 잘리거나 작동하지 않던 현상을 수정

Summary by CodeRabbit

릴리스 노트

• 버그 수정

  • 출석 라운드 조회 시 오류 처리 개선 및 명확한 오류 메시지 표시
  • 세션 관리 헤더의 수직 오버플로우 동작 수정

• UI 개선

  • 부재 요약 모달의 테이블 헤더를 고정식으로 변경하여 스크롤 시 네비게이션 개선
  • 모달 렌더링 안정성 및 데이터 처리 견고성 향상

[coderabbitai]

Walkthrough

참석 관리 컴포넌트들을 안정성 개선하기 위해 React Portal을 도입하고, 누락되거나 정의되지 않은 데이터에 대한 방어적 처리를 추가하며, 결석 요약 모달에 고정 헤더와 높이 제약을 적용했습니다.

Changes

Cohort / File(s)	Summary
모달 구현 및 스타일링 AbsenceSummaryModal.jsx, AbsenceSummaryModal.module.css	React Portal을 통한 DOM 마운트 변경, 누락된 데이터에 대한 기본값 처리 추가, 모달 본문에 최대 높이 제약 및 표 헤더에 고정 포지셔닝 적용
컴포넌트 데이터 안정성 AttendanceManagementCard.jsx, SessionManagementCard.jsx	정의되지 않은 라운드 및 참석 데이터에 대한 옵셔널 체이닝 및 기본 배열 처리, 폴백 값을 이용한 정렬 로직 개선, 테이블 렌더링 시 데이터 가드 추가
세션 관리 에러 처리 SessionManagementCard.jsx	HTTP 403 상태 코드에 대한 특정 토스트 메시지 표시, 라운드 조회 실패 시 개선된 에러 핸들링
CSS 개선 SessionManagementCard.module.css	헤더 컨트롤 컨테이너에서 수직 오버플로우 숨김 제거

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• 20260403 fe add adminpage absent list #351: 동일한 참석 관리 컴포넌트(AbsenceSummaryModal, AttendanceManagementCard)에 대한 중복된 코드 수준의 변경 사항 포함
• [FE] [FEAT] 출석관리(관리자) 페이지 세션 정보&회차 정보 수정 기능, 세션&회차 삭제 기능, 회차 추가 기능 구현 #112: AttendanceManagementCard.jsx 및 SessionManagementCard.jsx 컴포넌트 모두 수정 (컨텍스트 리팩토링 대 방어적 처리)
• 20260403 fe add adminpage absent list #354: 동일한 참석 관리 컴포넌트들(AbsenceSummaryModal, AttendanceManagementCard, SessionManagementCard)에 대한 직접적인 코드 수준의 연관성

Suggested reviewers

• discipline24
• DongEun02
• gxuoo

Poem

🐰 부실한 데이터는 더 이상 걱정 없어,
Portal의 마법으로 모달은 날아다니고,
방어막 가득한 선택적 연쇄로
참석 관리는 견고하고 안전하네!
고정된 헤더와 함께 스크롤하는 즐거움 🎉

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR 제목은 관리자 페이지의 부재 목록 추가라는 변경사항과 부분적으로 관련되어 있으나, 실제 변경의 주요 내용은 오버플로우 설정 수정, 방어적 코드 추가, React Portal 사용 등 더 광범위한 개선입니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch 20260403-FE-ADD-ADMINPAGE-ABSENT-LIST

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

frontend/src/components/attendancemanage/SessionManagementCard.jsx (1)

80-85: 에러 객체의 status 접근 순서가 axios 인터셉터 패턴과 맞지 않습니다.

frontend/src/utils/axios.js의 인터셉터가 에러를 { status, message, data } 형태로 정규화하여 reject합니다. 따라서 e.response.status는 항상 undefined이며, e.status에서 상태 코드를 가져옵니다.

현재 코드는 fallback 덕분에 동작하지만, 같은 파일의 isSessionOwnerPermissionError 함수(라인 24)는 error?.status ?? error?.response?.status 순서를 사용합니다. 일관성을 위해 동일한 패턴을 적용하는 것이 좋습니다.

♻️ 수정 제안

      } catch (e) {
-        const status = e?.response?.status ?? e?.status;
+        const status = e?.status ?? e?.response?.status;
        if (status === 403) {
          toast.error('세션 멤버가 아니거나 조회 권한이 없습니다.');
        } else {
          toast.error('라운드를 불러오지 못했습니다.');
        }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@frontend/src/components/attendancemanage/SessionManagementCard.jsx` around
lines 80 - 85, The error-status access order is reversed for the app's axios
interceptor normalization: update the status lookup in the SessionManagementCard
error handler (the const status = ... assignment) to use e?.status ??
e?.response?.status so it reads the normalized {status, message, data} first,
and make it consistent with the existing isSessionOwnerPermissionError function
(which already uses error?.status ?? error?.response?.status); ensure both
places use the same order and adjust the toast branching (403 vs default) to
rely on that normalized status.

🤖 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/attendancemanage/SessionManagementCard.jsx`:
- Around line 80-85: The error-status access order is reversed for the app's
axios interceptor normalization: update the status lookup in the
SessionManagementCard error handler (the const status = ... assignment) to use
e?.status ?? e?.response?.status so it reads the normalized {status, message,
data} first, and make it consistent with the existing
isSessionOwnerPermissionError function (which already uses error?.status ??
error?.response?.status); ensure both places use the same order and adjust the
toast branching (403 vs default) to rely on that normalized status.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: c2961e45-0ee0-4c60-a2bf-8dd5a69f024c

📥 Commits

Reviewing files that changed from the base of the PR and between 5b142de and f24fc30.

📒 Files selected for processing (5)

• frontend/src/components/attendancemanage/AbsenceSummaryModal.jsx
• frontend/src/components/attendancemanage/AbsenceSummaryModal.module.css
• frontend/src/components/attendancemanage/AttendanceManagementCard.jsx
• frontend/src/components/attendancemanage/SessionManagementCard.jsx
• frontend/src/components/attendancemanage/SessionManagementCard.module.css

💤 Files with no reviewable changes (1)

• frontend/src/components/attendancemanage/SessionManagementCard.module.css