refactor : 일기 작성페이지 리펙토링 (#449)

* feat : useIndexDB훅 개발

* refactor : 작성 페이지 localstorage-> indexdb 사용하도록 수정

* rename : useIndexedDB -> useLetterDB

훅의 역활이 편지 저장인만큼 더욱 적합한 네이밍으로 변경

* refactor : topbar 함수 분리

* rename : 오타 수정

* refactor : draft 훅으로 분리

* refactor : 테마 슬라이더 상위 컴포넌트로 리펙토링

* chore : 공백 제거

* refactor : 코드 구조 분리

* rename : LetterInputForm -> LetterForm

의미상 Form이 더 잘맞을것 같아 변경했습니다.

* refactor : 중복되는 INPUT 컴포넌트로 분리

* design : style로 설정되어있던 요소들 tailwind로 통합

* feat : errorboundary 구축

* refactor : 에러바운더리에서 에러를 잡도록 처리

* fix : routerprovider에서 errorboundary 잡히지 않는 에러 수정

* refactor : draft로 가져오도록 수정

* env : 빌드시 console 제거 하도록 설정

* build : build시 console 제거

* chore : esbuild를 이용해서 console 제거

* env : 사용하지 않는 의존성 제거

* chore : 사용하지 않는 훅 제거

* design : 테마 css 수정

* chore : 오타 수정

* perf : aria-lable 작성

웹 접근성 향상을 위한 aria-lable 작성

* asset : public -> aseset 폴더로 이동

* refacotor : 편지줄 컴포넌트로 분리

img를 통해 불러오던 방식 -> 편지줄 컴포넌트를 이용해 불러오도록 변경

* perf : svg-> 컴포넌트로 불러오도록 수정

* perf : 텍스트 압축 적용

* perf: stories 파일 빌드에서 제거

* fix : build 에러 해결

변경된 타입에 맞춰 스토리 수정

* story : story 수정

* perf : 지도 페이지 코드 스플리팅

* chore : html 수정

* chore : 사용하지 않는 모듈 제거

* fix : 스토리북 에러 수정

* story : memory router 로컬에서 사용도록 수정

.storybook/preview.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import '../src/index.css';
-import { MemoryRouter } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 const queryClient = new QueryClient({

package.json

@@ -43,6 +43,7 @@
         "swiper": "^11.1.15",
         "tailwindcss-animated": "^1.1.2",
         "ts-pattern": "^5.5.0",
+        "vite-plugin-compression": "^0.5.1",
         "zustand": "^5.0.1"
     },
     "devDependencies": {

src/App.tsx

@@ -3,15 +3,19 @@ import { RouterProvider } from 'react-router-dom';
 import { router } from '@/router';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { Suspense } from 'react';
+import { Loading } from '@/components/Common/Loading/Loading';
 
 export const App = () => {
     const queryClient = new QueryClient();
 
     return (
         <QueryClientProvider client={queryClient}>
-            <ToastContainer />
-            <RouterProvider router={router} />
-            <ReactQueryDevtools initialIsOpen={false} />
+            <Suspense fallback={<Loading />}>
+                <ToastContainer />
+                <RouterProvider router={router} />
+                <ReactQueryDevtools initialIsOpen={false} />
+            </Suspense>
         </QueryClientProvider>
     );
 };

src/ErrorBoundary.tsx

@@ -0,0 +1,56 @@
+import { Component, ReactNode } from 'react';
+import { useToastStore } from './hooks';
+
+type ErrorBoundaryProps = {
+    children: ReactNode;
+    addToast: (message: string, type: 'success' | 'warning' | 'error') => void;
+};
+
+type WrapperProps = {
+    children: ReactNode;
+};
+
+type ErrorBoundaryState = {
+    hasError: boolean;
+    errorMessage?: string;
+};
+
+class ErrorBoundaryClass extends Component<
+    ErrorBoundaryProps,
+    ErrorBoundaryState
+> {
+    constructor(props: ErrorBoundaryProps) {
+        super(props);
+        this.state = {
+            hasError: false,
+            errorMessage: ''
+        };
+    }
+
+    static getDerivedStateFromError(error: Error) {
+        return {
+            hasError: true,
+            errorMessage: error.message
+        };
+    }
+
+    componentDidCatch(error: Error) {
+        this.props.addToast(error.message, 'warning');
+        console.error(error);
+    }
+
+    render() {
+        if (this.state.hasError) {
+            return null;
+        }
+        return this.props.children;
+    }
+}
+
+export const ErrorBoundary = ({ children }: WrapperProps) => {
+    const { addToast } = useToastStore();
+
+    return (
+        <ErrorBoundaryClass addToast={addToast}>{children}</ErrorBoundaryClass>
+    );
+};