fix: bottom app bar shadow

src/app/GlobalErrorBoundary.tsx

@@ -1,4 +1,8 @@
-import { ErrorBoundary } from 'react-error-boundary';
+import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
+import { useNavigate } from 'react-router-dom';
+import { PageWrapper } from '@/common/components/layout';
+import { Button } from '@/common/components/ui/buttons';
+import { ReactComponent as ErrorPageLogo } from './error-logo.svg';
 
 export function GlobalErrorBoundary({
   children,
@@ -7,10 +11,48 @@ export function GlobalErrorBoundary({
 }) {
   return (
     <ErrorBoundary
-      fallback={<h1>error!!</h1>}
-      onError={(error) => console.log(error)}
+      FallbackComponent={ErrorPage}
+      onError={(error) => console.error(error)}
     >
       {children}
     </ErrorBoundary>
   );
 }
+
+function ErrorPage({ resetErrorBoundary }: FallbackProps) {
+  const navigate = useNavigate();
+
+  const handleRefresh = () => {
+    resetErrorBoundary();
+  };
+
+  const handleGoHome = () => {
+    navigate('/');
+    resetErrorBoundary();
+  };
+
+  return (
+    <PageWrapper className={'relative top-[25%]'}>
+      <ErrorPageLogo className={'mx-auto'} />
+      <div className={'mx-auto mt-[2.5rem] space-y-[0.9rem] text-center'}>
+        <h1 className={'font-custom-heading1'}>에러가 발생하였어요!</h1>
+        <p className={'text-text-explain-500 font-system-body3'}>
+          예상치 못한 오류로 이 서비스와 연결할 수 없습니다.
+        </p>
+      </div>
+      <div className={'mt-[2.5rem] flex space-x-[1rem] px-[4.2rem]'}>
+        <Button
+          className={
+            'border border-background-dividerLine-300 bg-transparent text-text-explain-500 font-system-body3 hover:bg-white active:bg-white'
+          }
+          onClick={handleRefresh}
+        >
+          새로고침
+        </Button>
+        <Button className={'font-system-body3'} onClick={handleGoHome}>
+          메인 홈으로 이동
+        </Button>
+      </div>
+    </PageWrapper>
+  );
+}

src/common/components/layout/BottomAppBar/BottomAppBar.tsx

@@ -37,7 +37,7 @@ export function BottomAppBar({ onScrollToTop }: BottomAppBarProps) {
       <img
         src={backgroundImage}
         alt="background"
-        className="mx-auto w-full shadow-dock"
+        className="shadow-dock mx-auto w-full"
       />
       <div className="absolute -top-[0.6rem] flex w-full items-end justify-evenly">
         <button onClick={handleHomeIconClick}>

src/common/components/layout/PageWrapper/PageWrapper.tsx

@@ -1,3 +1,12 @@
-export function PageWrapper({ children }: { children: React.ReactNode }) {
-  return <div className={'flex h-full flex-col'}>{children}</div>;
+import { twMerge } from 'tailwind-merge';
+
+interface PageWrapperProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function PageWrapper({ children, className }: PageWrapperProps) {
+  return (
+    <div className={twMerge('flex h-full flex-col', className)}>{children}</div>
+  );
 }

src/features/user/components/UserProfile/UserProfile.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { twJoin } from 'tailwind-merge';
 import adminProfile from '@/common/assets/images/admin-profile.png';
 
@@ -16,6 +17,13 @@ export function UserProfile({
   isAdmin,
   size = 'base',
 }: UserProfileProps) {
+  // 에러 발생 이스터에그
+  const [clickCount, setClickCount] = useState(0);
+
+  if (clickCount === 10) {
+    throw new Error('에러 발생!');
+  }
+
   const ageRange = Math.floor(age / 10) * 10;
   const isOverMaxRange = ageRange > MAX_AGE_RANGE;
 
@@ -37,6 +45,7 @@ export function UserProfile({
         />
       ) : (
         <span
+          onClick={() => setClickCount(clickCount + 1)}
           className={twJoin(
             'flex items-center justify-center rounded-full bg-[#f4f4f5] font-bold text-[#b0b2b8]',
             size === 'base'

src/styles/global.css

@@ -47,6 +47,11 @@ input[type='number'] {
   display: none;
 }
 
+.shadow-dock {
+  -webkit-filter: drop-shadow(0 -4px 16px rgba(34, 34, 34, 0.12));
+  filter: drop-shadow(0 -4px 16px rgba(34, 34, 34, 0.12));
+}
+
 @supports (-webkit-backdrop-filter: none) {
   .header-blur {
     -webkit-backdrop-filter: blur(8px);

tailwind.config.js

@@ -16,7 +16,6 @@ export default {
         feed: '0 8px 20px 0 rgba(34, 34, 34, 0.10)',
         header: '0 0.33000001311302185px 0 0 rgba(34, 34, 34, 0.30)',
         dropdown: '0 4px 16px 0 rgba(42, 45, 55, 0.12)',
-        dock: '0 -4px 16px rgba(34, 34, 34, 0.12)',
       },
       fontFamily: {
         pretendard: ['Pretendard', ...fontFamily.sans],