Merge pull request #60 from dib3474/feature/error-page

Author: skybluesharkk

package-lock.json

@@ -24,6 +24,7 @@
     "react-dom": "^19.1.1",
     "react-error-boundary": "^6.0.0",
     "react-router-dom": "^7.8.2",
+    "react-toastify": "^11.0.5",
     "sockjs-client": "^1.6.1"
   },
   "devDependencies": {

package.json

@@ -4,17 +4,25 @@ import { QueryClientProvider } from '@tanstack/react-query';
 import { queryClient } from '@/utils/queryClient';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { AuthProvider } from '@/context/AuthContext';
+import { ToastContainer } from 'react-toastify';
+import { ErrorBoundary } from 'react-error-boundary';
+import ErrorComponent from './components/common/ErrorComponent';
 
 const App = () => {
   return (
-    <QueryClientProvider client={queryClient}>
-      <AuthProvider>
-        <BrowserRouter>
-          <Routes />
-        </BrowserRouter>
-      </AuthProvider>
-      {import.meta.env.VITE_ENABLE_RQ_DEVTOOLS === 'true' && <ReactQueryDevtools />}
-    </QueryClientProvider>
+    <ErrorBoundary
+      FallbackComponent={() => <ErrorComponent isGlobal={true} showBackButton={false} />}
+    >
+      <QueryClientProvider client={queryClient}>
+        <AuthProvider>
+          <BrowserRouter>
+            <Routes />
+          </BrowserRouter>
+        </AuthProvider>
+        <ToastContainer />
+        {import.meta.env.VITE_ENABLE_RQ_DEVTOOLS === 'true' && <ReactQueryDevtools />}
+      </QueryClientProvider>
+    </ErrorBoundary>
   );
 };
 

public/lost404.svg

@@ -2,7 +2,7 @@
 
 exports[`Button 컴포넌트 > 스냅샷 테스트 > disabled Button 스냅샷 1`] = `
 <button
-  class="flex items-center justify-center w-fit cursor-not-allowed bg-primary-300 text-gray-50 text-md rounded-xl px-5 py-3 undefined opacity-50"
+  class="flex items-center justify-center hover:opacity-90 transition-opacity duration-100 w-fit cursor-not-allowed bg-primary-300 text-gray-50 active:bg-primary-400 text-md rounded-xl px-5 py-3 undefined opacity-50"
   disabled=""
   type="button"
 >
@@ -12,7 +12,7 @@ exports[`Button 컴포넌트 > 스냅샷 테스트 > disabled Button 스냅샷 1
 
 exports[`Button 컴포넌트 > 스냅샷 테스트 > fullWidth Button 스냅샷 1`] = `
 <button
-  class="flex items-center justify-center w-full cursor-pointer bg-primary-300 text-gray-50 text-md rounded-xl px-5 py-3 undefined "
+  class="flex items-center justify-center hover:opacity-90 transition-opacity duration-100 w-full cursor-pointer bg-primary-300 text-gray-50 active:bg-primary-400 text-md rounded-xl px-5 py-3 undefined "
   type="button"
 >
   전체 너비 버튼
@@ -21,7 +21,7 @@ exports[`Button 컴포넌트 > 스냅샷 테스트 > fullWidth Button 스냅샷
 
 exports[`Button 컴포넌트 > 스냅샷 테스트 > icon variant 스냅샷 1`] = `
 <button
-  class="flex items-center justify-center w-fit cursor-pointer bg-transparent text-gray-900 text-md rounded-xl px-5 py-3 undefined "
+  class="flex items-center justify-center hover:opacity-90 transition-opacity duration-100 w-fit cursor-pointer bg-transparent text-gray-900 text-md rounded-xl px-5 py-3 undefined "
   type="button"
 >
   아이콘 버튼
@@ -30,7 +30,7 @@ exports[`Button 컴포넌트 > 스냅샷 테스트 > icon variant 스냅샷 1`]
 
 exports[`Button 컴포넌트 > 스냅샷 테스트 > lg size 스냅샷 1`] = `
 <button
-  class="flex items-center justify-center w-fit cursor-pointer bg-primary-300 text-gray-50 text-lg rounded-2xl px-6 py-4 undefined "
+  class="flex items-center justify-center hover:opacity-90 transition-opacity duration-100 w-fit cursor-pointer bg-primary-300 text-gray-50 active:bg-primary-400 text-lg rounded-2xl px-6 py-4 undefined "
   type="button"
 >
   큰 버튼
@@ -39,7 +39,7 @@ exports[`Button 컴포넌트 > 스냅샷 테스트 > lg size 스냅샷 1`] = `
 
 exports[`Button 컴포넌트 > 스냅샷 테스트 > link variant 스냅샷 1`] = `
 <button
-  class="flex items-center justify-center w-fit cursor-pointer bg-transparent text-gray-400 text-sm !p-0 !rounded-none text-md rounded-xl px-5 py-3 undefined "
+  class="flex items-center justify-center hover:opacity-90 transition-opacity duration-100 w-fit cursor-pointer bg-transparent text-gray-400 text-sm !p-0 !rounded-none text-md rounded-xl px-5 py-3 undefined "
   type="button"
 >
   링크 버튼
@@ -48,7 +48,7 @@ exports[`Button 컴포넌트 > 스냅샷 테스트 > link variant 스냅샷 1`]
 
 exports[`Button 컴포넌트 > 스냅샷 테스트 > md size 스냅샷 1`] = `
 <button
-  class="flex items-center justify-center w-fit cursor-pointer bg-primary-300 text-gray-50 text-md rounded-xl px-5 py-3 undefined "
+  class="flex items-center justify-center hover:opacity-90 transition-opacity duration-100 w-fit cursor-pointer bg-primary-300 text-gray-50 active:bg-primary-400 text-md rounded-xl px-5 py-3 undefined "
   type="button"
 >
   중간 버튼
@@ -57,7 +57,7 @@ exports[`Button 컴포넌트 > 스냅샷 테스트 > md size 스냅샷 1`] = `
 
 exports[`Button 컴포넌트 > 스냅샷 테스트 > primary variant 스냅샷 1`] = `
 <button
-  class="flex items-center justify-center w-fit cursor-pointer bg-primary-300 text-gray-50 text-md rounded-xl px-5 py-3 undefined "
+  class="flex items-center justify-center hover:opacity-90 transition-opacity duration-100 w-fit cursor-pointer bg-primary-300 text-gray-50 active:bg-primary-400 text-md rounded-xl px-5 py-3 undefined "
   type="button"
 >
   주 버튼
@@ -66,7 +66,7 @@ exports[`Button 컴포넌트 > 스냅샷 테스트 > primary variant 스냅샷 1
 
 exports[`Button 컴포넌트 > 스냅샷 테스트 > secondary variant 스냅샷 1`] = `
 <button
-  class="flex items-center justify-center w-fit cursor-pointer bg-primary-50 text-primary-300 text-md rounded-xl px-5 py-3 undefined "
+  class="flex items-center justify-center hover:opacity-90 transition-opacity duration-100 w-fit cursor-pointer bg-primary-50 text-primary-300 active:bg-primary-100 text-md rounded-xl px-5 py-3 undefined "
   type="button"
 >
   보조 버튼
@@ -75,7 +75,7 @@ exports[`Button 컴포넌트 > 스냅샷 테스트 > secondary variant 스냅샷
 
 exports[`Button 컴포넌트 > 스냅샷 테스트 > sm size 스냅샷 1`] = `
 <button
-  class="flex items-center justify-center w-fit cursor-pointer bg-primary-300 text-gray-50 text-sm rounded-lg px-4 py-2 undefined "
+  class="flex items-center justify-center hover:opacity-90 transition-opacity duration-100 w-fit cursor-pointer bg-primary-300 text-gray-50 active:bg-primary-400 text-sm rounded-lg px-4 py-2 undefined "
   type="button"
 >
   작은 버튼
@@ -84,7 +84,7 @@ exports[`Button 컴포넌트 > 스냅샷 테스트 > sm size 스냅샷 1`] = `
 
 exports[`Button 컴포넌트 > 스냅샷 테스트 > socialLogin variant 스냅샷 1`] = `
 <button
-  class="flex items-center justify-center w-fit cursor-pointer border transition-colors duration-200 text-md rounded-xl px-5 py-3 undefined "
+  class="flex items-center justify-center hover:opacity-90 transition-opacity duration-100 w-fit cursor-pointer border transition-colors duration-200 text-md rounded-xl px-5 py-3 undefined "
   type="button"
 >
   소셜 로그인 버튼
@@ -93,7 +93,7 @@ exports[`Button 컴포넌트 > 스냅샷 테스트 > socialLogin variant 스냅
 
 exports[`Button 컴포넌트 > 스냅샷 테스트 > tertiary variant 스냅샷 1`] = `
 <button
-  class="flex items-center justify-center w-fit cursor-pointer bg-gray-100 text-gray-600 text-md rounded-xl px-5 py-3 undefined "
+  class="flex items-center justify-center hover:opacity-90 transition-opacity duration-100 w-fit cursor-pointer bg-gray-100 text-gray-600 active:bg-gray-200 text-md rounded-xl px-5 py-3 undefined "
   type="button"
 >
   3차 버튼
@@ -102,7 +102,7 @@ exports[`Button 컴포넌트 > 스냅샷 테스트 > tertiary variant 스냅샷
 
 exports[`Button 컴포넌트 > 스냅샷 테스트 > text variant 스냅샷 1`] = `
 <button
-  class="flex items-center justify-center w-fit cursor-pointer bg-transparent text-gray-900 text-md !p-0 !rounded-none text-md rounded-xl px-5 py-3 undefined "
+  class="flex items-center justify-center hover:opacity-90 transition-opacity duration-100 w-fit cursor-pointer bg-transparent text-gray-900 text-md !p-0 !rounded-none text-md rounded-xl px-5 py-3 undefined "
   type="button"
 >
   텍스트 버튼
@@ -111,7 +111,7 @@ exports[`Button 컴포넌트 > 스냅샷 테스트 > text variant 스냅샷 1`]
 
 exports[`Button 컴포넌트 > 스냅샷 테스트 > 기본 Button 컴포넌트 스냅샷 1`] = `
 <button
-  class="flex items-center justify-center w-fit cursor-pointer bg-primary-300 text-gray-50 text-md rounded-xl px-5 py-3 undefined "
+  class="flex items-center justify-center hover:opacity-90 transition-opacity duration-100 w-fit cursor-pointer bg-primary-300 text-gray-50 active:bg-primary-400 text-md rounded-xl px-5 py-3 undefined "
   type="button"
 >
   기본 버튼
@@ -120,7 +120,7 @@ exports[`Button 컴포넌트 > 스냅샷 테스트 > 기본 Button 컴포넌트
 
 exports[`Button 컴포넌트 > 스냅샷 테스트 > 커스텀 className과 props가 적용된 Button 스냅샷 1`] = `
 <button
-  class="flex items-center justify-center w-full cursor-pointer bg-primary-50 text-primary-300 text-lg rounded-2xl px-6 py-4 custom-class "
+  class="flex items-center justify-center hover:opacity-90 transition-opacity duration-100 w-full cursor-pointer bg-primary-50 text-primary-300 active:bg-primary-100 text-lg rounded-2xl px-6 py-4 custom-class "
   data-testid="snapshot-button"
   id="test-button"
   type="button"

src/App.tsx

@@ -2,7 +2,7 @@
 
 exports[`Footer 컴포넌트 > 기본 렌더링 > 기본 상태 스냅샷 - 선택된 버튼 없음 > footer-button-structure 1`] = `
 <button
-  class="flex items-center justify-center w-fit cursor-pointer bg-transparent text-gray-900 text-md rounded-xl px-5 py-3 flex-col text-xs pt-2 pb-3 px-3 "
+  class="flex items-center justify-center hover:opacity-90 transition-opacity duration-100 w-fit cursor-pointer bg-transparent text-gray-900 text-md rounded-xl px-5 py-3 flex-col text-xs pt-2 pb-3 px-3 "
   type="button"
 >
   <svg
@@ -31,7 +31,7 @@ exports[`Footer 컴포넌트 > 기본 렌더링 > 기본 상태 스냅샷 - 선
 
 exports[`Footer 컴포넌트 > 기본 렌더링 > 선택된 상태 스냅샷 - home 선택 > selected-button 1`] = `
 <button
-  class="flex items-center justify-center w-fit cursor-pointer bg-transparent text-gray-900 text-md rounded-xl px-5 py-3 flex-col text-xs pt-2 pb-3 px-3 "
+  class="flex items-center justify-center hover:opacity-90 transition-opacity duration-100 w-fit cursor-pointer bg-transparent text-gray-900 text-md rounded-xl px-5 py-3 flex-col text-xs pt-2 pb-3 px-3 "
   type="button"
 >
   <svg
@@ -60,7 +60,7 @@ exports[`Footer 컴포넌트 > 기본 렌더링 > 선택된 상태 스냅샷 - h
 
 exports[`Footer 컴포넌트 > 기본 렌더링 > 선택된 상태 스냅샷 - home 선택 > unselected-button 1`] = `
 <button
-  class="flex items-center justify-center w-fit cursor-pointer bg-transparent text-gray-900 text-md rounded-xl px-5 py-3 flex-col text-xs pt-2 pb-3 px-3 "
+  class="flex items-center justify-center hover:opacity-90 transition-opacity duration-100 w-fit cursor-pointer bg-transparent text-gray-900 text-md rounded-xl px-5 py-3 flex-col text-xs pt-2 pb-3 px-3 "
   type="button"
 >
   <svg
@@ -89,7 +89,7 @@ exports[`Footer 컴포넌트 > 기본 렌더링 > 선택된 상태 스냅샷 - h
 
 exports[`Footer 컴포넌트 > 상호작용 테스트 > 버튼 클릭 시 폰트가 볼드로 변경된다 > clicked-home-button 1`] = `
 <button
-  class="flex items-center justify-center w-fit cursor-pointer bg-transparent text-gray-900 text-md rounded-xl px-5 py-3 flex-col text-xs pt-2 pb-3 px-3 "
+  class="flex items-center justify-center hover:opacity-90 transition-opacity duration-100 w-fit cursor-pointer bg-transparent text-gray-900 text-md rounded-xl px-5 py-3 flex-col text-xs pt-2 pb-3 px-3 "
   type="button"
 >
   <svg

src/__tests__/components/common/__snapshots__/Button.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`Header 컴포넌트 > 스냅샷 테스트 - 핵심 요소별 > all vari
   class="flex-1 flex justify-start"
 >
   <button
-    class="flex items-center justify-center w-fit cursor-pointer bg-transparent text-gray-900 text-md rounded-xl px-5 py-3 undefined "
+    class="flex items-center justify-center hover:opacity-90 transition-opacity duration-100 w-fit cursor-pointer bg-transparent text-gray-900 text-md rounded-xl px-5 py-3 undefined "
     type="button"
   >
     <svg
@@ -34,7 +34,7 @@ exports[`Header 컴포넌트 > 스냅샷 테스트 - 핵심 요소별 > all vari
     class="flex-1 flex justify-end items-center "
   >
     <button
-      class="flex items-center justify-center w-fit cursor-pointer bg-transparent text-gray-900 text-md rounded-xl px-5 py-3 h-6 w-6 !p-0 rounded-lg flex items-center justify-center "
+      class="flex items-center justify-center hover:opacity-90 transition-opacity duration-100 w-fit cursor-pointer bg-transparent text-gray-900 text-md rounded-xl px-5 py-3 h-6 w-6 !p-0 rounded-lg flex items-center justify-center "
       type="button"
     >
       <svg
@@ -55,7 +55,7 @@ exports[`Header 컴포넌트 > 스냅샷 테스트 - 핵심 요소별 > all vari
       </svg>
     </button>
     <button
-      class="flex items-center justify-center w-fit cursor-pointer bg-transparent text-gray-900 text-md rounded-xl px-5 py-3 h-6 w-6 !p-0 rounded-lg flex items-center justify-center mr-5 "
+      class="flex items-center justify-center hover:opacity-90 transition-opacity duration-100 w-fit cursor-pointer bg-transparent text-gray-900 text-md rounded-xl px-5 py-3 h-6 w-6 !p-0 rounded-lg flex items-center justify-center mr-5 "
       type="button"
     >
       <svg
@@ -126,7 +126,7 @@ exports[`Header 컴포넌트 > 스냅샷 테스트 - 핵심 요소별 > logo var
 
 exports[`Header 컴포넌트 > 스냅샷 테스트 - 핵심 요소별 > page variant - 네비게이션 구조 스냅샷 > page-variant-back-button 1`] = `
 <button
-  class="flex items-center justify-center w-fit cursor-pointer bg-transparent text-gray-900 text-md rounded-xl px-5 py-3 undefined "
+  class="flex items-center justify-center hover:opacity-90 transition-opacity duration-100 w-fit cursor-pointer bg-transparent text-gray-900 text-md rounded-xl px-5 py-3 undefined "
   type="button"
 >
   <svg

src/__tests__/components/common/__snapshots__/Footer.test.tsx.snap

@@ -61,7 +61,7 @@ exports[`ChatPage > 스냅샷 - 전송 컴포넌트 > chat-send-section 1`] = `
     />
     <button
       aria-label="image"
-      class="flex items-center justify-center w-fit cursor-pointer bg-transparent text-gray-900 text-sm rounded-lg px-4 py-2 shrink-0 rounded-full text-sm "
+      class="flex items-center justify-center hover:opacity-90 transition-opacity duration-100 w-fit cursor-pointer bg-transparent text-gray-900 text-sm rounded-lg px-4 py-2 shrink-0 rounded-full text-sm "
       type="button"
     >
       <img