Skip to content

fix: API 성능 개선 및 UI 버그 수정 - #103

Merged
evenif99 merged 7 commits into
devfrom
fix/api-performance-ja
Jun 22, 2026
Merged

fix: API 성능 개선 및 UI 버그 수정#103
evenif99 merged 7 commits into
devfrom
fix/api-performance-ja

Conversation

@juahcheon

@juahcheon juahcheon commented Jun 22, 2026

Copy link
Copy Markdown
Collaborator

Summary

  • getServerSessiongetRequestUserId(getToken) 전환으로 API 인증 처리 경량화 (16개 라우트)
  • 전역 TanStack Query retry: 0 설정으로 불필요한 재시도 제거
  • 판결 결과 에러 발생 시 에러 모달 표시
  • 마이페이지 프로필 이미지 변경 시 blob URL 누수 수정
  • privacy·terms 페이지 Server Component 전환 (BackButton 클라이언트 컴포넌트 분리)
  • 개발용 컨테이너 border 제거

Test plan

  • 로그인 후 API 호출 정상 동작 확인 (disputes, rooms, calendar, diary 등)
  • 판결 결과 없는 사건에서 에러 모달 표시 확인
  • 마이페이지에서 프로필 이미지 2회 이상 변경 시 콘솔 에러 없음 확인
  • /privacy, /terms 페이지 정상 렌더링 및 뒤로가기 동작 확인

🤖 Generated with Claude Code

Summary by CodeRabbit

릴리스 노트

  • 새로운 기능

    • 분쟁 판결 시 에러 메시지가 모달 대화상자로 표시됩니다.
  • 버그 수정

    • 판결 요청 후 페이지 전체 새로고침이 제거되어 더 부드러운 사용자 경험을 제공합니다.
  • 개선 사항

    • 뒤로가기 버튼이 일관된 디자인으로 통합되었습니다.
    • 쿼리 캐싱 동작이 최적화되었습니다.

juahcheon and others added 7 commits June 22, 2026 12:31
- useDispute: staleTime 30s 추가 — 페이지 이동 시 캐시 재사용
- useJudgment: staleTime 10m 추가 — 판결 결과 캐시 유지
- result route: DB 쿼리 3번 → 1번으로 통합
- runJudge: window.location.reload() → invalidateQueries 교체

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- blobUrlRef로 이전 blob URL 추적
- 두 번째 이미지 선택 시 이전 URL revokeObjectURL 처리
- 컴포넌트 언마운트 시 마지막 URL 해제

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- BackButton 공통 클라이언트 컴포넌트 분리 (router.back + MUI 아이콘)
- privacy/page.tsx, terms/page.tsx에서 'use client' 제거
- 정적 콘텐츠를 서버에서 렌더링하여 초기 로딩 개선

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@vercel

vercel Bot commented Jun 22, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
talky-owl Ready Ready Preview, Comment Jun 22, 2026 5:33am

@coderabbitai

coderabbitai Bot commented Jun 22, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

📝 Walkthrough

Walkthrough

모든 API 라우트의 사용자 인증 방식을 NextAuth 세션 조회에서 JWT 기반 getRequestUserId 헬퍼로 전환하고, 분쟁 판결 에러를 Modal로 표시하도록 변경합니다. BackButton 공통 컴포넌트를 추출하고, 프로필 이미지 blob URL 관리 및 React Query 설정을 개선합니다.

Changes

API 인증 방식 JWT 요청 기반 전환

Layer / File(s) Summary
getRequestUserId 헬퍼 추가
src/lib/auth/session.ts
NextRequest를 받아 getToken으로 JWT를 파싱하고 token.sub를 반환하는 비동기 getRequestUserId 함수를 추가합니다.
분쟁 API 라우트 인증 전환
src/app/api/disputes/route.ts, src/app/api/disputes/[id]/route.ts, src/app/api/disputes/[id]/judge/route.ts, src/app/api/disputes/[id]/result/route.ts, src/app/api/disputes/[id]/statements/...
분쟁 관련 모든 API 라우트에서 getSessionUserIdgetRequestUserId로 교체합니다. result 라우트는 추가로 단일 Prisma 쿼리에서 참여자 권한 확인과 aiJudgment 조회를 통합해 별도 조회 및 403 분기를 제거합니다.
방(Room) API 라우트 인증 전환
src/app/api/rooms/route.ts, src/app/api/rooms/[id]/route.ts, src/app/api/rooms/[id]/close/route.ts, src/app/api/rooms/[id]/invite/route.ts, src/app/api/rooms/join/[token]/route.ts
rooms 관련 모든 API 라우트에서 NextAuth 세션 기반 사용자 식별을 getRequestUserId로 교체합니다.
사용자/캘린더/다이어리 API 라우트 인증 전환
src/app/api/user/me/route.ts, src/app/api/user/me/profile-image/route.ts, src/app/api/calendar/route.ts, src/app/api/diary/route.ts
user, calendar, diary 라우트의 사용자 식별을 getRequestUserId로 교체하며, user/meGET·DELETE 핸들러는 request 파라미터를 함수 시그니처에 추가합니다.

