diff --git a/next.config.ts b/next.config.ts
index 4e93457..df186e3 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -3,6 +3,14 @@ import type { NextConfig } from 'next';
 const nextConfig: NextConfig = {
   /* config options here */
   reactCompiler: true,
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'rematedeploy-production.up.railway.app',
+      },
+    ],
+  },
 };
 
 export default nextConfig;
diff --git a/package-lock.json b/package-lock.json
index 12ee2de..f7e725e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "remate",
       "version": "0.1.0",
       "dependencies": {
+        "@tanstack/react-query": "^5.100.9",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "focus-trap-react": "^12.0.0",
@@ -16,6 +17,7 @@
         "next-auth": "^4.24.14",
         "react": "19.2.3",
         "react-dom": "19.2.3",
+        "react-toastify": "^11.1.0",
         "tailwind-merge": "^3.5.0",
         "zustand": "^5.0.12"
       },
@@ -1980,6 +1982,32 @@
         "tailwindcss": "4.1.18"
       }
     },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.100.9",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.100.9.tgz",
+      "integrity": "sha512-SJSFw1S8+kQ0+knv/XGfrbocWoAlT7vDKsSImtLx3ZPQmEcR46hkDjLSvynSy25N8Ms4tIEini1FuBd5k7IscQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "5.100.9",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.100.9.tgz",
+      "integrity": "sha512-Oa44XkaI3kCNN6ME0KByU3xT3SEUNOMfZpHxL6+wFoTm+OeUFYHKdeYVe0aOXlRDm/f15sgLwEt2HDorIdW8+A==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-core": "5.100.9"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19"
+      }
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.1",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
@@ -6979,6 +7007,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/react-toastify": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-11.1.0.tgz",
+      "integrity": "sha512-e9h23x3phN0wbFeB6yovmWp7lobzV4CaCH0LO8nVP6H7Y+3GbcLpIzMm9dJhcp1RXbpyfvjgpfXqO80QAmn7sg==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19",
+        "react-dom": "^18 || ^19"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
diff --git a/package.json b/package.json
index 717255d..e3de6c6 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     ]
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.100.9",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "focus-trap-react": "^12.0.0",
@@ -25,6 +26,7 @@
     "next-auth": "^4.24.14",
     "react": "19.2.3",
     "react-dom": "19.2.3",
+    "react-toastify": "^11.1.0",
     "tailwind-merge": "^3.5.0",
     "zustand": "^5.0.12"
   },
