Merge branch 'dev' into feat/communityscroll#23

Author: EunbinJung

package-lock.json

@@ -18,6 +18,7 @@
     ]
   },
   "dependencies": {
+    "@tanstack/react-virtual": "^3.13.12",
     "class-variance-authority": "^0.7.1",
     "gsap": "^3.13.0",
     "lottie-react": "^2.4.1",
@@ -60,4 +61,4 @@
   },
   "homepage": "https://github.com/prgrms-web-devcourse-final-project/WEB5_6_HaeDokCoding_FE#readme",
   "description": ""
-}
+}

package.json

@@ -1,30 +1,7 @@
-function Loading() {
-  return (
-    <div className="w-full mb-10 flex relative animate-pulse">
-      {/* 메인 콘텐츠 */}
-      <article className="page-layout max-w-[824px] flex-1 z-5 space-y-6 mt-15">
-        {/* DetailHeader 자리 */}
-        <div className="h-6 w-15 bg-gray rounded-md" />
-
-        {/* Title 자리 */}
-        <div className="h-12 w-full bg-gray rounded-md" />
-        <div className="h-7 w-20 -mt-2 bg-gray rounded-md" />
+import DetailSkeleton from '@/domains/community/detail/DetailSkeleton';
 
-        {/* Content 자리 */}
-        <div className="space-y-2 mt-5">
-          <div className="h-70 w-full bg-gray rounded-md" />
-        </div>
-
-        {/* 댓글 */}
-        <div className="h-9 w-full bg-gray rounded-md mt-4" />
-        <div className="space-y-3">
-          {[...Array(2)].map((_, i) => (
-            <div key={i} className="h-16 w-full bg-gray rounded-md" />
-          ))}
-        </div>
-      </article>
-    </div>
-  );
+function Loading() {
+  return <DetailSkeleton />;
 }
 
 export default Loading;

src/app/community/[id]/loading.tsx

@@ -10,23 +10,28 @@ import Comment from '@/domains/community/detail/Comment';
 import StarBg from '@/domains/shared/components/star-bg/StarBg';
 import { useParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
+import DetailSkeleton from '@/domains/community/detail/DetailSkeleton';
 
 function Page() {
   const params = useParams();
   const [postDetail, setPostDetail] = useState<Post | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
     const postId = params.id;
     const fetchData = async () => {
+      setIsLoading(true);
       const data = await fetchPostById(postId);
       if (!data) return;
 
       setPostDetail(data);
+      setIsLoading(false);
     };
     fetchData();
   }, [params.id, setPostDetail]);
 
-  if (!postDetail) return <div>게시글을 불러오지 못했습니다.</div>;
+  if (isLoading) return <DetailSkeleton />;
+  if (!postDetail) return null;
 
   const {
     categoryName,

src/app/community/[id]/page.tsx

@@ -5,7 +5,6 @@ import TextButton from '@/shared/components/button/TextButton';
 import Input from '@/shared/components/Input-box/Input';
 import { useState } from 'react';
 import ModalLayout from '@/shared/components/modal-pop/ModalLayout';
-
 import Spinner from '@/shared/components/spinner/Spinner';
 import LikeBtn from '@/domains/community/components/like/LikeBtn';
 import Share from '@/domains/shared/components/share/Share';

src/app/design-system/page.tsx

@@ -1,4 +1,4 @@
-import CommentList from '@/domains/shared/components/comment/CommentList';
+// import CommentList from '@/domains/shared/components/comment/CommentList';
 import { Metadata } from 'next';
 
 export const metadata: Metadata = {

src/app/mypage/my-active/my-comment/page.tsx

@@ -1,4 +1,4 @@
-import PostCard from '@/domains/community/main/PostCard';
+// import PostCard from '@/domains/community/main/PostCard';
 import { Metadata } from 'next';
 
 export const metadata: Metadata = {

src/app/mypage/my-active/my-like/page.tsx

@@ -1,4 +1,4 @@
-import PostCard from '@/domains/community/main/PostCard';
+// import PostCard from '@/domains/community/main/PostCard';
 import { Metadata } from 'next';
 
 export const metadata: Metadata = {

src/app/mypage/my-active/my-post/page.tsx

@@ -1,4 +1,4 @@
-import CocktailCard from '@/domains/recipe/CocktailCard';
+import CocktailCard from '@/domains/shared/components/cocktail-card/CocktailCard';
 import { Metadata } from 'next';
 
 export const metadata: Metadata = {