Merge pull request #273 from ItRecode/FE-260

[FE-260] feat: 설정 페이지 라우터 변경, 상세 페이지 서스펜스 적용

Author: Seongtaek-H

src/components/Loading.tsx

@@ -1,12 +1,14 @@
 import React from 'react'
 import Spinner from './Spinner'
 
-export default function Loading() {
+const Loading = React.memo(function LoadingComponent() {
   return (
     <div className="flex h-full flex-col items-center justify-center">
       <Spinner size="large" />
       <h3 className="mt-8 text-base font-medium">로딩 중 이에요</h3>
       <p className="mt-3 text-xs">잠시만 기다려 주세요</p>
     </div>
   )
-}
+})
+
+export default Loading

src/pages/DetailRecord/DetailRecord.tsx

@@ -1,9 +1,7 @@
 import BackButton from '@components/BackButton'
 import Button from '@components/Button'
 import Chip from '@components/Chip'
-import MoreButton from '@components/MoreButton'
-import React, { useState } from 'react'
-import { useEffect } from 'react'
+import React, { Suspense, lazy, useState, useEffect } from 'react'
 import { useLocation, useNavigate, useParams } from 'react-router-dom'
 import { IRecordDataType } from 'types/recordData'
 import {
@@ -13,16 +11,12 @@ import {
 import { getCreatedDate } from './getCreatedDate'
 import ReplyList from './ReplyList'
 import ReplyInput from './ReplyInput'
-import MemoizedShareModal from './ShareModal'
-import EditModal from './EditModal'
 import { useRef } from 'react'
-import Modal from '@components/Modal'
 import { deleteRecord, getRecord } from '@apis/record'
 import { useQuery } from '@tanstack/react-query'
 import { getChipIconName } from './getChipIconName'
 import ImageContainer from './ImageContainer'
 import { useUser } from '@react-query/hooks/useUser'
-import Alert from '@components/Alert'
 import { AxiosError } from 'axios'
 import { createBrowserHistory } from 'history'
 import { useResetRecoilState, useSetRecoilState } from 'recoil'
@@ -34,7 +28,13 @@ import {
 } from '@store/detailPageAtom'
 import { SessionStorage } from '@utils/sessionStorage'
 import { PREVIOUS_URL } from '@assets/constant/others'
-import NotFound from '@pages/NotFound/NotFound'
+
+const MoreButton = lazy(() => import('@components/MoreButton'))
+const NotFound = lazy(() => import('@pages/NotFound/NotFound'))
+const Alert = lazy(() => import('@components/Alert'))
+const Modal = lazy(() => import('@components/Modal'))
+const MemoizedShareModal = lazy(() => import('./ShareModal'))
+const EditModal = lazy(() => import('./EditModal'))
 
 export default function DetailRecord() {
   const [shareStatus, setShareStatus] = useState(false)
@@ -144,54 +144,64 @@ export default function DetailRecord() {
   const handleBackButton = () => {
     navigate(`/${SessionStorage.get(PREVIOUS_URL)}`)
   }
-
   return (
     <>
       {isError ? (
-        <NotFound />
+        <Suspense>
+          <NotFound />
+        </Suspense>
       ) : (
         <div className="relative h-screen w-full">
           {shareStatus && (
-            <Modal visible={shareStatus} onClose={() => setShareStatus(false)}>
-              <MemoizedShareModal
-                setShareStatus={setShareStatus}
-                recordId={recordId}
-                title={title}
-                description={content}
-                backgroundColor={background_color}
-                iconName={iconName}
-                imageUrl={imageUrls[0]}
-              />
-            </Modal>
+            <Suspense>
+              <Modal
+                visible={shareStatus}
+                onClose={() => setShareStatus(false)}
+              >
+                <MemoizedShareModal
+                  setShareStatus={setShareStatus}
+                  recordId={recordId}
+                  title={title}
+                  description={content}
+                  backgroundColor={background_color}
+                  iconName={iconName}
+                  imageUrl={imageUrls[0]}
+                />
+              </Modal>
+            </Suspense>
           )}
           {editModalState && (
-            <EditModal
-              POST_ID={POST_ID}
-              setIsDelete={setIsDelete}
-              setEditModalState={setEditModalState}
-            />
+            <Suspense>
+              <EditModal
+                POST_ID={POST_ID}
+                setIsDelete={setIsDelete}
+                setEditModalState={setEditModalState}
+              />
+            </Suspense>
           )}
           {isDelete && (
-            <Alert
-              mainMessage={
-                <div className="text-base font-semibold leading-6">
-                  정말로 이 레코드를
-                  <br />
-                  <span className="text-sub-1">삭제</span>하시겠어요?
-                </div>
-              }
-              subMessage={<>삭제 후 복구는 불가능해요.</>}
-              visible={isDelete}
-              cancelMessage="취소"
-              confirmMessage="삭제"
-              danger={true}
-              onClose={() => setIsDelete(false)}
-              onCancel={() => setIsDelete(false)}
-              onConfirm={() => {
-                deleteRecordById(POST_ID)
-                navigate(-1)
-              }}
-            />
+            <Suspense>
+              <Alert
+                mainMessage={
+                  <div className="text-base font-semibold leading-6">
+                    정말로 이 레코드를
+                    <br />
+                    <span className="text-sub-1">삭제</span>하시겠어요?
+                  </div>
+                }
+                subMessage={<>삭제 후 복구는 불가능해요.</>}
+                visible={isDelete}
+                cancelMessage="취소"
+                confirmMessage="삭제"
+                danger={true}
+                onClose={() => setIsDelete(false)}
+                onCancel={() => setIsDelete(false)}
+                onConfirm={() => {
+                  deleteRecordById(POST_ID)
+                  navigate(-1)
+                }}
+              />
+            </Suspense>
           )}
           <header className="p-4">
             <nav className="flex justify-between">

src/pages/DetailRecord/ReplyItem.tsx

@@ -1,22 +1,23 @@
 import { INPUT_MODE } from '@assets/constant/constant'
 import { useUser } from '@react-query/hooks/useUser'
 import { scrollTarget } from '@store/atom'
-import React, { useEffect, useRef, useState } from 'react'
+import React, { Suspense, useEffect, useRef, useState } from 'react'
 import { useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil'
 import { CommentData } from 'types/replyData'
 import { getCreatedDate } from './getCreatedDate'
-import NestedReplyList from './NestedReplyList'
 import { ReactComponent as Arrow_Down_icon } from '@assets/detail_page_icon/arrow_down.svg'
 import { ReactComponent as Arrow_Up_icon } from '@assets/detail_page_icon/arrow_up.svg'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { deleteReply, getReply } from '@apis/reply'
-import Alert from '@components/Alert'
 import {
   DetailPageInputMode,
   modifyComment,
   nestedReplyState,
 } from '@store/detailPageAtom'
 
+const NestedReplyList = React.lazy(() => import('./NestedReplyList'))
+const Alert = React.lazy(() => import('@components/Alert'))
+
 export default function ReplyItem({
   content,
   createdAt,
@@ -165,31 +166,35 @@ export default function ReplyItem({
         )}
 
         {openNestedReplyList && (
-          <NestedReplyList
-            nestedReplyData={
-              nestedReplyData && nestedReplyData.data.commentList
-            }
-            isLoading={isLoading}
-            recordwriter={recordwriter}
-            recordId={recordId}
-            parentId={commentId}
-          />
+          <Suspense>
+            <NestedReplyList
+              nestedReplyData={
+                nestedReplyData && nestedReplyData.data.commentList
+              }
+              isLoading={isLoading}
+              recordwriter={recordwriter}
+              recordId={recordId}
+              parentId={commentId}
+            />
+          </Suspense>
         )}
       </div>
       {deleteAlert && (
-        <Alert
-          visible={deleteAlert}
-          mainMessage={<>댓글을 삭제하시겠습니까?</>}
-          subMessage={<>삭제 후 복구는 불가능해요.</>}
-          cancelMessage="아니오"
-          confirmMessage="예"
-          onClose={() => setDeleteAlert(false)}
-          onCancel={() => setDeleteAlert(false)}
-          onConfirm={() => {
-            onDeleteReply()
-          }}
-          danger={true}
-        />
+        <Suspense>
+          <Alert
+            visible={deleteAlert}
+            mainMessage={<>댓글을 삭제하시겠습니까?</>}
+            subMessage={<>삭제 후 복구는 불가능해요.</>}
+            cancelMessage="아니오"
+            confirmMessage="예"
+            onClose={() => setDeleteAlert(false)}
+            onCancel={() => setDeleteAlert(false)}
+            onConfirm={() => {
+              onDeleteReply()
+            }}
+            danger={true}
+          />
+        </Suspense>
       )}
     </div>
   )