diff --git a/src/apis/auth/auth.queries.ts b/src/apis/auth/auth.queries.ts
new file mode 100644
index 0000000..a02dbd8
--- /dev/null
+++ b/src/apis/auth/auth.queries.ts
@@ -0,0 +1,18 @@
+import { useQuery } from '@tanstack/react-query';
+import { useSession } from 'next-auth/react';
+import { authService } from './auth.service';
+
+export const authKeys = {
+  me: ['auth', 'me'] as const,
+};
+
+export const useGetMe = () => {
+  const { data: session } = useSession();
+  const accessToken = session?.accessToken as string | undefined;
+
+  return useQuery({
+    queryKey: authKeys.me,
+    queryFn: () => authService.getMe(accessToken!),
+    enabled: !!accessToken,
+  });
+};
diff --git a/src/apis/auth/auth.service.ts b/src/apis/auth/auth.service.ts
new file mode 100644
index 0000000..e0450dd
--- /dev/null
+++ b/src/apis/auth/auth.service.ts
@@ -0,0 +1,16 @@
+import { MeResponse } from './auth.type';
+
+const BASE_URL = process.env.NEXT_PUBLIC_API_URL;
+
+export const authService = {
+  getMe: async (accessToken: string): Promise<MeResponse> => {
+    const res = await fetch(`${BASE_URL}/api/v1/auth/me`, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+
+    if (!res.ok) throw new Error('내 정보 조회 실패');
+    return res.json();
+  },
+};
diff --git a/src/apis/auth/auth.type.ts b/src/apis/auth/auth.type.ts
new file mode 100644
index 0000000..5a429c2
--- /dev/null
+++ b/src/apis/auth/auth.type.ts
@@ -0,0 +1,12 @@
+export interface MeResponse {
+  success: boolean;
+  data: {
+    email: string;
+    name: string;
+    picture: string | null;
+  };
+  meta: {
+    timestamp: string;
+    traceId: string;
+  };
+}
diff --git a/src/apis/workspace/workspace.queries.ts b/src/apis/workspace/workspace.queries.ts
new file mode 100644
index 0000000..ec65d19
--- /dev/null
+++ b/src/apis/workspace/workspace.queries.ts
@@ -0,0 +1,46 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useSession } from 'next-auth/react';
+import { workspaceService } from './workspace.service';
+import { InviteWorkspaceRequest } from './workspace.type';
+
+export const workspaceKeys = {
+  all: ['workspaces'] as const,
+  my: ['workspaces', 'my'] as const,
+  detail: (workspaceId: number) => ['workspaces', workspaceId] as const,
+};
+
+export const useGetMyWorkspaces = () => {
+  const { data: session } = useSession();
+  const accessToken = session?.accessToken as string | undefined;
+
+  return useQuery({
+    queryKey: workspaceKeys.my,
+    queryFn: () => workspaceService.getMyWorkspaces(accessToken!),
+    enabled: !!accessToken,
+  });
+};
+
+export const useGetWorkspace = (workspaceId: number) => {
+  const { data: session } = useSession();
+  const accessToken = session?.accessToken as string | undefined;
+
+  return useQuery({
+    queryKey: workspaceKeys.detail(workspaceId),
+    queryFn: () => workspaceService.getWorkspace(workspaceId, accessToken!),
+    enabled: !!accessToken && !!workspaceId,
+  });
+};
+
+export const useInviteWorkspace = (workspaceId: number) => {
+  const { data: session } = useSession();
+  const accessToken = session?.accessToken as string | undefined;
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (body: InviteWorkspaceRequest) =>
+      workspaceService.inviteWorkspace(workspaceId, body, accessToken!),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: workspaceKeys.detail(workspaceId) });
+    },
+  });
+};
diff --git a/src/apis/workspace/workspace.service.ts b/src/apis/workspace/workspace.service.ts
new file mode 100644
index 0000000..cfb517f
--- /dev/null
+++ b/src/apis/workspace/workspace.service.ts
@@ -0,0 +1,56 @@
+import {
+  WorkspaceListResponse,
+  WorkspaceDetailResponse,
+  InviteWorkspaceRequest,
+  InviteWorkspaceResponse,
+} from './workspace.type';
+
+const BASE_URL = process.env.NEXT_PUBLIC_API_URL;
+
+export const workspaceService = {
+  getMyWorkspaces: async (accessToken: string): Promise<WorkspaceListResponse> => {
+    const res = await fetch(`${BASE_URL}/api/v1/workspaces/my`, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+
+    if (!res.ok) throw new Error('워크스페이스 목록 조회 실패');
+    return res.json();
+  },
+
+  getWorkspace: async (
+    workspaceId: number,
+    accessToken: string,
+  ): Promise<WorkspaceDetailResponse> => {
+    const res = await fetch(`${BASE_URL}/api/v1/workspaces/${workspaceId}`, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+
+    if (res.status === 404) throw new Error('워크스페이스를 찾을 수 없습니다.');
+    if (!res.ok) throw new Error('워크스페이스 조회 실패');
+    return res.json();
+  },
+
+  inviteWorkspace: async (
+    workspaceId: number,
+    body: InviteWorkspaceRequest,
+    accessToken: string,
+  ): Promise<InviteWorkspaceResponse> => {
+    const res = await fetch(`${BASE_URL}/api/v1/workspaces/${workspaceId}/invite`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${accessToken}`,
+      },
+      body: JSON.stringify(body),
+    });
+
+    if (res.status === 404) throw new Error('워크스페이스를 찾을 수 없습니다.');
+    if (res.status === 409) throw new Error('이미 참여 중인 워크스페이스입니다.');
+    if (!res.ok) throw new Error('초대에 실패했습니다. 이메일을 확인해 주세요.');
+    return res.json();
+  },
+};
diff --git a/src/apis/workspace/workspace.type.ts b/src/apis/workspace/workspace.type.ts
new file mode 100644
index 0000000..6564291
--- /dev/null
+++ b/src/apis/workspace/workspace.type.ts
@@ -0,0 +1,48 @@
+export type WorkspaceRole = 'ADMIN' | 'MEMBER';
+
+export interface WorkspaceItem {
+  color: string;
+  membershipId: number;
+  role: WorkspaceRole;
+  workspaceId: number;
+  workspaceName: string;
+}
+
+export interface WorkspaceListResponse {
+  success: boolean;
+  totalCount: number;
+  nextCursor: number | null;
+  data: WorkspaceItem[];
+  meta: {
+    timestamp: string;
+    traceId: string;
+  };
+}
+
+export interface WorkspaceDetailResponse {
+  success: boolean;
+  data: {
+    workspaceId: number;
+    workspaceName: string;
+    color: string;
+    role: WorkspaceRole;
+    membershipId: number;
+  };
+  meta: {
+    timestamp: string;
+    traceId: string;
+  };
+}
+
+export interface InviteWorkspaceRequest {
+  email: string;
+}
+
+export interface InviteWorkspaceResponse {
+  success: boolean;
+  data: null;
+  meta: {
+    timestamp: string;
+    traceId: string;
+  };
+}
diff --git a/src/app/(after-login)/layout.tsx b/src/app/(after-login)/layout.tsx
index e03e1a9..dcf6d07 100644
--- a/src/app/(after-login)/layout.tsx
+++ b/src/app/(after-login)/layout.tsx
@@ -1,3 +1,4 @@
+import Header from '@/components/header/Header';
 import Sidebar from '@/components/sidebar/Sidebar';
 
 export default function Layout({ children }: { children: React.ReactNode }) {
@@ -5,7 +6,10 @@ export default function Layout({ children }: { children: React.ReactNode }) {
     <div className='flex h-screen'>
       <Sidebar />
 
-      <main className='flex-1 overflow-auto bg-gray-100'>{children}</main>
+      <main className='flex-1 overflow-auto bg-gray-100 pt-15 md:pt-17.5'>
+        <Header />
+        {children}
+      </main>
     </div>
   );
 }
diff --git a/src/app/(before-login)/(landing)/layout.tsx b/src/app/(before-login)/(landing)/layout.tsx
new file mode 100644
index 0000000..0982e9b
--- /dev/null
+++ b/src/app/(before-login)/(landing)/layout.tsx
@@ -0,0 +1,10 @@
+import Header from '@/components/header/Header';
+
+export default function LandingLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <Header />
+      <main className='pt-15 md:pt-17.5'>{children}</main>
+    </>
+  );
+}
diff --git a/src/app/(before-login)/(landing)/page.tsx b/src/app/(before-login)/(landing)/page.tsx
index 54653e9..5508e3f 100644
--- a/src/app/(before-login)/(landing)/page.tsx
+++ b/src/app/(before-login)/(landing)/page.tsx
@@ -1,10 +1,7 @@
-import TempLogoutButton from '@/components/TempLogoutButton';
-
 export default function Home() {
   return (
     <>
       <div>랜딩 페이지</div>
-      <TempLogoutButton />
     </>
   );
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 2b03a3c..b04ee94 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,6 +1,8 @@
+import { Slide, ToastContainer } from 'react-toastify';
 import localFont from 'next/font/local';
 import './globals.css';
 import AuthProvider from '@/components/AuthProvider';
+import QueryProvider from '@/components/header/QueryProvider';
 import ModalRoot from '@/components/modal/ModalRoot';
 
 const pretendard = localFont({
@@ -9,16 +11,44 @@ const pretendard = localFont({
   variable: '--font-pretendard',
 });
 
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang='ko'>
       <body className={pretendard.className}>
-        <AuthProvider>{children}</AuthProvider>
-        <ModalRoot />
+        <QueryProvider>
+          <AuthProvider>
+            {children}
+            <ToastContainer
+              toastStyle={{
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                width: 'fit-content',
+                backgroundColor: '#454545',
+                color: '#FFFFFF',
+                borderRadius: '8px',
+                padding: '10px 28px',
+                minHeight: 'unset',
+                minWidth: 'unset',
+                marginBottom: '60px',
+              }}
+              toastClassName='text-md lg:text-lg'
+              position='bottom-center'
+              autoClose={2000}
+              icon={false}
+              closeButton={false}
+              hideProgressBar
+              newestOnTop={false}
+              pauseOnFocusLoss
+              draggable
+              closeOnClick={true}
+              pauseOnHover
+              transition={Slide}
+              limit={3}
+            />
+            <ModalRoot />
+          </AuthProvider>
+        </QueryProvider>
         <div id='modal-root' />
       </body>
     </html>
diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
index fe15c91..30ce1aa 100644
--- a/src/components/Dropdown.tsx
+++ b/src/components/Dropdown.tsx
@@ -33,11 +33,9 @@ export default function Dropdown({
   const optionList = () => (
     <ul
       className={cn(
-        'dropdownScrollbar text-black-200 absolute mt-0.75 box-border truncate rounded-md border border-gray-300 px-0.75 md:mt-1 md:px-1',
+        'dropdownScrollbar text-black-200 absolute mt-0.75 box-border truncate rounded-md border border-gray-300 bg-white px-0.75 md:mt-1 md:px-1',
         options.length > 4 ? 'max-h-36.25 overflow-y-auto md:max-h-45.5' : 'h-auto',
-        variant === 'profile'
-          ? 'right-0 w-23.5 translate-x-7 md:left-0 md:w-27.5 md:translate-x-0'
-          : 'left-0 w-full',
+        variant === 'profile' ? 'left-1/2 w-23.5 -translate-x-1/2 md:w-27.5' : 'left-0 w-full',
       )}
     >
       {options.map((opt) => {
diff --git a/src/components/TempLogoutButton.tsx b/src/components/TempLogoutButton.tsx
deleted file mode 100644
index e05a06e..0000000
--- a/src/components/TempLogoutButton.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-'use client';
-
-import { signOut } from 'next-auth/react';
-import Button from './Buttons';
-
-export default function TempLogoutButton() {
-  async function handleLogout() {
-    await signOut({ callbackUrl: '/login' });
-  }
-
-  return (
-    <div className='fixed top-10 left-4 z-50'>
-      <Button variant='secondary' size='xl' className='px-3' onClick={handleLogout}>
-        로그아웃
-      </Button>
-    </div>
-  );
-}
diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
new file mode 100644
index 0000000..3f3563e
--- /dev/null
+++ b/src/components/header/Header.tsx
@@ -0,0 +1,174 @@
+'use client';
+
+import { useSession } from 'next-auth/react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useRouter, usePathname, useParams } from 'next/navigation';
+import { useGetMe } from '@/apis/auth/auth.queries';
+import { useGetWorkspace } from '@/apis/workspace/workspace.queries';
+import Icon from '@/components/Icon';
+import { useModalStore } from '@/store/modal.store';
+import { cn } from '@/utils/cn';
+import HeaderSkeleton from './HeaderSkeleton';
+import HeaderUserProfile from './HeaderUserProfile';
+
+function useWorkspaceId(): number | null {
+  const params = useParams();
+  const raw = params?.workspaceId;
+  if (!raw) return null;
+  const id = Number(Array.isArray(raw) ? raw[0] : raw);
+  return isNaN(id) ? null : id;
+}
+
+function LandingHeader() {
+  const { data: meData, isLoading } = useGetMe();
+  const user = meData?.data;
+
+  return (
+    <div className='flex w-full items-center justify-between'>
+      <Link href='/'>
+        <Image
+          src='/logo_sm.svg'
+          alt='Re:Mate'
+          width={20}
+          height={26}
+          priority
+          className='block pt-1 md:hidden'
+        />
+        <Image
+          src='/logo_lg.svg'
+          alt='Re:Mate'
+          width={117.35}
+          height={26}
+          priority
+          className='hidden pt-1 md:block'
+        />
+      </Link>
+      {isLoading ? (
+        <HeaderSkeleton />
+      ) : user ? (
+        <HeaderUserProfile name={user.name} picture={user.picture} />
+      ) : (
+        <div className='text-md flex items-center gap-4 text-gray-500 md:gap-8 md:text-lg'>
+          <Link href='/login' className='hover:text-black-200 transition-all duration-200'>
+            로그인
+          </Link>
+          <Link href='/signup' className='hover:text-black-200 transition-all duration-200'>
+            회원가입
+          </Link>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function WorkspaceDetailHeader() {
+  const router = useRouter();
+  const workspaceId = useWorkspaceId();
+  const { data: wsData, isLoading: wsLoading } = useGetWorkspace(workspaceId ?? 0);
+  const { data: meData, isLoading: meLoading } = useGetMe();
+  const open = useModalStore((s) => s.open);
+
+  const workspace = wsData?.data;
+  const user = meData?.data;
+  const isAdmin = workspace?.role === 'ADMIN';
+
+  return (
+    <div className='flex w-full items-center'>
+      <div className='flex w-full min-w-0 items-center justify-between'>
+        {wsLoading ? (
+          <HeaderSkeleton />
+        ) : (
+          <>
+            <div className='flex w-35 items-center gap-1.5 truncate md:w-50 md:gap-2 lg:w-75'>
+              <button
+                className='text-black-200 truncate text-lg font-bold md:text-xl'
+                onClick={() => router.push(`/workspace/${workspaceId}`)}
+              >
+                {workspace?.workspaceName ?? ''}
+              </button>
+              {isAdmin && <Icon name='crown' size={20} className='flex-none md:h-6 md:w-6' />}
+            </div>
+
+            {isAdmin && (
+              <div className='flex gap-1.5 md:gap-2'>
+                <button
+                  className='md:text-md flex shrink-0 cursor-pointer items-center gap-1 rounded border border-gray-300 px-1.5 py-1 text-sm font-medium text-gray-500 hover:bg-gray-100 md:pr-3 md:pl-2.5'
+                  onClick={() => router.push(`/workspace/${workspaceId}/settings`)}
+                >
+                  <Icon name='settings' size={20} className='hidden md:block' />
+                  <span>관리</span>
+                </button>
+                <button
+                  className='md:text-md flex shrink-0 cursor-pointer items-center gap-1 rounded border border-gray-300 px-1.5 py-1 text-sm font-medium text-gray-500 hover:bg-gray-100 md:pr-3 md:pl-2.5'
+                  onClick={() => open({ type: 'invite' })}
+                >
+                  <Icon name='addBox' size={20} className='hidden text-gray-500 md:block' />
+                  <span>초대하기</span>
+                </button>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+
+      <div className='flex shrink-0 items-center'>
+        <div className='mx-3 h-5.5 w-px bg-gray-300 md:mx-4 md:h-7' />
+        {meLoading ? (
+          <HeaderSkeleton />
+        ) : (
+          user && <HeaderUserProfile name={user.name} picture={user.picture} />
+        )}
+      </div>
+    </div>
+  );
+}
+
+function WorkspaceListHeader() {
+  const { data: meData, isLoading } = useGetMe();
+  const user = meData?.data;
+
+  return (
+    <div className='flex w-full items-center justify-between'>
+      <span className='text-black-200 truncate text-lg font-bold md:text-xl'>내 워크스페이스</span>
+
+      <div className='flex shrink-0 items-center'>
+        <div className='mx-3 h-5.5 w-px bg-gray-300 md:mx-4 md:h-7' />
+        {isLoading ? (
+          <HeaderSkeleton />
+        ) : (
+          user && <HeaderUserProfile name={user.name} picture={user.picture} />
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default function Header() {
+  const pathname = usePathname();
+  const { status } = useSession();
+  const workspaceId = useWorkspaceId();
+
+  const isLoggedIn = status === 'authenticated';
+  const isLanding = pathname === '/';
+
+  const renderContent = () => {
+    if (isLanding) return <LandingHeader />;
+    if (!isLoggedIn) return null;
+    if (workspaceId !== null) return <WorkspaceDetailHeader />;
+    return <WorkspaceListHeader />;
+  };
+
+  return (
+    <header
+      className={cn(
+        'fixed top-0 right-0 h-15 border-b border-gray-300 bg-white md:h-17.5',
+        isLanding
+          ? 'left-0 pr-4 pl-[23.5px] md:pr-15 md:pl-6'
+          : 'left-16.75 pr-4 pl-6 md:left-40 md:pr-7 md:pl-10 lg:left-75 lg:pr-12',
+      )}
+    >
+      <div className='mx-auto flex h-full'>{renderContent()}</div>
+    </header>
+  );
+}
diff --git a/src/components/header/HeaderSkeleton.tsx b/src/components/header/HeaderSkeleton.tsx
new file mode 100644
index 0000000..01c8399
--- /dev/null
+++ b/src/components/header/HeaderSkeleton.tsx
@@ -0,0 +1,3 @@
+export default function HeaderSkeleton() {
+  return <div className='h-7 w-24 animate-pulse rounded bg-gray-200 md:w-32' />;
+}
diff --git a/src/components/header/HeaderUserProfile.tsx b/src/components/header/HeaderUserProfile.tsx
new file mode 100644
index 0000000..5adfeac
--- /dev/null
+++ b/src/components/header/HeaderUserProfile.tsx
@@ -0,0 +1,79 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import { signOut } from 'next-auth/react';
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+import Dropdown from '@/components/Dropdown';
+import Icon from '@/components/Icon';
+
+interface HeaderUserProfileProps {
+  name: string;
+  picture: string | null;
+}
+
+const BASE_URL = process.env.NEXT_PUBLIC_API_URL ?? '';
+const PROFILE_OPTIONS = ['마이페이지', '로그아웃'];
+
+export default function HeaderUserProfile({ name, picture }: HeaderUserProfileProps) {
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const imageUrl = picture
+    ? picture.startsWith('http')
+      ? picture
+      : `${BASE_URL}${picture}`
+    : null;
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const handleSelect = async (value: string) => {
+    setOpen(false);
+    if (value === '마이페이지') {
+      router.push('/mypage');
+    } else if (value === '로그아웃') {
+      await signOut({ callbackUrl: '/login' });
+    }
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      className='relative flex cursor-pointer items-center gap-1.5 md:gap-2'
+      onClick={() => setOpen((prev) => !prev)}
+    >
+      {imageUrl ? (
+        <div className='relative h-7 w-7 shrink-0 overflow-hidden rounded-full border border-gray-300 md:h-8 md:w-8'>
+          <Image src={imageUrl} alt={name} fill className='object-cover' />
+        </div>
+      ) : (
+        <Icon name='profile' size={28} className='md:h-8 md:w-8' />
+      )}
+
+      <span className='text-black-200 hidden w-20 truncate text-lg font-medium md:block md:text-base'>
+        {name}
+      </span>
+
+      {open && (
+        <div className='absolute top-4 left-1/2 -translate-x-7 md:top-5 md:-translate-x-1.5'>
+          <Dropdown
+            variant='profile'
+            options={PROFILE_OPTIONS}
+            onSelect={handleSelect}
+            open={open}
+            setOpen={setOpen}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/header/QueryProvider.tsx b/src/components/header/QueryProvider.tsx
new file mode 100644
index 0000000..a9630db
--- /dev/null
+++ b/src/components/header/QueryProvider.tsx
@@ -0,0 +1,10 @@
+'use client';
+
+import { useState } from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+export default function QueryProvider({ children }: { children: React.ReactNode }) {
+  const [queryClient] = useState(() => new QueryClient());
+
+  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+}
diff --git a/src/components/modal/contents/InviteModal.tsx b/src/components/modal/contents/InviteModal.tsx
index a26b552..5e67135 100644
--- a/src/components/modal/contents/InviteModal.tsx
+++ b/src/components/modal/contents/InviteModal.tsx
@@ -1,6 +1,9 @@
 'use client';
 
 import { useEffect, useRef, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useParams } from 'next/navigation';
+import { useInviteWorkspace } from '@/apis/workspace/workspace.queries';
 import Button from '@/components/Buttons';
 import Input from '@/components/Input';
 
@@ -10,8 +13,14 @@ type Props = {
 
 export default function InviteModal({ onClose }: Props) {
   const [email, setEmail] = useState('');
-  const [loading, setLoading] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
   const inputRef = useRef<HTMLInputElement>(null);
+  const params = useParams();
+  const workspaceId = Number(
+    Array.isArray(params?.workspaceId) ? params.workspaceId[0] : params?.workspaceId,
+  );
+
+  const { mutate: inviteWorkspace, isPending } = useInviteWorkspace(workspaceId);
 
   useEffect(() => {
     inputRef.current?.focus();
@@ -19,14 +28,26 @@ export default function InviteModal({ onClose }: Props) {
 
   const handleSubmit = async () => {
     if (!email) return;
+    setErrorMessage('');
+
+    inviteWorkspace(
+      { email },
+      {
+        onSuccess: () => {
+          toast.success('초대가 완료되었습니다.');
+          onClose();
+        },
+        onError: (error: Error) => {
+          const message =
+            error.message === '워크스페이스를 찾을 수 없습니다.' ||
+            error.message === '이미 참여 중인 워크스페이스입니다.'
+              ? error.message
+              : '초대에 실패했습니다. 이메일을 확인해 주세요.';
 
-    try {
-      setLoading(true);
-      console.log('초대:', email);
-      onClose();
-    } finally {
-      setLoading(false);
-    }
+          setErrorMessage(message);
+        },
+      },
+    );
   };
 
   return (
@@ -40,7 +61,11 @@ export default function InviteModal({ onClose }: Props) {
           placeholder='이메일을 입력해 주세요'
           ref={inputRef}
           value={email}
-          onChange={(e) => setEmail(e.target.value)}
+          error={errorMessage}
+          onChange={(e) => {
+            setEmail(e.target.value);
+            setErrorMessage('');
+          }}
         />
 
         <div className='flex gap-2.5'>
@@ -59,7 +84,7 @@ export default function InviteModal({ onClose }: Props) {
             className='flex-1 md:h-12.5 md:text-lg'
             onClick={handleSubmit}
             disabled={!email}
-            loading={loading}
+            loading={isPending}
           >
             초대하기
           </Button>
diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
index 4ed1d6d..33b636e 100644
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@@ -1,8 +1,13 @@
-import { mockWorkspaces } from '@/mocks/workspaces';
+'use client';
+
+import { useGetMyWorkspaces } from '@/apis/workspace/workspace.queries';
 import SidebarView from './SidebarView';
 
 export default function Sidebar() {
-  const { totalCount, data } = mockWorkspaces;
+  const { data, isLoading } = useGetMyWorkspaces();
+
+  const workspaces = data?.data ?? [];
+  const totalCount = data?.totalCount ?? 0;
 
-  return <SidebarView workspaces={data} totalCount={totalCount} />;
+  return <SidebarView workspaces={workspaces} totalCount={totalCount} isLoading={isLoading} />;
 }
diff --git a/src/components/sidebar/SidebarContent.tsx b/src/components/sidebar/SidebarContent.tsx
index e471043..13c7e20 100644
--- a/src/components/sidebar/SidebarContent.tsx
+++ b/src/components/sidebar/SidebarContent.tsx
@@ -1,13 +1,28 @@
-import { Workspace } from '@/types/workspace';
+import { WorkspaceItem } from '@/apis/workspace/workspace.type';
+import SidebarSkeleton from './SidebarSkeleton';
 import WorkspaceList from './WorkspaceList';
 
 interface Props {
   state: 'all' | 'empty' | 'selected';
-  workspaces: Workspace[];
+  workspaces: WorkspaceItem[];
   selectedWorkspaceId?: number;
+  isLoading?: boolean;
 }
 
-export default function SidebarContent({ state, workspaces, selectedWorkspaceId }: Props) {
+export default function SidebarContent({
+  state,
+  workspaces,
+  selectedWorkspaceId,
+  isLoading,
+}: Props) {
+  if (isLoading) {
+    return (
+      <div className='flex-1 overflow-y-auto p-3.25 pt-0 lg:p-6 lg:pt-0'>
+        <SidebarSkeleton />
+      </div>
+    );
+  }
+
   if (state === 'empty') return null;
 
   return (
diff --git a/src/components/sidebar/SidebarHeader.tsx b/src/components/sidebar/SidebarHeader.tsx
index da88615..82321d8 100644
--- a/src/components/sidebar/SidebarHeader.tsx
+++ b/src/components/sidebar/SidebarHeader.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import Image from 'next/image';
 import Link from 'next/link';
 import Icon from '../Icon';
diff --git a/src/components/sidebar/SidebarSkeleton.tsx b/src/components/sidebar/SidebarSkeleton.tsx
new file mode 100644
index 0000000..b16edf1
--- /dev/null
+++ b/src/components/sidebar/SidebarSkeleton.tsx
@@ -0,0 +1,15 @@
+export default function SidebarSkeleton() {
+  return (
+    <div className='flex flex-col gap-1.5 md:gap-0.5'>
+      {Array.from({ length: 5 }).map((_, i) => (
+        <div
+          key={i}
+          className='flex items-center justify-center rounded-sm p-4 md:justify-start md:p-2 md:px-3 lg:p-2.5'
+        >
+          <div className='h-7 w-7 shrink-0 animate-pulse rounded-full bg-gray-200' />
+          <div className='ml-4 hidden h-4 flex-1 animate-pulse rounded bg-gray-200 md:block' />
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/src/components/sidebar/SidebarView.tsx b/src/components/sidebar/SidebarView.tsx
index 1b80c13..e35ba16 100644
--- a/src/components/sidebar/SidebarView.tsx
+++ b/src/components/sidebar/SidebarView.tsx
@@ -1,18 +1,19 @@
 'use client';
 
 import { useParams } from 'next/navigation';
-import { Workspace } from '@/types/workspace';
+import { WorkspaceItem } from '@/apis/workspace/workspace.type';
 import SidebarContent from './SidebarContent';
 import SidebarHeader from './SidebarHeader';
 
 export type SidebarState = 'all' | 'empty' | 'selected';
 
 interface SidebarViewProps {
-  workspaces: Workspace[];
+  workspaces: WorkspaceItem[];
   totalCount: number;
+  isLoading?: boolean;
 }
 
-export default function SidebarView({ workspaces, totalCount }: SidebarViewProps) {
+export default function SidebarView({ workspaces, totalCount, isLoading }: SidebarViewProps) {
   const params = useParams();
 
   const selectedWorkspaceId = params?.workspaceId ? Number(params.workspaceId) : undefined;
@@ -20,13 +21,13 @@ export default function SidebarView({ workspaces, totalCount }: SidebarViewProps
   const state: SidebarState = totalCount === 0 ? 'empty' : selectedWorkspaceId ? 'selected' : 'all';
 
   return (
-    <aside className='flex h-full w-16.75 flex-col border-r border-gray-300 transition-all duration-200 md:w-40 lg:w-75'>
+    <aside className='relative top-0 left-0 z-10 flex h-full w-16.75 flex-col border-r border-gray-300 transition-all duration-200 md:w-40 lg:w-75'>
       <SidebarHeader />
-
       <SidebarContent
         state={state}
         workspaces={workspaces}
         selectedWorkspaceId={selectedWorkspaceId}
+        isLoading={isLoading}
       />
     </aside>
   );
diff --git a/src/components/sidebar/WorkspaceItem.tsx b/src/components/sidebar/WorkspaceItem.tsx
index 3ccc49e..8261817 100644
--- a/src/components/sidebar/WorkspaceItem.tsx
+++ b/src/components/sidebar/WorkspaceItem.tsx
@@ -1,11 +1,11 @@
 import Link from 'next/link';
+import type { WorkspaceItem } from '@/apis/workspace/workspace.type';
 import OneColorChip from '@/components/OneColorChip';
-import { Workspace } from '@/types/workspace';
 import { cn } from '@/utils/cn';
 import Icon from '../Icon';
 
 interface Props {
-  workspace: Workspace;
+  workspace: WorkspaceItem;
   isSelected?: boolean;
 }
 
diff --git a/src/components/sidebar/WorkspaceList.tsx b/src/components/sidebar/WorkspaceList.tsx
index 0bb8972..e51a694 100644
--- a/src/components/sidebar/WorkspaceList.tsx
+++ b/src/components/sidebar/WorkspaceList.tsx
@@ -1,8 +1,8 @@
-import { Workspace } from '@/types/workspace';
-import WorkspaceItem from './WorkspaceItem';
+import { WorkspaceItem } from '@/apis/workspace/workspace.type';
+import WorkspaceItemComponent from './WorkspaceItem';
 
 interface Props {
-  workspaces: Workspace[];
+  workspaces: WorkspaceItem[];
   selectedWorkspaceId?: number;
 }
 
@@ -10,7 +10,7 @@ export default function WorkspaceList({ workspaces, selectedWorkspaceId }: Props
   return (
     <ul className='flex flex-col gap-1.5 md:gap-0.5'>
       {workspaces.map((ws) => (
-        <WorkspaceItem
+        <WorkspaceItemComponent
           key={ws.workspaceId}
           workspace={ws}
           isSelected={ws.workspaceId === selectedWorkspaceId}
diff --git a/src/middleware.ts b/src/middleware.ts
index bc768ea..20ee5a1 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -7,7 +7,6 @@ export async function middleware(req: NextRequest) {
   const { pathname } = req.nextUrl;
 
   const isAuthPage = pathname.startsWith('/login') || pathname.startsWith('/signup');
-
   const isProtectedPage = pathname.startsWith('/workspace') || pathname.startsWith('/mypage');
 
   if (isProtectedPage && !isLoggedIn) {
@@ -18,6 +17,29 @@ export async function middleware(req: NextRequest) {
     return NextResponse.redirect(new URL('/workspace', req.url));
   }
 
+  const settingsMatch = pathname.match(/^\/workspace\/(\d+)\/settings/);
+  if (settingsMatch && token?.accessToken) {
+    const workspaceId = settingsMatch[1];
+    try {
+      const res = await fetch(
+        `${process.env.NEXT_PUBLIC_API_URL}/api/v1/workspaces/${workspaceId}`,
+        {
+          headers: { Authorization: `Bearer ${token.accessToken}` },
+        },
+      );
+      if (res.ok) {
+        const data = await res.json();
+        if (data?.data?.role === 'MEMBER') {
+          return NextResponse.redirect(new URL(`/workspace/${workspaceId}`, req.url));
+        }
+      } else {
+        return NextResponse.redirect(new URL('/workspace', req.url));
+      }
+    } catch {
+      return NextResponse.redirect(new URL('/workspace', req.url));
+    }
+  }
+
   return NextResponse.next();
 }
 
diff --git a/src/mocks/workspaces.ts b/src/mocks/workspaces.ts
deleted file mode 100644
index 495109b..0000000
--- a/src/mocks/workspaces.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Workspace } from '@/types/workspace';
-
-export interface GetMyWorkspaces {
-  success: boolean;
-  totalCount: number;
-  nextCursor: number;
-  data: Workspace[];
-}
-
-export const mockWorkspaces: GetMyWorkspaces = {
-  success: true,
-  totalCount: 5,
-  nextCursor: 0,
-  data: [
-    {
-      workspaceId: 1,
-      workspaceName: '경영관리팀',
-      color: 'bg-chip-green',
-      role: 'ADMIN',
-      membershipId: 101,
-    },
-    {
-      workspaceId: 2,
-      workspaceName: '맛집투어',
-      color: 'bg-chip-purple',
-      role: 'ADMIN',
-      membershipId: 102,
-    },
-    {
-      workspaceId: 3,
-      workspaceName: '야구직관모임',
-      color: 'bg-chip-orange',
-      role: 'MEMBER',
-      membershipId: 103,
-    },
-    {
-      workspaceId: 4,
-      workspaceName: '학생회',
-      color: 'bg-chip-blue',
-      role: 'MEMBER',
-      membershipId: 104,
-    },
-    {
-      workspaceId: 5,
-      workspaceName: '조기축구',
-      color: 'bg-chip-pink',
-      role: 'MEMBER',
-      membershipId: 105,
-    },
-  ],
-};
diff --git a/src/types/workspace.ts b/src/types/workspace.ts
deleted file mode 100644
index 87c8e86..0000000
--- a/src/types/workspace.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export type WorkspaceRole = 'ADMIN' | 'MEMBER';
-
-export interface Workspace {
-  workspaceId: number;
-  workspaceName: string;
-  color: string;
-  role: WorkspaceRole;
-  membershipId: number;
-}