Merge pull request #158 from codeit-sprint-part3-6team/#137_1차-테스트-이슈수정

✨ Mydashboard페이지 스켈레톤 추가

Author: dlwnsl

package-lock.json

@@ -14,6 +14,7 @@ function UserProfile({
   nickname,
   profileImageUrl,
 }: UserProfileProps) {
+  if (!nickname) return null;
   return (
     <>
       <div className={`${styles['user-profile']} ${styles[type]}`}>

src/components/common/userprofile/UserProfile.tsx

@@ -112,6 +112,30 @@
   gap: 8px;
 }
 
+.skeleton {
+  background-color: var(--gray-medium);
+  border-radius: 8px;
+  animation: loading 1.5s infinite linear;
+}
+
+@keyframes loading {
+  0% {
+    opacity: 0.99;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 0.99;
+  }
+}
+
+.skeleton-card {
+  width: 100%;
+  height: 70px;
+  border-radius: 8px;
+}
+
 @media screen and (max-width: 1199px) {
   .dashboard-container {
     margin-left: 200px;
@@ -154,4 +178,8 @@
   .modal input::placeholder {
     font-size: 14px;
   }
+
+  .skeleton-card {
+    max-width: 260px;
+  }
 }

src/components/product/mydashboard/DashboardList.module.css

@@ -45,13 +45,20 @@ export default function DashboardList() {
   };
 
   const fetchDashboards = async () => {
-    const response = await getDashboards({
-      page: currentPage,
-      size: pageSize,
-      navigationMethod: 'pagination',
-    });
-    setDashboards(response.dashboards);
-    setTotalPages(Math.ceil(response.totalCount / pageSize));
+    setIsLoading(true);
+    try {
+      const response = await getDashboards({
+        page: currentPage,
+        size: pageSize,
+        navigationMethod: 'pagination',
+      });
+      setDashboards(response.dashboards);
+      setTotalPages(Math.ceil(response.totalCount / pageSize));
+    } catch (error) {
+      console.error('Error fetching dashboards:', error);
+    } finally {
+      setIsLoading(false);
+    }
   };
 
   const handleNewDashboard = async () => {
@@ -89,7 +96,16 @@ export default function DashboardList() {
           </CDSButton>
         </li>
 
-        {Array.isArray(dashboards) && dashboards.length > 0 ? (
+        {/* 스켈레톤 표시 */}
+        {!isLoading ? (
+          Array.from({ length: pageSize }).map((_, index) => (
+            <li key={`skeleton_${index}`} className={styles.dashboard}>
+              <div
+                className={`${styles.skeleton} ${styles['skeleton-card']}`}
+              />
+            </li>
+          ))
+        ) : Array.isArray(dashboards) && dashboards.length > 0 ? (
           dashboards.map((item) => (
             <li key={`DashboardList_${item.id}`} className={styles.dashboard}>
               <CDSButton

src/components/product/mydashboard/DashboardList.tsx

@@ -112,6 +112,52 @@
   color: var(--gray-dark);
 }
 
+.skeleton {
+  background-color: var(--gray-medium);
+  border-radius: 8px;
+  animation: loading 1.5s infinite linear;
+}
+
+@keyframes loading {
+  0% {
+    opacity: 0.99;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 0.99;
+  }
+}
+
+.skeleton-container {
+  padding: 0 28px 0 28px;
+}
+
+.skeleton-title {
+  padding: 0 100px 0 100px;
+  display: flex;
+  justify-content: space-between;
+  text-align: center;
+  border-bottom: 1px solid var(--gray-bright);
+  font-size: 16px;
+  font-weight: 400;
+  color: var(--gray-dark);
+}
+
+.skeleton-row {
+  display: flex;
+  gap: 100px;
+  align-items: center;
+  height: 52px;
+  margin-bottom: 20px;
+}
+
+.skeleton-cell {
+  flex: 1;
+  height: 32px;
+}
+
 @media screen and (max-width: 1199px) {
   .invitation-container {
     max-width: 504px;
@@ -137,6 +183,18 @@
     padding: 120px 130px;
     gap: 24px;
   }
+
+  .skeleton-title {
+    padding: 0 30px 0 30px;
+  }
+
+  .skeleton-row {
+    display: flex;
+    gap: 40px;
+    align-items: center;
+    height: 52px;
+    margin-bottom: 20px;
+  }
 }
 
 @media screen and (max-width: 743px) {
@@ -182,6 +240,18 @@
   .no-invitations-text {
     font-size: 12px;
   }
+
+  .skeleton-title {
+    padding: 0;
+  }
+
+  .skeleton-row {
+    display: flex;
+    gap: 20px;
+    align-items: center;
+    height: 52px;
+    margin-bottom: 20px;
+  }
 }
 
 @media screen and (max-width: 743px) {

src/components/product/mydashboard/InvitationList.module.css

@@ -130,7 +130,29 @@ export default function InvitationList() {
           </div>
         </div>
 
-        {invitations.length > 0 ? (
+        {!isLoading ? (
+          <div className={styles['skeleton-container']}>
+            <div className={styles['skeleton-title']}>
+              <div>이름</div>
+              <div>초대자</div>
+              <div>수락 여부</div>
+            </div>
+
+            {Array.from({ length: 10 }).map((_, index) => (
+              <div key={`skeleton_${index}`} className={styles['skeleton-row']}>
+                <div
+                  className={`${styles.skeleton} ${styles['skeleton-cell']}`}
+                />
+                <div
+                  className={`${styles.skeleton} ${styles['skeleton-cell']}`}
+                />
+                <div
+                  className={`${styles.skeleton} ${styles['skeleton-cell']}`}
+                />
+              </div>
+            ))}
+          </div>
+        ) : invitations.length > 0 ? (
           <table className={styles.table}>
             <thead>
               <tr className={styles['table-head']}>