Feat: LinksEmptyCase를 추가 하였습니다

Author: bokeeeey

src/components/folder/Folder.tsx

@@ -18,6 +18,7 @@ export default function Folder() {
   return (
     <>
       <FavoriteButtonList handleFavoriteClick={handleFavoriteClick} />
+
       <LinksList folderId={folderId} />
     </>
   );

src/components/folder/LinksList/LinkOverview/LinkOverview.tsx

@@ -1,6 +1,7 @@
 import classNames from "classnames/bind";
 import Link from "next/link";
 import Image from "next/image";
+import { Skeleton } from "@nextui-org/skeleton";
 
 import { Ic_Logo } from "@/public";
 import { getElapsedTime, getFormattedDate, getValidUrl } from "@/src/utils";

src/components/folder/LinksList/LinkOverview/LinkSkeleton.tsx

@@ -0,0 +1,31 @@
+import classNames from "classnames/bind";
+import { Skeleton } from "@nextui-org/skeleton";
+
+import styles from "./LinkOverview.module.scss";
+
+const cn = classNames.bind(styles);
+
+export default function LinkSkeleton() {
+  return (
+    <div className={cn("LinkOverview")}>
+      <Skeleton
+        className={cn("imgBox")}
+        style={{ width: "340px", height: "200px" }}
+      />
+      <div className={cn("caption")}>
+        <Skeleton
+          className={cn("updatedAt")}
+          style={{ width: "100%", height: "20px" }}
+        />
+        <Skeleton
+          className={cn("description")}
+          style={{ width: "100%", height: "48px" }}
+        />
+        <Skeleton
+          className={cn("createdAt")}
+          style={{ width: "100%", height: "20px" }}
+        />
+      </div>
+    </div>
+  );
+}

src/components/folder/LinksList/LinkOverview/index.ts

@@ -0,0 +1,16 @@
+.LinksEmptyCase {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-content: center;
+  padding-top: 40px;
+  padding-bottom: 40px;
+  height: 50vh;
+  text-align: center;
+
+  .text {
+    color: #000;
+    font-size: 16px;
+    font-weight: 400;
+  }
+}

src/components/folder/LinksList/LinksEmptyCase/LinksEmptyCase.module.scss

@@ -0,0 +1,12 @@
+import classNames from "classnames/bind";
+import styles from "./LinksEmptyCase.module.scss";
+
+const cn = classNames.bind(styles);
+
+export default function LinkEmptyCase() {
+  return (
+    <section className={cn("LinksEmptyCase")}>
+      <p className={cn("text")}>저장된 링크가 없습니다</p>
+    </section>
+  );
+}

src/components/folder/LinksList/LinksEmptyCase/LinksEmptyCase.tsx

@@ -1,7 +1,7 @@
 import classNames from "classnames/bind";
 import { useQuery } from "@tanstack/react-query";
 
-import { LinkOverview } from "./LinkOverview";
+import { LinkOverview, LinksEmptyCase } from ".";
 import { getFolderIdLinksData } from "@/src/apis";
 import type { TLink } from "@/src/types/type";
 
@@ -27,10 +27,16 @@ export default function LinksList({ folderId }: LinksListProps) {
   const LINKS = folderId ? folderIdLinksData : totalLinksData;
 
   return (
-    <section className={cn("linkList")}>
-      {LINKS?.map((link) => (
-        <LinkOverview link={link} key={link.id} />
-      ))}
-    </section>
+    <>
+      {LINKS && LINKS.length > 0 ? (
+        <section className={cn("linkList")}>
+          {LINKS.map((link) => (
+            <LinkOverview link={link} key={link.id} />
+          ))}
+        </section>
+      ) : (
+        <LinksEmptyCase />
+      )}
+    </>
   );
 }

src/components/folder/LinksList/LinksList.tsx

@@ -0,0 +1,2 @@
+export { default as LinkOverview } from "./LinkOverview/LinkOverview";
+export { default as LinksEmptyCase } from "./LinksEmptyCase/LinksEmptyCase";