feat: 에러 상황별 UI 및 토스트 처리 구현#225
Conversation
soyeong0115
added
fix
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Review limit reached
More reviews will be available in 45 minutes and 9 seconds. Learn how PR review limits work. Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file). ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
Walkthrough세션 만료 및 소셜 로그인 실패 시 sessionStorage 플래그를 기록한 뒤 로그인 페이지로 이동하고, LoginButtons 마운트 시 해당 플래그를 읽어 toast 알림을 표시하는 패턴이 도입됩니다. error.tsx UI가 단순화되고 not-found.tsx가 신규 추가되며, 관련 디자인 토큰과 SSE 조건도 조정됩니다. Changes에러 상황별 UI 및 토스트 처리
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Suggested reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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 |
|
No description provided. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
apps/web/src/app/not-found.tsx (1)
8-8: ⚡ Quick win404 페이지도
<main>컨테이너 + 모바일 폭 패턴으로 맞춰 주세요.현재 최상위가
<div>이고w-full + px-5패턴이 없어 공통 UI 가이드와 불일치합니다.제안 diff
- <div className="flex h-full flex-col items-center bg-bg-layer-basement pt-40 gap-6"> + <main className="flex h-full w-full flex-col items-center gap-6 bg-bg-layer-basement px-5 pt-40"> @@ - </div> + </main>As per coding guidelines,
apps/web/src/**/*.tsx:Use semantic HTML tags: <main> for containers및Avoid fixed width; use w-full + px-5 pattern for mobile, and max-w-* for upper limits.🤖 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 `@apps/web/src/app/not-found.tsx` at line 8, The 404 page component uses a `<div>` as the top-level container instead of the semantic `<main>` tag, and it lacks the standard mobile width pattern used throughout the codebase. Replace the outermost `<div>` with a `<main>` element and add the responsive width classes pattern: include w-full for full width and px-5 for mobile padding, plus an appropriate max-w-* class for desktop width constraints. This will align the not-found page with the common UI guidelines and the pattern used in other pages in the apps/web/src directory.Source: Coding guidelines
apps/web/src/app/error.tsx (1)
15-16: ⚡ Quick win최상위 컨테이너를
<main>으로 바꾸고 모바일 폭 패턴을 적용해 주세요.현재 랜드마크 태그와
w-full + px-5 (+ max-w-*)패턴이 빠져 있어 접근성/반응형 가이드와 어긋납니다.제안 diff
- <div className="flex h-full flex-col items-center gap-6 bg-bg-layer-basement pt-40"> + <main className="flex h-full w-full flex-col items-center gap-6 bg-bg-layer-basement px-5 pt-40"> <div className="flex flex-col items-center gap-4"> <WarningIconFill className="size-20 text-icon-error" /> <div className="flex flex-col items-center gap-2"> <h1 className="heading-1 text-text-neutral-secondary">오류가 발생했어요.</h1> @@ - </div> + </main>As per coding guidelines,
apps/web/src/**/*.tsx:Use semantic HTML tags: <main> for containers및Avoid fixed width; use w-full + px-5 pattern for mobile, and max-w-* for upper limits.🤖 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 `@apps/web/src/app/error.tsx` around lines 15 - 16, Replace the outermost div container element with a semantic main tag to improve accessibility. Update the className of this main container to include the mobile-first responsive width pattern by adding w-full and px-5 classes for mobile padding and full-width behavior, along with an appropriate max-width constraint class (such as max-w-*) to limit the width on larger screens. This ensures compliance with the coding guidelines for semantic HTML tags and responsive design patterns used throughout the codebase.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 `@apps/web/src/app/error.tsx`:
- Line 21: The error message text in the error.tsx file contains a Korean
grammar error. Locate the error message string that reads "일시적인 오류에요. 잠시 후 다시
시도해 주세요." and change the word "오류에요" to "오류예요" to correct the Korean grammar and
match the target user-facing text standard.
---
Nitpick comments:
In `@apps/web/src/app/error.tsx`:
- Around line 15-16: Replace the outermost div container element with a semantic
main tag to improve accessibility. Update the className of this main container
to include the mobile-first responsive width pattern by adding w-full and px-5
classes for mobile padding and full-width behavior, along with an appropriate
max-width constraint class (such as max-w-*) to limit the width on larger
screens. This ensures compliance with the coding guidelines for semantic HTML
tags and responsive design patterns used throughout the codebase.
In `@apps/web/src/app/not-found.tsx`:
- Line 8: The 404 page component uses a `<div>` as the top-level container
instead of the semantic `<main>` tag, and it lacks the standard mobile width
pattern used throughout the codebase. Replace the outermost `<div>` with a
`<main>` element and add the responsive width classes pattern: include w-full
for full width and px-5 for mobile padding, plus an appropriate max-w-* class
for desktop width constraints. This will align the not-found page with the
common UI guidelines and the pattern used in other pages in the apps/web/src
directory.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 77e855e9-809f-420a-9e8c-c3c14a61f96f
📒 Files selected for processing (10)
apps/web/src/apis/client.tsapps/web/src/app/auth/callback/[provider]/_hooks/usePostSocialLogin.tsapps/web/src/app/error.tsxapps/web/src/app/login/_components/LoginButtons.tsxapps/web/src/app/mypage/_hooks/usePostLogout.tsapps/web/src/app/not-found.tsxapps/web/src/components/notification-sse-provider/index.tsxapps/web/src/components/toast/index.tsxapps/web/src/hooks/useNativeLoginResult.tsapps/web/src/styles/globals.css
1 participant
작업 요약
작업 세부 내용
404 페이지 (
app/not-found.tsx신규)not-found.tsx생성 — 존재하지 않는 경로 접근 시 자동 렌더링500 페이지 (
app/error.tsx교체)reset()) + "홈으로 가기" 버튼 구성globals.css에--color-bg-layer-floating,--color-icon-errorCSS 변수 추가세션 만료 토스트 (401)
client.ts— 401 응답 시 refresh 시도, refresh도 실패하면sessionStorage.setItem('piki_session_expired', '1')설정 후/login으로 hard redirectLoginButtons.tsx— 마운트 시 sessionStorage 플래그를 읽어"로그인 정보가 만료됐어요. 다시 로그인해 주세요."토스트 표시setTimeout+ cleanup 패턴으로 수정소셜 로그인 실패 토스트
usePostSocialLogin.tsonError— sessionStorage에piki_social_login_error = 1설정 후router.replace로 로그인 페이지 이동 →LoginButtons에서 토스트 표시useNativeLoginResult.ts—SOCIAL_LOGIN_ERROR메시지 수신 시toast.error()직접 호출 (client-side navigation이라 toast 유지됨)"요청을 처리하지 못했어요. 다시 시도해 주세요."동일 메시지,toast.error통일로그아웃 버그 수정 (
usePostLogout.ts)ROUTES.ROOT(/) 이동 → 미들웨어 없어서 이후 MEMBER_AND_GUEST 라우트 접근 시 자동 게스트 로그인 발생ROUTES.LOGIN으로 직접 이동 (PUBLIC 라우트라 미들웨어 자동 게스트 생성 없음)piki_session_expired,piki_social_login_error) — 로그인 페이지 진입 시 false positive 토스트 방지기타 버그 수정
notification-sse-provider:getRouteType(pathname) !== 'PUBLIC'→!!routeType && routeType !== 'PUBLIC'— 404 페이지(null반환)에서getMe불필요하게 호출되던 버그 수정--normal-bgGray-500 → Gray-700 (피그마 디자인 기준)작동 확인 방법
/asdfjkl)error.tsxUI 직접 확인 (컴포넌트에서 throw 후 확인)access_token+refresh_token삭제 → 클라이언트 API 호출 트리거 → 로그인 페이지에서 토스트 확인sessionStorage.setItem('piki_social_login_error', '1')입력 →/login이동/login으로 이동하는지 확인스크린샷
연관 이슈
closes #224
Summary by CodeRabbit
릴리스 노트
새로운 기능
개선 사항
스타일