Skip to content

[Fix] Suspense Boundary 조절을 통한 성능 개선 (#188) #189

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
minseong0324 merged 1 commit into from
May 27, 2025
Merged

[Fix] Suspense Boundary 조절을 통한 성능 개선 (#188) #189

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 10 additions & 75 deletions apps/web/src/app/(home)/Home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
'use client';

import { MainBreadcrumbItem, NavBar } from '@web/components/common';
import {
MainBreadcrumbItem,
NavBar,
UserProfileDropdown,
} from '@web/components/common';
import { AccountSidebar } from '@web/components/common/AccountSidebar/AccountSidebar';
import { useScroll } from '@web/hooks';
import { ROUTES } from '@web/routes';
Expand All @@ -10,68 +14,33 @@ import {
background,
cardContent,
content,
dropdownItem,
image,
cardColumn,
cardRow,
flexColumn,
} from './page.css';
import { Dropdown } from '@repo/ui/Dropdown';
import Image from 'next/image';
import { Icon } from '@repo/ui/Icon';
import { Text } from '@repo/ui/Text';
import { isNil } from '@repo/ui/utils';
import { GradientAnimatedText } from '@repo/ui/GradientAnimatedText';
import CreateImage from '@web/assets/images/createImage.webp';
import { CTACard } from './[agentId]/_components/CTACard/CTACard';
import { PersonalCard } from './[agentId]/_components/PersonalCard/PersonalCard';
import { UploadContentCard } from './[agentId]/_components/UploadContentCard/UploadContentCard';
import { ContentGroupCard } from './[agentId]/_components/ContentGroupCard/ContentGroupCard';
import { Spacing } from '@repo/ui/Spacing';
import { getAgentQueryOptions } from '@web/store/query/useGetAgentQuery';
import { useRouter } from 'next/navigation';
import { Agent } from '@web/types';
import { getUserQueryOptions } from '@web/store/query/useGetUserQuery';
import { useLogoutMutation } from '@web/store/mutation/useLogoutMutation';
import { useModal, useToast } from '@repo/ui/hooks';
import { Modal } from '@repo/ui/Modal';
import { useSuspenseQueries } from '@tanstack/react-query';
import { useToast } from '@repo/ui/hooks';

export default function Home() {
const router = useRouter();
const toast = useToast();
const modal = useModal();
const [scrollRef, isScrolled] = useScroll<HTMLDivElement>({
threshold: 100,
});

const [{ data: user }, { data: agentData }] = useSuspenseQueries({
queries: [getUserQueryOptions(), getAgentQueryOptions()],
});

const { mutate: logout } = useLogoutMutation();

const handleLogoutClick = () => {
modal.confirm({
title: '정말 로그아웃 하시겠어요??',
icon: <Modal.Icon name="notice" color="warning500" />,
confirmButton: '로그아웃',
cancelButton: '취소',
confirmButtonProps: {
onClick: () => {
logout();
},
},
});
};

const handleCreateClick = () => {
toast.error('SNS 계정 연동이 필요해요.');
//TODO: 액션 필요
};

const userData = user.data;

return (
<div className={background} ref={scrollRef}>
<NavBar
Expand All @@ -82,40 +51,11 @@ export default function Home() {
</Breadcrumb.Item>
</Breadcrumb>
}
rightAddon={
<Dropdown>
<Dropdown.Trigger>
{isNil(userData?.profileImage) ? (
<div className={image} />
) : (
<Image
className={image}
width={40}
height={40}
src={userData.profileImage}
alt={''}
/>
)}
</Dropdown.Trigger>
<Dropdown.Content align="right">
<Dropdown.Item
onClick={handleLogoutClick}
value="option1"
className={dropdownItem}
>
<Icon name="logout" size="2.4rem" color="grey400" />
<Text fontSize={18} fontWeight="medium" color="grey1000">
로그아웃
</Text>
</Dropdown.Item>
</Dropdown.Content>
</Dropdown>
}
rightAddon={<UserProfileDropdown />}
isScrolled={isScrolled}
/>
<div className={content}>
<AccountSidebar
agentData={agentData.agents}
onAccountClick={(id: Agent['id']) =>
router.push(ROUTES.HOME.DETAIL(id))
}
Expand All @@ -129,7 +69,6 @@ export default function Home() {
<div className={cardColumn}>
<div className={cardRow}>
<div className={flexColumn}>
{/* 주제 생성 카드 */}
<CTACard
text={'자동으로 글을 만들어보세요'}
buttonText={'주제 생성하기'}
Expand All @@ -138,16 +77,12 @@ export default function Home() {
buttonDisabled
/>
<Spacing size={16} />
{/* 개인화 설정 카드 */}
<PersonalCard text={'개인화 설정'} />
<PersonalCard />
</div>

{/* 업로드 예약 일정 카드 */}
<UploadContentCard text={'업로드 예약 일정'} />
<UploadContentCard />
</div>

{/* 생성된 주제 카드 */}
<ContentGroupCard text="생성된 주제" />
<ContentGroupCard />
</div>
<Spacing size={40} />
</div>
Expand Down
182 changes: 33 additions & 149 deletions apps/web/src/app/(home)/[agentId]/Home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,108 +1,42 @@
'use client';

import { MainBreadcrumbItem, NavBar } from '@web/components/common';
import {
MainBreadcrumbItem,
NavBar,
UserProfileDropdown,
} from '@web/components/common';
import { AccountSidebar } from '../../../components/common/AccountSidebar/AccountSidebar';
import { useScroll } from '@web/hooks';
import { ROUTES } from '@web/routes';
import { Breadcrumb } from '@repo/ui/Breadcrumb';
import {
animatedText,
background,
cardContent,
content,
dropdownItem,
image,
cardColumn,
cardRow,
flexColumn,
} from './page.css';
import { Dropdown } from '@repo/ui/Dropdown';
import Image from 'next/image';
import { Icon } from '@repo/ui/Icon';
import { Text } from '@repo/ui/Text';
import { isNil } from '@repo/ui/utils';
import { GradientAnimatedText } from '@repo/ui/GradientAnimatedText';
import { Breadcrumb, GradientAnimatedText, Spacing } from '@repo/ui';
import CreateImage from '@web/assets/images/createImage.webp';
import { CTACard } from './_components/CTACard/CTACard';
import { PersonalCard } from './_components/PersonalCard/PersonalCard';
import { UploadContentCard } from './_components/UploadContentCard/UploadContentCard';
import { ContentGroupCard } from './_components/ContentGroupCard/ContentGroupCard';
import { Spacing } from '@repo/ui/Spacing';
import { getAgentDetailQueryOptions } from '@web/store/query/useGetAgentDetailQuery';
import { getAgentPostGroupsQueryOptions } from '@web/store/query/useGetAgentPostGroupsQuery';
import { getAgentQueryOptions } from '@web/store/query/useGetAgentQuery';
import { getAgentUploadReservedQueryOptions } from '@web/store/query/useGetAgentUploadReserved';
import { getUserQueryOptions } from '@web/store/query/useGetUserQuery';
import { HomePageProps } from './types';
import { useRouter } from 'next/navigation';
import { Agent, PostGroupId } from '@web/types';
import { useModal } from '@repo/ui/hooks';
import { Modal } from '@repo/ui/Modal';
import { useDeletePostGroupMutation } from '@web/store/mutation/useDeletePostGroupMutation';
import { useLogoutMutation } from '@web/store/mutation/useLogoutMutation';
import { useSuspenseQueries } from '@tanstack/react-query';
import { Agent } from '@web/types';
import { AgentDetailPersonalCard } from './_components/AgentDetailPersonalCard/AgentDetailPersonalCard';
import { Suspense } from 'react';
import { PersonalCardSkeleton } from './_components/PersonalCard/PersonalCardSkeleton';
import { ReservedUploadContentCard } from './_components/ReservedUploadContentCard/ReservedUploadContentCard';
import { UploadContentCardSkeleton } from './_components/UploadContentCard/UploadContentCardSkeleton';
import { PostGroupsContentGroupCard } from './_components/PostGroupsContentGroupCard/PostGroupsContentGroupCard';
import { ContentGroupCardSkeleton } from './_components/ContentGroupCard/ContentGroupCardSkeleton';

export default function Home({ params }: HomePageProps) {
const router = useRouter();
const modal = useModal();
const [scrollRef, isScrolled] = useScroll<HTMLDivElement>({
threshold: 100,
});

const [
{ data: user },
{ data: agentDetail },
{ data: agentUploadReserved },
{ data: agentPostGroups },
{ data: agentData },
] = useSuspenseQueries({
queries: [
getUserQueryOptions(),
getAgentDetailQueryOptions({ agentId: params.agentId }),
getAgentUploadReservedQueryOptions({ agentId: params.agentId }),
getAgentPostGroupsQueryOptions({ agentId: params.agentId }),
getAgentQueryOptions(),
],
});

const { mutate: deletePostGroups } = useDeletePostGroupMutation({
agentId: params.agentId,
});
const { mutate: logout } = useLogoutMutation();

const userData = user.data;
const agentDetailData = agentDetail.agentPersonalSetting;
const agentUploadReservedData = agentUploadReserved.posts.slice(0, 5);

const handleDeletePostGroup = (postGroupId: PostGroupId) => {
modal.confirm({
title: '정말 삭제하시겠어요?',
description: '삭제된 글은 복구할 수 없어요',
icon: <Modal.Icon name="notice" color="warning500" />,
confirmButton: '삭제하기',
cancelButton: '취소',
confirmButtonProps: {
onClick: () => {
deletePostGroups(postGroupId);
},
},
});
};

const handleLogoutClick = () => {
modal.confirm({
title: '정말 로그아웃 하시겠어요??',
icon: <Modal.Icon name="notice" color="warning500" />,
confirmButton: '로그아웃',
cancelButton: '취소',
confirmButtonProps: {
onClick: () => {
logout();
},
},
});
};

return (
<div className={background} ref={scrollRef}>
<NavBar
Expand All @@ -113,41 +47,12 @@ export default function Home({ params }: HomePageProps) {
</Breadcrumb.Item>
</Breadcrumb>
}
rightAddon={
<Dropdown>
<Dropdown.Trigger>
{isNil(userData?.profileImage) ? (
<div className={image} />
) : (
<Image
className={image}
width={40}
height={40}
src={userData.profileImage}
alt={''}
/>
)}
</Dropdown.Trigger>
<Dropdown.Content align="right">
<Dropdown.Item
onClick={handleLogoutClick}
value="option1"
className={dropdownItem}
>
<Icon name="logout" size="2.4rem" color="grey400" />
<Text fontSize={18} fontWeight="medium" color="grey1000">
로그아웃
</Text>
</Dropdown.Item>
</Dropdown.Content>
</Dropdown>
}
rightAddon={<UserProfileDropdown />}
isScrolled={isScrolled}
/>
<div className={content}>
<AccountSidebar
agentData={agentData.agents}
selectedId={params.agentId}
selectedId={Number(params.agentId)}
onAccountClick={(id: Agent['id']) =>
router.push(ROUTES.HOME.DETAIL(id))
}
Expand All @@ -172,51 +77,30 @@ export default function Home({ params }: HomePageProps) {
/>
<Spacing size={16} />
{/* 개인화 설정 카드 */}
<PersonalCard
text={'개인화 설정'}
data={agentDetailData}
onIconClick={() =>
router.push(ROUTES.PERSONALIZE(params.agentId))
}
/>
<Suspense fallback={<PersonalCardSkeleton />}>
<AgentDetailPersonalCard
agentId={Number(params.agentId)}
onIconClick={() =>
router.push(ROUTES.PERSONALIZE(params.agentId))
}
/>
</Suspense>
</div>

{/* 업로드 예약 일정 카드 */}
<UploadContentCard
text={'업로드 예약 일정'}
onMoreButtonClick={() =>
router.push(ROUTES.SCHEDULE.ROOT(params.agentId))
<Suspense
fallback={
<UploadContentCardSkeleton agentId={Number(params.agentId)} />
}
onItemClick={(post) => {
router.push(
ROUTES.SCHEDULE.DETAIL({
agentId: params.agentId,
postGroupId: post.postGroupId,
postId: post.id,
})
);
}}
items={agentUploadReservedData}
itemLength={agentUploadReserved.posts.length}
/>
>
<ReservedUploadContentCard agentId={Number(params.agentId)} />
</Suspense>
</div>

{/* 생성된 주제 카드 */}
<ContentGroupCard
text="생성된 주제"
postGroups={agentPostGroups.postGroups}
onItemClick={(postGroupId) =>
router.push(
ROUTES.EDIT.ROOT({
agentId: params.agentId,
postGroupId,
})
)
}
onItemRemove={(id) => {
handleDeletePostGroup(id);
}}
/>
<Suspense fallback={<ContentGroupCardSkeleton />}>
<PostGroupsContentGroupCard agentId={Number(params.agentId)} />
</Suspense>
</div>
<Spacing size={40} />
</div>
Expand Down
Loading
Loading