Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
soyeong0115 merged 7 commits into from
Aug 3, 2026
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d7e243c
style: 서비스 전반 워딩 통일 (위시템→위시, 초대→공유)
Aug 3, 2026
41c9efb
test: 홈 토너먼트 목록 헤딩 워딩 변경에 맞게 E2E 테스트 수정
Aug 3, 2026
d29d317
style: 토스트 하단 offset 52px로 수정
Aug 3, 2026
d16338d
style: 404 페이지 디자인 적용
Aug 3, 2026
d830f50
style: 500 에러 페이지 디자인 적용
Aug 3, 2026
49c8bc2
fix: calc() 연산자 공백 추가
Aug 3, 2026
58cc0f9
Merge branch 'dev' into style/427-error-pages-design
soyeong0115 Aug 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 21 additions & 23 deletions apps/web/src/app/error.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import Link from 'next/link';
import { useEffect } from 'react';

import { WarningIconFill } from '@/assets/icons';
import { buttonStyles } from '@/components/button/button.style';
import { ROUTES } from '@/consts/route';

type Props = {
Expand All @@ -18,30 +19,27 @@ function Error({ error, reset }: Props) {
}, [error]);

return (
<div className="flex h-full flex-col items-center gap-6 bg-bg-layer-basement 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-bold text-text-neutral-secondary">오류가 발생했어요.</h1>
<p className="body-1-semibold text-text-neutral-tertiary">
일시적인 오류예요. 잠시 후 다시 시도해 주세요.
</p>
<div className="h-full bg-bg-layer-basement pt-padding-top">
<div className="flex flex-col items-center gap-[30px] pt-[calc(253px_-_env(safe-area-inset-top))]">
<div className="flex flex-col items-center gap-[25px]">
<WarningIconFill className="size-15 text-icon-warning" />
<div className="flex flex-col items-center gap-2">
<h1 className="heading-1-semibold text-text-neutral-primary">오류가 발생했어요</h1>
<p className="body-1-medium text-text-neutral-tertiary">잠시 후 다시 시도해 주세요</p>
</div>
</div>
<div className="flex gap-3">
<button
type="button"
onClick={reset}
className={buttonStyles({ variant: 'secondary', size: 'md' })}
>
다시 시도
</button>
<Link href={ROUTES.HOME} className={buttonStyles({ variant: 'primary', size: 'md' })}>
홈으로 가기
</Link>
</div>
</div>
<div className="flex gap-3">
<button
type="button"
onClick={reset}
className="inline-flex cursor-pointer items-center justify-center rounded-[12px] border-[1.2px] border-gray-200 bg-bg-layer-floating px-[18px] py-[10px] body-1-semibold text-text-neutral-primary"
>
다시 시도
</button>
<Link
href={ROUTES.HOME}
className="inline-flex cursor-pointer items-center justify-center rounded-[12px] border border-bg-neutral-primary bg-bg-neutral-primary px-[18px] py-[10px] body-1-semibold text-text-neutral-inverse"
>
홈으로 가기
</Link>
</div>
</div>
);
Expand Down
57 changes: 26 additions & 31 deletions apps/web/src/app/global-error.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import * as Sentry from '@sentry/nextjs';
import Link from 'next/link';
import { useEffect } from 'react';

import { WarningIconFill } from '@/assets/icons';
import { buttonStyles } from '@/components/button/button.style';
import { ROUTES } from '@/consts/route';
import '@/styles/globals.css';

Expand All @@ -12,44 +14,37 @@ type Props = {
reset: () => void;
};

