Skip to content

홈 정산 목록 조회, 입금 요청 승인/거절 API 연결#32

Merged
ongheong merged 18 commits intodevelopfrom
MD-29
Apr 18, 2026
Merged

홈 정산 목록 조회, 입금 요청 승인/거절 API 연결#32
ongheong merged 18 commits intodevelopfrom
MD-29

Conversation

@ongheong
Copy link
Copy Markdown
Contributor

@ongheong ongheong commented Apr 12, 2026

Summary

  • SettlementGroup 타입 및 SettlementSort, SettlementStatus 타입 추가
  • getSettlementList(status, sort, limit) API 함수 추가 (GET /api/v1/groups)
  • useGetSettlementList hook 추가
  • 홈 페이지 정산 목록을 mock 데이터에서 실제 API로 교체
    • 진행 중 / 완료된 정산 탭 전환 시 API 파라미터 변경
    • 최신순 / 오래된순 정렬 토글 시 API 파라미터 변경
  • PaymentActionResult 타입 및 입금 승인/거절 API 함수 추가 (PATCH /api/v1/payments/{id}/approve|reject)
  • useApprovePayment, useRejectPayment hook 추가
  • 입금 관리 페이지 승인/거절 버튼에 API 연결

Test plan

  • 홈 페이지 진입 시 정산 목록이 API에서 정상적으로 불러와지는지 확인
  • 진행 중인 정산 / 완료된 정산 탭 전환이 정상 동작하는지 확인
  • 최신순 / 오래된순 정렬 토글이 정상 동작하는지 확인
  • 정산 내역이 없을 때 빈 상태 UI가 표시되는지 확인
  • 입금 관리 페이지에서 승인 버튼 클릭 시 API 호출 및 목록 갱신 확인
  • 입금 관리 페이지에서 거절 버튼 클릭 시 API 호출 및 목록 갱신 확인

🤖 Generated with Claude Code

Summary by CodeRabbit

  • 새로운 기능

    • 정산 목록을 API로 연동해 실시간 데이터 표시 및 로딩/오류 처리 추가
    • 정산 상태 필터(전체·진행중·완료)와 정렬(최신순·오래된순) 도입
    • 결제 요청 승인·거절 기능 추가 및 결제 관리 화면에서 즉시 반영
  • 스타일/콘텐츠

    • 정산 항목 날짜 표시 형식 개선(한국 로케일) 및 빈 상태 메시지 개선

yeoeun-ex and others added 3 commits April 12, 2026 19:21
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Apr 12, 2026

Note

Reviews paused

It 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 reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: bbdde231-1638-42f2-a631-d2f1f01d0bcd

📥 Commits

Reviewing files that changed from the base of the PR and between 626da22 and 496a5f3.

📒 Files selected for processing (2)
  • .nvmrc
  • src/pages/home/ui/HomePageSection/index.tsx
✅ Files skipped from review due to trivial changes (1)
  • .nvmrc
🚧 Files skipped from review as they are similar to previous changes (1)
  • src/pages/home/ui/HomePageSection/index.tsx

📝 Walkthrough

Walkthrough

정착 그룹 관련 타입·API·훅을 추가하고 Home 섹션을 API 기반으로 전환했으며, 결제 승인/거절 타입·API·훅을 추가하고 PaymentManagement 페이지에서 이를 호출하도록 연결했습니다.

Changes

Cohort / File(s) Summary
그룹 타입 및 API
src/entities/group/model/group.type.ts, src/entities/group/api/group.ts
SettlementStatus, SettlementSort, SettlementGroup 타입 추가. /groups 조회용 getSettlementList(status, sort, limit=100): Promise<SettlementGroup[]> 함수 추가.
홈 훅 및 UI
src/features/home/api/useGetSettlementList.ts, src/pages/home/ui/HomePageSection/index.tsx
useGetSettlementList(status, sort) 훅 추가. HomePageSection에서 모의 데이터 제거 후 훅 사용으로 교체, 정렬 상태를 SettlementSort로 변경 및 API 응답 필드·로딩/에러/빈상태 처리로 매핑·날짜 포맷 적용.
결제 타입 및 API
src/entities/payment/model/payment.type.ts, src/entities/payment/api/payment.ts
PaymentStatus, PaymentActionResult 타입 추가. payment.approve(paymentRequestId)payment.reject(paymentRequestId) 메서드 추가(PATCH 호출, PaymentActionResult 반환).
결제 훅 및 페이지 연결
src/features/payment-management/api/useApprovePayment.ts, src/features/payment-management/api/useRejectPayment.ts, src/pages/paymentManagement/PaymentManagementPage.tsx
승인/거절용 React Query 훅(useApprovePayment, useRejectPayment) 추가(성공 시 ['payments'] 캐시 무효화). PaymentManagementPage에서 해당 훅의 mutate를 호출하도록 연결.
로컬 설정 및 런타임
.claude/settings.local.json, .nvmrc
로컬 Claude 설정 파일 추가(허용된 git 명령 목록). .nvmrc Node 버전 업데이트(20.17.0 → 20.19.0).

