feat: #311 대규모레이아웃변경 이슈로 인해 스켈레톤삭제

Team-TenTen · Jul 16, 2024 · dc2ede9 · dc2ede9
1 parent b1397c1
commit dc2ede9
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 191 deletions.
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/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
diff --git a/src/components/common/Space/SpaceSkeleton.tsx b/src/components/common/Space/SpaceSkeleton.tsx