fix: 피드 이미지 로딩 최적화 및 FollowerList에 의한 CLS 완화

src/components/common/Post/PostBody.tsx

@@ -13,8 +13,8 @@ const PostBody = ({
   feedId,
   contentUrls = [],
 }: PostBodyProps) => {
-  const navigate = useNavigate();
-  const hasImage = contentUrls.length > 0;
+  const previewImages = contentUrls.slice(0, 3);
+  const hasImage = previewImages.length > 0;
   const contentRef = useRef<HTMLDivElement>(null);
   const [isTruncated, setIsTruncated] = useState(false);
 
@@ -44,8 +44,17 @@ const PostBody = ({
       <ImageContainer>
         {hasImage && (
           <>
-            {contentUrls.map((src: string, i: number) => (
-              <img key={i} src={src} />
+            {previewImages.map((src: string, i: number) => (
+              <img
+                key={`${feedId}-${i}`}
+                src={src}
+                alt={`피드 이미지 ${i + 1}`}
+                loading="lazy"
+                decoding="async"
+                fetchPriority="low"
+                width={100}
+                height={100}
+              />
             ))}
           </>
         )}

src/components/feed/FollowList.styled.ts

@@ -14,10 +14,30 @@ export const Container = styled.div`
   .title {
     display: flex;
     flex-direction: row;
+    align-items: center;
+    gap: 4px;
     color: var(--color-white);
     font-size: ${typography.fontSize['2xs']};
     font-weight: var(--font-weight-medium);
     line-height: 20px;
+
+    img {
+      width: 14px;
+      height: 14px;
+      flex-shrink: 0;
+    }
+  }
+
+  .titleSkeletonIcon {
+    width: 14px;
+    height: 14px;
+    flex-shrink: 0;
+  }
+
+  .titleSkeletonText {
+    display: flex;
+    align-items: center;
+    height: 20px;
   }
 `;
 
@@ -26,6 +46,7 @@ export const FollowContainer = styled.div`
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
+  min-height: 58px;
 
   img {
     cursor: pointer;
@@ -73,6 +94,37 @@ export const FollowContainer = styled.div`
         border: 0.5px solid #888;
       }
     }
+
+    .skeletonItem {
+      cursor: default;
+    }
+  }
+
+  .arrowSkeleton {
+    width: 16px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+`;
+
+export const FollowListLoading = styled.div`
+  display: flex;
+  align-items: center;
+  min-height: 58px;
+
+  .placeholderList {
+    display: flex;
+    gap: 12px;
+  }
+
+  .placeholderItem {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background-color: var(--color-darkgrey-dark);
   }
 `;
 

src/components/feed/FollowList.tsx

@@ -4,17 +4,23 @@ import rightArrow from '../../assets/feed/rightArrow.svg';
 import people from '../../assets/feed/people.svg';
 import character from '../../assets/feed/character.svg';
 import { getRecentFollowing, type RecentWriterData } from '@/api/users/getRecentFollowing';
+import Skeleton from '@/shared/ui/Skeleton';
 import { Container, FollowContainer, EmptyFollowerContainer } from './FollowList.styled';
 
-const FollowList = () => {
+interface FollowListProps {
+  onLoadingChange?: (loading: boolean) => void;
+}
+
+const FollowList = ({ onLoadingChange }: FollowListProps) => {
   const navigate = useNavigate();
   const [myFollowings, setMyFollowings] = useState<RecentWriterData[]>([]);
   const [loading, setLoading] = useState(true);
 
   const fetchRecentFollowing = async () => {
     try {
       setLoading(true);
-      const response = await getRecentFollowing();
+      const minLoadingTime = new Promise(resolve => setTimeout(resolve, 500));
+      const [response] = await Promise.all([getRecentFollowing(), minLoadingTime]);
 
       if (response.isSuccess) {
         setMyFollowings(response.data.myFollowingUsers);
@@ -33,6 +39,10 @@ const FollowList = () => {
     fetchRecentFollowing();
   }, []);
 
+  useEffect(() => {
+    onLoadingChange?.(loading);
+  }, [loading, onLoadingChange]);
+
   const hasFollowers = myFollowings.length > 0;
   const visible = hasFollowers ? myFollowings.slice(0, 10) : [];
 
@@ -50,12 +60,37 @@ const FollowList = () => {
 
   return (
     <Container>
-      <div className="title">
-        <img src={people} />
-        <div>내 띱</div>
-      </div>
       {loading ? (
-        <></>
+        <div className="title">
+          <div className="titleSkeletonIcon">
+            <Skeleton.Box width={14} height={14} />
+          </div>
+          <div className="titleSkeletonText">
+            <Skeleton.Text width={24} height={12} />
+          </div>
+        </div>
+      ) : (
+        <div className="title">
+          <img src={people} alt="내 띱" />
+          <div>내 띱</div>
+        </div>
+      )}
+      {loading ? (
+        <FollowContainer>
+          <div className="followerList">
+            {Array.from({ length: 6 }).map((_, i) => (
+              <div className="followers skeletonItem" key={i}>
+                <Skeleton.Circle width={36} />
+                <div className="username skeletonUsername">
+                  <Skeleton.Text width={30} height={10} />
+                </div>
+              </div>
+            ))}
+          </div>
+          <div className="arrowSkeleton">
+            <Skeleton.Box width={16} height={16} />
+          </div>
+        </FollowContainer>
       ) : hasFollowers ? (
         <FollowContainer>
           <div className="followerList">

src/components/feed/MyFeed.styled.ts

@@ -3,7 +3,6 @@ import { colors, typography } from '@/styles/global/global';
 
 export const Container = styled.div`
   min-height: 100vh;
-  padding-top: 136px;
   padding-bottom: 125px; //이전 76px
   background-color: var(--color-black-main);
 `;

src/components/feed/TotalFeed.styled.ts

@@ -3,7 +3,7 @@ import { colors, typography } from '@/styles/global/global';
 
 export const Container = styled.div`
   min-height: 100vh;
-  padding-top: 136px;
+  /* padding-top: 136px; */
   padding-bottom: 125px; //이전 76px
   background-color: var(--color-black-main);
 `;

src/components/feed/TotalFeed.tsx

@@ -1,4 +1,3 @@
-import FollowList from './FollowList';
 import FeedPost from './FeedPost';
 import type { FeedListProps } from '../../types/post';
 import { Container, EmptyState } from './TotalFeed.styled';
@@ -8,7 +7,6 @@ const TotalFeed = ({ showHeader, posts = [], isTotalFeed, isLast = false }: Feed
 
   return (
     <Container>
-      <FollowList />
       {hasPosts ? (
         posts.map((post, index) => (
           <FeedPost

src/pages/feed/Feed.styled.ts

@@ -3,14 +3,14 @@ import styled from '@emotion/styled';
 export const Container = styled.div`
   min-width: 320px;
   max-width: 767px;
+  padding-top: 136px;
   height: 100vh;
   background-color: var(--color-black-main);
   margin: 0 auto;
 `;
 
 export const SkeletonWrapper = styled.div`
   min-height: 100vh;
-  padding-top: 136px;
   padding-bottom: 125px;
   background-color: var(--color-black-main);
 `;

src/pages/feed/Feed.tsx

@@ -3,6 +3,7 @@ import NavBar from '../../components/common/NavBar';
 import TabBar from '../../components/feed/TabBar';
 import MyFeed from '../../components/feed/MyFeed';
 import TotalFeed from '../../components/feed/TotalFeed';
+import FollowList from '../../components/feed/FollowList';
 import MainHeader from '@/components/common/MainHeader';
 import { FeedPostSkeleton, OtherFeedSkeleton } from '@/shared/ui/Skeleton';
 import writefab from '../../assets/common/writefab.svg';
@@ -21,6 +22,10 @@ const tabs = ['피드', '내 피드'];
 const Feed = () => {
   const navigate = useNavigate();
   const location = useLocation();
+  const initialTabFromState = (location.state as { initialTab?: string } | null)?.initialTab;
+  const [activeTab, setActiveTab] = useState<string>(initialTabFromState ?? tabs[0]);
+  const [isFollowListLoading, setIsFollowListLoading] = useState(activeTab === '피드');
+
   const { waitForToken } = useSocialLoginToken();
 
   const initialTabFromState = (location.state as { initialTab?: string } | null)?.initialTab;
@@ -85,8 +90,17 @@ const Feed = () => {
     window.scrollTo(0, 0);
   }, [activeTab]);
 
+  useEffect(() => {
+    if (activeTab === '피드') {
+      setIsFollowListLoading(true);
+    }
+  }, [activeTab]);
+
   const currentFeed = activeTab === '피드' ? totalFeed : myFeed;
-  const showInitialLoading = currentFeed.isLoading && currentFeed.items.length === 0;
+  const showFeedInitialLoading = totalFeed.isLoading && totalFeed.items.length === 0;
+  const showMyFeedInitialLoading = myFeed.isLoading && myFeed.items.length === 0;
+  const showInitialLoading =
+    activeTab === '피드' ? showFeedInitialLoading || isFollowListLoading : showMyFeedInitialLoading;
 
   return (
     <Container>
@@ -96,6 +110,7 @@ const Feed = () => {
         rightButtonClick={() => navigate('/notice')}
       />
       <TabBar tabs={tabs} activeTab={activeTab} onTabClick={setActiveTab} />
+      {activeTab === '피드' && <FollowList onLoadingChange={setIsFollowListLoading} />}
       {showInitialLoading ? (
         activeTab === '내 피드' ? (
           <OtherFeedSkeleton showFollowButton={false} paddingTop={136} />

src/shared/ui/Skeleton/feed/OtherFeedSkeleton.styled.ts

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 
 export const SkeletonContainer = styled.div<{ paddingTop?: number }>`
-  padding-top: ${({ paddingTop }) => (paddingTop !== undefined ? `${paddingTop}px` : '56px')};
+  /* padding-top: ${({ paddingTop }) => (paddingTop !== undefined ? `${paddingTop}px` : '56px')}; */
   background-color: var(--color-black-main);
   min-height: 100vh;
 `;