feat: #311 - 1차 라이트하우스 기반 성능 개선 작업

1차 라이트하우스 기반 성능 개선 작업
Team-TenTen · Jul 16, 2024 · 1954945 · 1954945
2 parents 2424a7f + dc2ede9
commit 1954945
Show file tree

Hide file tree

Showing 13 changed files with 95 additions and 198 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.0.18",
+    "@next/font": "^14.2.5",
     "@tanstack/react-query": "^5.8.4",
     "@types/js-cookie": "^3.0.6",
     "browser-image-compression": "^2.0.2",

diff --git a/src/app/(routes)/space/[spaceId]/page.tsx b/src/app/(routes)/space/[spaceId]/page.tsx
@@ -5,7 +5,6 @@ import Button from '@/components/common/Button/Button'
 import DeferredComponent from '@/components/common/DeferedComponent/DeferedComponent'
 import useViewLink from '@/components/common/LinkList/hooks/useViewLink'
 import Space from '@/components/common/Space/Space'
-import SpaceSkeleton from '@/components/common/Space/SpaceSkeleton'
 import useGetSpace from '@/components/common/Space/hooks/useGetSpace'
 import useGetTags from '@/components/common/Space/hooks/useGetTags'
 import Tab from '@/components/common/Tab/Tab'
@@ -37,29 +36,27 @@ const SpacePage = ({ params }: { params: { spaceId: number } }) => {
   })
   const { tag, tagIndex, handleTagChange } = useTagParam({ tags })
 
