THIP-TextHip · heeeeyong · Aug 20, 2025 · Aug 19, 2025 · Aug 20, 2025 · Aug 20, 2025
diff --git a/index.html b/index.html
@@ -7,7 +7,7 @@
     <title>THIP, 독서를 기록하는 가장 힙한 방법</title>
     <meta property="og:title" content="THIP, 독서를 기록하는 가장 힙한 방법" />
     <meta property="og:description" content="커뮤니티형 독서 기록 플랫폼. 띱. THIP." />
-    <meta property="og:image" content="https://thip.co.kr/assets/thumbnail.png" />
+    <meta property="og:image" content="https://thip.co.kr/assets/thumbnail.jpeg" />
     <meta property="og:url" content="https://thip.co.kr" />
   </head>
   <body>

diff --git a/public/assets/custom_favicon.png b/public/assets/custom_favicon.png
diff --git a/public/assets/thumbnail.jpeg b/public/assets/thumbnail.jpeg
diff --git a/public/assets/thumbnail.png b/public/assets/thumbnail.png
diff --git a/src/components/common/Post/PostBody.tsx b/src/components/common/Post/PostBody.tsx
@@ -93,11 +93,11 @@ const PostBody = ({
       </PostContent>
       <ImageContainer>
         {hasImage && (
-          <div className="imgContainer">
+          <>
             {contentUrls.map((src: string, i: number) => (
               <img key={i} src={src} />
             ))}
-          </div>
+          </>
         )}
       </ImageContainer>
     </Container>

diff --git a/src/components/feed/FollowList.tsx b/src/components/feed/FollowList.tsx
@@ -10,7 +10,7 @@ import { getRecentFollowing, type RecentWriterData } from '@/api/users/getRecent
 const FollowList = () => {
   const navigate = useNavigate();
   const [myFollowings, setMyFollowings] = useState<RecentWriterData[]>([]);
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(true);
 
   // API에서 최근 글 작성한 팔로우 리스트 조회
   const fetchRecentFollowing = async () => {

diff --git a/src/components/feed/MyFeed.tsx b/src/components/feed/MyFeed.tsx
@@ -7,7 +7,6 @@ import { colors, typography } from '@/styles/global/global';
 import TotalBar from './TotalBar';
 import { getMyProfile } from '@/api/feeds/getMyProfile';
 import type { MyProfileData } from '@/types/profile';
-import LoadingSpinner from '@/components/common/LoadingSpinner';
 
 const MyFeed = ({ showHeader, posts = [], isLast = false }: FeedListProps) => {
   const [profileData, setProfileData] = useState<MyProfileData | null>(null);
@@ -34,7 +33,8 @@ const MyFeed = ({ showHeader, posts = [], isLast = false }: FeedListProps) => {
 
   if (loading || !profileData) {
     return (
-      <LoadingSpinner message="내 피드 정보를 불러오는 중..." size="large" fullHeight={true} />
+      <></>
+      // <LoadingSpinner message="내 피드 정보를 불러오는 중..." size="large" fullHeight={true} />
     );
   }
 

diff --git a/src/pages/feed/Feed.tsx b/src/pages/feed/Feed.tsx
@@ -5,6 +5,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 LoadingSpinner from '../../components/common/LoadingSpinner';
 import writefab from '../../assets/common/writefab.svg';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { getTotalFeeds } from '@/api/feeds/getTotalFeed';
@@ -43,6 +44,11 @@ const Feed = () => {
   const [myNextCursor, setMyNextCursor] = useState<string>('');
   const [myIsLast, setMyIsLast] = useState(false);
 
+  // 탭 전환 시 로딩 상태
+  const [tabLoading, setTabLoading] = useState(false);
+  // 초기 로딩 상태 (첫 진입 시)
+  const [initialLoading, setInitialLoading] = useState(true);
+
   const handleSearchButton = () => {
     navigate('/feed/search');
   };
@@ -157,10 +163,17 @@ const Feed = () => {
         return;
       }
 
-      if (activeTab === '피드') {
-        loadTotalFeeds();
-      } else if (activeTab === '내 피드') {
-        loadMyFeeds();
+      setTabLoading(true);
+
+      try {
+        if (activeTab === '피드') {
+          await loadTotalFeeds();
+        } else if (activeTab === '내 피드') {
+          await loadMyFeeds();
+        }
+      } finally {
+        setTabLoading(false);
+        setInitialLoading(false);
       }
     };
 
@@ -171,18 +184,24 @@ const Feed = () => {
     <Container>
       <MainHeader type="home" leftButtonClick={handleSearchButton} />
       <TabBar tabs={tabs} activeTab={activeTab} onTabClick={setActiveTab} />
-      {activeTab === '피드' ? (
-        <>
-          <TotalFeed
-            showHeader={true}
-            posts={totalFeedPosts}
-            isMyFeed={false}
-            isLast={totalIsLast}
-          />
-        </>
+      {initialLoading || tabLoading ? (
+        <LoadingSpinner size="large" fullHeight={true} />
       ) : (
         <>
-          <MyFeed showHeader={false} posts={myFeedPosts} isMyFeed={true} isLast={myIsLast} />
+          {activeTab === '피드' ? (
+            <>
+              <TotalFeed
+                showHeader={true}
+                posts={totalFeedPosts}
+                isMyFeed={false}
+                isLast={totalIsLast}
+              />
+            </>
+          ) : (
+            <>
+              <MyFeed showHeader={false} posts={myFeedPosts} isMyFeed={true} isLast={myIsLast} />
+            </>
+          )}
         </>
       )}
       <NavBar src={writefab} path="/post/create" />

diff --git a/src/pages/mypage/Mypage.tsx b/src/pages/mypage/Mypage.tsx
@@ -2,6 +2,7 @@ import styled from '@emotion/styled';
 import { useNavigate } from 'react-router-dom';
 import { colors, typography } from '@/styles/global/global';
 import MenuButton from '@/components/Mypage/MenuButton';
+import LoadingSpinner from '@/components/common/LoadingSpinner';
 import { usePopupActions } from '@/hooks/usePopupActions';
 import { useLogout } from '@/hooks/useLogout';
 import alert from '../../assets/mypage/alert.svg';
@@ -17,14 +18,22 @@ import { useEffect, useState } from 'react';
 
 const Mypage = () => {
   const [profile, setProfile] = useState<GetMyProfileResponse['data'] | null>(null);
+  const [loading, setLoading] = useState(true);
   const { openConfirm, closePopup } = usePopupActions();
   const navigate = useNavigate();
   const { handleLogout: logout } = useLogout();
 
   useEffect(() => {
     const fetchProfile = async () => {
-      const profile = await getMyProfile();
-      setProfile(profile);
+      try {
+        setLoading(true);
+        const profile = await getMyProfile();
+        setProfile(profile);
+      } catch (error) {
+        console.error('프로필 정보 로드 실패:', error);
+      } finally {
+        setLoading(false);
+      }
     };
     fetchProfile();
   }, []);
@@ -33,8 +42,20 @@ const Mypage = () => {
     navigate('/mypage/edit', { state: { profile } });
   };
 
+  if (loading) {
+    return (
+      <Wrapper>
+        <LoadingSpinner message="내 정보를 불러오는 중..." size="large" fullHeight={true} />
+      </Wrapper>
+    );
+  }
+
   if (!profile) {
-    return <div>로딩 중...</div>;
+    return (
+      <Wrapper>
+        <div>프로필 정보를 불러올 수 없습니다.</div>
+      </Wrapper>
+    );
   }
 
   const handleLogout = () => {