Skip to content

Commit a247cb7

Browse files
Seongtaek-HSeongtaek-H
committed
[FE-260] feat: 설정 페이지 라우터 변경, 디테일페이지 서스펜스 적용
1 parent d2dbbac commit a247cb7

4 files changed

Lines changed: 171 additions & 112 deletions

File tree

‎src/components/Loading.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import React from 'react'
22
import Spinner from './Spinner'
33

4-
export default function Loading() {
4+
const Loading = React.memo(function LoadingComponent() {
55
return (
66
<div className="flex h-full flex-col items-center justify-center">
77
<Spinner size="large" />
88
<h3 className="mt-8 text-base font-medium">로딩 중 이에요</h3>
99
<p className="mt-3 text-xs">잠시만 기다려 주세요</p>
1010
</div>
1111
)
12-
}
12+
})
13+
14+
export default Loading

‎src/pages/DetailRecord/DetailRecord.tsx‎

Lines changed: 56 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import BackButton from '@components/BackButton'
22
import Button from '@components/Button'
33
import Chip from '@components/Chip'
4-
import MoreButton from '@components/MoreButton'
5-
import React, { useState } from 'react'
4+
import React, { Suspense, useState } from 'react'
65
import { useEffect } from 'react'
76
import { useLocation, useNavigate, useParams } from 'react-router-dom'
87
import { IRecordDataType } from 'types/recordData'
@@ -13,16 +12,12 @@ import {
1312
import { getCreatedDate } from './getCreatedDate'
1413
import ReplyList from './ReplyList'
1514
import ReplyInput from './ReplyInput'
16-
import MemoizedShareModal from './ShareModal'
17-
import EditModal from './EditModal'
1815
import { useRef } from 'react'
19-
import Modal from '@components/Modal'
2016
import { deleteRecord, getRecord } from '@apis/record'
2117
import { useQuery } from '@tanstack/react-query'
2218
import { getChipIconName } from './getChipIconName'
2319
import ImageContainer from './ImageContainer'
2420
import { useUser } from '@react-query/hooks/useUser'
25-
import Alert from '@components/Alert'
2621
import { AxiosError } from 'axios'
2722
import { createBrowserHistory } from 'history'
2823
import { useResetRecoilState, useSetRecoilState } from 'recoil'
@@ -34,7 +29,13 @@ import {
3429
} from '@store/detailPageAtom'
3530
import { SessionStorage } from '@utils/sessionStorage'
3631
import { PREVIOUS_URL } from '@assets/constant/others'
37-
import NotFound from '@pages/NotFound/NotFound'
32+
33+
const MoreButton = React.lazy(() => import('@components/MoreButton'))
34+
const NotFound = React.lazy(() => import('@pages/NotFound/NotFound'))
35+
const Alert = React.lazy(() => import('@components/Alert'))
36+
const Modal = React.lazy(() => import('@components/Modal'))
37+
const MemoizedShareModal = React.lazy(() => import('./ShareModal'))
38+
const EditModal = React.lazy(() => import('./EditModal'))
3839

3940
export default function DetailRecord() {
4041
const [shareStatus, setShareStatus] = useState(false)
@@ -144,54 +145,64 @@ export default function DetailRecord() {
144145
const handleBackButton = () => {
145146
navigate(`/${SessionStorage.get(PREVIOUS_URL)}`)
146147
}
147-
148148
return (
149149
<>
150150
{isError ? (
151-
<NotFound />
151+
<Suspense>
152+
<NotFound />
153+
</Suspense>
152154
) : (
153155
<div className="relative h-screen w-full">
154156
{shareStatus && (
155-
<Modal visible={shareStatus} onClose={() => setShareStatus(false)}>
156-
<MemoizedShareModal
157-
setShareStatus={setShareStatus}
158-
recordId={recordId}
159-
title={title}
160-
description={content}
161-
backgroundColor={background_color}
162-
iconName={iconName}
163-
imageUrl={imageUrls[0]}
164-
/>
165-
</Modal>
157+
<Suspense>
158+
<Modal
159+
visible={shareStatus}
160+
onClose={() => setShareStatus(false)}
161+
>
162+
<MemoizedShareModal
163+
setShareStatus={setShareStatus}
164+
recordId={recordId}
165+
title={title}
166+
description={content}
167+
backgroundColor={background_color}
168+
iconName={iconName}
169+
imageUrl={imageUrls[0]}
170+
/>
171+
</Modal>
172+
</Suspense>
166173
)}
167174
{editModalState && (
168-
<EditModal
169-
POST_ID={POST_ID}
170-
setIsDelete={setIsDelete}
171-
setEditModalState={setEditModalState}
172-
/>
175+
<Suspense>
176+
<EditModal
177+
POST_ID={POST_ID}
178+
setIsDelete={setIsDelete}
179+
setEditModalState={setEditModalState}
180+
/>
181+
</Suspense>
173182
)}
174183
{isDelete && (
175-
<Alert
176-
mainMessage={
177-
<div className="text-base font-semibold leading-6">
178-
정말로 이 레코드를
179-
<br />
180-
<span className="text-sub-1">삭제</span>하시겠어요?
181-
</div>
182-
}
183-
subMessage={<>삭제 후 복구는 불가능해요.</>}
184-
visible={isDelete}
185-
cancelMessage="취소"
186-
confirmMessage="삭제"
187-
danger={true}
188-
onClose={() => setIsDelete(false)}
189-
onCancel={() => setIsDelete(false)}
190-
onConfirm={() => {
191-
deleteRecordById(POST_ID)
192-
navigate(-1)
193-
}}
194-
/>
184+
<Suspense>
185+
<Alert
186+
mainMessage={
187+
<div className="text-base font-semibold leading-6">
188+
정말로 이 레코드를
189+
<br />
190+
<span className="text-sub-1">삭제</span>하시겠어요?
191+
</div>
192+
}
193+
subMessage={<>삭제 후 복구는 불가능해요.</>}
194+
visible={isDelete}
195+
cancelMessage="취소"
196+
confirmMessage="삭제"
197+
danger={true}
198+
onClose={() => setIsDelete(false)}
199+
onCancel={() => setIsDelete(false)}
200+
onConfirm={() => {
201+
deleteRecordById(POST_ID)
202+
navigate(-1)
203+
}}
204+
/>
205+
</Suspense>
195206
)}
196207
<header className="p-4">
197208
<nav className="flex justify-between">

‎src/pages/DetailRecord/ReplyItem.tsx‎

Lines changed: 30 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,23 @@
11
import { INPUT_MODE } from '@assets/constant/constant'
22
import { useUser } from '@react-query/hooks/useUser'
33
import { scrollTarget } from '@store/atom'
4-
import React, { useEffect, useRef, useState } from 'react'
4+
import React, { Suspense, useEffect, useRef, useState } from 'react'
55
import { useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil'
66
import { CommentData } from 'types/replyData'
77
import { getCreatedDate } from './getCreatedDate'
8-
import NestedReplyList from './NestedReplyList'
98
import { ReactComponent as Arrow_Down_icon } from '@assets/detail_page_icon/arrow_down.svg'
109
import { ReactComponent as Arrow_Up_icon } from '@assets/detail_page_icon/arrow_up.svg'
1110
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
1211
import { deleteReply, getReply } from '@apis/reply'
13-
import Alert from '@components/Alert'
1412
import {
1513
DetailPageInputMode,
1614
modifyComment,
1715
nestedReplyState,
1816
} from '@store/detailPageAtom'
1917

18+
const NestedReplyList = React.lazy(() => import('./NestedReplyList'))
19+
const Alert = React.lazy(() => import('@components/Alert'))
20+
2021
export default function ReplyItem({
2122
content,
2223
createdAt,
@@ -165,31 +166,35 @@ export default function ReplyItem({
165166
)}
166167

167168
{openNestedReplyList && (
168-
<NestedReplyList
169-
nestedReplyData={
170-
nestedReplyData && nestedReplyData.data.commentList
171-
}
172-
isLoading={isLoading}
173-
recordwriter={recordwriter}
174-
recordId={recordId}
175-
parentId={commentId}
176-
/>
169+
<Suspense>
170+
<NestedReplyList
171+
nestedReplyData={
172+
nestedReplyData && nestedReplyData.data.commentList
173+
}
174+
isLoading={isLoading}
175+
recordwriter={recordwriter}
176+
recordId={recordId}
177+
parentId={commentId}
178+
/>
179+
</Suspense>
177180
)}
178181
</div>
179182
{deleteAlert && (
180-
<Alert
181-
visible={deleteAlert}
182-
mainMessage={<>댓글을 삭제하시겠습니까?</>}
183-
subMessage={<>삭제 후 복구는 불가능해요.</>}
184-
cancelMessage="아니오"
185-
confirmMessage="예"
186-
onClose={() => setDeleteAlert(false)}
187-
onCancel={() => setDeleteAlert(false)}
188-
onConfirm={() => {
189-
onDeleteReply()
190-
}}
191-
danger={true}
192-
/>
183+
<Suspense>
184+
<Alert
185+
visible={deleteAlert}
186+
mainMessage={<>댓글을 삭제하시겠습니까?</>}
187+
subMessage={<>삭제 후 복구는 불가능해요.</>}
188+
cancelMessage="아니오"
189+
confirmMessage="예"
190+
onClose={() => setDeleteAlert(false)}
191+
onCancel={() => setDeleteAlert(false)}
192+
onConfirm={() => {
193+
onDeleteReply()
194+
}}
195+
danger={true}
196+
/>
197+
</Suspense>
193198
)}
194199
</div>
195200
)

‎src/routes/router.tsx‎

Lines changed: 81 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -71,57 +71,91 @@ const router = createBrowserRouter([
7171
},
7272
],
7373
},
74+
],
75+
},
76+
{
77+
path: 'setting',
78+
children: [
7479
{
75-
path: 'setting',
76-
children: [
77-
{
78-
index: true,
79-
element: <Setting />,
80-
},
81-
{
82-
path: 'modifyinfo',
83-
element: (
84-
<ProtectedRoute route={'/modifyinfo'}>
85-
<ModifyInfo />
86-
</ProtectedRoute>
87-
),
88-
},
89-
{
90-
path: 'managecomment',
91-
element: (
92-
<ProtectedRoute route={'/managecomment'}>
93-
<ManageComment />
94-
</ProtectedRoute>
95-
),
96-
},
97-
{
98-
path: 'teamintroduction',
99-
element: <TeamIntroduction />,
100-
},
101-
{
102-
path: 'feedbackmail',
103-
element: <FeedbackMail />,
104-
},
105-
{
106-
path: 'withdraw',
107-
element: <Withdraw />,
108-
},
109-
],
80+
index: true,
81+
element: (
82+
<>
83+
<MemoizedNavbar />
84+
<Suspense fallback={<Loading />}>
85+
<Setting />
86+
</Suspense>
87+
</>
88+
),
89+
},
90+
{
91+
path: 'modifyinfo',
92+
element: (
93+
<Suspense fallback={<Loading />}>
94+
<ProtectedRoute route={'/modifyinfo'}>
95+
<ModifyInfo />
96+
</ProtectedRoute>
97+
</Suspense>
98+
),
99+
},
100+
{
101+
path: 'managecomment',
102+
element: (
103+
<Suspense fallback={<Loading />}>
104+
<ProtectedRoute route={'/managecomment'}>
105+
<ManageComment />
106+
</ProtectedRoute>
107+
</Suspense>
108+
),
109+
},
110+
{
111+
path: 'teamintroduction',
112+
element: (
113+
<Suspense fallback={<Loading />}>
114+
<TeamIntroduction />
115+
</Suspense>
116+
),
117+
},
118+
{
119+
path: 'feedbackmail',
120+
element: (
121+
<Suspense fallback={<Loading />}>
122+
<FeedbackMail />
123+
</Suspense>
124+
),
125+
},
126+
{
127+
path: 'withdraw',
128+
element: (
129+
<Suspense fallback={<Loading />}>
130+
<Withdraw />
131+
</Suspense>
132+
),
110133
},
111134
],
112135
},
113-
114136
{
115137
path: '/login',
116-
element: <Login />,
138+
element: (
139+
<Suspense fallback={<Loading />}>
140+
<Login />
141+
</Suspense>
142+
),
117143
},
118144
{
119145
path: '/login/:type',
120-
element: <OauthLogin />,
146+
element: (
147+
<Suspense fallback={<Loading />}>
148+
<OauthLogin />
149+
</Suspense>
150+
),
121151
},
122152
{
123153
path: '/sign-up',
124-
element: <SignUp />,
154+
element: (
155+
<Suspense fallback={<Loading />}>
156+
<SignUp />
157+
</Suspense>
158+
),
125159
},
126160
{
127161
path: '/record/add',
@@ -143,7 +177,14 @@ const router = createBrowserRouter([
143177
</Suspense>
144178
),
145179
},
146-
{ path: '*', element: <NotFound /> },
180+
{
181+
path: '*',
182+
element: (
183+
<Suspense fallback={<Loading />}>
184+
<NotFound />
185+
</Suspense>
186+
),
187+
},
147188
])
148189

149190
export default router

0 commit comments

Comments
 (0)