Skip to content

[Feature/#333] 멤버 알림 설정 목록 UI 및 GET API 연동 - #346

Merged
jjjsun merged 5 commits into
developfrom
feature/#333
Jul 30, 2026
Merged

[Feature/#333] 멤버 알림 설정 목록 UI 및 GET API 연동#346
jjjsun merged 5 commits into
developfrom
feature/#333

Conversation

@jjjsun

@jjjsun jjjsun commented Jul 29, 2026

Copy link
Copy Markdown
Collaborator

🚨 관련 이슈

Closed #333

✨ 변경사항

  • 🐞 BugFix Something isn't working
  • 💻 CrossBrowsing Browser compatibility
  • 🌏 Deploy Deploy
  • 🎨 Design Markup & styling
  • 📃 Docs Documentation writing and editing (README.md, etc.)
  • ✨ Feature Feature
  • 🔨 Refactor Code refactoring
  • ⚙️ Setting Development environment setup
  • ✅ Test Test related (storybook, jest, etc.)

✏️ 작업 내용

  • 멤버 관리 목록에서 멤버의 알림 수신 여부 아이콘 표시 (BellRingingIcon, BellOffIcon)
  • GET /api/notification/settings/{orgId}/members API/queryKey/훅 추가 및 연동
  • email 기준으로 멤버 목록과 매칭, 로딩/에러는 멤버 목록을 막지 않도록 soft 처리

🖥️ 작업 화면

알람 수신시

image

알람 미수신시

image

😅 미완성 작업

N/A

📢 논의 사항 및 참고 사항

  • memberId와 membershipId가 다를 수 있어서 고유한 email로 매칭함
  • 알림 설정 PATCH는 다음 후속 이슈 범위

💬 리뷰어 가이드 (P-Rules)
P1: 필수 반영 (Critical) - 버그 가능성, 컨벤션 위반. 해결 전 머지 불가.
P2: 적극 권장 (Recommended) - 더 나은 대안 제시. 가급적 반영 권장.
P3: 제안 (Suggestion) - 아이디어 공유. 반영 여부는 드라이버 자율.
P4: 단순 확인/칭찬 (Nit) - 사소한 오타, 칭찬 등 피드백.

Summary by CodeRabbit

  • 새 기능
    • 멤버 관리 화면에서 멤버별 알림 수신 여부를 확인할 수 있습니다.
    • 알림 설정 정보를 페이지 단위로 불러오며, 스크롤 시 추가 멤버의 설정이 자동으로 조회됩니다.
    • 알림 설정을 불러오는 동안 로딩 상태와 오류 메시지가 표시됩니다.
    • 알림 수신 및 미수신 상태에 따라 벨 아이콘과 안내 문구가 다르게 표시됩니다.

@jjjsun
jjjsun requested review from Seojegyeong and YermIm July 29, 2026 02:35
@jjjsun jjjsun self-assigned this Jul 29, 2026
@jjjsun jjjsun added 🎨 Html&css 마크업 & 스타일링 ✨ Feature 기능 개발 📬 API 서버 API 통신 labels Jul 29, 2026
@coderabbitai

coderabbitai Bot commented Jul 29, 2026

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

@jjjsun, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 52 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: be5ae591-051c-4671-b373-948222ed8f34

📥 Commits

Reviewing files that changed from the base of the PR and between 7dad724 and 2abacfa.

📒 Files selected for processing (1)
  • src/pages/workspace/MemberManagement.tsx
📝 Walkthrough

Walkthrough

멤버 알림 설정 조회 API와 커서 기반 무한 조회 훅을 추가하고, 멤버 관리 화면에서 이메일별 수신 상태를 매핑해 벨 아이콘과 로딩·오류 상태로 표시하도록 연결했습니다.

Changes

멤버 알림 설정 조회

Layer / File(s) Summary
알림 멤버 조회 계약과 페이지네이션
src/api/notification/notification.ts, src/hooks/setting/useNotificationMembers.ts, src/lib/queryKeys.ts
조직별 알림 멤버 조회 API와 쿼리 키를 추가하고, useInfiniteQuerycursor 기반 페이지네이션을 구현했습니다.
멤버 관리 페이지 데이터 통합
src/pages/workspace/MemberManagement.tsx
조회된 알림 멤버를 이메일별 isReceive 맵으로 구성하고, 현재 멤버 정보가 채워질 때까지 다음 페이지를 조회하도록 연결했습니다.
멤버별 알림 상태 표시
src/components/workspace/MemberList.tsx, src/components/workspace/MemberItem.tsx
멤버별 수신 여부를 벨 아이콘과 접근성 텍스트로 표시하고, 로딩 애니메이션과 조회 오류 메시지를 추가했습니다.

Estimated code review effort: 4 (Complex) | ~45 minutes

Sequence Diagram(s)

sequenceDiagram
  participant MemberManagement
  participant useNotificationMembers
  participant getNotificationMembers
  participant MemberList
  participant MemberItem
  MemberManagement->>useNotificationMembers: 조직 ID로 알림 멤버 조회
  useNotificationMembers->>getNotificationMembers: cursor 포함 페이지 요청
  getNotificationMembers-->>useNotificationMembers: 알림 멤버 데이터 반환
  useNotificationMembers-->>MemberManagement: 페이지와 다음 cursor 전달
  MemberManagement->>MemberList: 이메일별 수신 상태와 쿼리 상태 전달
  MemberList->>MemberItem: 멤버별 isReceive 전달
  MemberItem-->>MemberList: 수신/미수신 아이콘 렌더링
Loading

Possibly related PRs

Suggested reviewers: yermim, seojegyeong

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Linked Issues check ✅ Passed 멤버 알림 목록 UI, members GET API/hook/queryKey, 로딩·에러 처리 연동이 이슈 요구사항과 맞습니다.
Out of Scope Changes check ✅ Passed 변경은 멤버 알림 목록 UI와 GET API 연동 범위에 맞고, 불필요한 별도 변경은 보이지 않습니다.
Title check ✅ Passed 핵심 변경인 멤버 알림 목록 UI와 GET API 연동을 간결하게 잘 담고 있습니다.
Description check ✅ Passed 관련 이슈, 변경사항, 작업 내용, 미완성 작업, 참고 사항이 포함되어 있어 템플릿을 대부분 충족합니다.
✨ Finishing Touches 💡 1
📝 Generate docstrings 💡
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feature/#333

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

Comment @coderabbitai help to get the list of available commands.

@github-actions

github-actions Bot commented Jul 29, 2026

Copy link
Copy Markdown

📚 Storybook 배포 완료

항목 링크
📖 Storybook https://69a147b60a56365d9e2185ef-bkkfetrcmu.chromatic.com/
🔍 Chromatic https://www.chromatic.com/build?appId=69a147b60a56365d9e2185ef&number=476

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (2)
src/components/workspace/MemberList.tsx (1)

26-28: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

컴포넌트 props 타입을 I*Props 규칙으로 통일해 주세요.

  • src/components/workspace/MemberList.tsx#L26-L28: TMemberListPropsIMemberListProps로 변경하세요.
  • src/components/workspace/MemberItem.tsx#L16-L22: TPropsIMemberItemProps로 변경하세요.

As per coding guidelines, "component props use I*Props."

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/workspace/MemberList.tsx` around lines 26 - 28, Rename the
component props type TMemberListProps to IMemberListProps in
src/components/workspace/MemberList.tsx (lines 26-28) and update all references.
Rename TProps to IMemberItemProps in src/components/workspace/MemberItem.tsx
(lines 16-22) and update all references, preserving the existing props structure
and behavior.

Source: Coding guidelines

src/components/workspace/MemberItem.tsx (1)

8-8: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

상대 경로 import를 alias로 변경해 주세요.

-import MemberRoleSelect from "./MemberRoleSelect";
+import MemberRoleSelect from "`@/components/workspace/MemberRoleSelect`";

As per coding guidelines, "Use @/ alias for all imports."

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/workspace/MemberItem.tsx` at line 8, Update the
MemberRoleSelect import in MemberItem.tsx to use the configured `@/` alias instead
of the relative path, preserving the existing imported symbol and behavior.

Source: Coding guidelines

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/pages/workspace/MemberManagement.tsx`:
- Around line 318-320: Update the notification loading prop passed to the member
item near notificationReceiveByEmail so it combines
notificationMembersQuery.isLoading and
notificationMembersQuery.isFetchingNextPage. Preserve
notificationMembersQuery.isError unchanged, ensuring the notification icon
remains in a loading state during both initial and next-page requests.

---

Nitpick comments:
In `@src/components/workspace/MemberItem.tsx`:
- Line 8: Update the MemberRoleSelect import in MemberItem.tsx to use the
configured `@/` alias instead of the relative path, preserving the existing
imported symbol and behavior.

In `@src/components/workspace/MemberList.tsx`:
- Around line 26-28: Rename the component props type TMemberListProps to
IMemberListProps in src/components/workspace/MemberList.tsx (lines 26-28) and
update all references. Rename TProps to IMemberItemProps in
src/components/workspace/MemberItem.tsx (lines 16-22) and update all references,
preserving the existing props structure and behavior.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: cd54b3da-6453-4445-a646-4db15067301f

📥 Commits

Reviewing files that changed from the base of the PR and between f9fee83 and 7dad724.

⛔ Files ignored due to path filters (2)
  • src/assets/icon/common/bell-off.svg is excluded by !**/*.svg and included by src/**
  • src/assets/icon/common/bell-ringing.svg is excluded by !**/*.svg and included by src/**
📒 Files selected for processing (6)
  • src/api/notification/notification.ts
  • src/components/workspace/MemberItem.tsx
  • src/components/workspace/MemberList.tsx
  • src/hooks/setting/useNotificationMembers.ts
  • src/lib/queryKeys.ts
  • src/pages/workspace/MemberManagement.tsx

Comment thread src/pages/workspace/MemberManagement.tsx

@Seojegyeong Seojegyeong left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P4: 확인했습니다

@jjjsun
jjjsun merged commit 0a71f52 into develop Jul 30, 2026
3 checks passed
@jjjsun
jjjsun deleted the feature/#333 branch July 30, 2026 02:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

📬 API 서버 API 통신 ✨ Feature 기능 개발 🎨 Html&css 마크업 & 스타일링

Projects

None yet

Development

Successfully merging this pull request may close these issues.

✨ [Feature] 멤버 알림 설정 목록 UI 및 GET 연동

2 participants