Merge branch 'develop' of https://github.com/codeit9-temporary/linkbrary into develop

Author: hongggyelim

README.md

@@ -15,7 +15,7 @@
 
 |            | <img src="https://github.com/user-attachments/assets/5c4fd2d8-ce67-4f0a-9ce8-d6a928a4752d" alt="박문균" width="150" height="200"/> <br> **박문균 (👑 PM)** | <img src="https://avatars.githubusercontent.com/u/174448906?v=4" alt="전상민" width="150" height="200" /> <br> **전상민** | <img src="https://github.com/user-attachments/assets/c507e53d-ac12-4c2c-83f2-4ab4bc018f56" alt="구민지" width="150" height="200"/> <br> **구민지** | <img src="https://github.com/user-attachments/assets/acffe020-b376-4493-97cc-cadfc74d0eef" alt="정준영" width="150" height="200"/> <br> **정준영** | <img src="https://github.com/user-attachments/assets/fe813d8b-9ba2-4480-a4cc-7d48fc239db7" alt="홍예림" width="150" height="200" /> <br> **홍예림** |
 |------------|----------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------|
-| 역할       | 팀장으로 프로젝트 참여<br>로그인 / 회원가입 기능<br>간편 로그인 / 회원가입                         | 랜딩 페이지 구현<br>유저 정보 관리<br>소셜 공유                                 | 즐겨찾기 페이지<br>즐겨찾기 기능<br>링크 수정 / 삭제 기능                        | -                                                                               | 폴더 / 링크 관리 모달 구현<br>자유롭게 소개                                        |
+| 역할       | 팀장으로 프로젝트 참여<br>로그인 / 회원가입 기능<br>간편 로그인 / 회원가입                         | 랜딩 페이지 구현<br>유저 정보 관리<br>소셜 공유                                 | 즐겨찾기 페이지<br>즐겨찾기 기능<br>링크 수정 / 삭제 기능                        | 링크 페이지 구현                                                                              | 폴더 / 링크 관리 모달 구현                                   |
 | 이메일     | [email protected]                                                                              | [email protected]                                                           | [email protected]                                                            | [email protected]                                                               | [email protected]                                                                |
 | GitHub     | [mungyun](https://github.com/mungyun/)                                                              | [venise5224](https://github.com/venise5224)                                        | [99minji](https://github.com/99minji/99minji.git)                               | [junjeeong](https://github.com/junjeeong)                                          | [hongggyelim](https://github.com/hongggyelim)                                         |
 
@@ -54,11 +54,9 @@ npm run dev
 ![Figma](https://img.shields.io/badge/figma-%23F24E1E.svg?style=for-the-badge&logo=figma&logoColor=white)
 ![Notion](https://img.shields.io/badge/Notion-%23000000.svg?style=for-the-badge&logo=notion&logoColor=white)
 
-Zustand
+**Zustand**
 
-react-hot-toast
-react-icons
-react-spinners
+**react-hot-toast** / **react-icons** / **react-spinners**
 
 
 ## 유저 플로우
@@ -135,4 +133,37 @@ react-spinners
     - 수정 후 main과 develop 브랜치에 병합됩니다.
 
 ## **📝 시연 영상**
+#### 랜딩페이지
+<img src="https://github.com/user-attachments/assets/422c8c2c-a6d9-4601-bdd0-b543a0139ff6" width="600px" alt="랜딩 페이지" />
+
+#### 로그인
+
+<img src="https://github.com/user-attachments/assets/21ee384e-5898-4a47-ae33-98a8d9169310" width="600px" alt="일반 로그인" />
+
+#### 폴더 추가 및 이동
+
+<img src="https://github.com/user-attachments/assets/88455130-9e07-43c5-9017-9e79c74a99a5" width="600px" alt="폴더 추가 및 이동" />
+
+#### 링크 추가
+
+<img src="https://github.com/user-attachments/assets/dbe7cef3-4bf4-4271-9608-ba44b7528345" width="600px" alt="링크 추가" />
+
+#### 링크 수정 및 삭제
+
+<img src="https://github.com/user-attachments/assets/b3ca0a34-4e02-4e11-bbc7-f61309b204af" width="600px" alt="링크 수정 삭제" />
+
+#### 폴더 공유
+
+<img src="https://github.com/user-attachments/assets/b052ff88-6f9d-4639-a7f4-dc9b13f3122e" width="600px" alt="폴더 공유" />
+
+#### 폴더 삭제
+
+<img src="https://github.com/user-attachments/assets/382a9ebf-3a6f-496e-906f-bea21d357e38" width="600px" alt="폴더 삭제" />
+
+#### 즐겨찾기 추가 및 조회
+
+
+<img src="https://github.com/user-attachments/assets/96b43e58-6685-4597-8f96-6aa981004ce4" width="600px" alt="즐겨찾기 추가 조회" />
+
+
 

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;

package-lock.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"
   },

package.json

@@ -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/favorite/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 ? (
             <>