프론트엔드 UX 개선

Layer / File(s) Summary
BackButton 컴포넌트 추출 및 적용
src/components/ui/BackButton.tsx, src/app/(page)/privacy/page.tsx, src/app/(page)/terms/page.tsx
useRouter와 MUI 아이콘을 감싼 BackButton 컴포넌트를 추가하고, privacy·terms 페이지의 직접 구현을 BackButton으로 교체하며 use client 선언을 제거합니다.
분쟁 판결 에러 모달 표시 및 쿼리 갱신
src/app/(page)/disputes/[id]/page.tsx, src/app/(page)/disputes/[id]/DisputePage.module.scss, src/components/ui/Modal.module.scss
useJudgment 에러 시 Modal로 메시지를 표시하는 상태와 useEffect를 추가하고, 판결 성공 시 window.location.reload() 대신 invalidateQueries를 사용합니다. 모달용 SCSS 클래스 및 border-radius 조정도 포함됩니다.
React Query staleTime 및 retry 설정
src/components/providers/QueryProvider.tsx, src/domains/dispute/dispute.hooks.ts, src/domains/judgement/judgement.hooks.ts
QueryClientretry: 0을 설정하고, useDispute에 30초, useJudgment에 10분 staleTime을 추가합니다.
프로필 이미지 blob URL 관리 개선
src/app/(page)/mypage/edit/page.tsx
blobUrlRef로 object URL을 별도 추적하고, 이미지 변경 시 이전 URL을 setTimeout으로 지연 해제하도록 변경합니다.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

  • I5-Project/TALKY-OWL#91: DisputePage에서 판결 완료 후 queryClient.invalidateQueries({ queryKey: disputeKeys.detail(id) })로 새로고침하는 동일한 로직 변경이 겹칩니다.
  • I5-Project/TALKY-OWL#96: DisputePage의 판결 완료 처리 및 window.location.reload() 제거 지점이 코드 레벨에서 직접 맞물립니다.
  • I5-Project/TALKY-OWL#57: src/components/ui/ModalModal.module.scss.paper 스타일(테두리/라운드)을 이 PR이 수정하므로 코드 레벨 연관이 있습니다.

Suggested reviewers

  • wjdalss21

Poem

🐇 세션 대신 JWT로 달려가네,
모달이 에러를 살포시 잡아주고,
BackButton 하나로 두 페이지가 깔끔,
blob URL도 setTimeout에 안겨 쉬어가고,
토끼는 오늘도 코드를 깔끔히 정리했네! 🌿

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 62.86% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
Description check ❓ Inconclusive PR 설명이 작업 내용과 테스트 계획을 요약으로 제공하지만, 저장소의 필수 템플릿 항목들(담당 작업 영역, 관련 Issue, 변경 사항, 보안 확인 체크리스트 등)이 누락되어 있습니다. 저장소의 PR 템플릿 형식에 맞춰 모든 필수 섹션(작업 내용, 담당 영역 체크, 관련 Issue, 변경 사항 상세, 테스트 결과 체크, 보안/개인정보 확인 항목)을 포함하도록 작성해주세요.
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed PR 제목이 변경 내용의 주요 부분(API 성능 개선 및 UI 버그 수정)을 명확하게 요약하고 있습니다.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ 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 fix/api-performance-ja

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

@coderabbitai coderabbitai Bot left a comment

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.

Actionable comments posted: 1

🧹 Nitpick comments (1)
src/app/api/diary/route.ts (1)

73-75: 🧹 Nitpick | 🔵 Trivial | ⚡ Quick win

에러 로깅에 console.error 사용 권장

다른 API 라우트들과 일관성을 위해 console.log 대신 console.error를 사용하세요.