-  return (
+  return isSpaceLoading || isTagsLoading ? (
+    <DeferredComponent>
+      <Spinner />
+    </DeferredComponent>
+  ) : (
     <>
-      {isSpaceLoading ? (
-        <DeferredComponent>
-          <SpaceSkeleton />
-        </DeferredComponent>
-      ) : (
-        space && (
-          <Space
-            type="Header"
-            userName={space.memberDetailInfos[0].nickname}
-            spaceId={space.spaceId}
-            spaceName={space.spaceName}
-            spaceImage={space.spaceImagePath}
-            description={space.description}
-            category={CATEGORIES_RENDER[space.category]}
-            scrap={space.scrapCount}
-            favorite={space.favoriteCount}
-            hasFavorite={space.hasFavorite}
-            hasScrap={space.hasScrap}
-            isVisible={space.isVisible}
-          />
-        )
+      {space && (
+        <Space
+          type="Header"
+          userName={space.memberDetailInfos[0].nickname}
+          spaceId={space.spaceId}
+          spaceName={space.spaceName}
+          spaceImage={space.spaceImagePath}
+          description={space.description}
+          category={CATEGORIES_RENDER[space.category]}
+          scrap={space.scrapCount}
+          favorite={space.favoriteCount}
+          hasFavorite={space.hasFavorite}
+          hasScrap={space.hasScrap}
+          isVisible={space.isVisible}
+        />
       )}
       {tabList.length > MIN_TAB_NUMBER && (
         <Tab>

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -3,11 +3,6 @@
 @tailwind utilities;
 
 @layer base {
-  @font-face {
-    font-family: 'Pretendard';
-    src: url('https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.css');
-  }
-
   :root {
     --bgColor: rgb(255, 255, 255);
     --slate9: rgb(16, 23, 41);
@@ -41,7 +36,7 @@
     --red1: rgb(250, 227, 226);
   }
 
-  [class='dark'] {
+  [class~='dark'] {
     --bgColor: rgb(18, 24, 38);
     --slate9: rgb(242, 245, 249);
     --slate7: rgb(204, 213, 224);

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -4,6 +4,7 @@ import ToastContainer from '@/components/common/Toast/ToastContainer'
 import { AuthProvider } from '@/lib/contexts/AuthProvider'
 import TanstackQueryContext from '@/lib/contexts/TanstackQueryContext'
 import { Metadata } from 'next'
+import localFont from 'next/font/local'
 import './globals.css'
 
 export const metadata: Metadata = {
@@ -40,13 +41,21 @@ export const metadata: Metadata = {
   manifest: '/manifest.json',
 }
 
+const pretendard = localFont({
+  src: '../static/font/PretendardVariable.woff2',
+  variable: '--font-pretendard',
+  display: 'swap',
+})
+
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode
 }) {
   return (
-    <html lang="ko">
+    <html
+      lang="ko"
+      className={`${pretendard.variable}`}>
       <TanstackQueryContext>
         <AuthProvider>
           <body className="bg-bgColor">

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -4,7 +4,6 @@ import { CategoryList, Dropdown, LinkItem, Spinner } from '@/components'
 import FloatingButton from '@/components/FloatingButton/FloatingButton'
 import { ChipColors } from '@/components/common/Chip/Chip'
 import DeferredComponent from '@/components/common/DeferedComponent/DeferedComponent'
-import LinkItemSkeleton from '@/components/common/LinkItem/LinkItemSkeleton'
 import MainSpaceList from '@/components/common/MainSpaceList/MainSpaceList'
 import { useCategoryParam, useSortParam } from '@/hooks'
 import useGetPopularLinks from '@/hooks/useGetPopularLinks'
@@ -22,41 +21,39 @@ export default function Home() {
   const { category, categoryIndex, handleCategoryChange } =
     useCategoryParam('all')
 
-  return (
+  return isPopularLinksLoading ? (
+    <DeferredComponent>
+      <Spinner />
+    </DeferredComponent>
+  ) : (
     <>
       <section className="px-4 pb-8">
         <h2 className="py-4 font-bold text-gray9">인기있는 링크</h2>
-        {isPopularLinksLoading ? (
-          <DeferredComponent>
-            <LinkItemSkeleton type="card" />
-          </DeferredComponent>
-        ) : (
-          links && (
-            <Swiper
-              slidesPerView={2.1}
-              spaceBetween={16}
-              freeMode={true}
-              pagination={{
-                clickable: true,
-              }}
-              modules={[FreeMode]}
-              className="mySwiper">
-              {links.map((link: PopularLinkResBody) => (
-                <SwiperSlide key={link.linkId}>
-                  <LinkItem
-                    linkId={link.linkId}
-                    title={link.title}
-                    url={link.url}
-                    tagName={link.tagName}
-                    tagColor={link.tagColor as ChipColors}
-                    isInitLiked={link.isLiked}
-                    likeInitCount={link.likeCount}
-                    type="card"
-                  />
-                </SwiperSlide>
-              ))}
-            </Swiper>
-          )
+        {links && (
+          <Swiper
+            slidesPerView={2.1}
+            spaceBetween={16}
+            freeMode={true}
+            pagination={{
+              clickable: true,
+            }}
+            modules={[FreeMode]}
+            className="mySwiper">
+            {links.map((link: PopularLinkResBody) => (
+              <SwiperSlide key={link.linkId}>
+                <LinkItem
+                  linkId={link.linkId}
+                  title={link.title}
+                  url={link.url}
+                  tagName={link.tagName}
+                  tagColor={link.tagColor as ChipColors}
+                  isInitLiked={link.isLiked}
+                  likeInitCount={link.likeCount}
+                  type="card"
+                />
+              </SwiperSlide>
+            ))}
+          </Swiper>
         )}
       </section>
       <section>

diff --git a/src/components/common/FollowList/FollowList.tsx b/src/components/common/FollowList/FollowList.tsx
@@ -45,26 +45,27 @@ const FollowList = ({
     </DeferredComponent>
   ) : (
     <ul className="flex flex-col gap-y-2">
-      {followList?.pages.map((group, i) => (
-        <Fragment key={i}>
-          {group.responses?.map((user: FollowUserProps) => (
-            <li key={user.memberId}>
-              <User
-                memberId={user.memberId}
-                nickname={user.nickname}
-                profileImagePath={user.profileImagePath}
-                aboutMe={user.aboutMe}
-                isFollowing={user.isFollowing}
-                isAuth={myId === user.memberId}
-                followingCount={followingCount}
-                myId={myId}
-                profileId={memberId}
-                setFollowingCount={setFollowingCount}
-              />
-            </li>
-          ))}
-        </Fragment>
-      ))}
+      {followList &&
+        followList.pages.map((group, i) => (
+          <Fragment key={i}>
+            {group.responses?.map((user: FollowUserProps) => (
+              <li key={user.memberId}>
+                <User
+                  memberId={user.memberId}
+                  nickname={user.nickname}
+                  profileImagePath={user.profileImagePath}
+                  aboutMe={user.aboutMe}
+                  isFollowing={user.isFollowing}
+                  isAuth={myId === user.memberId}
+                  followingCount={followingCount}
+                  myId={myId}
+                  profileId={memberId}
+                  setFollowingCount={setFollowingCount}
+                />
+              </li>
+            ))}
+          </Fragment>
+        ))}
       <div ref={target}></div>
     </ul>
   )

diff --git a/src/components/common/LinkItem/LinkItemSkeleton.tsx b/src/components/common/LinkItem/LinkItemSkeleton.tsx
diff --git a/src/components/common/MainSpaceList/MainSpaceList.tsx b/src/components/common/MainSpaceList/MainSpaceList.tsx
@@ -8,7 +8,7 @@ import useInfiniteScroll from '@/hooks/useInfiniteScroll'
 import { SearchSpaceReqBody, SpaceResBody } from '@/types'
 import DeferredComponent from '../DeferedComponent/DeferedComponent'
 import Space from '../Space/Space'
-import MainSpaceSkeleton from './MainSpaceSkeleton'
+import Spinner from '../Spinner/Spinner'
 
 export interface SpaceListProps {
   memberId?: number
@@ -50,7 +50,7 @@ const MainSpaceList = ({
 
   return isSpacesLoading ? (
     <DeferredComponent>
-      <MainSpaceSkeleton />
+      <Spinner />
     </DeferredComponent>
   ) : (
     <>

diff --git a/src/components/common/MainSpaceList/MainSpaceSkeleton.tsx b/src/components/common/MainSpaceList/MainSpaceSkeleton.tsx
diff --git a/src/components/common/Skeleton/Skeleton.tsx b/src/components/common/Skeleton/Skeleton.tsx