Feat: 스켈레톤 UI 구현

components/skeleton/LinkCardSkeleton.tsx

@@ -0,0 +1,15 @@
+import Skeleton from "react-loading-skeleton";
+import "react-loading-skeleton/dist/skeleton.css";
+
+const LinkCardSkeleton = () => {
+  return (
+    <div className="w-full p-4 border border-gray-300 rounded-lg shadow-sm">
+      <Skeleton height={160} />
+      <Skeleton width="80%" className="mt-2" />
+      <Skeleton width="60%" className="mt-2" />
+      <Skeleton width="40%" className="mt-2" />
+    </div>
+  );
+};
+
+export default LinkCardSkeleton;

lib/api/axiosInstanceApi.ts

@@ -5,7 +5,8 @@ const axiosInstance = axios.create({
 });
 
 export const proxy = axios.create({
-  baseURL: "https://linkbrary-9-99.vercel.app",
+  //baseURL: "https://linkbrary-9-99.vercel.app",
+  baseURL: "http://localhost:3000",
 });
 
 proxy.interceptors.response.use(

package.json

@@ -18,6 +18,7 @@
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^5.3.0",
+    "react-loading-skeleton": "^3.5.0",
     "react-spinners": "^0.14.1",
     "zustand": "^5.0.1"
   },

pages/favorite/index.tsx

@@ -8,8 +8,8 @@ import Container from "@/components/Layout/Container";
 import LinkCard from "@/components/Link/LinkCard";
 import Pagination from "@/components/Pagination";
 import useFetchLinks from "@/hooks/useFetchLinks";
-import LoadingSpinner from "@/components/LoadingSpinner";
 import EmptyFavoriteList from "@/components/Favorite/EmptyFavoriteList";
+import LinkCardSkeleton from "@/components/skeleton/LinkCardSkeleton";
 
 interface FavoriteDataType {
   id: number;
@@ -87,8 +87,10 @@ const FavoritePage = ({
         </div>
         {/* 로딩 중일 때 */}
         {isLoading ? (
-          <div className="min-h-[100px] h-full pt-20 pb-20">
-            <LoadingSpinner />
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+            {[...Array(3)].map((_, index) => (
+              <LinkCardSkeleton key={index} />
+            ))}
           </div>
         ) : linkCardList.length > 0 ? (
           <>

pages/link/index.tsx

@@ -23,6 +23,7 @@ import useFetchLinks from "@/hooks/useFetchLinks";
 import useViewport from "@/hooks/useViewport";
 import useFolderName from "@/hooks/useFolderName";
 import LoadingSpinner from "@/components/LoadingSpinner";
+import LinkCardSkeleton from "@/components/skeleton/LinkCardSkeleton";
 
 interface LinkPageProps {
   linkList: LinkData[];
@@ -119,8 +120,10 @@ const LinkPage = ({
             )}
           </div>
           {isLoading ? (
-            <div className="min-h-[100px] h-full pt-20 pb-20">
-              <LoadingSpinner />
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+              {[...Array(3)].map((_, index) => (
+                <LinkCardSkeleton key={index} />
+              ))}
             </div>
           ) : linkCardList.length !== 0 ? (
             <>