diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 7ed9c92..2ae7ef3 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import React from 'react';
 import './globals.scss';
+import './lib/axios';
 
 import {
   AuthProvider,
diff --git a/src/app/lib/axios.ts b/src/app/lib/axios.ts
new file mode 100644
index 0000000..0746e6c
--- /dev/null
+++ b/src/app/lib/axios.ts
@@ -0,0 +1,71 @@
+'use client';
+
+import axios, { type AxiosError, type AxiosResponse } from 'axios';
+
+import { postTokenRefresh } from '@/features/auth';
+import { load, save } from '@/shared/storage';
+import { type FailureDTO } from '@/shared/types';
+
+let isRefreshing = false;
+let refreshSubscribers: Array<(token: string) => void> = [];
+
+const subscribeTokenRefresh = (callback: (token: string) => void) => {
+  refreshSubscribers.push(callback);
+};
+
+const onRefreshed = (token: string) => {
+  refreshSubscribers.forEach(callback => {
+    callback(token);
+  });
+  refreshSubscribers = [];
+};
+
+axios.interceptors.response.use(
+  (response: AxiosResponse) => response,
+  async (error: AxiosError<FailureDTO>) => {
+    if (error.response?.status !== 401 || error.response?.data.code !== 'C002')
+      return await Promise.reject(error);
+
+    const refreshToken = load<string>({ type: 'local', key: 'refreshToken' });
+    if (refreshToken == null) {
+      window.location.href = '/';
+      return await Promise.reject(error);
+    }
+
+    if (isRefreshing) {
+      return await new Promise(resolve => {
+        subscribeTokenRefresh((token: string) => {
+          const { config } = error;
+          if (config?.headers != null) {
+            config.headers.Authorization = `Bearer ${token}`;
+            resolve(axios(config));
+          }
+        });
+      });
+    }
+
+    isRefreshing = true;
+    try {
+      const {
+        data: { accessToken, refreshToken: newRefreshToken, expiresIn },
+      } = await postTokenRefresh(refreshToken);
+
+      axios.defaults.headers.common.Authorization = `Bearer ${accessToken}`;
+      save({ type: 'local', key: 'refreshToken', value: newRefreshToken });
+      save({ type: 'local', key: 'expiresIn', value: `${expiresIn}` });
+
+      const { config } = error;
+      onRefreshed(accessToken);
+      if (config != null) {
+        config.headers.Authorization = `Bearer ${accessToken}`;
+        return await axios(config);
+      }
+    } catch (refreshError) {
+      return await Promise.reject(error);
+    } finally {
+      isRefreshing = false;
+    }
+
+    return await Promise.reject(error);
+  },
+);
diff --git a/src/app/lib/providers/InitializationProvider.tsx b/src/app/lib/providers/InitializationProvider.tsx
index 6f3d806..0acae5e 100644
--- a/src/app/lib/providers/InitializationProvider.tsx
+++ b/src/app/lib/providers/InitializationProvider.tsx
@@ -18,7 +18,6 @@ export function InitialzationProvider({
   const { data: userData } = useUserData(auth?.accessToken != null);
 
   useEffect(() => {
-    console.log(userData);
     if (userData != null) {
       setAuthUserData(userData);
       if (userData.initialized) {
diff --git a/src/app/pages/main-page.tsx b/src/app/pages/main-page.tsx
index 38b2880..1764dce 100644
--- a/src/app/pages/main-page.tsx
+++ b/src/app/pages/main-page.tsx
@@ -81,6 +81,19 @@ const styles = {
       display: none;
     }
   `,
+  mateRecommendationIsEmpty: styled.div`
+    color: #000;
+    font-family: 'Noto Sans KR';
+    font-size: 1.5rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    padding-block: 2rem;
+  `,
 };
 
 export function MainPage() {
@@ -144,30 +157,45 @@ export function MainPage() {
           {auth?.user?.name}님의 추천 메이트
         </styles.mateRecommendationTitle>
         <styles.mateRecommendationRow>
-          <CircularButton
-            direction="left"
-            disabled={false}
-            onClick={handleScrollLeft}
-          />
-          <styles.mateRecommendation ref={scrollRef}>
-            {recommendationMates?.data?.map(
-              ({ memberId, score, nickname, location, profileImageUrl }) => (
-                <Link href={`/profile/${memberId}`} key={memberId}>
-                  <UserCard
-                    name={nickname}
-                    percentage={score}
-                    profileImage={profileImageUrl}
-                    location={location}
-                  />
-                </Link>
-              ),
-            )}
-          </styles.mateRecommendation>
-          <CircularButton
-            direction="right"
-            disabled={false}
-            onClick={handleScrollRight}
-          />
+          {recommendationMates?.data != null &&
+          recommendationMates.data.length > 0 ? (
+            <>
+              <CircularButton
+                direction="left"
+                disabled={false}
+                onClick={handleScrollLeft}
+              />
+              <styles.mateRecommendation ref={scrollRef}>
+                {recommendationMates.data.map(
+                  ({
+                    memberId,
+                    score,
+                    nickname,
+                    location,
+                    profileImageUrl,
+                  }) => (
+                    <Link href={`/profile/${memberId}`} key={memberId}>
+                      <UserCard
+                        name={nickname}
+                        percentage={score}
+                        profileImage={profileImageUrl}
+                        location={location}
+                      />
+                    </Link>
+                  ),
+                )}
+              </styles.mateRecommendation>
+              <CircularButton
+                direction="right"
+                disabled={false}
+                onClick={handleScrollRight}
+              />
+            </>
+          ) : (
+            <styles.mateRecommendationIsEmpty style={{ alignSelf: 'center' }}>
+              <p>추천되는 메이트가 없습니다.</p>
+            </styles.mateRecommendationIsEmpty>
+          )}
         </styles.mateRecommendationRow>
       </styles.mateRecommendationContainer>
     </styles.container>
diff --git a/src/app/pages/mobile/mobile-main-page.tsx b/src/app/pages/mobile/mobile-main-page.tsx
index b53457a..dd49959 100644
--- a/src/app/pages/mobile/mobile-main-page.tsx
+++ b/src/app/pages/mobile/mobile-main-page.tsx
@@ -88,6 +88,19 @@ const styles = {
     overflow-x: auto;
     flex-wrap: wrap;
   `,
+  mateRecommendationIsEmpty: styled.div`
+    color: #000;
+    font-family: 'Noto Sans KR';
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    padding-block: 2rem;
+  `,
 };
 
 export function MobileMainPage() {
@@ -136,20 +149,27 @@ export function MobileMainPage() {
         <styles.mateRecommendationTitle>
           <h1>{auth?.user?.name}님의 추천 메이트</h1>
         </styles.mateRecommendationTitle>
-        <styles.mateRecommendation>
-          {recommendationMates?.data?.map(
-            ({ memberId, score, nickname, location, profileImageUrl }) => (
-              <Link href={`/profile/${memberId}`} key={memberId}>
-                <UserCard
-                  name={nickname}
-                  percentage={score}
-                  location={location}
-                  profileImage={profileImageUrl}
-                />
-              </Link>
-            ),
-          )}
-        </styles.mateRecommendation>
+        {recommendationMates?.data != null &&
+        recommendationMates.data.length > 0 ? (
+          <styles.mateRecommendation>
+            {recommendationMates.data.map(
+              ({ memberId, score, nickname, location, profileImageUrl }) => (
+                <Link href={`/profile/${memberId}`} key={memberId}>
+                  <UserCard
+                    name={nickname}
+                    percentage={score}
+                    location={location}
+                    profileImage={profileImageUrl}
+                  />
+                </Link>
+              ),
+            )}
+          </styles.mateRecommendation>
+        ) : (
+          <styles.mateRecommendationIsEmpty>
+            <p>추천되는 메이트가 없습니다.</p>
+          </styles.mateRecommendationIsEmpty>
+        )}
       </styles.mateRecommendationContainer>
     </styles.container>
   );
diff --git a/src/app/pages/mobile/mobile-shared-posts-page.tsx b/src/app/pages/mobile/mobile-shared-posts-page.tsx
index 0a7905f..a03139e 100644
--- a/src/app/pages/mobile/mobile-shared-posts-page.tsx
+++ b/src/app/pages/mobile/mobile-shared-posts-page.tsx
@@ -22,8 +22,6 @@ import {
   useDormitorySharedPosts,
   usePaging,
   useSharedPosts,
-  type GetDormitorySharedPostsDTO,
-  type GetSharedPostsDTO,
 } from '@/features/shared';
 
 const styles = {
@@ -135,6 +133,16 @@ const styles = {
       justify-content: flex-start;
     }
   `,
+  noRecommendation: styled.div`
+    font-family: 'Noto Sans KR';
+    font-size: 0.85rem;
+    font-style: normal;
+    font-weight: 500;
+
+    display: flex;
+    width: 100%;
+    justify-content: center;
+  `,
 };
 
 export function MobileSharedPostsPage() {
@@ -143,9 +151,6 @@ export function MobileSharedPostsPage() {
   const auth = useAuthValue();
   const [selected, setSelected] = useState<SharedPostsType>('hasRoom');
   const [totalPageCount, setTotalPageCount] = useState(0);
-  const [prevSharedPosts, setPrevSharedPosts] = useState<
-    GetSharedPostsDTO | GetDormitorySharedPostsDTO | null
-  >(null);
 
   const { filter, derivedFilter, reset: resetFilter } = useSharedPostsFilter();
 
@@ -197,10 +202,8 @@ export function MobileSharedPostsPage() {
   useEffect(() => {
     if (selected === 'hasRoom' && sharedPosts != null) {
       setTotalPageCount(sharedPosts.data.totalPages);
-      setPrevSharedPosts(null);
     } else if (selected === 'dormitory' && dormitorySharedPosts != null) {
       setTotalPageCount(dormitorySharedPosts.data.totalPages);
-      setPrevSharedPosts(null);
     }
   }, [selected, dormitorySharedPosts, sharedPosts]);
 
@@ -224,27 +227,23 @@ export function MobileSharedPostsPage() {
       {selected === 'hasRoom' || selected === 'dormitory' ? (
         <>
           <styles.posts>
-            {prevSharedPosts != null
-              ? prevSharedPosts.data.content.map(post => (
-                  <PostCard
-                    key={post.id}
-                    post={post}
-                    onClick={() => {
-                      router.push(`/shared/${post.id}`);
-                    }}
-                  />
-                ))
-              : posts?.data.content.map(post => (
-                  <PostCard
-                    key={post.id}
-                    post={post}
-                    onClick={() => {
-                      router.push(
-                        `/shared/${selected === 'hasRoom' ? 'room' : 'dormitory'}/${post.id}`,
-                      );
-                    }}
-                  />
-                ))}
+            {posts?.data != null && posts.data.content.length > 0 ? (
+              posts?.data.content.map(post => (
+                <PostCard
+                  key={post.id}
+                  post={post}
+                  onClick={() => {
+                    router.push(
+                      `/shared/${selected === 'hasRoom' ? 'room' : 'dormitory'}/${post.id}`,
+                    );
+                  }}
+                />
+              ))
+            ) : (
+              <styles.noRecommendation>
+                <p>추천되는 게시글이 없습니다.</p>
+              </styles.noRecommendation>
+            )}
           </styles.posts>
           {posts?.data.content.length !== 0 && (
             <styles.pagingRow>
@@ -252,9 +251,6 @@ export function MobileSharedPostsPage() {
                 direction="left"
                 disabled={isFirstPage}
                 onClick={() => {
-                  if (sharedPosts != null) {
-                    setPrevSharedPosts(sharedPosts);
-                  }
                   handlePrevPage();
                   window.scrollTo({ top: 0, behavior: 'smooth' });
                 }}
@@ -269,9 +265,6 @@ export function MobileSharedPostsPage() {
                   <button
                     type="button"
                     onClick={() => {
-                      if (sharedPosts != null) {
-                        setPrevSharedPosts(sharedPosts);
-                      }
                       handleSetPage(index + 1 + currentSlice * sliceSize);
                       window.scrollTo({ top: 0, behavior: 'smooth' });
                     }}
@@ -290,9 +283,6 @@ export function MobileSharedPostsPage() {
                 direction="right"
                 disabled={isLastPage}
                 onClick={() => {
-                  if (sharedPosts != null) {
-                    setPrevSharedPosts(sharedPosts);
-                  }
                   handleNextPage();
                   window.scrollTo({ top: 0, behavior: 'smooth' });
                 }}
@@ -302,17 +292,24 @@ export function MobileSharedPostsPage() {
         </>
       ) : (
         <styles.cards>
-          {recommendationMates?.data?.map(
-            ({ memberId, score, nickname, location, profileImageUrl }) => (
-              <Link href={`/profile/${memberId}`} key={memberId}>
-                <UserCard
-                  name={nickname}
-                  percentage={score}
-                  location={location}
-                  profileImage={profileImageUrl}
-                />
-              </Link>
-            ),
+          {recommendationMates?.data != null &&
+          recommendationMates.data.length > 0 ? (
+            recommendationMates.data.map(
+              ({ memberId, score, nickname, location, profileImageUrl }) => (
+                <Link href={`/profile/${memberId}`} key={memberId}>
+                  <UserCard
+                    name={nickname}
+                    percentage={score}
+                    location={location}
+                    profileImage={profileImageUrl}
+                  />
+                </Link>
+              ),
+            )
+          ) : (
+            <styles.noRecommendation>
+              <p>추천되는 메이트가 없습니다.</p>
+            </styles.noRecommendation>
           )}
         </styles.cards>
       )}
diff --git a/src/app/pages/shared-posts-page.tsx b/src/app/pages/shared-posts-page.tsx
index 456e066..1b9dfbb 100644
--- a/src/app/pages/shared-posts-page.tsx
+++ b/src/app/pages/shared-posts-page.tsx
@@ -22,8 +22,6 @@ import {
   useDormitorySharedPosts,
   usePaging,
   useSharedPosts,
-  type GetDormitorySharedPostsDTO,
-  type GetSharedPostsDTO,
 } from '@/features/shared';
 
 const styles = {
@@ -116,6 +114,16 @@ const styles = {
     align-self: stretch;
     flex-wrap: wrap;
   `,
+  noRecommendation: styled.div`
+    font-family: 'Noto Sans KR';
+    font-size: 1.25rem;
+    font-style: normal;
+    font-weight: 500;
+
+    display: flex;
+    width: 100%;
+    justify-content: center;
+  `,
 };
 
 export function SharedPostsPage() {
@@ -124,9 +132,6 @@ export function SharedPostsPage() {
   const auth = useAuthValue();
   const [selected, setSelected] = useState<SharedPostsType>('hasRoom');
   const [totalPageCount, setTotalPageCount] = useState(0);
-  const [prevSharedPosts, setPrevSharedPosts] = useState<
-    GetSharedPostsDTO | GetDormitorySharedPostsDTO | null
-  >(null);
 
   const { filter, derivedFilter, reset: resetFilter } = useSharedPostsFilter();
 
@@ -144,14 +149,19 @@ export function SharedPostsPage() {
     sliceSize: 10,
   });
 
-  const { data: sharedPosts } = useSharedPosts({
-    filter: derivedFilter,
-    cardOption: filter.cardType ?? 'my',
-    enabled: auth?.accessToken != null && selected === 'hasRoom',
-    page: page - 1,
-  });
+  const { isLoading: isSharedPostsLoading, data: sharedPosts } = useSharedPosts(
+    {
+      filter: derivedFilter,
+      cardOption: filter.cardType ?? 'my',
+      enabled: auth?.accessToken != null && selected === 'hasRoom',
+      page: page - 1,
+    },
+  );
 
-  const { data: dormitorySharedPosts } = useDormitorySharedPosts({
+  const {
+    isLoading: isDormitorySharedPostsLoading,
+    data: dormitorySharedPosts,
+  } = useDormitorySharedPosts({
     filter: derivedFilter,
     cardOption: filter.cardType ?? 'my',
     enabled: auth?.accessToken != null && selected === 'dormitory',
@@ -163,10 +173,11 @@ export function SharedPostsPage() {
     [selected, sharedPosts, dormitorySharedPosts],
   );
 
-  const { data: recommendationMates } = useRecommendMates({
-    enabled: auth?.accessToken != null && selected === 'homeless',
-    cardOption: filter.cardType ?? 'my',
-  });
+  const { isLoading: isMatesLoading, data: recommendationMates } =
+    useRecommendMates({
+      enabled: auth?.accessToken != null && selected === 'homeless',
+      cardOption: filter.cardType ?? 'my',
+    });
 
   useEffect(() => {
     resetFilter();
@@ -178,13 +189,77 @@ export function SharedPostsPage() {
   useEffect(() => {
     if (selected === 'hasRoom' && sharedPosts != null) {
       setTotalPageCount(sharedPosts.data.totalPages);
-      setPrevSharedPosts(null);
     } else if (selected === 'dormitory' && dormitorySharedPosts != null) {
       setTotalPageCount(dormitorySharedPosts.data.totalPages);
-      setPrevSharedPosts(null);
     }
   }, [selected, dormitorySharedPosts, sharedPosts]);
 
+  const renderPosts = useMemo(() => {
+    if (isSharedPostsLoading || isDormitorySharedPostsLoading) {
+      return (
+        <styles.noRecommendation>잠시만 기다려주세요..</styles.noRecommendation>
+      );
+    }
+
+    if (posts?.data == null || posts.data.content.length === 0) {
+      return (
+        <styles.noRecommendation>
+          <p>추천되는 게시글이 없습니다.</p>
+        </styles.noRecommendation>
+      );
+    }
+
+    return posts?.data.content.map(post => (
+      <PostCard
+        key={post.id}
+        post={post}
+        onClick={() => {
+          router.push(
+            `/shared/${selected === 'hasRoom' ? 'room' : 'dormitory'}/${post.id}`,
+          );
+        }}
+      />
+    ));
+  }, [
+    isDormitorySharedPostsLoading,
+    isSharedPostsLoading,
+    posts?.data,
+    router,
+    selected,
+  ]);
+
+  const renderMates = useMemo(() => {
+    if (isMatesLoading) {
+      return (
+        <styles.noRecommendation>잠시만 기다려주세요..</styles.noRecommendation>
+      );
+    }
+
+    if (
+      recommendationMates?.data == null ||
+      recommendationMates.data.length === 0
+    ) {
+      return (
+        <styles.noRecommendation>
+          <p>추천되는 메이트가 없습니다.</p>
+        </styles.noRecommendation>
+      );
+    }
+
+    return recommendationMates.data.map(
+      ({ memberId, score, nickname, location, profileImageUrl }) => (
+        <Link href={`/profile/${memberId}`} key={memberId}>
+          <UserCard
+            name={nickname}
+            percentage={score}
+            location={location}
+            profileImage={profileImageUrl}
+          />
+        </Link>
+      ),
+    );
+  }, [isMatesLoading, recommendationMates?.data]);
+
   return (
     <styles.container>
       <styles.SharedPostsMenu selected={selected} handleSelect={setSelected} />
@@ -204,38 +279,13 @@ export function SharedPostsPage() {
       </styles.createButtonRow>
       {selected === 'hasRoom' || selected === 'dormitory' ? (
         <>
-          <styles.posts>
-            {prevSharedPosts != null
-              ? prevSharedPosts.data.content.map(post => (
-                  <PostCard
-                    key={post.id}
-                    post={post}
-                    onClick={() => {
-                      router.push(`/shared/${post.id}`);
-                    }}
-                  />
-                ))
-              : posts?.data.content.map(post => (
-                  <PostCard
-                    key={post.id}
-                    post={post}
-                    onClick={() => {
-                      router.push(
-                        `/shared/${selected === 'hasRoom' ? 'room' : 'dormitory'}/${post.id}`,
-                      );
-                    }}
-                  />
-                ))}
-          </styles.posts>
+          <styles.posts>{renderPosts}</styles.posts>
           {posts != null && posts.data.content.length !== 0 && (
             <styles.pagingRow>
               <styles.CircularButton
                 direction="left"
                 disabled={isFirstPage}
                 onClick={() => {
-                  if (sharedPosts != null) {
-                    setPrevSharedPosts(sharedPosts);
-                  }
                   handlePrevPage();
                   window.scrollTo({ top: 0, behavior: 'smooth' });
                 }}
@@ -250,9 +300,6 @@ export function SharedPostsPage() {
                   <button
                     type="button"
                     onClick={() => {
-                      if (sharedPosts != null) {
-                        setPrevSharedPosts(sharedPosts);
-                      }
                       handleSetPage(index + 1 + currentSlice * sliceSize);
                       window.scrollTo({ top: 0, behavior: 'smooth' });
                     }}
@@ -271,9 +318,6 @@ export function SharedPostsPage() {
                 direction="right"
                 disabled={isLastPage}
                 onClick={() => {
-                  if (sharedPosts != null) {
-                    setPrevSharedPosts(sharedPosts);
-                  }
                   handleNextPage();
                   window.scrollTo({ top: 0, behavior: 'smooth' });
                 }}
@@ -282,20 +326,7 @@ export function SharedPostsPage() {
           )}
         </>
       ) : (
-        <styles.cards>
-          {recommendationMates?.data?.map(
-            ({ memberId, score, nickname, location, profileImageUrl }) => (
-              <Link href={`/profile/${memberId}`} key={memberId}>
-                <UserCard
-                  name={nickname}
-                  percentage={score}
-                  location={location}
-                  profileImage={profileImageUrl}
-                />
-              </Link>
-            ),
-          )}
-        </styles.cards>
+        <styles.cards>{renderMates}</styles.cards>
       )}
     </styles.container>
   );
diff --git a/src/app/pages/user-input-page.tsx b/src/app/pages/user-input-page.tsx
index d605994..b3036ee 100644
--- a/src/app/pages/user-input-page.tsx
+++ b/src/app/pages/user-input-page.tsx
@@ -49,6 +49,7 @@ const styles = {
     flex-direction: column;
     align-items: flex-start;
     min-width: 20rem;
+    max-width: 20rem;
     gap: 1rem;
     align-self: stretch;
   `,
diff --git a/src/features/shared/shared.api.ts b/src/features/shared/shared.api.ts
index e415046..c8435fa 100644
--- a/src/features/shared/shared.api.ts
+++ b/src/features/shared/shared.api.ts
@@ -20,21 +20,17 @@ export const getSharedPosts = async ({
     const baseURL = '/maru-api/shared/posts/studio';
     let query = '';
 
-    if (
-      filter != null &&
-      Object.keys(filter).length > 0 &&
-      JSON.stringify(filter).length > 2
-    ) {
-      query += `filter=${JSON.stringify(filter)}`;
+    query += `page=${page}`;
+
+    if (filter != null) {
+      query += `&filter=${JSON.stringify(filter)}`;
     }
 
     if (search != null) {
       query += `&search=${search}`;
     }
 
-    query += `&page=${page}`;
-
-    return `${baseURL}?${encodeURIComponent(query)}&cardOption=${cardOption}`;
+    return `${baseURL}?${encodeURI(query)}&cardOption=${cardOption}`;
   };
 
   return await axios.get<GetSharedPostsDTO>(getURI());
@@ -76,21 +72,17 @@ export const getDormitorySharedPosts = async ({
     const baseURL = '/maru-api/shared/posts/dormitory';
     let query = '';
 
-    if (
-      filter != null &&
-      Object.keys(filter).length > 0 &&
-      JSON.stringify(filter).length > 2
-    ) {
-      query += `filter=${JSON.stringify(filter)}`;
+    query += `page=${page}`;
+
+    if (filter != null) {
+      query += `&filter=${JSON.stringify(filter)}`;
     }
 
     if (search != null) {
       query += `&search=${search}`;
     }
 
-    query += `&page=${page}`;
-
-    return `${baseURL}?${encodeURIComponent(query)}&cardOption=${cardOption}`;
+    return `${baseURL}?${encodeURI(query)}&cardOption=${cardOption}`;
   };
 
   return await axios.get<GetDormitorySharedPostsDTO>(getURI());