Skip to content

style: 에러/404/500 페이지 디자인 적용 및 토스트 하단 위치 수정 - #428

Merged
soyeong0115 merged 7 commits into
devfrom
style/427-error-pages-design
Aug 3, 2026
Merged

style: 에러/404/500 페이지 디자인 적용 및 토스트 하단 위치 수정#428
soyeong0115 merged 7 commits into
devfrom
style/427-error-pages-design

Conversation

@soyeong0115

@soyeong0115 soyeong0115 commented Aug 3, 2026

Copy link
Copy Markdown
Contributor

작업 요약

  • 에러/404/500 페이지 디자인 적용 및 토스트 하단 위치 수정

작업 세부 내용

  • 404 페이지: 아이콘 교체(basket-not-found.svg), 타이포그래피·간격·버튼 스타일 디자인 반영
  • 500 에러 페이지(error.tsx, global-error.tsx): 아이콘 색상, 텍스트, 버튼 스타일 디자인 반영
  • 에러 페이지 공통: safe area 기반 상단 위치 조정(253px - env(safe-area-inset-top))
  • 토스트 하단 offset 52px로 수정

스크린샷

스크린샷 2026-08-03 오후 11 52 37

연관 이슈

closes #427

Summary by CodeRabbit

  • 새로운 기능

    • 오류 및 404 화면의 안내 레이아웃과 버튼 스타일을 개선했습니다.
    • 토스트 메시지의 기본 표시 위치를 조정했습니다.
  • 개선 사항

    • 토너먼트·위시 관련 문구를 더 간결하고 일관되게 변경했습니다.
    • 토너먼트 생성·참여 화면의 입력 안내 문구를 업데이트했습니다.
    • 입력 필드 placeholder 색상과 비활성 상태 표시를 개선했습니다.
  • 테스트

    • 최근 토너먼트 목록 제목 변경에 맞춰 홈 화면 테스트를 업데이트했습니다.

@soyeong0115 soyeong0115 self-assigned this Aug 3, 2026
@vercel

vercel Bot commented Aug 3, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
piki Ready Ready Preview Aug 3, 2026 3:13pm

@github-actions

github-actions Bot commented Aug 3, 2026

Copy link
Copy Markdown

Discord 스레드 연동용 메타데이터입니다. discord-pr-bot 워크플로가 자동 생성하며, 수정·삭제하면 PR 과 Discord 알림 연동이 끊깁니다.

@github-actions github-actions Bot added the WEB label Aug 3, 2026
@github-actions
github-actions Bot requested a review from iOdiO89 August 3, 2026 14:55
@coderabbitai

coderabbitai Bot commented Aug 3, 2026

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

@soyeong0115, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 43 minutes

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 08dccd46-9905-473e-a5c9-a186653ab093

📥 Commits

Reviewing files that changed from the base of the PR and between d830f50 and 58cc0f9.

📒 Files selected for processing (3)
  • apps/web/src/app/error.tsx
  • apps/web/src/app/global-error.tsx
  • apps/web/src/app/not-found.tsx
📝 Walkthrough

Walkthrough

오류 및 404 페이지에 새 디자인과 공통 버튼 스타일을 적용했습니다. 토스트 위치와 입력 placeholder 색상을 변경했습니다. 위시와 토너먼트 관련 사용자-facing 문구, 입력 placeholder, E2E 검증 문자열을 정비했습니다.

Changes

UI 스타일 및 문구 정비

Layer / File(s) Summary
오류 화면 및 공통 UI 스타일
apps/web/src/app/error.tsx, apps/web/src/app/global-error.tsx, apps/web/src/app/not-found.tsx, apps/web/src/components/input/index.tsx, apps/web/src/components/toast/index.tsx
404 및 오류 화면에 아이콘과 공통 버튼 스타일을 적용했습니다. 토스트 기본 하단 offset을 52px로 변경하고 placeholder 색상을 갱신했습니다.
위시 용어 정비
apps/web/src/app/archive/wish/..., apps/web/src/app/mypage/withdraw/page.tsx, apps/web/src/app/tournament/[id]/item/[itemId]/_components/EditContent.tsx, apps/web/src/components/get-item-dialog/index.tsx
화면 제목과 안내 문구의 “위시템” 표현을 “위시”로 변경했습니다.
토너먼트 문구 및 입력 UI
apps/web/e2e/specs/home/home.spec.ts, apps/web/src/app/home/_components/..., apps/web/src/app/tournament/join/[id]/_components/JoinPreviewClient.tsx, apps/web/src/components/common/create-tournament-dialog/index.tsx
토너먼트 제목과 참여 문구를 변경했습니다. 생성 및 초대 다이얼로그의 placeholder와 편집 아이콘 표시를 갱신했습니다. E2E heading 검증 문자열도 변경했습니다.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Possibly related PRs

  • TeamPiKi/client#426: 동일한 서비스 전반의 문구 변경과 겹칩니다.
  • TeamPiKi/client#411: CreateTournamentDialog.tsx의 placeholder 및 편집 아이콘 변경과 직접 연결됩니다.
  • TeamPiKi/client#413: 토너먼트 다이얼로그와 탈퇴 안내 화면의 문구 변경이 겹칩니다.

