diff --git a/src/features/book/components/BookInfo.tsx b/src/features/book/components/BookInfo.tsx
index a22dc1d..589d99a 100644
--- a/src/features/book/components/BookInfo.tsx
+++ b/src/features/book/components/BookInfo.tsx
@@ -1,4 +1,5 @@
 import { Division } from '@/shared/components/Division'
+import { Spinner } from '@/shared/ui'
 import { Switch } from '@/shared/ui/Switch'
 
 import { useBookDetail } from '../hooks'
@@ -14,7 +15,12 @@ const BookInfo = ({ bookId, isRecording, onToggleRecording }: BookInfoProps) =>
   const { data, isLoading, isError } = useBookDetail(bookId)
 
   //   if (isLoading) return <BookInfoSkeleton />
-  if (isLoading) return <div>로딩중...</div>
+  if (isLoading)
+    return (
+      <div className="h-[486px] flex items-center justify-center">
+        <Spinner />
+      </div>
+    )
   if (isError || !data) return <div>책 정보를 불러올 수 없습니다.</div>
 
   return (
diff --git a/src/features/gatherings/components/GatheringBookshelfSection.tsx b/src/features/gatherings/components/GatheringBookshelfSection.tsx
index 19b3b34..430e7c9 100644
--- a/src/features/gatherings/components/GatheringBookshelfSection.tsx
+++ b/src/features/gatherings/components/GatheringBookshelfSection.tsx
@@ -1,6 +1,8 @@
 import { ChevronLeft, ChevronRight } from 'lucide-react'
 import { useRef } from 'react'
 
+import { Spinner } from '@/shared/ui'
+
 import { useGatheringBooks } from '../hooks/useGatheringBooks'
 import EmptyState from './EmptyState'
 import GatheringBookCard from './GatheringBookCard'
@@ -44,7 +46,9 @@ export default function GatheringBookshelfSection({ gatheringId }: GatheringBook
     return (
       <section className="flex flex-col gap-medium">
         <h2 className="typo-heading3 text-black">모임 책장</h2>
-        <div className="py-8 text-center text-grey-600 typo-body3">로딩 중...</div>
+        <div className="flex items-center justify-center">
+          <Spinner />
+        </div>
       </section>
     )
   }
diff --git a/src/features/gatherings/components/GatheringMeetingSection.tsx b/src/features/gatherings/components/GatheringMeetingSection.tsx
index bd1a19a..2f92ba7 100644
--- a/src/features/gatherings/components/GatheringMeetingSection.tsx
+++ b/src/features/gatherings/components/GatheringMeetingSection.tsx
@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom'
 
 import { useUserProfile } from '@/features/user'
 import { PAGE_SIZES, ROUTES } from '@/shared/constants'
-import { Button, Pagination, Tabs, TabsList, TabsTrigger } from '@/shared/ui'
+import { Button, Pagination, Spinner, Tabs, TabsList, TabsTrigger } from '@/shared/ui'
 
 import type { GatheringUserRole, MeetingFilter } from '../gatherings.types'
 import { useGatheringMeetings, useMeetingTabCounts } from '../hooks'
@@ -133,7 +133,9 @@ export default function GatheringMeetingSection({
 
       {/* 약속 목록 */}
       {isLoading ? (
-        <div className="py-xlarge text-center text-grey-600 typo-body3">로딩 중...</div>
+        <div className="flex items-center justify-center">
+          <Spinner />
+        </div>
       ) : totalCount === 0 ? (
         <EmptyState type="meetings" />
       ) : (
diff --git a/src/features/topics/components/ProposedTopicList.tsx b/src/features/topics/components/ProposedTopicList.tsx
index ae7112f..08c1135 100644
--- a/src/features/topics/components/ProposedTopicList.tsx
+++ b/src/features/topics/components/ProposedTopicList.tsx
@@ -10,7 +10,6 @@ type ProposedTopicListProps = {
   hasNextPage: boolean
   isFetchingNextPage: boolean
   onLoadMore: () => void
-  pageSize?: number
   gatheringId: number
   meetingId: number
 }
@@ -20,7 +19,6 @@ export default function ProposedTopicList({
   hasNextPage,
   isFetchingNextPage,
   onLoadMore,
-  pageSize = 5,
   gatheringId,
   meetingId,
 }: ProposedTopicListProps) {
@@ -58,7 +56,7 @@ export default function ProposedTopicList({
       )}
 
       {/* 무한 스크롤 로딩 상태 */}
-      {isFetchingNextPage && <TopicListSkeleton count={pageSize} />}
+      {isFetchingNextPage && <TopicListSkeleton />}
 
       {/* 무한 스크롤 트리거 */}
       {hasNextPage && !isFetchingNextPage && <div ref={observerRef} className="h-4" />}
diff --git a/src/features/topics/components/TopicHeader.tsx b/src/features/topics/components/TopicHeader.tsx
index 5f43a9d..36a593e 100644
--- a/src/features/topics/components/TopicHeader.tsx
+++ b/src/features/topics/components/TopicHeader.tsx
@@ -1,6 +1,8 @@
 import { format } from 'date-fns'
 import { Check } from 'lucide-react'
+import { useNavigate } from 'react-router-dom'
 
+import { ROUTES } from '@/shared/constants'
 import { Button } from '@/shared/ui'
 
 type ProposedHeaderProps = {
@@ -10,6 +12,8 @@ type ProposedHeaderProps = {
   confirmedTopicDate: string | null
   proposedTopicsCount: number
   onOpenChange: (open: boolean) => void
+  gatheringId: number
+  meetingId: number
 }
 
 type ConfirmedHeaderProps = {
@@ -22,6 +26,7 @@ type ConfirmedHeaderProps = {
 type TopicHeaderProps = ProposedHeaderProps | ConfirmedHeaderProps
 
 export default function TopicHeader(props: TopicHeaderProps) {
+  const navigate = useNavigate()
   return (
     <>
       {/* 제안탭 */}
@@ -58,7 +63,13 @@ export default function TopicHeader(props: TopicHeaderProps) {
               </Button>
             )}
 
-            {props.actions.canSuggest && <Button>제안하기</Button>}
+            {props.actions.canSuggest && (
+              <Button
+                onClick={() => navigate(ROUTES.TOPICS_CREATE(props.gatheringId, props.meetingId))}
+              >
+                제안하기
+              </Button>
+            )}
           </div>
         </div>
       )}
diff --git a/src/features/topics/components/TopicSkeleton.tsx b/src/features/topics/components/TopicSkeleton.tsx
new file mode 100644
index 0000000..24f88c7
--- /dev/null
+++ b/src/features/topics/components/TopicSkeleton.tsx
@@ -0,0 +1,13 @@
+import TopicListSkeleton from '@/features/topics/components/TopicListSkeleton'
+
+export default function TopicSkeleton() {
+  return (
+    <div className="flex flex-col gap-base">
+      <div className="flex flex-col gap-tiny">
+        <p className="w-3/5 h-5.5 bg-grey-200 rounded animate-pulse"></p>
+        <p className="w-2/5 h-5 bg-grey-200 rounded animate-pulse"></p>
+      </div>
+      <TopicListSkeleton />
+    </div>
+  )
+}
diff --git a/src/features/topics/components/index.ts b/src/features/topics/components/index.ts
index e77446c..8d810b3 100644
--- a/src/features/topics/components/index.ts
+++ b/src/features/topics/components/index.ts
@@ -7,3 +7,4 @@ export { default as ProposedTopicList } from './ProposedTopicList'
 export { default as TopicCard } from './TopicCard'
 export { default as TopicHeader } from './TopicHeader'
 export { default as TopicListSkeleton } from './TopicListSkeleton'
+export { default as TopicSkeleton } from './TopicSkeleton'
diff --git a/src/pages/Gatherings/GatheringDetailPage.tsx b/src/pages/Gatherings/GatheringDetailPage.tsx
index 36b0371..cefa750 100644
--- a/src/pages/Gatherings/GatheringDetailPage.tsx
+++ b/src/pages/Gatherings/GatheringDetailPage.tsx
@@ -12,6 +12,7 @@ import {
 } from '@/features/gatherings'
 import { ROUTES } from '@/shared/constants'
 import { useScrollCollapse } from '@/shared/hooks'
+import { Spinner } from '@/shared/ui'
 import { useGlobalModalStore } from '@/store/globalModalStore'
 
 export default function GatheringDetailPage() {
@@ -89,11 +90,7 @@ export default function GatheringDetailPage() {
 
   // 로딩 상태
   if (isLoading || !gathering) {
-    return (
-      <div className="flex h-screen items-center justify-center">
-        <p className="text-grey-600 typo-subtitle2">로딩 중...</p>
-      </div>
-    )
+    return <Spinner height="full" />
   }
 
   return (
diff --git a/src/pages/Gatherings/GatheringListPage.tsx b/src/pages/Gatherings/GatheringListPage.tsx
index 326003a..36ea31f 100644
--- a/src/pages/Gatherings/GatheringListPage.tsx
+++ b/src/pages/Gatherings/GatheringListPage.tsx
@@ -11,7 +11,7 @@ import {
 } from '@/features/gatherings'
 import { ROUTES } from '@/shared/constants'
 import { useInfiniteScroll } from '@/shared/hooks'
-import { Button, Tabs, TabsList, TabsTrigger } from '@/shared/ui'
+import { Button, Spinner, Tabs, TabsList, TabsTrigger } from '@/shared/ui'
 import { useGlobalModalStore } from '@/store'
 
 type TabValue = 'all' | 'favorites'
@@ -106,7 +106,7 @@ export default function GatheringListPage() {
         <>
           {isLoading ? (
             <div className="flex h-35 items-center justify-center">
-              <p className="text-grey-600 typo-subtitle2">로딩 중...</p>
+              <Spinner />
             </div>
           ) : gatherings.length === 0 ? (
             <EmptyState type="all" />
@@ -128,7 +128,7 @@ export default function GatheringListPage() {
           )}
           {isFetchingNextPage && (
             <div className="flex justify-center py-4">
-              <p className="text-grey-600 typo-body3">로딩 중...</p>
+              <Spinner />
             </div>
           )}
         </>
@@ -138,7 +138,7 @@ export default function GatheringListPage() {
         <>
           {isFavoritesLoading ? (
             <div className="flex h-35 items-center justify-center">
-              <p className="text-grey-600 typo-subtitle2">로딩 중...</p>
+              <Spinner />
             </div>
           ) : favorites.length === 0 ? (
             <EmptyState type="favorites" />
diff --git a/src/pages/Gatherings/GatheringSettingPage.tsx b/src/pages/Gatherings/GatheringSettingPage.tsx
index 20aea74..346f334 100644
--- a/src/pages/Gatherings/GatheringSettingPage.tsx
+++ b/src/pages/Gatherings/GatheringSettingPage.tsx
@@ -20,6 +20,7 @@ import {
   Button,
   Container,
   Input,
+  Spinner,
   Tabs,
   TabsContent,
   TabsList,
@@ -179,11 +180,7 @@ export default function GatheringSettingPage() {
   }
 
   if (isLoading) {
-    return (
-      <div className="flex h-60 items-center justify-center">
-        <p className="typo-body1 text-grey-600">로딩 중...</p>
-      </div>
-    )
+    return <Spinner height="full" />
   }
 
   if (!gathering || gathering.currentUserRole !== 'LEADER') return null
diff --git a/src/pages/Meetings/MeetingDetailPage.tsx b/src/pages/Meetings/MeetingDetailPage.tsx
index cbef6d5..aec2a2d 100644
--- a/src/pages/Meetings/MeetingDetailPage.tsx
+++ b/src/pages/Meetings/MeetingDetailPage.tsx
@@ -18,10 +18,11 @@ import {
   ConfirmTopicModal,
   ProposedTopicList,
   TopicHeader,
+  TopicSkeleton,
   useConfirmedTopics,
   useProposedTopics,
 } from '@/features/topics'
-import { Tabs, TabsContent, TabsList, TabsTrigger, TextButton } from '@/shared/ui'
+import { Spinner, Tabs, TabsContent, TabsList, TabsTrigger, TextButton } from '@/shared/ui'
 
 export default function MeetingDetailPage() {
   const { gatheringId, meetingId } = useParams<{ gatheringId: string; meetingId: string }>()
@@ -29,7 +30,11 @@ export default function MeetingDetailPage() {
   const [activeTab, setActiveTab] = useState<TopicStatus>('PROPOSED')
   const [isConfirmTopicOpen, setIsConfirmTopicOpen] = useState(false)
 
-  const { data: meeting, isLoading, error } = useMeetingDetail(Number(meetingId))
+  const {
+    data: meeting,
+    isLoading: meetingLoading,
+    error: meetingError,
+  } = useMeetingDetail(Number(meetingId))
 
   // 제안된 주제 조회 (무한 스크롤)
   const {
@@ -65,15 +70,11 @@ export default function MeetingDetailPage() {
     if (confirmedError) {
       alert(`확정된 주제 조회 실패: ${confirmedError.userMessage}`)
     }
-  }, [proposedError, confirmedError])
-
-  if (error) {
-    return (
-      <div className="flex items-center justify-center h-screen">
-        <p className="text-error typo-body2">{error.userMessage}</p>
-      </div>
-    )
-  }
+    if (meetingError) {
+      alert(`약속 조회 실패: ${meetingError.userMessage}`)
+    }
+    // navigate(ROUTES.GATHERING_DETAIL(gatheringId), { replace: true })
+  }, [proposedError, confirmedError, meetingError])
 
   return (
     <>
@@ -88,9 +89,9 @@ export default function MeetingDetailPage() {
       <div className="flex justify-between gap-[36px]">
         {/* 약속 로딩 적용 */}
         <div className="w-[300px] flex-none flex flex-col gap-base">
-          {isLoading ? (
+          {meetingLoading ? (
             <div className="flex items-center justify-center h-[400px]">
-              <p className="text-grey-500 typo-body2">로딩 중...</p>
+              <Spinner />
             </div>
           ) : meeting ? (
             <>
@@ -138,11 +139,9 @@ export default function MeetingDetailPage() {
               </TabsTrigger>
             </TabsList>
             <TabsContent value="PROPOSED">
-              {isProposedLoading ? (
-                <div className="flex items-center justify-center h-[200px]">
-                  <p className="text-grey-500 typo-body2">로딩 중...</p>
-                </div>
-              ) : proposedTopicsInfiniteData ? (
+              {isProposedLoading || !proposedTopicsInfiniteData ? (
+                <TopicSkeleton />
+              ) : (
                 <div className="flex flex-col gap-base">
                   <TopicHeader
                     activeTab="PROPOSED"
@@ -151,6 +150,8 @@ export default function MeetingDetailPage() {
                     confirmedTopicDate={meeting?.confirmedTopicDate ?? null}
                     proposedTopicsCount={proposedTopicsInfiniteData.pages[0].totalCount ?? 0}
                     onOpenChange={setIsConfirmTopicOpen}
+                    gatheringId={Number(gatheringId)}
+                    meetingId={Number(meetingId)}
                   />
                   <ProposedTopicList
                     topics={proposedTopicsInfiniteData.pages.flatMap(
@@ -159,20 +160,17 @@ export default function MeetingDetailPage() {
                     hasNextPage={hasNextProposedPage}
                     isFetchingNextPage={isFetchingNextProposedPage}
                     onLoadMore={fetchNextProposedPage}
-                    pageSize={5}
                     gatheringId={Number(gatheringId)}
                     meetingId={Number(meetingId)}
                   />
                 </div>
-              ) : null}
+              )}
             </TabsContent>
 
             <TabsContent value="CONFIRMED">
-              {isConfirmedLoading ? (
-                <div className="flex items-center justify-center h-[200px]">
-                  <p className="text-grey-500 typo-body2">로딩 중...</p>
-                </div>
-              ) : confirmedTopicsInfiniteData ? (
+              {isConfirmedLoading || !confirmedTopicsInfiniteData ? (
+                <TopicSkeleton />
+              ) : (
                 <div className="flex flex-col gap-base">
                   <TopicHeader
                     activeTab="CONFIRMED"
@@ -187,10 +185,9 @@ export default function MeetingDetailPage() {
                     hasNextPage={hasNextConfirmedPage}
                     isFetchingNextPage={isFetchingNextConfirmedPage}
                     onLoadMore={fetchNextConfirmedPage}
-                    pageSize={5}
                   />
                 </div>
-              ) : null}
+              )}
             </TabsContent>
           </Tabs>
         </div>
diff --git a/src/pages/PreOpinions/PreOpinionListPage.tsx b/src/pages/PreOpinions/PreOpinionListPage.tsx
index 9095786..05c9be7 100644
--- a/src/pages/PreOpinions/PreOpinionListPage.tsx
+++ b/src/pages/PreOpinions/PreOpinionListPage.tsx
@@ -7,6 +7,7 @@ import {
   usePreOpinionAnswers,
 } from '@/features/preOpinions'
 import SubPageHeader from '@/shared/components/SubPageHeader'
+import { Spinner } from '@/shared/ui'
 import { useGlobalModalStore } from '@/store'
 
 export default function PreOpinionListPage() {
@@ -52,7 +53,7 @@ export default function PreOpinionListPage() {
 
   const selectedMember = data?.members.find((m) => m.memberInfo.userId === activeMemberId)
 
-  if (isLoading) return <div>로딩중...</div>
+  if (isLoading) return <Spinner height="full" />
 
   return (
     <>
diff --git a/src/routes/PrivateRoute.tsx b/src/routes/PrivateRoute.tsx
index 00fee9b..a51227a 100644
--- a/src/routes/PrivateRoute.tsx
+++ b/src/routes/PrivateRoute.tsx
@@ -3,7 +3,7 @@ import { Navigate, Outlet, useLocation } from 'react-router-dom'
 import { ApiError } from '@/api'
 import { useAuth } from '@/features/auth'
 import { ROUTES } from '@/shared/constants'
-import { ErrorFallback } from '@/shared/ui'
+import { ErrorFallback, Spinner } from '@/shared/ui'
 
 export function PrivateRoute() {
   const { data: user, isLoading, isError, error, refetch } = useAuth()
@@ -14,7 +14,7 @@ export function PrivateRoute() {
   if (isLoading) {
     return (
       <div className="flex min-h-screen items-center justify-center">
-        <p>Loading...</p>
+        <Spinner />
       </div>
     )
   }
diff --git a/src/shared/ui/Spinner.tsx b/src/shared/ui/Spinner.tsx
new file mode 100644
index 0000000..e9a7a2a
--- /dev/null
+++ b/src/shared/ui/Spinner.tsx
@@ -0,0 +1,35 @@
+type SpinnerProps = {
+  height?: 'full' | 'fit'
+}
+
+const SpinnerSvg = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="54"
+    height="54"
+    viewBox="0 0 54 54"
+    fill="none"
+    className="animate-spin"
+  >
+    <path
+      d="M54 27C54 41.9117 41.9117 54 27 54C12.0883 54 0 41.9117 0 27C0 12.0883 12.0883 0 27 0C41.9117 0 54 12.0883 54 27ZM5.4 27C5.4 38.9294 15.0706 48.6 27 48.6C38.9294 48.6 48.6 38.9294 48.6 27C48.6 15.0706 38.9294 5.4 27 5.4C15.0706 5.4 5.4 15.0706 5.4 27Z"
+      fill="#F7F7F7"
+    />
+    <path
+      d="M51.3 27C52.7912 27 54.014 28.2118 53.8651 29.6956C53.3893 34.4383 51.664 38.9881 48.8435 42.8702C46.0229 46.7523 42.229 49.7991 37.8654 51.7173C36.5003 52.3174 34.9699 51.5289 34.5091 50.1107C34.0483 48.6925 34.8343 47.1844 36.1839 46.5504C39.4682 45.0075 42.3249 42.6552 44.4748 39.6962C46.6246 36.7372 47.9791 33.2933 48.4315 29.6931C48.6174 28.2135 49.8088 27 51.3 27Z"
+      fill="#56CDAF"
+    />
+  </svg>
+)
+
+export function Spinner({ height = 'fit' }: SpinnerProps) {
+  if (height === 'full') {
+    return (
+      <div className="flex h-[calc(100vh-var(--spacing-gnb-height))] items-center justify-center">
+        <SpinnerSvg />
+      </div>
+    )
+  }
+
+  return <SpinnerSvg />
+}
diff --git a/src/shared/ui/index.ts b/src/shared/ui/index.ts
index 7d90eea..24db004 100644
--- a/src/shared/ui/index.ts
+++ b/src/shared/ui/index.ts
@@ -17,6 +17,7 @@ export * from './Pagination'
 export * from './Popover'
 export * from './SearchField'
 export * from './Select'
+export * from './Spinner'
 export * from './StarRatingFilter'
 export * from './Switch'
 export * from './Tabs'