diff --git a/apps/web/src/app/error.tsx b/apps/web/src/app/error.tsx index 329e90e4..519de9b8 100644 --- a/apps/web/src/app/error.tsx +++ b/apps/web/src/app/error.tsx @@ -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 = { @@ -18,30 +19,27 @@ function Error({ error, reset }: Props) { }, [error]); return ( -
-
- -
-

오류가 발생했어요.

-

- 일시적인 오류예요. 잠시 후 다시 시도해 주세요. -

+
+
+
+ +
+

오류가 발생했어요

+

잠시 후 다시 시도해 주세요

+
+
+
+ + + 홈으로 가기 +
-
-
- - - 홈으로 가기 -
); diff --git a/apps/web/src/app/global-error.tsx b/apps/web/src/app/global-error.tsx index c95a6178..b2dd8e52 100644 --- a/apps/web/src/app/global-error.tsx +++ b/apps/web/src/app/global-error.tsx @@ -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'; @@ -12,44 +14,37 @@ type Props = { reset: () => void; }; -// TODO: 임시 글로벌 에러 페이지 - 디자인 변경 필요 export default function GlobalError({ error, reset }: Props) { useEffect(() => { Sentry.captureException(error); }, [error]); return ( - - -
-
-

예기치 못한 오류가 발생했습니다

-

페이지를 새로고침해주세요.

- -
- {error.message && ( -
- 에러 메시지: - {error.message} -
- )} + + +
+
+
+ +
+

오류가 발생했어요

+

+ 잠시 후 다시 시도해 주세요 +

+
+
+
+ + + 홈으로 가기 +
-
- -
- - - 홈으로 -
diff --git a/apps/web/src/app/not-found.tsx b/apps/web/src/app/not-found.tsx index 25fa51f0..8c36ea6d 100644 --- a/apps/web/src/app/not-found.tsx +++ b/apps/web/src/app/not-found.tsx @@ -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 ( -
-
- -
-

페이지를 찾을 수 없어요.

-

- 링크가 잘못되었거나 삭제된 페이지예요. -

+
+
+
+ +
+

페이지를 찾을 수 없어요

+

+ 링크가 잘못되었거나 삭제된 페이지예요 +

+
+ + 홈으로 가기 +
- - 홈으로 가기 -
); } diff --git a/apps/web/src/assets/images/basket-not-found.svg b/apps/web/src/assets/images/basket-not-found.svg new file mode 100644 index 00000000..5889c948 --- /dev/null +++ b/apps/web/src/assets/images/basket-not-found.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/apps/web/src/components/toast/index.tsx b/apps/web/src/components/toast/index.tsx index da6b2d95..1dbfca60 100644 --- a/apps/web/src/components/toast/index.tsx +++ b/apps/web/src/components/toast/index.tsx @@ -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 (