// TODO: 임시 글로벌 에러 페이지 - 디자인 변경 필요
export default function GlobalError({ error, reset }: Props) {
useEffect(() => {
Sentry.captureException(error);
}, [error]);

return (
<html lang="ko" className="h-full bg-gray-100">
<body className="mx-auto my-0 h-full max-w-120 bg-white antialiased">
<div className="flex h-screen w-full flex-col items-center justify-center gap-8 px-5">
<div className="w-full max-w-[400px] text-center">
<p className="title-lg mb-2">예기치 못한 오류가 발생했습니다</p>
<p className="body-md text-secondary mb-6">페이지를 새로고침해주세요.</p>

<div className="mb-4 rounded-lg bg-gray-50 p-4 text-left">
{error.message && (
<div>
<span className="body-sm text-secondary font-medium">에러 메시지: </span>
<span className="body-sm text-gray-900">{error.message}</span>
</div>
)}
<html lang="ko" className="h-full">
<body className="mx-auto my-0 h-full max-w-120 antialiased">
<div className="h-full bg-bg-layer-basement pt-padding-top">
<div className="flex flex-col items-center gap-[30px] pt-[calc(253px_-_env(safe-area-inset-top))]">
<div className="flex flex-col items-center gap-[25px]">
<WarningIconFill className="size-15 text-icon-warning" />
<div className="flex flex-col items-center gap-2">
<h1 className="heading-1-semibold text-text-neutral-primary">오류가 발생했어요</h1>
<p className="body-1-medium text-text-neutral-tertiary">
잠시 후 다시 시도해 주세요
</p>
</div>
</div>
<div className="flex gap-3">
<button
type="button"
onClick={reset}
className={buttonStyles({ variant: 'secondary', size: 'md' })}
>
다시 시도
</button>
<Link href={ROUTES.HOME} className={buttonStyles({ variant: 'primary', size: 'md' })}>
홈으로 가기
</Link>
</div>
</div>

<div className="flex w-full max-w-[400px] gap-4">
<button
type="button"
onClick={reset}
className="body-lg flex-1 rounded-3xl bg-gray-900 py-3 text-center font-medium text-white"
>
다시 시도
</button>
<Link
href={ROUTES.HOME}
className="body-lg flex-1 rounded-3xl bg-gray-100 py-3 text-center font-medium text-gray-900"
>
홈으로
</Link>
</div>
</div>
</body>
Expand Down
30 changes: 15 additions & 15 deletions apps/web/src/app/not-found.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
import Link from 'next/link';

import { CloseCircularIconFill } from '@/assets/icons';
import BasketNotFoundIcon from '@/assets/images/basket-not-found.svg';
import { buttonStyles } from '@/components/button/button.style';
import { ROUTES } from '@/consts/route';

function NotFound() {
return (
<div className="flex h-full flex-col items-center gap-6 bg-bg-layer-basement pt-40">
<div className="flex flex-col items-center gap-4">
<CloseCircularIconFill className="size-20 text-icon-neutral-secondary" />
<div className="flex flex-col items-center gap-2">
<h1 className="heading-1-bold text-text-neutral-secondary">페이지를 찾을 수 없어요.</h1>
<p className="body-1-semibold text-text-neutral-tertiary">
링크가 잘못되었거나 삭제된 페이지예요.
</p>
<div className="h-full bg-bg-layer-basement pt-padding-top">
<div className="flex flex-col items-center gap-[30px] pt-[calc(253px_-_env(safe-area-inset-top))]">
<div className="flex flex-col items-center gap-[25px]">
<BasketNotFoundIcon className="size-15" aria-hidden />
<div className="flex flex-col items-center gap-2">
<h1 className="heading-1-semibold text-text-neutral-primary">페이지를 찾을 수 없어요</h1>
<p className="body-1-medium text-text-neutral-tertiary">
링크가 잘못되었거나 삭제된 페이지예요
</p>
</div>
</div>
<Link href={ROUTES.HOME} className={buttonStyles({ variant: 'primary', size: 'md' })}>
홈으로 가기
</Link>
</div>
<Link
href={ROUTES.HOME}
className="inline-flex items-center justify-center rounded-xl border-[1.2px] border-gray-200 bg-bg-layer-floating px-4.5 py-2.5 body-1-semibold text-text-neutral-primary"
>
홈으로 가기
</Link>
</div>
);
}
Expand Down
15 changes: 15 additions & 0 deletions apps/web/src/assets/images/basket-not-found.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 2 additions & 4 deletions apps/web/src/components/toast/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,10 @@ import { Toaster as Sonner, type ToasterProps } from 'sonner';
import { AlertIconFill, CheckCircledIconFill, WarningIconFill } from '@/assets/icons/fill';

/**
* 토스트 하단 offset 기본값 (하단 in-flow 버튼 영역 ~88px 기준).
* sonner의 `offset` prop은 데스크탑/모바일 둘 다 동일하게 적용되어,
* `mobileOffset`과 별개로 컨테이너 기본 위치를 제어한다.
* 토스트 하단 offset 기본값.
* Bottom Tab Bar 가 있는 페이지는 globals.css 의 `:has([data-bottom-tab-bar])` 규칙이 덮어쓴다.
*/
const TOAST_OFFSET = '95px';
const TOAST_OFFSET = '52px';

const Toaster = ({ ...props }: ToasterProps) => {
return (
Expand Down
Loading