Repository navigation
Feat/326 modified api - #336
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ 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 |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request implements the user blocking feature by replacing mock data with real API integrations across the settings, story details, and profile pages. Key changes include the addition of block/unblock mutations, infinite scroll for the blocked users list, and specialized UI handling for blocked comments and profiles. Feedback focuses on improving the robustness of the service layer to handle relative URLs, centralizing error message retrieval via the existing errorMapper, and avoiding hardcoded string comparisons for identifying blocked users to ensure better maintainability and i18n support.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/app/(main)/stories/[id]/page.tsx (1)
33-33:⚠️ Potential issue | 🔴 Critical | ⚡ Quick winFix conditional hook usage in
src/app/(main)/stories/[id]/page.tsx
if (!id || isNaN(storyId))returns before callinguseStoryDetailQuery(storyId)(and before the mutation hooks right below it), so those hooks are conditionally invoked, violating React Hooks ordering constraints.
useStoryDetailQueryalready hasenabled: !!idinsrc/hooks/queries/useStoryQueries.ts, so restructure to call hooks unconditionally and render the “잘못된 접근” UI based on validity afterward, relying onenabledto skip the fetch.🤖 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/app/`(main)/stories/[id]/page.tsx at line 33, Remove the early return that checks `if (!id || isNaN(storyId))` before invoking hooks so that `useStoryDetailQuery(storyId)` and the mutation hooks are always called; rely on `useStoryDetailQuery`'s `enabled: !!id` option to prevent fetching when id is falsy, then after hooks run render the "잘못된 접근" UI when `!id || isNaN(storyId)` is true. Concretely, delete or move the conditional that returns before hook calls in page.tsx, call `useStoryDetailQuery(storyId)` and the mutation hooks unconditionally, and perform the validity check only for rendering (e.g., show the error UI) afterward.
🤖 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/base-ui/Comment/comment_item.tsx`:
- Line 38: derivedCanReport and other menu-condition booleans (e.g., the logic
around derivedCanReport) ignore the isBlocked flag which allows the action menu
to remain visible even when handlers are removed; update the condition-building
in comment_item.tsx (the variables named derivedCanReport / any derived*
permission booleans and the function that computes menu visibility) to
short-circuit and return false when isBlocked is true (and keep the existing
isMine checks), so blocked comments cannot show the report/edit/delete menu
items or actions; ensure all places where derivedCanReport (and similar derived*
flags defined between lines ~64-70) are used incorporate the isBlocked check.
In `@src/components/base-ui/Comment/comment_section_bookcase.tsx`:
- Around line 128-134: Change both onError handlers in
comment_section_bookcase.tsx from using err: any to err: unknown and narrow the
error before reading its code; implement a small type-narrow check (e.g. ensure
typeof err === "object" && err !== null && "code" in err) or a reusable
predicate like isCommentError(err) to guard access, then check (err as { code?:
string }).code === "COMMENT_405" to show the block-specific toast and fall back
to the generic failure toast; extract the COMMENT_405 check into a single
reusable predicate/helper and reuse it for both the comment and reply onError
handlers to avoid duplication.
In `@src/hooks/mutations/useMemberMutations.ts`:
- Around line 407-410: The onError handlers in useBlockMemberMutation and
useUnblockMemberMutation currently type the error parameter as any; change the
signature to onError: (error: unknown) and narrow it safely before accessing
fields (either add a small type guard or helper like extractErrorMessage(error:
unknown): string). Inside the handler, check for non-null objects and the
presence of response/data/message (or use AxiosError type guard if Axios is
available) to derive errorMessage, falling back to String(error) or a default
Korean message; then pass that string to toast.error and log the error. Ensure
both functions (useBlockMemberMutation and useUnblockMemberMutation) are updated
symmetrically.
In `@src/hooks/mutations/useStoryMutations.ts`:
- Around line 287-294: Change the onError handler in useStoryMutations to avoid
using the any type: replace the parameter type (currently "err: any") with "err:
unknown" and narrow it before reading properties; for example, add a type-guard
or conditional that checks typeof err === 'object' && err !== null and 'code' in
err (or use a helper isErrorWithCode) and then safely check err.code ===
"BOOK_STORY_408" to decide which toast to show; keep the existing console.error
call but pass the narrowed error for safer logging.
---
Outside diff comments:
In `@src/app/`(main)/stories/[id]/page.tsx:
- Line 33: Remove the early return that checks `if (!id || isNaN(storyId))`
before invoking hooks so that `useStoryDetailQuery(storyId)` and the mutation
hooks are always called; rely on `useStoryDetailQuery`'s `enabled: !!id` option
to prevent fetching when id is falsy, then after hooks run render the "잘못된 접근"
UI when `!id || isNaN(storyId)` is true. Concretely, delete or move the
conditional that returns before hook calls in page.tsx, call
`useStoryDetailQuery(storyId)` and the mutation hooks unconditionally, and
perform the validity check only for rendering (e.g., show the error UI)
afterward.
🪄 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: defaults
Review profile: CHILL
Plan: Pro
Run ID: 8769d7cf-90ec-4d46-9c76-c7656d5e2c7a
📒 Files selected for processing (14)
src/app/(main)/setting/block/page.tsxsrc/app/(main)/stories/[id]/page.tsxsrc/components/base-ui/Comment/comment_item.tsxsrc/components/base-ui/Comment/comment_list.tsxsrc/components/base-ui/Comment/comment_section_bookcase.tsxsrc/components/base-ui/Profile/OtherUser/ProfileUserInfo.tsxsrc/hooks/mutations/useMemberMutations.tssrc/hooks/mutations/useStoryMutations.tssrc/hooks/queries/useMemberQueries.tssrc/hooks/useReportBlockFlow.tssrc/lib/api/endpoints/member.tssrc/lib/api/errorMapper.tssrc/services/memberService.tssrc/types/member.ts
📌 개요 (Summary)
🛠️ 변경 사항 (Changes)
1. 타입 및 에러 매핑 레이어 (
types/member.ts,lib/api/errorMapper.ts)BlockedUser) 및 목록 응답(BlockListResponse) 규격 신규 정의.BLOCK_400: 자기 자신 차단 불가BLOCK_401: 이미 차단한 회원BLOCK_402: 차단하지 않은 회원BLOCK_404: 차단한 사용자 프로필 접근 예외BLOCK_405: 차단 당한 프로필 접근 예외BOOK_STORY_408: 차단 관계 내 책 이야기 좋아요 불가 예외COMMENT_405: 차단 관계 내 댓글/대댓글 작성 불가 예외2. API & Data 서비스 레이어 (
lib/api/endpoints/member.ts,services/memberService.ts)/api/members/{nickname}/block) 및 차단 조회 API(GET/api/members/me/blocks) 엔드포인트 연동.getBlockedList및blockMember,unblockMember서비스 추상화 구현.3. React Query 데이터 레이어 (
hooks/queries/useMemberQueries.ts,hooks/mutations/useMemberMutations.ts,hooks/mutations/useStoryMutations.ts)useBlockedUsersQuery훅 신규 구축.useBlockMemberMutation/useUnblockMemberMutation구현:memberKeys.blocks()) 연동.storyKeys.all)를 깜빡임 없이 즉시 만료(refetchType: 'none') 처리하여, 페이지 재접근 시 마스킹 상태가 자동 동기화되도록 조치.useToggleStoryLikeMutation의onError내에BOOK_STORY_408에러 코드가 검출될 시 적절한 토스트 에러 팝업을 표시하도록 분기 처리.4. UI/UX 연동 레이어
app/(main)/setting/block/page.tsx):useBlockedUsersQuery기반 무한 스크롤(Intersection Observer) 구현.useUnblockMemberMutation을 즉시 유기적으로 연동.ProfileUserInfo.tsx):handleBlockSubmitLogic내의 Mock 딜레이를 제거하고 실제 차단 Mutation 적용.BLOCK_404,BLOCK_405예외 발생 시 전용 마스킹 안내 UI로 치환 처리 및 PM/기획 변경 사항 대응을 위한 주석 마킹 추가.stories/[id]/page.tsx):BLOCK_404/BLOCK_405) 발생 시 전용 404 차단 마스킹 템플릿 제공.comment_section_bookcase.tsx,comment_list.tsx,comment_item.tsx):nickname === "차단된 사용자입니다")에 맞춰isBlocked판별자 도입.COMMENT_405에러 토스트 피드백 세부 처리.5. 토스트 노출 개선
showCustomToast트랙을 파악하여useReportBlockFlow.ts측 호출을 제거하고, Mutation의onSuccess1개 트랙으로 통합 정리하여 단일 토스트만 출력되도록 버그 수정.toast.success대신 기존의showCustomToast를 적용했으나, 배경색에 대한 스타일은 현재 프로젝트의 시그니처 톤 유지를 위해 기존 스타일 테두리(opacity및#8C7B70/80) 버전을 유지하도록 반영했습니다.📸 스크린샷 (Screenshots)
✅ 체크리스트 (Checklist)
pnpm build-> Exit code: 0)pnpm tsc --noEmit-> 검사 완료)Summary by CodeRabbit
New Features
UI/UX Improvements