refactor-skeleton-global: 주요 페이지 전역 Skeleton UI 적용 및 로딩 경험 개선

src/components/feed/MyFeed.tsx

@@ -5,6 +5,7 @@ import type { FeedListProps } from '../../types/post';
 import TotalBar from './TotalBar';
 import { getMyProfile } from '@/api/feeds/getMyProfile';
 import type { MyProfileData } from '@/types/profile';
+import { OtherFeedSkeleton } from '@/shared/ui/Skeleton';
 import { Container, EmptyState } from './MyFeed.styled';
 
 const MyFeed = ({ showHeader, posts = [], isLast = false }: FeedListProps) => {
@@ -30,7 +31,7 @@ const MyFeed = ({ showHeader, posts = [], isLast = false }: FeedListProps) => {
   }, []);
 
   if (loading || !profileData) {
-    return <></>;
+    return <OtherFeedSkeleton showFollowButton={false} paddingTop={136} />;
   }
 
   return (

src/components/search/MostSearchedBooks.tsx

@@ -14,8 +14,8 @@ import {
   EmptyMessage,
   MainText,
   SubText,
-  LoadingMessage,
 } from './MostSearchedBooks.styled';
+import { MostSearchedBooksSkeleton } from '@/shared/ui/Skeleton';
 
 export default function MostSearchedBooks() {
   const [books, setBooks] = useState<MostSearchedBook[]>([]);
@@ -27,7 +27,11 @@ export default function MostSearchedBooks() {
     const fetchMostSearchedBooks = async () => {
       try {
         setIsLoading(true);
-        const response = await getMostSearchedBooks();
+        const minLoadingTime = new Promise(resolve => setTimeout(resolve, 500));
+        const [response] = await Promise.all([
+          getMostSearchedBooks(),
+          minLoadingTime,
+        ]);
 
         if (response.isSuccess) {
           setBooks(response.data.bookList);
@@ -55,15 +59,17 @@ export default function MostSearchedBooks() {
     const day = String(now.getDate()).padStart(2, '0');
     return `${month}.${day}. 기준`;
   };
+  if (isLoading) {
+    return <MostSearchedBooksSkeleton />;
+  }
+
   return (
     <Container>
       <Header>
         <Title>가장 많이 검색된 책</Title>
         <DateText>{getCurrentDate()}</DateText>
       </Header>
-      {isLoading ? (
-        <LoadingMessage>로딩 중...</LoadingMessage>
-      ) : error ? (
+      {error ? (
         <EmptyMessage>
           <MainText>데이터를 불러올 수 없어요.</MainText>
           <SubText>{error}</SubText>

src/pages/feed/Feed.tsx

@@ -4,7 +4,7 @@ import TabBar from '../../components/feed/TabBar';
 import MyFeed from '../../components/feed/MyFeed';
 import TotalFeed from '../../components/feed/TotalFeed';
 import MainHeader from '@/components/common/MainHeader';
-import FeedPostSkeleton from '@/shared/ui/Skeleton/FeedPostSkeleton';
+import { FeedPostSkeleton, OtherFeedSkeleton } from '@/shared/ui/Skeleton';
 import writefab from '../../assets/common/writefab.svg';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { getTotalFeeds } from '@/api/feeds/getTotalFeed';
@@ -143,7 +143,7 @@ const Feed = () => {
       setTabLoading(true);
 
       try {
-        const minLoadingTime = new Promise(resolve => setTimeout(resolve, 1000));
+        const minLoadingTime = new Promise(resolve => setTimeout(resolve, 500));
 
         if (activeTab === '피드') {
           await Promise.all([loadTotalFeeds(), minLoadingTime]);
@@ -168,11 +168,15 @@ const Feed = () => {
       />
       <TabBar tabs={tabs} activeTab={activeTab} onTabClick={setActiveTab} />
       {initialLoading || tabLoading ? (
-        <SkeletonWrapper>
-          {Array.from({ length: 3 }).map((_, index) => (
-            <FeedPostSkeleton key={index} />
-          ))}
-        </SkeletonWrapper>
+        activeTab === '내 피드' ? (
+          <OtherFeedSkeleton showFollowButton={false} paddingTop={136} />
+        ) : (
+          <SkeletonWrapper>
+            {Array.from({ length: 3 }).map((_, index) => (
+              <FeedPostSkeleton key={index} />
+            ))}
+          </SkeletonWrapper>
+        )
       ) : (
         <>
           {activeTab === '피드' ? (

src/pages/feed/FeedDetailPage.styled.ts

@@ -12,3 +12,15 @@ export const Wrapper = styled.div`
   margin: 0 auto;
   background-color: #121212;
 `;
+
+export const SkeletonWrapper = styled.div`
+  width: 100%;
+  padding-bottom: 80px;
+`;
+
+export const CommentSkeletonItem = styled.div`
+  display: flex;
+  gap: 12px;
+  padding: 16px 20px;
+  align-items: flex-start;
+`;

src/pages/feed/FeedDetailPage.tsx

@@ -11,7 +11,8 @@ import { useReplyActions } from '@/hooks/useReplyActions';
 import { getFeedDetail, type FeedDetailData } from '@/api/feeds/getFeedDetail';
 import { getComments, type CommentData } from '@/api/comments/getComments';
 import { deleteFeedPost } from '@/api/feeds/deleteFeedPost';
-import { Wrapper } from './FeedDetailPage.styled';
+import Skeleton, { FeedPostSkeleton } from '@/shared/ui/Skeleton';
+import { Wrapper, SkeletonWrapper, CommentSkeletonItem } from './FeedDetailPage.styled';
 import { useReplyStore } from '@/stores/replyStore';
 
 const FeedDetailPage = () => {
@@ -65,9 +66,11 @@ const FeedDetailPage = () => {
       try {
         setLoading(true);
 
+        const minLoadingTime = new Promise(resolve => setTimeout(resolve, 500));
         const [feedResponse, commentsResponse] = await Promise.all([
           getFeedDetail(Number(feedId)),
           getComments(Number(feedId), { postType: 'FEED' }),
+          minLoadingTime,
         ]);
 
         setFeedData(feedResponse.data);
@@ -170,7 +173,26 @@ const FeedDetailPage = () => {
   };
 
   if (loading) {
-    return <></>;
+    return (
+      <Wrapper>
+        <TitleHeader
+          leftIcon={<img src={leftArrow} alt="뒤로가기" />}
+          onLeftClick={handleBackClick}
+        />
+        <SkeletonWrapper>
+          <FeedPostSkeleton />
+          {Array.from({ length: 5 }).map((_, index) => (
+            <CommentSkeletonItem key={index}>
+              <Skeleton.Circle width={36} />
+              <div style={{ flex: 1 }}>
+                <Skeleton.Text width={80} height={14} />
+                <Skeleton.Text lines={2} height={14} gap={6} />
+              </div>
+            </CommentSkeletonItem>
+          ))}
+        </SkeletonWrapper>
+      </Wrapper>
+    );
   }
 
   if (error) {

src/pages/feed/FollowerListPage.tsx

@@ -9,6 +9,7 @@ import { getFollowingList } from '@/api/users/getFollowingList';
 import type { FollowData } from '@/types/follow';
 import LoadingSpinner from '@/components/common/LoadingSpinner';
 import { TotalBar, UserProfileList, Wrapper } from './FollowerListPage.syled';
+import { UserProfileItemSkeleton } from '@/shared/ui/Skeleton';
 
 const FollowerListPage = () => {
   const navigate = useNavigate();
@@ -36,14 +37,24 @@ const FollowerListPage = () => {
         setError(null);
         let response;
 
+        const minLoadingTime = !cursor ? new Promise(resolve => setTimeout(resolve, 500)) : null;
+
         if (type === 'followerlist') {
           if (!userId) {
             setError('사용자 ID가 없습니다.');
             return;
           }
-          response = await getFollowerList(userId, { size: 10, cursor: cursor || null });
+          const [data] = await Promise.all([
+            getFollowerList(userId, { size: 10, cursor: cursor || null }),
+            minLoadingTime,
+          ]);
+          response = data;
         } else {
-          response = await getFollowingList({ size: 10, cursor: cursor || null });
+          const [data] = await Promise.all([
+            getFollowingList({ size: 10, cursor: cursor || null }),
+            minLoadingTime,
+          ]);
+          response = data;
         }
 
         let userData: FollowData[] = [];
@@ -121,7 +132,11 @@ const FollowerListPage = () => {
       <TitleHeader leftIcon={<img src={leftArrow} />} onLeftClick={handleBackClick} title={title} />
       <TotalBar>전체 {totalCount}</TotalBar>
       {loading && userList.length === 0 ? (
-        <LoadingSpinner size="medium" fullHeight={true} />
+        <UserProfileList>
+          {Array.from({ length: 5 }).map((_, i) => (
+            <UserProfileItemSkeleton key={i} type={type as UserProfileType} />
+          ))}
+        </UserProfileList>
       ) : (
         <UserProfileList>
           {userList.map((user, index) => (

src/pages/feed/MyFeedPage.tsx

@@ -8,6 +8,7 @@ import OtherFeed from '@/components/feed/OtherFeed';
 import { getOtherFeed, type OtherFeedItem } from '@/api/feeds/getOtherFeed';
 import { getOtherProfile } from '@/api/users/getOtherProfile';
 import type { OtherProfileData } from '@/types/profile';
+import { OtherFeedSkeleton } from '@/shared/ui/Skeleton';
 import { Container } from './MyFeedPage.styled';
 
 const MyFeedPage = () => {
@@ -33,10 +34,16 @@ const MyFeedPage = () => {
       try {
         setLoading(true);
 
-        const [feedResponse, profileResponse] = await Promise.all([
+        const minLoadingTime = new Promise(resolve => setTimeout(resolve, 500));
+        const [feedResponse, profileResponse] = (await Promise.all([
           getOtherFeed(Number(userId)),
           getOtherProfile(Number(userId)),
-        ]);
+          minLoadingTime,
+        ])) as [
+          Awaited<ReturnType<typeof getOtherFeed>>,
+          Awaited<ReturnType<typeof getOtherProfile>>,
+          void,
+        ];
 
         setFeedData(feedResponse.data.feedList);
         setProfileData(profileResponse.data);
@@ -53,7 +60,16 @@ const MyFeedPage = () => {
   }, [userId]);
 
   if (loading) {
-    return <></>;
+    return (
+      <Container>
+        <TitleHeader
+          leftIcon={<img src={leftArrow} alt="뒤로가기" />}
+          onLeftClick={handleBackClick}
+        />
+        <OtherFeedSkeleton showFollowButton={false} />
+        <NavBar src={writefab} path="/post/create" />
+      </Container>
+    );
   }
 
   if (error) {

src/pages/feed/OtherFeedPage.tsx

@@ -8,6 +8,7 @@ import OtherFeed from '@/components/feed/OtherFeed';
 import { getOtherFeed, type OtherFeedItem } from '@/api/feeds/getOtherFeed';
 import { getOtherProfile } from '@/api/users/getOtherProfile';
 import type { OtherProfileData } from '@/types/profile';
+import { OtherFeedSkeleton } from '@/shared/ui/Skeleton';
 import { Container } from './MyFeedPage.styled';
 
 const OtherFeedPage = () => {
@@ -33,10 +34,16 @@ const OtherFeedPage = () => {
       try {
         setLoading(true);
 
-        const [feedResponse, profileResponse] = await Promise.all([
+        const minLoadingTime = new Promise(resolve => setTimeout(resolve, 500));
+        const [feedResponse, profileResponse] = (await Promise.all([
           getOtherFeed(Number(userId)),
           getOtherProfile(Number(userId)),
-        ]);
+          minLoadingTime,
+        ])) as [
+          Awaited<ReturnType<typeof getOtherFeed>>,
+          Awaited<ReturnType<typeof getOtherProfile>>,
+          void,
+        ];
 
         setFeedData(feedResponse.data.feedList);
         setProfileData(profileResponse.data);
@@ -53,7 +60,16 @@ const OtherFeedPage = () => {
   }, [userId]);
 
   if (loading) {
-    return <></>;
+    return (
+      <Container>
+        <TitleHeader
+          leftIcon={<img src={leftArrow} alt="뒤로가기" />}
+          onLeftClick={handleBackClick}
+        />
+        <OtherFeedSkeleton />
+        <NavBar src={writefab} path="/post/create" />
+      </Container>
+    );
   }
 
   if (error) {