🐛 fix(#170): 편지 전송 단계 Suspense로 로딩 상태 제공

Author: yyypearl

src/app/send/(process)/content/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 Input from '@/components/common/Input';
@@ -23,6 +23,7 @@ import { postImage } from '@/api/image/image';
 import ConfirmModal from '@/components/common/ConfirmModal';
 import { draftModalState } from '@/recoil/draftStore';
 import DraftButton from '@/components/draft/DraftButton';
+import Loader, { LoaderContainer } from '@/components/common/Loader';
 
 const SendContentPage = () => {
   const router = useRouter();
@@ -425,7 +426,19 @@ const SendContentPage = () => {
   );
 };
 
-export default SendContentPage;
+export default function SendContentPaging() {
+  return (
+    <Suspense
+      fallback={
+        <LoaderContainer>
+          <Loader />
+        </LoaderContainer>
+      }
+    >
+      <SendContentPage />
+    </Suspense>
+  );
+}
 
 const Container = styled.div`
   width: 100%;

src/app/send/(process)/preview/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 Button from '@/components/common/Button';
@@ -13,6 +13,7 @@ import { sendLetterState } from '@/recoil/letterStore';
 import useKakaoSDK from '@/hooks/useKakaoSDK';
 import { userState } from '@/recoil/userStore';
 import { getLetterShareStatus } from '@/api/letter/share';
+import Loader, { LoaderContainer } from '@/components/common/Loader';
 
 const SendPreviewPage = () => {
   const router = useRouter();
@@ -205,7 +206,19 @@ const SendPreviewPage = () => {
   );
 };
 
-export default SendPreviewPage;
+export default function SendPreviewPaging() {
+  return (
+    <Suspense
+      fallback={
+        <LoaderContainer>
+          <Loader />
+        </LoaderContainer>
+      }
+    >
+      <SendPreviewPage />
+    </Suspense>
+  );
+}
 
 const Container = styled.div`
   width: 100%;

src/app/send/(process)/receiver/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 Input from '@/components/common/Input';
@@ -23,6 +23,7 @@ import { draftModalState } from '@/recoil/draftStore';
 import BottomSheet from '@/components/common/BottomSheet';
 import { checkKorean } from '@/utils/checkKorean';
 import DraftButton from '@/components/draft/DraftButton';
+import Loader, { LoaderContainer } from '@/components/common/Loader';
 
 const SendReceiverPage = () => {
   const router = useRouter();
@@ -307,7 +308,19 @@ const SendReceiverPage = () => {
   );
 };
 
-export default SendReceiverPage;
+export default function SendReceiverPaging() {
+  return (
+    <Suspense
+      fallback={
+        <LoaderContainer>
+          <Loader />
+        </LoaderContainer>
+      }
+    >
+      <SendReceiverPage />
+    </Suspense>
+  );
+}
 
 const Container = styled.div`
   width: 100%;

src/app/send/(process)/template/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 Button from '@/components/common/Button';
@@ -10,6 +10,7 @@ import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { sendLetterState, useSsrComplectedState } from '@/recoil/letterStore';
 import LetterTemplateList from '@/components/letter/LetterTemplateList';
 import { ALL_TEMPLATES } from '@/constants/templates';
+import Loader, { LoaderContainer } from '@/components/common/Loader';
 
 const SendTemplatePage = () => {
   const router = useRouter();
@@ -123,7 +124,19 @@ const SendTemplatePage = () => {
   );
 };
 
-export default SendTemplatePage;
+export default function SendTemplatePaging() {
+  return (
+    <Suspense
+      fallback={
+        <LoaderContainer>
+          <Loader />
+        </LoaderContainer>
+      }
+    >
+      <SendTemplatePage />
+    </Suspense>
+  );
+}
 
 const Container = styled.div`
   width: 100%;

src/app/send/complete/page.tsx

@@ -2,6 +2,7 @@
 
 import BottomSheet from '@/components/common/BottomSheet';
 import Button from '@/components/common/Button';
+import Loader, { LoaderContainer } from '@/components/common/Loader';
 import OauthButton from '@/components/signup/OauthButton';
 import { OAUTH } from '@/constants/oauth';
 import { SEND_COMPLETE_SUBTEXT } from '@/constants/send/message';
@@ -11,7 +12,7 @@ import { theme } from '@/styles/theme';
 import { OAuthType } from '@/types/login';
 import Image from 'next/image';
 import { useRouter, useSearchParams } from 'next/navigation';
-import React, { useEffect, useState } from 'react';
+import React, { Suspense, useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import styled from 'styled-components';
 
@@ -111,7 +112,19 @@ const SendCompletePage = () => {
   );
 };
 
-export default SendCompletePage;
+export default function SendCompletePaging() {
+  return (
+    <Suspense
+      fallback={
+        <LoaderContainer>
+          <Loader />
+        </LoaderContainer>
+      }
+    >
+      <SendCompletePage />
+    </Suspense>
+  );
+}
 
 const Layout = styled.div`
   display: flex;