🎨 design(#124): 내 대시보드 대시보드 목록 스켈레톤 설정

package.json

@@ -29,6 +29,7 @@
     "react-query": "^3.39.3",
     "react-redux": "^9.1.2",
     "redux-persist": "^6.0.0",
+    "tailwind-scrollbar-hide": "^1.1.7",
     "yup": "^1.4.0"
   },
   "devDependencies": {

src/components/Sidebar/index.tsx

@@ -86,37 +86,13 @@ export default function Sidebar() {
         <div className='m-2 border-b border-gray-d9' />
 
         {isLoading ? (
-          <ul className='flex h-[392px] animate-pulse flex-col gap-2'>
-            <li
-              className={`flex min-h-[32px] items-center justify-center rounded-md bg-gray-fa py-3 md:min-h-[52px] md:justify-start md:px-3`}
-            ></li>
-            <li
-              className={`flex min-h-[32px] items-center justify-center rounded-md bg-gray-fa py-3 md:min-h-[52px] md:justify-start md:px-3`}
-            ></li>
-            <li
-              className={`flex min-h-[32px] items-center justify-center rounded-md bg-gray-fa py-3 md:min-h-[52px] md:justify-start md:px-3`}
-            ></li>
-            <li
-              className={`flex min-h-[32px] items-center justify-center rounded-md bg-gray-fa py-3 md:min-h-[52px] md:justify-start md:px-3`}
-            ></li>
-            <li
-              className={`flex min-h-[32px] items-center justify-center rounded-md bg-gray-fa py-3 md:min-h-[52px] md:justify-start md:px-3`}
-            ></li>
-            <li
-              className={`flex min-h-[32px] items-center justify-center rounded-md bg-gray-fa py-3 md:min-h-[52px] md:justify-start md:px-3`}
-            ></li>
-            <li
-              className={`flex min-h-[32px] items-center justify-center rounded-md bg-gray-fa py-3 md:min-h-[52px] md:justify-start md:px-3`}
-            ></li>
-            <li
-              className={`flex min-h-[32px] items-center justify-center rounded-md bg-gray-fa py-3 md:min-h-[52px] md:justify-start md:px-3`}
-            ></li>
-            <li
-              className={`flex min-h-[32px] items-center justify-center rounded-md bg-gray-fa py-3 md:min-h-[52px] md:justify-start md:px-3`}
-            ></li>
-            <li
-              className={`flex min-h-[32px] items-center justify-center rounded-md bg-gray-fa py-3 md:min-h-[52px] md:justify-start md:px-3`}
-            ></li>
+          <ul className='flex animate-pulse flex-col gap-2'>
+            {[...Array(10)].map((_, i) => (
+              <li
+                key={i}
+                className='flex min-h-[32px] items-center justify-center rounded-md bg-gray-fa py-3 md:min-h-[52px] md:justify-start md:px-3'
+              ></li>
+            ))}
           </ul>
         ) : (
           <ul className='flex flex-col gap-2'>

src/containers/mydashboard/DashboardList/index.tsx

@@ -9,7 +9,11 @@ import { DashboardsResponse } from '@/types/Dashboard.interface';
 export default function DashboardList() {
   const [currentChunk, setCurrentChunk] = useState<number>(1);
 
-  const { data: dashboardResponse, error } = useFetchData<DashboardsResponse>(['dashboards', currentChunk], () =>
+  const {
+    data: dashboardResponse,
+    error,
+    isLoading,
+  } = useFetchData<DashboardsResponse>(['dashboards', currentChunk], () =>
     getDashboardsList('pagination', currentChunk, 5),
   );
 
@@ -49,18 +53,28 @@ export default function DashboardList() {
             <Image src={'/icons/plus-filled.svg'} alt='plus' width={22} height={22} />
           </button>
         </li>
-        {dashboardResponse?.dashboards.map((dashboard) => (
-          <li className='h-16 w-64 rounded-lg border border-gray-d9 bg-white md:w-60 lg:w-80' key={dashboard.id}>
-            <Link href={`/dashboard/${dashboard.id}`} className={'btn-violet-light size-full rounded-md px-5'}>
-              <div className='flex size-full items-center'>
-                <div className='rounded-full p-1' style={{ backgroundColor: dashboard.color }} />
-                <p className='pl-4 pr-1 text-lg font-medium'>{dashboard.title}</p>
-                {dashboard.createdByMe && <Image src={'/icons/crown.svg'} alt='my' width={20} height={16} />}
-              </div>
-              <Image src={'/icons/arrow-black.svg'} alt='arrow' width={14} height={14} />
-            </Link>
-          </li>
-        ))}
+        {isLoading ? (
+          <>
+            {[...Array(5)].map((_, i) => (
+              <li key={i} className='h-16 w-64 rounded-lg border border-gray-d9 bg-white md:w-60 lg:w-[300px]' />
+            ))}
+          </>
+        ) : (
+          <>
+            {dashboardResponse?.dashboards.map((dashboard) => (
+              <li className='h-16 w-64 rounded-lg border border-gray-d9 bg-white md:w-60 lg:w-80' key={dashboard.id}>
+                <Link href={`/dashboard/${dashboard.id}`} className={'btn-violet-light size-full rounded-md px-5'}>
+                  <div className='flex size-full items-center'>
+                    <div className='rounded-full p-1' style={{ backgroundColor: dashboard.color }} />
+                    <p className='pl-4 pr-1 text-lg font-medium'>{dashboard.title}</p>
+                    {dashboard.createdByMe && <Image src={'/icons/crown.svg'} alt='my' width={20} height={16} />}
+                  </div>
+                  <Image src={'/icons/arrow-black.svg'} alt='arrow' width={14} height={14} />
+                </Link>
+              </li>
+            ))}
+          </>
+        )}
       </ul>
 
       <div className='flex items-center justify-end pt-3'>

src/containers/mydashboard/InvitedDashboardList/index.tsx

@@ -99,17 +99,6 @@ export default function InvitedDashboardList() {
     }
   }, 300);
 
-  if (isLoading) {
-    return (
-      <div className='h-full max-w-screen-lg overflow-hidden rounded-lg border-0 bg-white'>
-        <p className='px-7 pb-5 pt-8 text-base font-bold text-black-33'>초대받은 대시보드</p>
-        <div className='flex items-center justify-center'>
-          <p>불러오는 중...</p>
-        </div>
-      </div>
-    );
-  }
-
   if (error) {
     return (
       <div className='h-full max-w-screen-lg overflow-hidden rounded-lg border-0 bg-white'>
@@ -125,22 +114,57 @@ export default function InvitedDashboardList() {
   return (
     <section className='h-full min-h-80 overflow-hidden rounded-lg border-0 bg-white'>
       <p className='px-7 pb-5 pt-8 text-base font-bold text-black-33'>초대받은 대시보드</p>
-      {invitations.length > 0 || isSearching ? (
-        <>
-          <SearchBar handleChangeSearch={handleChangeSearch} />
-          <InvitationItemList
-            invitations={invitations}
-            handleAcceptInvitation={handleAcceptInvitation}
-            observerRef={observerRef}
-          />
-        </>
-      ) : (
-        <div className='flex h-full flex-col items-center justify-center'>
-          <div className='relative size-[60px] md:size-[100px]'>
-            <Image src={'/icons/invitations.svg'} alt='invitations' fill />
+      {isLoading ? (
+        <div className='flex animate-pulse flex-col'>
+          <div className='px-7'>
+            <div className='size-full h-[40px] rounded-md bg-gray-fa py-[8px] pl-12 pr-4' />
+          </div>
+          <div className='h-[calc(100%-130px)] pt-6 md:h-[calc(100%-170px)]'>
+            <div className='hidden h-[48px] grid-cols-9 pb-6 pl-7 md:grid md:pr-7'>
+              {[...Array(3)].map((_, i) => (
+                <>
+                  <div key={i} className='h-[24px] rounded-md bg-gray-fa'></div>
+                  <div key={i} className='h-[24px]'></div>
+                </>
+              ))}
+            </div>
+
+            <div className='h-full overflow-y-hidden'>
+              {[...Array(5)].map((_, i) => (
+                <div key={i} className='hidden h-[48px] grid-cols-6 pb-6 pl-7 md:grid md:pr-7'>
+                  {[...Array(3)].map((__, j) => (
+                    <>
+                      <div key={j} className='h-[24px] rounded-md bg-gray-fa'></div>
+                      <div key={j} className='h-[24px]'></div>
+                    </>
+                  ))}
+                </div>
+              ))}
+
+              <div ref={observerRef} className='h-1' />
+            </div>
           </div>
-          <p className='px-7 py-5 text-gray-78'>초대된 대시보드가 없습니다.</p>
         </div>
+      ) : (
+        <>
+          {invitations.length > 0 || isSearching ? (
+            <>
+              <SearchBar handleChangeSearch={handleChangeSearch} />
+              <InvitationItemList
+                invitations={invitations}
+                handleAcceptInvitation={handleAcceptInvitation}
+                observerRef={observerRef}
+              />
+            </>
+          ) : (
+            <div className='flex h-full flex-col items-center justify-center'>
+              <div className='relative size-[60px] md:size-[100px]'>
+                <Image src={'/icons/invitations.svg'} alt='invitations' fill />
+              </div>
+              <p className='px-7 py-5 text-gray-78'>초대된 대시보드가 없습니다.</p>
+            </div>
+          )}
+        </>
       )}
     </section>
   );

src/containers/mydashboard/index.tsx

@@ -3,7 +3,7 @@ import InvitedDashboardList from './InvitedDashboardList';
 
 export default function MyDashboard() {
   return (
-    <div className='flex h-dvh max-h-[calc(100dvh-70px)] w-full max-w-min flex-col gap-11 bg-gray-fa p-10'>
+    <div className='flex size-full max-w-min flex-col gap-11 bg-gray-fa p-10 md:max-h-[calc(100vh-70px)]'>
       <DashboardList />
       <InvitedDashboardList />
     </div>

src/layouts/MainLayout.tsx

@@ -21,7 +21,7 @@ export default function MainLayout({ children }: { children: React.ReactNode })
   if (isDisabled) return <div className='min-w-[360px]'>{children}</div>;
 
   return (
-    <div className='flex min-h-lvh min-w-[360px]'>
+    <div className='flex min-w-[360px]'>
       <Sidebar />
 
       <div className='flex grow flex-col'>

tailwind.config.ts

@@ -86,7 +86,9 @@ const config: Config = {
       },
     },
   },
-  plugins: [],
+  plugins: [
+    require("tailwind-scrollbar-hide"),
+  ],
 };
 
 export default config;