Suggested labels: fix

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name Status Explanation Resolution
Out of Scope Changes check ⚠️ Warning 위시·토너먼트 문구, 다이얼로그 placeholder, 입력 placeholder 색상 변경은 연결 이슈의 범위를 벗어납니다. 연결 이슈와 무관한 문구, placeholder, 입력 스타일 변경을 별도 pull request로 분리하거나 관련 이슈를 추가하세요.
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed 제목이 404·500 에러 페이지 디자인과 토스트 위치 수정이라는 주요 변경 사항을 정확하게 설명합니다.
Linked Issues check ✅ Passed 404·500 페이지 디자인과 토스트 offset 52px 변경 요구사항을 모두 구현한 것으로 확인됩니다.
✨ Finishing Touches 💡 1
📝 Generate docstrings 💡
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch style/427-error-pages-design

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.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

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)
apps/web/src/app/error.tsx (1)

22-23: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick win

오류 화면의 주 콘텐츠 컨테이너를 <main>으로 변경하세요.

현재 화면에는 주 콘텐츠 랜드마크가 없습니다. 각 화면의 최상위 콘텐츠 컨테이너를 <main>으로 변경하세요.

  • apps/web/src/app/error.tsx#L22-L23: 최상위 콘텐츠 div<main>으로 변경하세요.
  • apps/web/src/app/global-error.tsx#L25-L26: body 내부의 최상위 콘텐츠 div<main>으로 변경하세요.
  • apps/web/src/app/not-found.tsx#L9-L10: 최상위 콘텐츠 div<main>으로 변경하세요.

As per coding guidelines, “컨테이너에는 semantic tag인 <main>을 사용하고 제목에는 <h1> 또는 <h2>를 사용한다.”

🤖 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 22 - 23, Replace the top-level
content container div with main in apps/web/src/app/error.tsx lines 22-23,
apps/web/src/app/global-error.tsx lines 25-26, and
apps/web/src/app/not-found.tsx lines 9-10, preserving the existing classes and
contents.

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 23: Update the calc() padding-top expressions to include spaces around
the subtraction operator so they are valid CSS: change the affected classes in
apps/web/src/app/error.tsx at lines 23-23, apps/web/src/app/global-error.tsx at
lines 26-26, and apps/web/src/app/not-found.tsx at lines 10-10.

---

Nitpick comments:
In `@apps/web/src/app/error.tsx`:
- Around line 22-23: Replace the top-level content container div with main in
apps/web/src/app/error.tsx lines 22-23, apps/web/src/app/global-error.tsx lines
25-26, and apps/web/src/app/not-found.tsx lines 9-10, preserving the existing
classes and contents.
🪄 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

Review profile: CHILL

Plan: Pro Plus

Run ID: 514d4e45-65a4-412e-9827-107f8cf7df69

📥 Commits

Reviewing files that changed from the base of the PR and between a9f8ab0 and d830f50.

⛔ Files ignored due to path filters (1)
  • apps/web/src/assets/images/basket-not-found.svg is excluded by !**/*.svg
📒 Files selected for processing (16)
  • apps/web/e2e/specs/home/home.spec.ts
  • apps/web/src/app/archive/wish/[id]/_components/EditContent.tsx
  • apps/web/src/app/archive/wish/_components/WishGridContent.tsx
  • apps/web/src/app/error.tsx
  • apps/web/src/app/global-error.tsx
  • apps/web/src/app/home/_components/CreateTournamentDialog.tsx
  • apps/web/src/app/home/_components/InviteTournamentDialog.tsx
  • apps/web/src/app/home/_components/tournament-list/index.tsx
  • apps/web/src/app/mypage/withdraw/page.tsx
  • apps/web/src/app/not-found.tsx
  • apps/web/src/app/tournament/[id]/item/[itemId]/_components/EditContent.tsx
  • apps/web/src/app/tournament/join/[id]/_components/JoinPreviewClient.tsx
  • apps/web/src/components/common/create-tournament-dialog/index.tsx
  • apps/web/src/components/get-item-dialog/index.tsx
  • apps/web/src/components/input/index.tsx
  • apps/web/src/components/toast/index.tsx

Comment thread apps/web/src/app/error.tsx Outdated
@soyeong0115
soyeong0115 merged commit 035f8bb into dev Aug 3, 2026
7 checks passed
@soyeong0115
soyeong0115 deleted the style/427-error-pages-design branch August 3, 2026 15:14
iOdiO89 pushed a commit that referenced this pull request Aug 4, 2026
* style: 서비스 전반 워딩 통일 (위시템→위시, 초대→공유)

* test: 홈 토너먼트 목록 헤딩 워딩 변경에 맞게 E2E 테스트 수정

* style: 토스트 하단 offset 52px로 수정

* style: 404 페이지 디자인 적용

* style: 500 에러 페이지 디자인 적용

* fix: calc() 연산자 공백 추가

---------

Co-authored-by: soyeong <mb535622@sookmyung.ac.kr>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

style: 에러/404/500 페이지 디자인 적용 및 토스트 하단 위치 수정

1 participant