[Feat] 멘토링 회원관리 페이지 ui 구현 - #30
Conversation
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthrough변경 사항회원 목록·가입 승인 페이지, 회원 테이블과 상태/삭제 처리, compact 선택 필드 스타일, 관련 라우트 및 테스트가 추가되었습니다. 멘토링 회원 관리
Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
🧪 Generate unit tests (beta)
Comment |
CI 결과
|
CI 결과
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 10
🤖 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/components/common/PartBadge/PartBadge.test.tsx`:
- Around line 6-10: Replace the PartBadge className assertions in
src/components/common/PartBadge/PartBadge.test.tsx:6-10 with assertions for the
observable table layout or user-visible rendering behavior. In
src/components/common/SelectField/SelectField.test.tsx:39-50, remove popup
className and data-side assertions and verify that a compact SelectField allows
the user to select an option and observes the selected result.
In `@src/components/common/PartBadge/PartBadge.tsx`:
- Line 6: Update the PartBadge sizing and the corresponding MemberTable
fixed-width column so the “프론트엔드” badge fits within the cell without overflowing
into the phone-number column; adjust the existing padding or column width as
needed, and add a table-level regression test covering this label and layout.
In `@src/components/index.ts`:
- Line 6: Regenerate the barrel outputs from their source files or generator
rather than editing generated exports manually. Update and rerun the generator
for src/components/index.ts#L6-L6,
src/components/members/MemberTable/index.ts#L1-L3, and
src/components/members/index.ts#L1-L3 so each ./members or ./MemberTable export
is reproducibly produced.
In `@src/components/members/MemberTable/MemberTable.tsx`:
- Around line 114-122: 표시된 네 컴포넌트 선언을 프로젝트 규약에 맞게 `export function`에서 `export
const`로 변경하세요: `src/components/members/MemberTable/MemberTable.tsx` 114-122의
`MentoringMemberTable`, `src/pages/members/MembersPage.tsx` 154-164의
`MentoringMembersPage`, `src/pages/members/MemberListPresenter.tsx` 19-28의
`MemberListPresenter`, `src/pages/members/MemberApprovalPresenter.tsx` 19-27의
`MemberApprovalPresenter`. 컴포넌트명과 기존 렌더링 동작은 유지하세요.
In `@src/pages/members/MemberApprovalPresenter.tsx`:
- Around line 40-43: Connect the 저장하기 Button in MemberApprovalPresenter to the
approval-status mutation using the current local state, then on success show the
success toast, invalidate ['admin', 'members', 'pending'], and navigate back to
/members. Remove the placeholder TODO and preserve the existing
approval/rejection state handling.
In `@src/pages/members/MemberListPresenter.tsx`:
- Around line 33-39: Update the current-location label in the
MemberListPresenter navigation from “회원가입 승인” to the actual /members list screen
name, and update the corresponding expected value in MembersPage.test.tsx to
match.
- Around line 40-48: Update the member list flow around MemberListPresenter so
the approval-request button displays a count prop derived from the number of
PENDING members in the parent page instead of the hardcoded 3. Pass the
recalculated count through the presenter and keep it synchronized after
approval-status changes or deletions, then update affected test expectations to
match the computed value.
In `@src/pages/members/MembersPage.test.tsx`:
- Around line 15-17: Remove the className assertion for the element located by
aria-label “현재 위치” in the MembersPage test. Keep the accessibility and
visible-content assertions, including the heading and “회원가입 승인” checks,
unchanged.
- Around line 42-53: Update the approval-path test for MentoringMembersPage to
locate and click the 실제 “승인 요청” control using Testing Library, then verify that
the resulting flow displays the “저장하기” button. Keep the existing assertions for
the approval presenter’s content and navigation link.
In `@src/pages/members/MembersPage.tsx`:
- Around line 174-182: MembersPage.tsx의 handleDelete는 즉시 목록을 갱신하지 말고 삭제 대상 상태를
저장한 뒤 접근성 있는 확인 dialog를 표시하며, 확인 시에만 대상 회원 제거와 페이지 보정을 실행하고 취소 시 상태를 유지하세요.
MembersPage.test.tsx의 관련 테스트는 즉시 삭제 기대를 제거하고 취소 시 회원이 유지되는지와 확인 시 삭제되는지를 검증하도록
수정하세요.
🪄 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: ASSERTIVE
Plan: Pro
Run ID: 0dc31df8-d464-4671-a4c6-fdbf0f6eb860
⛔ Files ignored due to path filters (1)
src/assets/images/member-avatar.pngis excluded by!**/*.png,!**/*.png
📒 Files selected for processing (15)
src/components/common/PartBadge/PartBadge.test.tsxsrc/components/common/PartBadge/PartBadge.tsxsrc/components/common/SelectField/SelectField.test.tsxsrc/components/common/SelectField/SelectField.tsxsrc/components/index.tssrc/components/members/MemberTable/MemberTable.tsxsrc/components/members/MemberTable/index.tssrc/components/members/index.tssrc/pages/members/MemberApprovalPresenter.tsxsrc/pages/members/MemberListPresenter.tsxsrc/pages/members/MembersPage.test.tsxsrc/pages/members/MembersPage.tsxsrc/routes.tssrc/routes/(main)/memberApprovals.tsxsrc/routes/(main)/members.tsx
|
|
||
| const partBadgeVariants = tv({ | ||
| base: 'text-caption-12sb flex h-7 items-center justify-center rounded-md border px-[9px] py-[5px]', | ||
| base: 'text-caption-12sb flex h-7 shrink-0 items-center justify-center rounded-md border px-[9px] py-[5px] whitespace-nowrap', |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
고정 폭 파트 셀에서 배지가 인접 열과 겹칠 수 있습니다.
src/components/members/MemberTable/MemberTable.tsx Line 69의 w-[100px] px-[18px]는 content 폭을 약 64px로 줄입니다. whitespace-nowrap와 shrink-0가 적용되면 프론트엔드 배지가 intrinsic width를 유지해 전화번호 열로 overflow할 수 있습니다. 셀 padding을 줄이거나 열 폭을 넓히고, 테이블 수준 회귀 테스트를 추가하세요.
수정 예시
- <div className="flex w-[100px] shrink-0 justify-center px-[18px]">
+ <div className="flex w-[100px] shrink-0 justify-center px-2">🤖 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/common/PartBadge/PartBadge.tsx` at line 6, Update the
PartBadge sizing and the corresponding MemberTable fixed-width column so the
“프론트엔드” badge fits within the cell without overflowing into the phone-number
column; adjust the existing padding or column width as needed, and add a
table-level regression test covering this label and layout.
| export * from './blog-reviews' | ||
| export * from './common' | ||
| export * from './introductions' | ||
| export * from './members' |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
생성된 barrel 변경은 원본/생성 스크립트에서 반영하세요.
세 파일 모두 생성 결과가 재현되는지 확인하고, 수동 변경이라면 원본을 수정한 뒤 barrel 생성기를 다시 실행하세요.
src/components/index.ts#L6-L6:./membersexport를 생성기 출력으로 재생성하세요.src/components/members/MemberTable/index.ts#L1-L3:./MemberTableexport를 생성기 출력으로 재생성하세요.src/components/members/index.ts#L1-L3:./MemberTableexport를 생성기 출력으로 재생성하세요.
As per coding guidelines, 스크립트로 생성되는 파일은 원본 파일이나 생성 스크립트를 수정한 뒤 재생성해야 합니다.
📍 Affects 3 files
src/components/index.ts#L6-L6(this comment)src/components/members/MemberTable/index.ts#L1-L3src/components/members/index.ts#L1-L3
🤖 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/index.ts` at line 6, Regenerate the barrel outputs from their
source files or generator rather than editing generated exports manually. Update
and rerun the generator for src/components/index.ts#L6-L6,
src/components/members/MemberTable/index.ts#L1-L3, and
src/components/members/index.ts#L1-L3 so each ./members or ./MemberTable export
is reproducibly produced.
Source: Coding guidelines
| {/* TODO: 승인 상태 저장 API 연동 후 성공 토스트를 표시하고 회원 관리 목록으로 이동한다. */} | ||
| <Button variant="strong" size="m"> | ||
| 저장하기 | ||
| </Button> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
fd -a -t f -i 'admin-members\.md|swagger|openapi' . || true
rg -n -i -C 3 'member|approval|approve|reject|save' .claude/references 2>/dev/null || trueRepository: kusitms-com/makers-admin-fe
Length of output: 4409
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Inspect the presenter and nearby member approval implementation.
fd -a -t f 'MemberApprovalPresenter\.tsx|MemberApproval.*tsx|useMembers\.ts|members\.ts' src .claude/references || true
echo '--- MemberApprovalPresenter.tsx ---'
sed -n '1,220p' src/pages/members/MemberApprovalPresenter.tsx
echo '--- related references ---'
sed -n '1,120p' .claude/references/domain/members.md
echo '--- admin members api ---'
sed -n '1,120p' .claude/references/api/admin-members.mdRepository: kusitms-com/makers-admin-fe
Length of output: 3673
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Find whether the save action is intentionally deferred or wired elsewhere.
rg -n -C 2 '저장하기|onClick|approve|reject|toast|navigate|mutation|pending' src/pages/members src/api src/hooks .claude/references || trueRepository: kusitms-com/makers-admin-fe
Length of output: 7067
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Show the exact file and adjacent implementation if present.
wc -l src/pages/members/MemberApprovalPresenter.tsx 2>/dev/null || true
cat -n src/pages/members/MemberApprovalPresenter.tsx 2>/dev/null || trueRepository: kusitms-com/makers-admin-fe
Length of output: 2142
🏁 Script executed:
#!/bin/bash
set -euo pipefail
sed -n '1,240p' src/routes/'(main)'/members.tsx
echo '---'
sed -n '1,260p' src/pages/members/MembersPage.test.tsx
echo '---'
rg -n -C 2 'onStatusChange|onDelete|저장하기|approval' src/pages/members src/components/members src/hooks src/api || trueRepository: kusitms-com/makers-admin-fe
Length of output: 12869
🏁 Script executed:
#!/bin/bash
set -euo pipefail
fd -a -t f 'MentoringMemberTable.*|Member.*Presenter.*|useMembers.*' src/components src/pages src/hooks || true
echo '---'
sed -n '1,260p' src/components/members/MentoringMemberTable.tsxRepository: kusitms-com/makers-admin-fe
Length of output: 386
🏁 Script executed:
#!/bin/bash
set -euo pipefail
sed -n '150,220p' src/pages/members/MembersPage.tsx
echo '---'
sed -n '1,220p' src/components/members/MemberTable/MemberTable.tsxRepository: kusitms-com/makers-admin-fe
Length of output: 7872
저장하기 버튼을 실제 승인 저장 동작에 연결하세요.
지금은 승인 상태가 로컬 state에만 남고 버튼은 아무 동작도 하지 않습니다. 변경사항 저장 시 승인/반려 mutation, 성공 토스트, ['admin', 'members', 'pending'] invalidate와 /members 복귀를 붙이세요.
🤖 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/pages/members/MemberApprovalPresenter.tsx` around lines 40 - 43, Connect
the 저장하기 Button in MemberApprovalPresenter to the approval-status mutation using
the current local state, then on success show the success toast, invalidate
['admin', 'members', 'pending'], and navigate back to /members. Remove the
placeholder TODO and preserve the existing approval/rejection state handling.
Source: Coding guidelines
| <Button | ||
| variant="strong" | ||
| size="m" | ||
| onClick={() => { | ||
| void navigate('/members/approval') | ||
| }} | ||
| > | ||
| 승인 요청 3 | ||
| </Button> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
승인 요청 수를 상태에서 계산하세요.
INITIAL_APPROVALS에는 대기 회원이 4명인데 버튼은 항상 승인 요청 3을 표시합니다. 승인 상태 변경·삭제 후에도 틀린 값이 유지됩니다. 상위 페이지에서 PENDING 수를 계산해 prop으로 전달하고 테스트 기대값도 동기화하세요.
🤖 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/pages/members/MemberListPresenter.tsx` around lines 40 - 48, Update the
member list flow around MemberListPresenter so the approval-request button
displays a count prop derived from the number of PENDING members in the parent
page instead of the hardcoded 3. Pass the recalculated count through the
presenter and keep it synchronized after approval-status changes or deletions,
then update affected test expectations to match the computed value.
| expect(screen.getByRole('heading', { name: '회원 관리' })).toBeTruthy() | ||
| expect(screen.getByLabelText('현재 위치').className).toContain('text-body-18sb') | ||
| expect(screen.getByText('회원가입 승인')).toBeTruthy() |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win
스타일 클래스에 의존하는 검증을 제거하세요.
text-body-18sb 검증은 사용자 동작이 아닌 구현 세부사항을 고정합니다. aria-label="현재 위치"를 찾는 것만으로 의미 구조는 검증되므로 className assertion은 제거하세요.
As per coding guidelines, “구현 세부사항을 그대로 복제하는 테스트를 피합니다.”
🤖 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/pages/members/MembersPage.test.tsx` around lines 15 - 17, Remove the
className assertion for the element located by aria-label “현재 위치” in the
MembersPage test. Keep the accessibility and visible-content assertions,
including the heading and “회원가입 승인” checks, unchanged.
Source: Coding guidelines
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/pages/members/MembersPage.tsx (1)
168-172: 🗄️ Data Integrity & Integration | 🟠 Major | ⚡ Quick win회원 반려 선택에도 확인 절차를 추가하세요.
MemberTable에서REJECTED를 선택하면 이 핸들러가 즉시 행 상태를 변경합니다. 반려는 계정 삭제를 수반하므로 확인 dialog에서 확인된 경우에만 상태를 커밋하도록 대상 상태를 분리하세요.As per coding guidelines, “회원 반려는 계정 삭제를 수반하는 destructive action이므로 UI에서 사용자 확인 절차를 거친 후 실행한다.” As per path instructions, “회원 반려는 계정 삭제 성격이 있으므로 confirmation을 제공합니다.”
🤖 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/pages/members/MembersPage.tsx` around lines 168 - 172, Update handleStatusChange so selecting REJECTED does not immediately update currentMembers; first store the target member and rejected status, display the existing confirmation dialog, and commit the status change only after confirmation. Preserve the immediate update behavior for non-destructive statuses and reuse the established confirmation flow where available.Sources: Coding guidelines, Path instructions
src/pages/members/MembersPage.test.tsx (1)
39-50: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win관리자 상태 변경의 화면 전환을 테스트하세요.
현재 테스트는 승인 화면의 정적 렌더링만 검증하고
SelectField상호작용을 수행하지 않습니다. 승인/반려 선택 후 상태가 갱신되는지, 반려 확인 dialog의 취소·확인 흐름이 동작하는지 Testing Library로 검증하세요. 저장 API 연동 후에는 query invalidation도 추가해야 합니다.As per coding guidelines, “관리자 상태 변경은 화면상의 상태 전환과 query invalidation 동작을 테스트합니다.”
🤖 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/pages/members/MembersPage.test.tsx` around lines 39 - 50, 보호자 승인 테스트에서 정적 렌더링 검증을 확장해 SelectField로 승인·반려를 선택한 뒤 화면 상태가 갱신되는지 검증하세요. 반려 확인 dialog가 열리고 취소 시 상태가 유지되며 확인 시 상태가 변경되는 흐름도 Testing Library 상호작용으로 테스트하고, 저장 API 성공 후 관련 query invalidation이 호출되는지 함께 검증하세요.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/components/members/MemberTable/MemberTable.tsx`:
- Around line 63-64: Update MemberTable’s header and row markup around the
existing grid container to expose semantic table structure: prefer table,
thead/tbody, tr, th, and td elements, or otherwise add table, row, columnheader,
and cell roles with correct header-cell associations. Preserve the current
layout and styling while ensuring screen readers can identify columns and their
corresponding cells.
In `@src/pages/members/MembersPage.tsx`:
- Line 8: Update PAGE_SIZE in MembersPage so the existing INITIAL_MEMBERS
dataset produces two pages and TableFooter exposes page numbers 1 and 2; restore
it to 7, or consistently update the related pagination tests and screen contract
if choosing a different size.
---
Outside diff comments:
In `@src/pages/members/MembersPage.test.tsx`:
- Around line 39-50: 보호자 승인 테스트에서 정적 렌더링 검증을 확장해 SelectField로 승인·반려를 선택한 뒤 화면
상태가 갱신되는지 검증하세요. 반려 확인 dialog가 열리고 취소 시 상태가 유지되며 확인 시 상태가 변경되는 흐름도 Testing
Library 상호작용으로 테스트하고, 저장 API 성공 후 관련 query invalidation이 호출되는지 함께 검증하세요.
In `@src/pages/members/MembersPage.tsx`:
- Around line 168-172: Update handleStatusChange so selecting REJECTED does not
immediately update currentMembers; first store the target member and rejected
status, display the existing confirmation dialog, and commit the status change
only after confirmation. Preserve the immediate update behavior for
non-destructive statuses and reuse the established confirmation flow where
available.
🪄 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: ASSERTIVE
Plan: Pro
Run ID: 5e66b2ec-4b2b-4504-884b-44e6f5c82285
📒 Files selected for processing (3)
src/components/members/MemberTable/MemberTable.tsxsrc/pages/members/MembersPage.test.tsxsrc/pages/members/MembersPage.tsx
| import { MemberApprovalPresenter } from './MemberApprovalPresenter' | ||
| import { MemberListPresenter } from './MemberListPresenter' | ||
|
|
||
| const PAGE_SIZE = 8 |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
페이지 크기 변경으로 일반 목록의 2페이지가 사라집니다.
INITIAL_MEMBERS가 8명이고 PAGE_SIZE도 8이므로 totalPages는 1입니다. 따라서 TableFooter에 2페이지를 표시할 수 없어 PR 화면의 일반 회원 목록(1·2페이지)과 불일치합니다. 실제 화면 계약에 맞게 PAGE_SIZE를 7로 복원하거나, 관련 테스트에서 2페이지 계약을 함께 수정하세요.
As per PR objectives, “페이지네이션 / page numbers 1 and 2”.
🤖 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/pages/members/MembersPage.tsx` at line 8, Update PAGE_SIZE in MembersPage
so the existing INITIAL_MEMBERS dataset produces two pages and TableFooter
exposes page numbers 1 and 2; restore it to 7, or consistently update the
related pagination tests and screen contract if choosing a different size.
CI 결과
|
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/pages/members/MembersPage.test.tsx (1)
38-52: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win상태 변경 화면 전환도 테스트하세요.
현재는 삭제와 라우팅만 검증합니다. 상태 combobox에서 값을 선택한 뒤 해당 행의 상태가 변경되는 흐름을 추가로 검증해야 합니다. API 연동 시에는 mutation 성공 후 pending query invalidation도 함께 검증하세요.
As per coding guidelines, “관리자 상태 변경은 화면상의 상태 전환과 query invalidation 동작을 테스트합니다.” As per path instructions, “타입 안정성, React 상태/효과 사용, 접근성, 테스트 필요성을 검토한다.”
🤖 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/pages/members/MembersPage.test.tsx` around lines 38 - 52, Extend the test around MentoringMembersPage and its approval presenter to select a new value from the row’s status combobox and verify that the row displays the updated status. Mock or observe the status mutation and assert that, after a successful mutation, the pending members query is invalidated; retain the existing routing and approval-content assertions.Sources: Coding guidelines, Path instructions
🤖 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/components/members/MemberTable/MemberTable.tsx`:
- Around line 171-176: 빈 상태 행의 ARIA 구조를 수정하세요. MemberTable의 role="row" 컨테이너 안에
안내 문구 “표시할 회원이 없습니다.”를 role="cell" 요소로 감싸 직접 셀 자식이 되도록 변경하고, 기존 레이아웃 스타일은 유지하세요.
---
Outside diff comments:
In `@src/pages/members/MembersPage.test.tsx`:
- Around line 38-52: Extend the test around MentoringMembersPage and its
approval presenter to select a new value from the row’s status combobox and
verify that the row displays the updated status. Mock or observe the status
mutation and assert that, after a successful mutation, the pending members query
is invalidated; retain the existing routing and approval-content assertions.
🪄 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: ASSERTIVE
Plan: Pro
Run ID: 6f61b8da-001c-4e72-b04a-6ae9738370fe
📒 Files selected for processing (6)
src/components/common/SelectField/SelectField.test.tsxsrc/components/members/MemberTable/MemberTable.tsxsrc/pages/members/MemberApprovalPresenter.tsxsrc/pages/members/MemberListPresenter.tsxsrc/pages/members/MembersPage.test.tsxsrc/pages/members/MembersPage.tsx
leemanjae02
left a comment
leemanjae02
left a comment
There was a problem hiding this comment.
고생하셨습니다! 코멘트 남겨드렸으니 확인 부탁드려요 :)
| <div role="cell" className="flex min-w-0 justify-center px-3"> | ||
| <button | ||
| type="button" | ||
| onClick={onDelete} | ||
| aria-label={`${member.name} 삭제`} | ||
| className="bg-fill-destructive text-status-negative flex size-9 items-center justify-center rounded-full" | ||
| > | ||
| <DeleteIcon className="size-5" aria-hidden="true" /> | ||
| </button> | ||
| </div> |
There was a problem hiding this comment.
삭제가 확인 플로우 없이 바로 실행되는데 members.md 문서상 반려/삭제는 확인이 필요한 액션인데 빠진 것 같아서 추가하면 더 안전할 것 같습니다!
CI 결과
|
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/pages/members/MembersPage.test.tsx (1)
48-63: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win상태 변경과 페이지 이동 동작을 테스트하세요.
현재 테스트는 목록 렌더링, 삭제 확인, 승인 화면 전환만 검증하며
MembersPage.tsxLine 169-173의 상태 변경과TableFooter의 페이지 이동 경로를 실행하지 않습니다. 상태 선택 후 값이 바뀌는지, 페이지 버튼 클릭 후 올바른 행이 표시되는지 추가로 검증해야 합니다.As per path instructions, 타입 안정성, React 상태/효과 사용, 접근성, 테스트 필요성을 검토해야 합니다.
🤖 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/pages/members/MembersPage.test.tsx` around lines 48 - 63, MembersPage 테스트에 상태 변경과 페이지 이동 시나리오를 추가하세요. MentoringMembersPage에서 상태 선택 후 선택값이 변경되는지 검증하고, TableFooter의 페이지 버튼을 클릭한 뒤 해당 페이지의 올바른 행이 표시되는지 확인하세요. 기존 목록 렌더링·삭제·승인 화면 테스트는 유지하며, 접근 가능한 역할과 이름으로 요소를 조회하세요.Source: Path instructions
🤖 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/components/members/MemberTable/MemberTable.tsx`:
- Around line 114-115: Replace the hardcoded bg-[`#fdf2f2`] class on the delete
button in MemberTable with the existing danger/destructive background design
token from `@kusitms.com/tokens`, preserving the current layout and styling
classes.
- Line 1: Replace the mentoringDeleteIcon import from svg-preserve with the
corresponding shared icon from `@kusitms.com/icons`, or use the existing
equivalent in src/assets/icons/generated if the package does not provide one.
Update the MemberTable rendering to use that shared icon while preserving the
current delete action and visual intent.
---
Outside diff comments:
In `@src/pages/members/MembersPage.test.tsx`:
- Around line 48-63: MembersPage 테스트에 상태 변경과 페이지 이동 시나리오를 추가하세요.
MentoringMembersPage에서 상태 선택 후 선택값이 변경되는지 검증하고, TableFooter의 페이지 버튼을 클릭한 뒤 해당
페이지의 올바른 행이 표시되는지 확인하세요. 기존 목록 렌더링·삭제·승인 화면 테스트는 유지하며, 접근 가능한 역할과 이름으로 요소를
조회하세요.
🪄 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: ASSERTIVE
Plan: Pro
Run ID: 263812f0-6bcf-4f24-b1ae-21b979321adb
⛔ Files ignored due to path filters (1)
src/assets/icons/svg-preserve/mentoring-delete.svgis excluded by!**/*.svg,!**/*.svg
📒 Files selected for processing (3)
src/components/members/MemberTable/MemberTable.tsxsrc/pages/members/MembersPage.test.tsxsrc/pages/members/MembersPage.tsx
| className="flex size-9 items-center justify-center rounded-full bg-[#fdf2f2]" | ||
| > |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
삭제 버튼 배경색을 디자인 토큰으로 교체하세요.
Line 114의 bg-[#fdf2f2]는 테마·의미 기반 스타일을 우회합니다. 삭제/위험 상태에 대응하는 기존 디자인 토큰을 사용하세요.
As per coding guidelines, 색상은 @kusitms.com/tokens의 디자인 토큰을 우선 사용해야 합니다. As per path instructions, src/**에서는 하드코딩된 색상을 중점 확인합니다.
🤖 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/members/MemberTable/MemberTable.tsx` around lines 114 - 115,
Replace the hardcoded bg-[`#fdf2f2`] class on the delete button in MemberTable
with the existing danger/destructive background design token from
`@kusitms.com/tokens`, preserving the current layout and styling classes.
Sources: Coding guidelines, Path instructions
CI 결과
|
# Conflicts: # src/components/common/SelectField/SelectField.tsx # src/routes.ts
CI 결과
|
CI 결과
|
2 participants
#️⃣ 연관된 이슈
🚧 Work in Progress
Close [Feat] #29 - 멘토링 회원관리 페이지 ui 구현 #29
작업 진행 중
📌 주요 변경사항
📝 작업 내용
📸 스크린샷 (선택)
💬 리뷰 요구사항(선택)
Summary by CodeRabbit