Possibly related PRs

Suggested labels

🔨 Refactor

Poem

🐰 깡충, 새 타입 씨앗을 뿌렸죠
/groups 길 따라 데이터가 와요
훅 한 줌으로 홈이 깔끔히 피고
승인·거절은 탭 한 번에 톡!
당근 들고 배포로 달려갑니다 🥕✨

🚥 Pre-merge checks | ✅ 1
✅ Passed checks (1 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.

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

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch MD-29

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 and usage tips.

@github-actions
Copy link
Copy Markdown

github-actions bot commented Apr 12, 2026

📝 관련 이슈

MD-29

@ongheong ongheong changed the title [MD-29] feat: 홈 정산 목록 조회 API 연결 홈 정산 목록 조회 API 연결 Apr 12, 2026
@ongheong ongheong changed the base branch from main to develop April 12, 2026 10:24
@cloudflare-workers-and-pages
Copy link
Copy Markdown

cloudflare-workers-and-pages bot commented Apr 12, 2026

Deploying moddo-frontend with  Cloudflare Pages  Cloudflare Pages

Latest commit: 496a5f3
Status: ✅  Deploy successful!
Preview URL: https://4c24d93b.moddo-frontend.pages.dev
Branch Preview URL: https://md-29.moddo-frontend.pages.dev

View logs

@ongheong
Copy link
Copy Markdown
Contributor Author

@coderabbitai 리뷰해줘

@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Apr 12, 2026

@ongheong: 네, PR #32를 리뷰하겠습니다! 잠시만 기다려 주세요. 🐇

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 2

🧹 Nitpick comments (2)
src/pages/home/ui/HomePageSection/index.tsx (2)

121-123: 로딩 상태 처리를 고려해 보세요.

현재 데이터 로딩 중에는 settlementList가 빈 배열이 되어 "정산이 없어요" 메시지가 잠시 표시됩니다. isLoading 상태를 활용하여 로딩 인디케이터를 표시하면 UX가 개선됩니다.

💡 로딩 상태 처리 예시
   const sort = sortToggle ? 'OLDEST' : 'LATEST';
-  const { data } = useGetSettlementList(settlementType, sort);
+  const { data, isLoading } = useGetSettlementList(settlementType, sort);
   const settlementList = data ?? [];

그 후 렌더링 부분에서 isLoading 상태에 따라 스켈레톤 UI나 스피너를 표시할 수 있습니다.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/pages/home/ui/HomePageSection/index.tsx` around lines 121 - 123, The
component treats data absence as an empty list, causing the "no settlements"
message to flash during fetch; update the call to useGetSettlementList(sort) to
also read its isLoading (or isFetching) flag and use that to control UI: keep
settlementList = data ?? [] but in the render branch show a loading
indicator/skeleton when isLoading is true (instead of showing the "정산이 없어요"
empty state), e.g., use sortToggle and settlementType as before but branch
rendering based on isLoading from useGetSettlementList to avoid the transient
empty message.

186-188: 빈 상태 메시지가 현재 선택된 탭에 맞지 않습니다.

"아직 진행중인 정산이 없어요" 메시지는 "완료된 정산" 탭에서도 동일하게 표시됩니다. 선택된 settlementType에 따라 메시지를 동적으로 변경하는 것이 좋습니다.

💡 동적 메시지 제안
           <Text variant="body2R" color="semantic.text.subtle">
-            아직 진행중인 정산이 없어요.
+            {settlementType === 'IN_PROGRESS'
+              ? '아직 진행중인 정산이 없어요.'
+              : '완료된 정산이 없어요.'}
           </Text>
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/pages/home/ui/HomePageSection/index.tsx` around lines 186 - 188, The
empty-state text inside HomePageSection is hardcoded ("아직 진행중인 정산이 없어요.") and
doesn't reflect the current settlementType; update the Text rendering (the Text
component in index.tsx within HomePageSection) to compute the message from
settlementType (e.g., show "아직 진행중인 정산이 없어요." for in-progress and "아직 완료된 정산이
없어요." for completed) by switching or mapping on settlementType and rendering
that dynamic string instead of the static literal.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/features/home/api/useGetSettlementList.ts`:
- Around line 3-5: Prettier is failing because the import and function signature
are on single lines; update the import of SettlementSort and SettlementStatus to
use multi-line named imports and format the useGetSettlementList signature so
its parameters are on separate lines (referencing the import symbols
SettlementSort and SettlementStatus and the function name useGetSettlementList)
so the file conforms to Prettier's multiline rules.

In `@src/pages/home/ui/HomePageSection/index.tsx`:
- Line 168: Prettier is failing on the JSX line that formats createdAt; fix by
applying the project's Prettier formatting to this file or manually adjust the
expression so it matches project style: update the JSX prop using the existing
symbols (format, new Date(item.createdAt), and ko) to a Prettier-compliant form
(for example reformat the line or run prettier --write on the file) so the
date={format(new Date(item.createdAt), 'yyyy년 M월 d일', { locale: ko })}
expression is correctly styled.

---

Nitpick comments:
In `@src/pages/home/ui/HomePageSection/index.tsx`:
- Around line 121-123: The component treats data absence as an empty list,
causing the "no settlements" message to flash during fetch; update the call to
useGetSettlementList(sort) to also read its isLoading (or isFetching) flag and
use that to control UI: keep settlementList = data ?? [] but in the render
branch show a loading indicator/skeleton when isLoading is true (instead of
showing the "정산이 없어요" empty state), e.g., use sortToggle and settlementType as
before but branch rendering based on isLoading from useGetSettlementList to
avoid the transient empty message.
- Around line 186-188: The empty-state text inside HomePageSection is hardcoded
("아직 진행중인 정산이 없어요.") and doesn't reflect the current settlementType; update the
Text rendering (the Text component in index.tsx within HomePageSection) to
compute the message from settlementType (e.g., show "아직 진행중인 정산이 없어요." for
in-progress and "아직 완료된 정산이 없어요." for completed) by switching or mapping on
settlementType and rendering that dynamic string instead of the static literal.
🪄 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

Run ID: 9bbbacb7-baa8-42ae-a450-3be182682557

📥 Commits

Reviewing files that changed from the base of the PR and between 2d230b0 and fc1c4ba.

📒 Files selected for processing (4)
  • src/entities/group/api/group.ts
  • src/entities/group/model/group.type.ts
  • src/features/home/api/useGetSettlementList.ts
  • src/pages/home/ui/HomePageSection/index.tsx

Comment thread src/features/home/api/useGetSettlementList.ts Outdated
Comment thread src/pages/home/ui/HomePageSection/index.tsx Outdated
yeoeun-ex and others added 3 commits April 12, 2026 19:29
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@ongheong ongheong changed the title 홈 정산 목록 조회 API 연결 홈 정산 목록 조회, 입금 요청 승인/거절 API 연결 Apr 12, 2026
@ongheong
Copy link
Copy Markdown
Contributor Author

@coderabbitai 코드 추가했는데 리뷰해줘

@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Apr 12, 2026

@ongheong: 네, 추가된 코드를 포함해서 PR #32를 다시 리뷰하겠습니다! 잠시만 기다려 주세요. 🐇

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

@ongheong ongheong added the ✨ Feature 신규 기능 추가 label Apr 12, 2026
Copy link
Copy Markdown
Contributor

@yoouyeon yoouyeon left a comment

Choose a reason for hiding this comment

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

API 연결 작업한 것 확인했습니다! 고생 많으셨습니다 🥹
코드래빗 말대로 prettier를 돌려보니 오류 나는 부분이 있어서 그 부분 수정 부탁드립니당!!

Comment thread src/entities/payment/api/payment.ts Outdated

const payment = {
getAll: (): Promise<PaymentList> =>
// TODO: 모의 데이터 제거 후 실제 API 연동 시 삭제 useMock: true 옵션 제거
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

이 주석은 더 이상 필요 없다면 제거 부탁드립니다!!

Comment thread src/pages/home/ui/HomePageSection/index.tsx Outdated
Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 3

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
src/pages/home/ui/HomePageSection/index.tsx (1)

178-190: ⚠️ Potential issue | 🟡 Minor

빈 상태 문구가 선택된 탭과 맞지 않습니다.

COMPLETED 탭에서도 항상 "아직 진행중인 정산이 없어요."가 보입니다. 선택한 settlementType에 맞춰 문구를 바꿔 주세요.

🔧 수정 예시
+  const emptyMessage =
+    settlementType === 'COMPLETED'
+      ? '아직 완료된 정산이 없어요.'
+      : '아직 진행중인 정산이 없어요.';
           <Text variant="body2R" color="semantic.text.subtle">
-            아직 진행중인 정산이 없어요.
+            {emptyMessage}
           </Text>
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/pages/home/ui/HomePageSection/index.tsx` around lines 178 - 190, The
empty-state message always shows "아직 진행중인 정산이 없어요." regardless of the selected
settlementType; update the render logic in HomePageSection (where
S.NoSettlementImg and the Text with variant="body2R" are rendered) to
conditionally choose the copy based on settlementType (e.g., when settlementType
=== "COMPLETED" show a completed-specific string like "완료된 정산이 없어요." and
otherwise show the in-progress string). Ensure the conditional uses the existing
settlementType variable (or prop) so the displayed text matches the selected
tab.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/entities/payment/api/payment.ts`:
- Line 2: Run the project's formatter/linter to fix Prettier/ESLint issues in
this file: auto-format the import line that references PaymentActionResult and
PaymentList and correct spacing/commas around the type usages elsewhere in the
file (the symbols PaymentActionResult and PaymentList are where the violations
appear). Specifically, apply Prettier formatting and ESLint autofix (e.g. run
the repo's prettier and lint --fix commands) and remove any stray blank lines or
trailing comma/semicolon style mismatches so the file passes CI formatting
rules.

In `@src/pages/home/ui/HomePageSection/index.tsx`:
- Around line 122-123: The current branch uses const { data } =
useGetSettlementList(settlementType, sort) and does const settlementList = data
?? [], which conflates first-load (data undefined), empty-results, and request
failures; update HomePageSection to also destructure isLoading and isError from
useGetSettlementList (e.g., const { data, isLoading, isError } =
useGetSettlementList(...)) and handle three cases explicitly: render a loading
state when isLoading is true, render an error state when isError is true, and
only fall back to an empty array for settlementList when data is defined (const
settlementList = data ?? []). Apply the same change to the other block
referenced (the code around the other useGetSettlementList usage).

In `@src/pages/paymentManagement/PaymentManagementPage.tsx`:
- Around line 81-82: The hooks useApprovePayment and useRejectPayment (whose
mutate aliases are approvePayment and rejectPayment) are called after early
returns and must be moved to the top-level of the PaymentManagementPage
component; relocate the lines "const { mutate: approvePayment } =
useApprovePayment();" and "const { mutate: rejectPayment } =
useRejectPayment();" to the top of the component body (before any isLoading /
isError early returns) so the hooks are always invoked in the same order and
comply with React Hooks rules.

---

Outside diff comments:
In `@src/pages/home/ui/HomePageSection/index.tsx`:
- Around line 178-190: The empty-state message always shows "아직 진행중인 정산이 없어요."
regardless of the selected settlementType; update the render logic in
HomePageSection (where S.NoSettlementImg and the Text with variant="body2R" are
rendered) to conditionally choose the copy based on settlementType (e.g., when
settlementType === "COMPLETED" show a completed-specific string like "완료된 정산이
없어요." and otherwise show the in-progress string). Ensure the conditional uses
the existing settlementType variable (or prop) so the displayed text matches the
selected tab.
🪄 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

Run ID: 45646d5a-9404-43f9-94e2-f75c3403279f

📥 Commits

Reviewing files that changed from the base of the PR and between fc1c4ba and c80da53.

📒 Files selected for processing (7)
  • src/entities/payment/api/payment.ts
  • src/entities/payment/model/payment.type.ts
  • src/features/home/api/useGetSettlementList.ts
  • src/features/payment-management/api/useApprovePayment.ts
  • src/features/payment-management/api/useRejectPayment.ts
  • src/pages/home/ui/HomePageSection/index.tsx
  • src/pages/paymentManagement/PaymentManagementPage.tsx
✅ Files skipped from review due to trivial changes (1)
  • src/entities/payment/model/payment.type.ts
🚧 Files skipped from review as they are similar to previous changes (1)
  • src/features/home/api/useGetSettlementList.ts

Comment thread src/entities/payment/api/payment.ts Outdated
Comment thread src/pages/home/ui/HomePageSection/index.tsx Outdated
Comment thread src/pages/paymentManagement/PaymentManagementPage.tsx Outdated
@ongheong
Copy link
Copy Markdown
Contributor Author

@coderabbitai 지금 네가 말한 오류들 다 수정했어.
수정이 되었다면 기존 리뷰들 닫아주고 approve 해줘 확실하게

@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Apr 12, 2026

Tip

For best results, initiate chat on the files or code changes.

🧩 Analysis chain

먼저 기존 리뷰 코멘트들과 최신 코드 상태를 확인할게요!


🏁 Script executed:

#!/bin/bash
# List all review comments on PR `#32`
gh pr view 32 --repo moddo-kr/moddo-frontend --json reviews,reviewDecision,state

echo "--- Review comments ---"
gh api repos/moddo-kr/moddo-frontend/pulls/32/comments --jq '.[] | {id: .id, path: .path, body: .body, resolved: .resolved}'

echo "--- PR review threads ---"
gh api repos/moddo-kr/moddo-frontend/pulls/32/reviews --jq '.[] | {id: .id, state: .state, body: .body, submitted_at: .submitted_at}'

Length of output: 45217


최신 코드 상태를 확인할게요!


🏁 Script executed:

#!/bin/bash
echo "=== PaymentManagementPage.tsx ==="
cat -n src/pages/paymentManagement/PaymentManagementPage.tsx

echo ""
echo "=== HomePageSection/index.tsx ==="
cat -n src/pages/home/ui/HomePageSection/index.tsx

echo ""
echo "=== payment.ts ==="
cat -n src/entities/payment/api/payment.ts

Length of output: 13954


@ongheong 최신 코드를 확인해봤는데, 아직 수정되지 않은 항목들이 있어서 바로 approve를 드리기 어렵습니다. 아래 항목들을 먼저 수정해 주세요.


❌ 1. [Critical] React Hooks 규칙 위반 — PaymentManagementPage.tsx Line 81-82

useApprovePayment()useRejectPayment()가 여전히 isLoading(Line 31), isError(Line 56) 조기 return 이후에 호출되고 있습니다. 이는 React Hooks 규칙 위반(react-hooks/rules-of-hooks)으로 런타임 오류를 유발합니다.

 function PaymentManagementPage() {
   const navigate = useNavigate();
   const { color } = useTheme();

   const { data, isLoading, isError } = useGetPayments();
+  const { mutate: approvePayment } = useApprovePayment();
+  const { mutate: rejectPayment } = useRejectPayment();

   const paymentSections = useMemo(...);

   if (isLoading) { ... }
   if (isError) { ... }

-  const { mutate: approvePayment } = useApprovePayment();
-  const { mutate: rejectPayment } = useRejectPayment();

❌ 2. [Major] 로딩/에러 상태 미처리 — HomePageSection/index.tsx Line 121

-  const { data } = useGetSettlementList(settlementType, sort);
+  const { data, isLoading, isError } = useGetSettlementList(settlementType, sort);

로딩 중이거나 에러 발생 시에도 빈 배열로 처리되어 "정산이 없어요" 화면이 노출됩니다.


❌ 3. [Minor] 빈 상태 문구 하드코딩 — HomePageSection/index.tsx Line 188

COMPLETED 탭에서도 "아직 진행중인 정산이 없어요."가 노출됩니다.

-  아직 진행중인 정산이 없어요.
+  {settlementType === 'IN_PROGRESS' ? '아직 진행중인 정산이 없어요.' : '아직 완료된 정산이 없어요.'}

❌ 4. [Minor] Prettier 포맷 오류 — payment.ts Line 2, 11, 14

-import { PaymentActionResult, PaymentList } from '@/entities/payment/model/payment.type';
+import {
+  PaymentActionResult,
+  PaymentList,
+} from '@/entities/payment/model/payment.type';
-    axiosInstance.patch(`/payments/${paymentRequestId}/approve`).then((res) => res.data),
+    axiosInstance
+      .patch(`/payments/${paymentRequestId}/approve`)
+      .then((res) => res.data),

(Line 14의 reject도 동일하게 수정 필요)


위 4가지 항목을 수정해 주시면 바로 확인하고 approve 드리겠습니다! 🐇

Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

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/home/ui/HomePageSection/index.tsx (1)

177-188: ⚠️ Potential issue | 🟡 Minor

빈 상태 문구가 완료 탭과 맞지 않습니다.

COMPLETED 탭에서도 항상 “아직 진행중인 정산이 없어요.”가 보여서 선택한 탭과 UI가 어긋납니다. 탭 값에 따라 문구를 바꿔 주세요.

🔧 수정 예시
           <Text variant="body2R" color="semantic.text.subtle">
-            아직 진행중인 정산이 없어요.
+            {settlementType === 'COMPLETED'
+              ? '아직 완료된 정산이 없어요.'
+              : '아직 진행중인 정산이 없어요.'}
           </Text>
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/pages/home/ui/HomePageSection/index.tsx` around lines 177 - 188, The
empty-state message is static and shows "아직 진행중인 정산이 없어요." even when the
COMPLETED tab is selected; update the JSX that renders S.NoSettlementImg and the
Text (inside HomePageSection index.tsx) to choose the message based on the
current tab value (e.g., activeTab, selectedTab, or tab): when tab ===
'COMPLETED' show a completed-specific string (e.g., "완료된 정산이 없어요."), otherwise
show the in-progress string; implement this conditional display where
S.NoSettlementImg and the Text variant="body2R" are rendered.
♻️ Duplicate comments (1)
src/pages/home/ui/HomePageSection/index.tsx (1)

121-122: ⚠️ Potential issue | 🟠 Major

조회 상태를 빈 목록과 섞지 마세요.

data ?? []만 쓰면 최초 로딩, 탭/정렬 변경 직후 재조회, 요청 실패가 전부 아래 빈 상태로 내려가서 실제 빈 결과처럼 보입니다. useGetSettlementList가 반환하는 isLoading/isError를 분기하는 편이 안전합니다.

🔧 수정 예시
-  const { data } = useGetSettlementList(settlementType, sort);
+  const { data, isLoading, isError } = useGetSettlementList(
+    settlementType,
+    sort,
+  );
   const settlementList = data ?? [];
-      {settlementList.length > 0 ? (
+      {isLoading ? (
+        <Flex
+          direction="column"
+          py={20}
+          justifyContent="center"
+          alignItems="center"
+          flexGrow={1}
+          gap={20}
+        >
+          <Text variant="body2R" color="semantic.text.subtle">
+            정산 내역을 불러오는 중이에요.
+          </Text>
+        </Flex>
+      ) : isError ? (
+        <Flex
+          direction="column"
+          py={20}
+          justifyContent="center"
+          alignItems="center"
+          flexGrow={1}
+          gap={20}
+        >
+          <Text variant="body2R" color="semantic.text.subtle">
+            정산 내역을 불러오지 못했어요.
+          </Text>
+        </Flex>
+      ) : settlementList.length > 0 ? (
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/pages/home/ui/HomePageSection/index.tsx` around lines 121 - 122, The
component treats data as a simple empty array via "const settlementList = data
?? []", which conflates initial loading, refetching, and error states with a
genuine empty result; update the render logic to branch on
useGetSettlementList's status flags (useGetSettlementList -> data, isLoading,
isError) and only map/use settlementList when isLoading and isError are false
(or when isSuccess), while showing a loader or error message during
isLoading/isError; keep the fallback empty array only for the confirmed-success
case to avoid showing a false-empty state during loading/refetch.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/pages/home/ui/HomePageSection/index.tsx`:
- Line 15: Prettier/ESLint failing because the type import for SettlementSort
and SettlementStatus is on a single line; update the import in index.tsx to
match project formatting by splitting into a multi-line type import (e.g., one
type per line within the import braces) or run the project's auto-formatter so
the import of SettlementSort and SettlementStatus from
'@/entities/group/model/group.type' conforms to the repo prettier rules.

---

Outside diff comments:
In `@src/pages/home/ui/HomePageSection/index.tsx`:
- Around line 177-188: The empty-state message is static and shows "아직 진행중인 정산이
없어요." even when the COMPLETED tab is selected; update the JSX that renders
S.NoSettlementImg and the Text (inside HomePageSection index.tsx) to choose the
message based on the current tab value (e.g., activeTab, selectedTab, or tab):
when tab === 'COMPLETED' show a completed-specific string (e.g., "완료된 정산이
없어요."), otherwise show the in-progress string; implement this conditional
display where S.NoSettlementImg and the Text variant="body2R" are rendered.

---

Duplicate comments:
In `@src/pages/home/ui/HomePageSection/index.tsx`:
- Around line 121-122: The component treats data as a simple empty array via
"const settlementList = data ?? []", which conflates initial loading,
refetching, and error states with a genuine empty result; update the render
logic to branch on useGetSettlementList's status flags (useGetSettlementList ->
data, isLoading, isError) and only map/use settlementList when isLoading and
isError are false (or when isSuccess), while showing a loader or error message
during isLoading/isError; keep the fallback empty array only for the
confirmed-success case to avoid showing a false-empty state during
loading/refetch.
🪄 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

Run ID: 0147972b-55ad-4406-9ab0-bb5216e0327b

📥 Commits

Reviewing files that changed from the base of the PR and between c80da53 and 90a6807.

📒 Files selected for processing (1)
  • src/pages/home/ui/HomePageSection/index.tsx

Comment thread src/pages/home/ui/HomePageSection/index.tsx Outdated
Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
src/pages/home/ui/HomePageSection/index.tsx (1)

168-225: ⚠️ Potential issue | 🔴 Critical

중첩 삼항 연산자로 인해 CI(ESLint no-nested-ternary)가 실패합니다.

파이프라인 로그상 라인 168, 181에서 no-nested-ternary 규칙 위반으로 빌드가 실패하고 있습니다. isLoading / isError / 목록 유무를 세 갈래 중첩 삼항으로 처리하고 있어 린트가 막히므로, 조기 반환(early return) 또는 분기별 변수/함수로 풀어주는 편이 깔끔합니다.

🔧 수정 예시 (조기 반환으로 분리)

아래와 같이 리스트 영역만 별도 렌더 함수로 분리하면 중첩 삼항을 제거할 수 있습니다.

+  const renderSettlementList = () => {
+    if (isLoading) {
+      return (
+        <Flex
+          direction="column"
+          py={20}
+          justifyContent="center"
+          alignItems="center"
+          flexGrow={1}
+          gap={20}
+        >
+          <Text variant="body2R" color="semantic.text.subtle">
+            정산 내역을 불러오는 중이에요.
+          </Text>
+        </Flex>
+      );
+    }
+
+    if (isError) {
+      return (
+        <Flex
+          direction="column"
+          py={20}
+          justifyContent="center"
+          alignItems="center"
+          flexGrow={1}
+          gap={20}
+        >
+          <Text variant="body2R" color="semantic.text.subtle">
+            정산 내역을 불러오지 못했어요.
+          </Text>
+        </Flex>
+      );
+    }
+
+    if (settlementList.length > 0) {
+      return (
+        <S.SettlementListWrapper>
+          {settlementList.map((item) => (
+            <HomeExpenseItem
+              key={item.groupId}
+              date={format(new Date(item.createdAt), 'yyyy년 M월 d일', {
+                locale: ko,
+              })}
+              groupName={item.name}
+              totalAmount={item.totalAmount}
+              paidMember={item.completedMemberCount}
+              totalMember={item.totalMemberCount}
+            />
+          ))}
+        </S.SettlementListWrapper>
+      );
+    }
+
+    return (
+      <Flex
+        direction="column"
+        py={20}
+        justifyContent="center"
+        alignItems="center"
+        flexGrow={1}
+        gap={20}
+      >
+        <S.NoSettlementImg src={CoinImg} alt="" />
+        <Text variant="body2R" color="semantic.text.subtle">
+          {settlementType === 'IN_PROGRESS'
+            ? '아직 진행중인 정산이 없어요.'
+            : '완료된 정산이 없어요.'}
+        </Text>
+      </Flex>
+    );
+  };
...
-      {isLoading ? (
-        <Flex ... >
-          ...
-        </Flex>
-      ) : isError ? (
-        ...
-      ) : settlementList.length > 0 ? (
-        ...
-      ) : (
-        ...
-      )}
+      {renderSettlementList()}
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/pages/home/ui/HomePageSection/index.tsx` around lines 168 - 225, The
nested ternary using isLoading / isError / settlementList (rendering the list,
empty state, or loading/error UI) violates no-nested-ternary; refactor the JSX
in HomePageSection by extracting the conditional block into either early returns
or a separate render function/variable (e.g., renderSettlementList()) that
returns the loading UI (uses isLoading), error UI (uses isError), the mapped
HomeExpenseItem list (uses settlementList.map and format, groupId, createdAt,
etc.), or the empty state (uses settlementType, S.NoSettlementImg, CoinImg);
replace the nested ternary with simple if/return branches or a switch inside
that function so ESLint no longer reports nested ternaries.
🧹 Nitpick comments (1)
src/pages/home/ui/HomePageSection/index.tsx (1)

27-27: 불필요한 타입 별칭은 제거를 고려해 주세요.

type SettlementType = SettlementStatus; 는 단순 재명명일 뿐이라, 상태 변수와 핸들러에서 바로 SettlementStatus를 사용하는 편이 타입 소스의 일관성과 탐색성에 더 유리합니다. 별칭이 필요한 도메인적 의미 차이가 없다면 제거하는 것을 권장합니다.

♻️ 제안
-type SettlementType = SettlementStatus;
-
 export function MainHeader() {
...
-  const [settlementType, setSettlementType] =
-    useState<SettlementType>('IN_PROGRESS');
+  const [settlementType, setSettlementType] =
+    useState<SettlementStatus>('IN_PROGRESS');
...
-  const handleSettlementTypeButtonClick = (type: SettlementType) => {
+  const handleSettlementTypeButtonClick = (type: SettlementStatus) => {
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/pages/home/ui/HomePageSection/index.tsx` at line 27, Remove the redundant
type alias `SettlementType = SettlementStatus` and update all references to
`SettlementType` in this module (state declarations, handlers, props, and any
function signatures) to use `SettlementStatus` directly; ensure imports/export
names remain consistent and run TypeScript to fix any remaining type errors
caused by the rename.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In `@src/pages/home/ui/HomePageSection/index.tsx`:
- Around line 168-225: The nested ternary using isLoading / isError /
settlementList (rendering the list, empty state, or loading/error UI) violates
no-nested-ternary; refactor the JSX in HomePageSection by extracting the
conditional block into either early returns or a separate render
function/variable (e.g., renderSettlementList()) that returns the loading UI
(uses isLoading), error UI (uses isError), the mapped HomeExpenseItem list (uses
settlementList.map and format, groupId, createdAt, etc.), or the empty state
(uses settlementType, S.NoSettlementImg, CoinImg); replace the nested ternary
with simple if/return branches or a switch inside that function so ESLint no
longer reports nested ternaries.

---

Nitpick comments:
In `@src/pages/home/ui/HomePageSection/index.tsx`:
- Line 27: Remove the redundant type alias `SettlementType = SettlementStatus`
and update all references to `SettlementType` in this module (state
declarations, handlers, props, and any function signatures) to use
`SettlementStatus` directly; ensure imports/export names remain consistent and
run TypeScript to fix any remaining type errors caused by the rename.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 6f7ec524-d6f0-4967-8ca7-b9f9b6765218

📥 Commits

Reviewing files that changed from the base of the PR and between 90a6807 and 626da22.

📒 Files selected for processing (4)
  • .claude/settings.local.json
  • src/entities/payment/api/payment.ts
  • src/pages/home/ui/HomePageSection/index.tsx
  • src/pages/paymentManagement/PaymentManagementPage.tsx
✅ Files skipped from review due to trivial changes (1)
  • .claude/settings.local.json
🚧 Files skipped from review as they are similar to previous changes (2)
  • src/pages/paymentManagement/PaymentManagementPage.tsx
  • src/entities/payment/api/payment.ts

@ongheong ongheong merged commit be7d96e into develop Apr 18, 2026
3 checks passed
@ongheong ongheong deleted the MD-29 branch April 18, 2026 12:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

✨ Feature 신규 기능 추가

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants