🐛 fix(#72): Suspense 추가

Author: yyypearl

src/app/letter/preview/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
+import React, { Suspense, useEffect, useState } from "react";
 import styled, { css } from "styled-components";
 import { theme } from "@/styles/theme";
 import NavigatorBar from "@/components/common/NavigatorBar";
@@ -15,6 +15,7 @@ import {
 } from "@/api/letter/letter";
 import { useRecoilValue, useResetRecoilState } from "recoil";
 import { registerLetterState } from "@/recoil/letterStore";
+import Loader, { LoaderContainer } from "@/components/common/Loader";
 
 const LetterPreviewPage = () => {
   const router = useRouter();
@@ -139,7 +140,19 @@ const LetterPreviewPage = () => {
   );
 };
 
-export default LetterPreviewPage;
+export default function LetterPreviewPaging() {
+  return (
+    <Suspense
+      fallback={
+        <LoaderContainer>
+          <Loader />
+        </LoaderContainer>
+      }
+    >
+      <LetterPreviewPage />
+    </Suspense>
+  );
+}
 
 const Layout = styled.div`
   width: 100%;

src/app/letter/register/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
+import React, { Suspense, useEffect, useState } from "react";
 import styled from "styled-components";
 import { theme } from "@/styles/theme";
 import NavigatorBar from "@/components/common/NavigatorBar";
@@ -13,6 +13,7 @@ import { registerLetterState } from "@/recoil/letterStore";
 import { useToast } from "@/hooks/useToast";
 import { postImage } from "@/api/image/image";
 import imageCompression from "browser-image-compression";
+import Loader, { LoaderContainer } from "@/components/common/Loader";
 
 const LetterRegisterPage = () => {
   const router = useRouter();
@@ -28,13 +29,6 @@ const LetterRegisterPage = () => {
   const letterId = searchParams.get("letterId");
   const independent = searchParams.get("independent");
 
-  /* SSR 완료 시 상태 업데이트 */
-  // const setSsrCompleted = useSsrComplectedState();
-
-  // useEffect(() => {
-  //   setSsrCompleted();
-  // }, [setSsrCompleted]);
-
   useEffect(() => {
     if (letterState) {
       setSender(letterState.senderName);
@@ -245,7 +239,19 @@ const LetterRegisterPage = () => {
   );
 };
 
-export default LetterRegisterPage;
+export default function LetterRegisterPaging() {
+  return (
+    <Suspense
+      fallback={
+        <LoaderContainer>
+          <Loader />
+        </LoaderContainer>
+      }
+    >
+      <LetterRegisterPage />
+    </Suspense>
+  );
+}
 
 const Layout = styled.div`
   width: 100%;

src/app/letter/template/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
+import React, { Suspense, useEffect, useState } from "react";
 import styled, { css } from "styled-components";
 import { theme } from "@/styles/theme";
 import NavigatorBar from "@/components/common/NavigatorBar";
@@ -13,6 +13,7 @@ import {
   registerLetterState,
   useSsrComplectedState,
 } from "@/recoil/letterStore";
+import Loader, { LoaderContainer } from "@/components/common/Loader";
 
 const LetterTemplatePage = () => {
   const router = useRouter();
@@ -111,7 +112,19 @@ const LetterTemplatePage = () => {
   );
 };
 
-export default LetterTemplatePage;
+export default function LetterTemplatePaging() {
+  return (
+    <Suspense
+      fallback={
+        <LoaderContainer>
+          <Loader />
+        </LoaderContainer>
+      }
+    >
+      <LetterTemplatePage />
+    </Suspense>
+  );
+}
 
 const Layout = styled.div`
   width: 100%;