diff --git a/frontend/src/components/WorkspaceBrowseLayout/index.stories.tsx b/frontend/src/components/WorkspaceBrowseLayout/index.stories.tsx
new file mode 100644
index 0000000..6a37e1b
--- /dev/null
+++ b/frontend/src/components/WorkspaceBrowseLayout/index.stories.tsx
@@ -0,0 +1,23 @@
+import '@/index.css';
+import { Meta, StoryObj } from '@storybook/react';
+import WorkspaceBrowseLayout from '.';
+
+const meta: Meta<typeof WorkspaceBrowseLayout> = {
+  title: 'Layout/WorkspaceBrowseLayout',
+  component: WorkspaceBrowseLayout,
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof WorkspaceBrowseLayout>;
+
+export const Default: Story = {
+  render: () => <WorkspaceBrowseLayout />,
+};
+
+export const Empty: Story = {
+  render: () => <WorkspaceBrowseLayout />,
+};
diff --git a/frontend/src/components/WorkspaceBrowseLayout/index.tsx b/frontend/src/components/WorkspaceBrowseLayout/index.tsx
index 617745f..cfca174 100644
--- a/frontend/src/components/WorkspaceBrowseLayout/index.tsx
+++ b/frontend/src/components/WorkspaceBrowseLayout/index.tsx
@@ -1,7 +1,6 @@
 import { Suspense } from 'react';
 import { NavLink, Outlet } from 'react-router-dom';
 import Header from '../Header';
-import Footer from '../Footer';
 import { Workspace } from '@/types';
 import { Dialog, DialogContent, DialogHeader, DialogTrigger } from '../ui/dialogCustom';
 import { Plus } from 'lucide-react';
@@ -60,15 +59,19 @@ export default function WorkspaceBrowseLayout() {
                 </DialogContent>
               </Dialog>
             </div>
-            {workspaces.map((workspace) => (
-              <NavLink
-                to={`/browse/${workspace.id}`}
-                key={workspace.id}
-                className={({ isActive }) => (isActive ? 'body-strong' : 'body') + ' cursor-pointer'}
-              >
-                {workspace.name}
-              </NavLink>
-            ))}
+            {workspaces.length > 0 ? (
+              workspaces.map((workspace) => (
+                <NavLink
+                  to={`/browse/${workspace.id}`}
+                  key={workspace.id}
+                  className={({ isActive }) => (isActive ? 'body-strong' : 'body') + ' cursor-pointer'}
+                >
+                  {workspace.name}
+                </NavLink>
+              ))
+            ) : (
+              <p className="text-gray-500">워크스페이스가 없습니다.</p>
+            )}
           </div>
           <div className="flex w-[calc(100%-280px)] flex-col gap-24">
             <Suspense fallback={<div></div>}>
@@ -76,7 +79,6 @@ export default function WorkspaceBrowseLayout() {
                 <Outlet />
               </main>
             </Suspense>
-            <Footer className="mt-0" />
           </div>
         </div>
       </div>