From f3f7daf9d698a0f71f5e31eb28053e9a274a0c4f Mon Sep 17 00:00:00 2001
From: yoosangwook <yoo32767@gmail.com>
Date: Fri, 25 Oct 2024 15:01:25 +0900
Subject: [PATCH] feat: Add MainSkeleton

---
 package.json                         |  1 +
 src/components/main/MainContents.jsx | 53 +++++++++++++++-------------
 src/components/ui/Loading.jsx        |  5 ---
 src/components/ui/Loading.module.css | 35 ------------------
 src/components/ui/MainSkeleton.jsx   | 13 +++++++
 yarn.lock                            |  5 +++
 6 files changed, 48 insertions(+), 64 deletions(-)
 delete mode 100644 src/components/ui/Loading.jsx
 delete mode 100644 src/components/ui/Loading.module.css
 create mode 100644 src/components/ui/MainSkeleton.jsx

diff --git a/package.json b/package.json
index 303e4864..6c94a282 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "react-draggable": "^4.4.6",
     "react-hook-form": "^7.53.0",
     "react-icons": "^5.3.0",
+    "react-loading-skeleton": "^3.5.0",
     "react-responsive-modal": "^6.4.2",
     "recoil": "^0.7.7",
     "sweetalert2": "^11.14.1",
diff --git a/src/components/main/MainContents.jsx b/src/components/main/MainContents.jsx
index d2e38853..fa61b676 100644
--- a/src/components/main/MainContents.jsx
+++ b/src/components/main/MainContents.jsx
@@ -9,6 +9,7 @@ import { useRouter } from 'next/navigation'
 import { globalLocaleStore } from '@/store/localeAtom'
 import { queryStringFormatter } from '@/util/common-utils'
 import { sessionStore } from '@/store/commonAtom'
+import MainSkeleton from '../ui/MainSkeleton'
 
 export default function MainContents() {
   const { getMessage } = useMessage()
@@ -109,30 +110,34 @@ export default function MainContents() {
     <div className="main-product-list-wrap">
       <div className="main-product-list">
         <ProductItem num={1} name={getMessage('main.content.objectList')}>
-          <ul className="recently-list">
-            {objectList.map((row) => {
-              return (
-                <li
-                  key={row.objectNo}
-                  className="recently-item"
-                  onClick={() => {
-                    if (row.objectNo.substring(0, 1) === 'R') {
-                      router.push(`/management/stuff/detail?objectNo=${row.objectNo.toString()}`)
-                    } else {
-                      router.push(`/management/stuff/tempdetail?objectNo=${row.objectNo.toString()}`)
-                    }
-                  }}
-                >
-                  <div className="item-inner">
-                    <span className="time">{dayjs(row.lastEditDatetime).format('YYYY.MM.DD HH:mm:ss')}</span>
-                    <span>{row.objectNo}</span>
-                    <span>{row.objectName}</span>
-                    <span>{row.saleStoreName}</span>
-                  </div>
-                </li>
-              )
-            })}
-          </ul>
+          {objectList.length > 0 ? (
+            <ul className="recently-list">
+              {objectList.map((row) => {
+                return (
+                  <li
+                    key={row.objectNo}
+                    className="recently-item"
+                    onClick={() => {
+                      if (row.objectNo.substring(0, 1) === 'R') {
+                        router.push(`/management/stuff/detail?objectNo=${row.objectNo.toString()}`)
+                      } else {
+                        router.push(`/management/stuff/tempdetail?objectNo=${row.objectNo.toString()}`)
+                      }
+                    }}
+                  >
+                    <div className="item-inner">
+                      <span className="time">{dayjs(row.lastEditDatetime).format('YYYY.MM.DD HH:mm:ss')}</span>
+                      <span>{row.objectNo}</span>
+                      <span>{row.objectName}</span>
+                      <span>{row.saleStoreName}</span>
+                    </div>
+                  </li>
+                )
+              })}
+            </ul>
+          ) : (
+            <MainSkeleton />
+          )}
         </ProductItem>
         <ProductItem num={2} name={getMessage('main.content.notice')}>
           <div className="notice-box">
diff --git a/src/components/ui/Loading.jsx b/src/components/ui/Loading.jsx
deleted file mode 100644
index 59d2170b..00000000
--- a/src/components/ui/Loading.jsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import style from '@/components/ui/Loading.module.css'
-
-export default function Loading() {
-  return <span className={style.loader}></span>
-}
diff --git a/src/components/ui/Loading.module.css b/src/components/ui/Loading.module.css
deleted file mode 100644
index 7b3001f8..00000000
--- a/src/components/ui/Loading.module.css
+++ /dev/null
@@ -1,35 +0,0 @@
-.loader {
-  position: relative;
-  font-size: 48px;
-  letter-spacing: 6px;
-}
-.loader:before {
-  content: 'Loading';
-  color: #fff;
-}
-.loader:after {
-  content: '';
-  width: 20px;
-  height: 20px;
-  background-color: #ff3d00;
-  background-image: radial-gradient(circle 2px, #fff4 100%, transparent 0), radial-gradient(circle 1px, #fff3 100%, transparent 0);
-  background-position:
-    14px -4px,
-    12px -1px;
-  border-radius: 50%;
-  position: absolute;
-  margin: auto;
-  top: -5px;
-  right: 66px;
-  transform-origin: center bottom;
-  animation: fillBaloon 1s ease-in-out infinite alternate;
-}
-
-@keyframes fillBaloon {
-  0% {
-    transform: scale(1);
-  }
-  100% {
-    transform: scale(3);
-  }
-}
diff --git a/src/components/ui/MainSkeleton.jsx b/src/components/ui/MainSkeleton.jsx
new file mode 100644
index 00000000..fa0a48c2
--- /dev/null
+++ b/src/components/ui/MainSkeleton.jsx
@@ -0,0 +1,13 @@
+import Skeleton from 'react-loading-skeleton'
+import 'react-loading-skeleton/dist/skeleton.css'
+
+export default function MainSkeleton() {
+  return (
+    <>
+      <div className="mb-6">
+        <Skeleton height={`50px`} />
+      </div>
+      <Skeleton count={5} />
+    </>
+  )
+}
diff --git a/yarn.lock b/yarn.lock
index bf4e65b8..6e7b5f2c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5884,6 +5884,11 @@ react-is@^16.13.1, react-is@^16.7.0:
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-loading-skeleton@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/react-loading-skeleton/-/react-loading-skeleton-3.5.0.tgz#da2090355b4dedcad5c53cb3f0ed364e3a76d6ca"
+  integrity sha512-gxxSyLbrEAdXTKgfbpBEFZCO/P153DnqSCQau2+o6lNy1jgMRr2MmRmOzMmyrwSaSYLRB8g7b0waYPmUjz7IhQ==
+
 react-onclickoutside@^6.13.0:
   version "6.13.1"
   resolved "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.1.tgz"