♻️ 제안된 수정
   } catch (error) {
-    console.log(error);
+    console.error('[GET /api/diary] failed', error);
     return NextResponse.json<ApiResponse>(
🤖 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/api/diary/route.ts` around lines 73 - 75, In the catch block of the
diary API route handler, change the console.log call to console.error when
logging the error variable. This ensures consistency with how errors are logged
across other API routes in the codebase.
🤖 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/ui/BackButton.tsx`:
- Line 17: The aria-label attribute in the BackButton component uses "뒤로 가기"
(with space) but the existing Header back button uses "뒤로가기" (without space).
Change the aria-label value in the BackButton.tsx file from "뒤로 가기" to "뒤로가기" to
ensure consistency across the application for screen reader text and test
reliability.

---

Nitpick comments:
In `@src/app/api/diary/route.ts`:
- Around line 73-75: In the catch block of the diary API route handler, change
the console.log call to console.error when logging the error variable. This
ensures consistency with how errors are logged across other API routes in the
codebase.
🪄 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: Repository UI (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro Plus

Run ID: 8ff33021-3d73-4195-b136-2d8252e8a50c

📥 Commits

Reviewing files that changed from the base of the PR and between 35e3b81 and 8653bf0.

📒 Files selected for processing (27)
  • src/app/(page)/disputes/[id]/DisputePage.module.scss
  • src/app/(page)/disputes/[id]/page.tsx
  • src/app/(page)/mypage/edit/page.tsx
  • src/app/(page)/privacy/page.tsx
  • src/app/(page)/terms/page.tsx
  • src/app/api/calendar/route.ts
  • src/app/api/diary/route.ts
  • src/app/api/disputes/[id]/judge/route.ts
  • src/app/api/disputes/[id]/result/route.ts
  • src/app/api/disputes/[id]/route.ts
  • src/app/api/disputes/[id]/statements/route.ts
  • src/app/api/disputes/[id]/statements/submit/route.ts
  • src/app/api/disputes/[id]/status/route.ts
  • src/app/api/disputes/route.ts
  • src/app/api/rooms/[id]/close/route.ts
  • src/app/api/rooms/[id]/invite/route.ts
  • src/app/api/rooms/[id]/route.ts
  • src/app/api/rooms/join/[token]/route.ts
  • src/app/api/rooms/route.ts
  • src/app/api/user/me/profile-image/route.ts
  • src/app/api/user/me/route.ts
  • src/components/providers/QueryProvider.tsx
  • src/components/ui/BackButton.tsx
  • src/components/ui/Modal.module.scss
  • src/domains/dispute/dispute.hooks.ts
  • src/domains/judgement/judgement.hooks.ts
  • src/lib/auth/session.ts

type="button"
className={className}
onClick={() => router.back()}
aria-label="뒤로 가기"

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.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

접근성 라벨 문구를 기존 뒤로가기 버튼과 통일하세요.

Line 17의 aria-label"뒤로 가기"인데, 기존 Header 버튼은 "뒤로가기"를 사용합니다. 스크린리더 문구/라벨 기반 테스트 일관성을 위해 동일한 문구로 맞추는 것이 안전합니다.

🔧 제안 변경
-      aria-label="뒤로 가기"
+      aria-label="뒤로가기"
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
aria-label="뒤로 가기"
aria-label="뒤로가기"
🤖 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/ui/BackButton.tsx` at line 17, The aria-label attribute in the
BackButton component uses "뒤로 가기" (with space) but the existing Header back
button uses "뒤로가기" (without space). Change the aria-label value in the
BackButton.tsx file from "뒤로 가기" to "뒤로가기" to ensure consistency across the
application for screen reader text and test reliability.

@evenif99 evenif99 self-assigned this Jun 22, 2026
@juahcheon

Copy link
Copy Markdown
Collaborator Author

@evenif99 머지 부탁드립니다

@evenif99 evenif99 assigned juahcheon and unassigned evenif99 Jun 22, 2026
@evenif99

evenif99 commented Jun 22, 2026

Copy link
Copy Markdown
Collaborator

@evenif99 머지 부탁드립니다

@juahcheon 확인했슴다

@evenif99
evenif99 merged commit 6d1c4a6 into dev Jun 22, 2026
3 checks passed
@evenif99
evenif99 deleted the fix/api-performance-ja branch June 22, 2026 05:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants