diff --git a/src/app/workspaces/[workspaceId]/notices/page.tsx b/src/app/workspaces/[workspaceId]/notices/page.tsx
new file mode 100644
index 0000000..faea680
--- /dev/null
+++ b/src/app/workspaces/[workspaceId]/notices/page.tsx
@@ -0,0 +1,14 @@
+// 워크스페이스 공지 페이지의 라우트 진입점입니다.
+import { NoticesView } from '@/views/store-operation/notices';
+
+interface NoticesPageProps {
+  params: Promise<{
+    workspaceId: string;
+  }>;
+}
+
+export default async function NoticesPage({ params }: NoticesPageProps) {
+  const { workspaceId } = await params;
+
+  return <NoticesView workspaceId={workspaceId} />;
+}
diff --git a/src/entities/notice/index.ts b/src/entities/notice/index.ts
new file mode 100644
index 0000000..45dbc7d
--- /dev/null
+++ b/src/entities/notice/index.ts
@@ -0,0 +1,3 @@
+// 공지 도메인의 타입과 목업 데이터 공개 API입니다.
+export type { Notice, NoticeFormValues } from './model/notice.types';
+export { mockNotices } from './model/mock-notices';
diff --git a/src/entities/notice/model/mock-notices.ts b/src/entities/notice/model/mock-notices.ts
new file mode 100644
index 0000000..94c5466
--- /dev/null
+++ b/src/entities/notice/model/mock-notices.ts
@@ -0,0 +1,44 @@
+import type { Notice } from './notice.types';
+
+export const mockNotices: Notice[] = [
+  {
+    id: 'notice-1',
+    workspaceId: 'test',
+    title: '7월 신메뉴 출시 안내',
+    authorName: '김민서',
+    createdAt: '2025-06-28',
+    isPinned: true,
+    content:
+      "7월 1일부터 여름 한정 '망고 라떼'와 '피치 에이드'가 출시됩니다. 레시피 숙지 부탁드립니다.",
+  },
+  {
+    id: 'notice-2',
+    workspaceId: 'test',
+    title: '주간 청소 구역 배정',
+    authorName: '이준혁',
+    createdAt: '2025-06-26',
+    isPinned: false,
+    content:
+      '이번 주 청소 구역 배정표를 확인해주세요. 마감 담당자는 냉장고 하단과 픽업대 주변을 추가로 점검해 주세요.',
+  },
+  {
+    id: 'notice-3',
+    workspaceId: 'test',
+    title: '유니폼 교체 안내',
+    authorName: '김민서',
+    createdAt: '2025-06-24',
+    isPinned: false,
+    content:
+      '신규 유니폼이 입고되었습니다. 이번 주 출근 시 기존 유니폼을 반납하고 새 유니폼을 수령해 주세요.',
+  },
+  {
+    id: 'notice-4',
+    workspaceId: 'test',
+    title: '카드 단말기 교체 완료',
+    authorName: '이준혁',
+    createdAt: '2025-06-22',
+    isPinned: false,
+    content:
+      '카드 단말기 교체가 완료되었습니다. 결제 오류가 반복되면 매니저에게 바로 공유해 주세요.',
+  },
+];
diff --git a/src/entities/notice/model/notice.types.ts b/src/entities/notice/model/notice.types.ts
new file mode 100644
index 0000000..8fd25b8
--- /dev/null
+++ b/src/entities/notice/model/notice.types.ts
@@ -0,0 +1,15 @@
+// Supabase 공지 테이블 연결 전까지 화면 상태와 목업 데이터에서 공유하는 공지 형태입니다.
+export interface Notice {
+  id: string;
+  workspaceId: string;
+  title: string;
+  content: string;
+  authorName: string;
+  createdAt: string;
+  isPinned: boolean;
+}
+
+export interface NoticeFormValues {
+  title: string;
+  content: string;
+}
diff --git a/src/features/manage-notices/index.ts b/src/features/manage-notices/index.ts
new file mode 100644
index 0000000..465505b
--- /dev/null
+++ b/src/features/manage-notices/index.ts
@@ -0,0 +1,4 @@
+export { useNoticeBoardState } from './model/use-notice-board-state';
+export { NoticeComposer } from './ui/NoticeComposer';
+export { NoticeDetailPanel } from './ui/NoticeDetailPanel';
+export { NoticeList } from './ui/NoticeList';
diff --git a/src/features/manage-notices/model/use-notice-board-state.ts b/src/features/manage-notices/model/use-notice-board-state.ts
new file mode 100644
index 0000000..deb3d0c
--- /dev/null
+++ b/src/features/manage-notices/model/use-notice-board-state.ts
@@ -0,0 +1,140 @@
+'use client';
+
+// 워크스페이스 공지사항 게시판의 목록 정렬, 선택, 작성/수정, 삭제, 고정 상태를 관리합니다.
+import { useState } from 'react';
+import type { Notice, NoticeFormValues } from '@/entities/notice';
+
+interface UseNoticeBoardStateParams {
+  initialNotices: Notice[];
+  workspaceId: string;
+  authorName: string;
+}
+
+function sortNotices(notices: Notice[]) {
+  return [...notices].sort((first, second) => {
+    if (first.isPinned !== second.isPinned) {
+      return first.isPinned ? -1 : 1;
+    }
+
+    return second.createdAt.localeCompare(first.createdAt);
+  });
+}
+
+function createNoticeId() {
+  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+    return `notice-${crypto.randomUUID()}`;
+  }
+
+  return `notice-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
+}
+
+function createTodayLabel() {
+  return new Date().toISOString().slice(0, 10);
+}
+
+export function useNoticeBoardState({
+  initialNotices,
+  workspaceId,
+  authorName,
+}: UseNoticeBoardStateParams) {
+  const [notices, setNotices] = useState(() => sortNotices(initialNotices));
+  const [selectedNoticeId, setSelectedNoticeId] = useState(
+    () => sortNotices(initialNotices)[0]?.id ?? null,
+  );
+  const [editingNoticeId, setEditingNoticeId] = useState<string | null>(null);
+  const [isComposerOpen, setIsComposerOpen] = useState(false);
+
+  const selectedNotice = notices.find((notice) => notice.id === selectedNoticeId) ?? null;
+  const editingNotice = notices.find((notice) => notice.id === editingNoticeId) ?? null;
+
+  const openCreateComposer = () => {
+    setEditingNoticeId(null);
+    setIsComposerOpen(true);
+  };
+
+  const openEditComposer = (noticeId: string) => {
+    setSelectedNoticeId(noticeId);
+    setEditingNoticeId(noticeId);
+    setIsComposerOpen(true);
+  };
+
+  const closeComposer = () => {
+    setEditingNoticeId(null);
+    setIsComposerOpen(false);
+  };
+
+  const submitNotice = (values: NoticeFormValues) => {
+    const trimmedTitle = values.title.trim();
+    const trimmedContent = values.content.trim();
+
+    if (!trimmedTitle || !trimmedContent) {
+      return;
+    }
+
+    if (editingNoticeId) {
+      setNotices((currentNotices) =>
+        currentNotices.map((notice) =>
+          notice.id === editingNoticeId
+            ? { ...notice, title: trimmedTitle, content: trimmedContent }
+            : notice,
+        ),
+      );
+      setSelectedNoticeId(editingNoticeId);
+      closeComposer();
+      return;
+    }
+
+    const nextNotice: Notice = {
+      id: createNoticeId(),
+      workspaceId,
+      title: trimmedTitle,
+      content: trimmedContent,
+      authorName,
+      createdAt: createTodayLabel(),
+      isPinned: false,
+    };
+
+    setNotices((currentNotices) => sortNotices([nextNotice, ...currentNotices]));
+    setSelectedNoticeId(nextNotice.id);
+    closeComposer();
+  };
+
+  const deleteNotice = (noticeId: string) => {
+    const nextNotices = sortNotices(notices.filter((notice) => notice.id !== noticeId));
+
+    setNotices(nextNotices);
+
+    if (selectedNoticeId === noticeId) {
+      setSelectedNoticeId(nextNotices[0]?.id ?? null);
+    }
+
+    if (editingNoticeId === noticeId) {
+      closeComposer();
+    }
+  };
+
+  const togglePinned = (noticeId: string) => {
+    setNotices((currentNotices) =>
+      sortNotices(
+        currentNotices.map((notice) =>
+          notice.id === noticeId ? { ...notice, isPinned: !notice.isPinned } : notice,
+        ),
+      ),
+    );
+    setSelectedNoticeId(noticeId);
+  };
+
+  return {
+    notices,
+    selectedNotice,
+    editingNotice,
+    isComposerOpen,
+    openCreateComposer,
+    openEditComposer,
+    closeComposer,
+    selectNotice: setSelectedNoticeId,
+    submitNotice,
+    deleteNotice,
+    togglePinned,
+  };
+}
diff --git a/src/features/manage-notices/ui/NoticeComposer.tsx b/src/features/manage-notices/ui/NoticeComposer.tsx
new file mode 100644
index 0000000..ad19f1d
--- /dev/null
+++ b/src/features/manage-notices/ui/NoticeComposer.tsx
@@ -0,0 +1,71 @@
+'use client';
+
+import { useState } from 'react';
+import type { Notice, NoticeFormValues } from '@/entities/notice';
+
+interface NoticeComposerProps {
+  editingNotice: Notice | null;
+  onSubmit: (values: NoticeFormValues) => void;
+  onCancel: () => void;
+}
+
+export function NoticeComposer({ editingNotice, onSubmit, onCancel }: NoticeComposerProps) {
+  const [title, setTitle] = useState(editingNotice?.title ?? '');
+  const [content, setContent] = useState(editingNotice?.content ?? '');
+
+  const canSubmit = title.trim().length > 0 && content.trim().length > 0;
+
+  return (
+    <form
+      className="rounded-2xl border border-indigo-200 bg-white p-6 shadow-sm"
+      onSubmit={(event) => {
+        event.preventDefault();
+        onSubmit({ title, content });
+      }}
+    >
+      <h2 className="text-base font-bold text-slate-950">
+        {editingNotice ? '공지 수정' : '새 공지 작성'}
+      </h2>
+
+      <div className="mt-4 space-y-4">
+        <label className="block">
+          <span className="sr-only">공지 제목</span>
+          <input
+            value={title}
+            onChange={(event) => setTitle(event.target.value)}
+            placeholder="제목을 입력하세요"
+            className="h-14 w-full rounded-2xl bg-slate-100 px-5 text-base font-medium text-slate-900 outline-none placeholder:text-slate-400 focus:ring-2 focus:ring-indigo-300"
+          />
+        </label>
+
+        <label className="block">
+          <span className="sr-only">공지 내용</span>
+          <textarea
+            value={content}
+            onChange={(event) => setContent(event.target.value)}
+            placeholder="내용을 입력하세요"
+            rows={4}
+            className="min-h-28 w-full resize-none rounded-2xl bg-slate-100 px-5 py-4 text-base font-medium text-slate-900 outline-none placeholder:text-slate-400 focus:ring-2 focus:ring-indigo-300"
+          />
+        </label>
+      </div>
+
+      <div className="mt-5 flex items-center gap-2">
+        <button
+          type="submit"
+          disabled={!canSubmit}
+          className="h-11 rounded-2xl bg-[var(--color-brand)] px-5 text-sm font-bold text-white hover:bg-indigo-500 disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          {editingNotice ? '저장' : '등록'}
+        </button>
+        <button
+          type="button"
+          onClick={onCancel}
+          className="h-11 rounded-2xl bg-slate-100 px-5 text-sm font-bold text-slate-700 hover:bg-slate-200"
+        >
+          취소
+        </button>
+      </div>
+    </form>
+  );
+}
diff --git a/src/features/manage-notices/ui/NoticeDetailPanel.tsx b/src/features/manage-notices/ui/NoticeDetailPanel.tsx
new file mode 100644
index 0000000..20bd0d2
--- /dev/null
+++ b/src/features/manage-notices/ui/NoticeDetailPanel.tsx
@@ -0,0 +1,45 @@
+import { Star } from 'lucide-react';
+import type { Notice } from '@/entities/notice';
+
+interface NoticeDetailPanelProps {
+  notice: Notice | null;
+}
+
+export function NoticeDetailPanel({ notice }: NoticeDetailPanelProps) {
+  if (!notice) {
+    return (
+      <aside className="rounded-2xl border border-dashed border-slate-300 bg-white/60 p-6 text-sm font-medium text-slate-500">
+        공지를 선택하면 내용이 표시됩니다.
+      </aside>
+    );
+  }
+
+  return (
+    <aside className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
+      <div className="flex items-start justify-between gap-4">
+        <div className="min-w-0">
+          <div className="flex items-center gap-2">
+            {notice.isPinned ? (
+              <Star
+                className="h-5 w-5 shrink-0 fill-amber-100 text-amber-500"
+                aria-hidden="true"
+              />
+            ) : null}
+            <h2 className="text-xl font-bold leading-7 text-slate-950">{notice.title}</h2>
+          </div>
+          <p className="mt-2 text-sm font-medium text-indigo-400">
+            {notice.authorName} · {notice.createdAt}
+          </p>
+        </div>
+
+        {notice.isPinned ? (
+          <span className="shrink-0 rounded-full bg-amber-100 px-2.5 py-1 text-xs font-bold text-orange-600">
+            고정
+          </span>
+        ) : null}
+      </div>
+
+      <p className="mt-6 whitespace-pre-line text-base leading-7 text-slate-800">{notice.content}</p>
+    </aside>
+  );
+}
diff --git a/src/features/manage-notices/ui/NoticeList.tsx b/src/features/manage-notices/ui/NoticeList.tsx
new file mode 100644
index 0000000..1a92ef3
--- /dev/null
+++ b/src/features/manage-notices/ui/NoticeList.tsx
@@ -0,0 +1,131 @@
+'use client';
+
+import { useState } from 'react';
+import { MoreHorizontal, Pin, Star } from 'lucide-react';
+import type { Notice } from '@/entities/notice';
+import { cn } from '@/shared/lib/utils';
+
+interface NoticeListProps {
+  notices: Notice[];
+  selectedNoticeId: string | null;
+  onSelectNotice: (noticeId: string) => void;
+  onEditNotice: (noticeId: string) => void;
+  onDeleteNotice: (noticeId: string) => void;
+  onTogglePinned: (noticeId: string) => void;
+}
+
+export function NoticeList({
+  notices,
+  selectedNoticeId,
+  onSelectNotice,
+  onEditNotice,
+  onDeleteNotice,
+  onTogglePinned,
+}: NoticeListProps) {
+  const [openMenuNoticeId, setOpenMenuNoticeId] = useState<string | null>(null);
+
+  return (
+    <div className="space-y-4">
+      {notices.map((notice) => {
+        const isSelected = notice.id === selectedNoticeId;
+        const isMenuOpen = notice.id === openMenuNoticeId;
+
+        return (
+          <article
+            key={notice.id}
+            className={cn(
+              'relative rounded-2xl border bg-white shadow-sm transition hover:border-indigo-200 hover:shadow-md',
+              isSelected ? 'border-indigo-300 ring-1 ring-indigo-200' : 'border-slate-200',
+            )}
+          >
+            <button
+              type="button"
+              onClick={() => onSelectNotice(notice.id)}
+              className="block w-full rounded-2xl px-5 py-5 text-left"
+            >
+              <div className="flex min-w-0 items-start gap-3 pr-14">
+                {notice.isPinned ? (
+                  <Star
+                    className="mt-0.5 h-5 w-5 shrink-0 fill-amber-100 text-amber-500"
+                    aria-hidden="true"
+                  />
+                ) : null}
+
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center gap-3">
+                    <h2 className="truncate text-base font-bold text-slate-950">{notice.title}</h2>
+                    {notice.isPinned ? (
+                      <span className="rounded-full bg-amber-100 px-2.5 py-1 text-xs font-bold text-orange-600">
+                        고정
+                      </span>
+                    ) : null}
+                  </div>
+                  <p className="mt-1 text-sm font-medium text-indigo-400">
+                    {notice.authorName} · {notice.createdAt}
+                  </p>
+                </div>
+              </div>
+
+              {isSelected ? (
+                <p className="mt-5 border-t border-slate-100 pt-5 text-base leading-7 text-slate-800">
+                  {notice.content}
+                </p>
+              ) : null}
+            </button>
+
+            <div className="absolute top-4 right-4">
+              <button
+                type="button"
+                aria-label={`${notice.title} 메뉴 열기`}
+                aria-expanded={isMenuOpen}
+                onClick={(event) => {
+                  event.stopPropagation();
+                  setOpenMenuNoticeId(isMenuOpen ? null : notice.id);
+                }}
+                className="flex h-9 w-9 items-center justify-center rounded-full text-slate-400 hover:bg-slate-100 hover:text-slate-700"
+              >
+                <MoreHorizontal className="h-5 w-5" aria-hidden="true" />
+              </button>
+
+              {isMenuOpen ? (
+                <div className="absolute right-0 z-10 mt-2 w-36 overflow-hidden rounded-xl border border-slate-200 bg-white py-2 text-sm font-bold text-slate-700 shadow-lg">
+                  <button
+                    type="button"
+                    onClick={() => {
+                      onEditNotice(notice.id);
+                      setOpenMenuNoticeId(null);
+                    }}
+                    className="block w-full px-4 py-2 text-left hover:bg-indigo-50 hover:text-indigo-600"
+                  >
+                    수정
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      onTogglePinned(notice.id);
+                      setOpenMenuNoticeId(null);
+                    }}
+                    className="flex w-full items-center gap-2 px-4 py-2 text-left hover:bg-indigo-50 hover:text-indigo-600"
+                  >
+                    <Pin className="h-4 w-4" aria-hidden="true" />
+                    {notice.isPinned ? '고정 해제' : '고정'}
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      onDeleteNotice(notice.id);
+                      setOpenMenuNoticeId(null);
+                    }}
+                    className="block w-full px-4 py-2 text-left text-rose-600 hover:bg-rose-50"
+                  >
+                    삭제
+                  </button>
+                </div>
+              ) : null}
+            </div>
+          </article>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/src/views/store-operation/notices/index.ts b/src/views/store-operation/notices/index.ts
new file mode 100644
index 0000000..dec7f5c
--- /dev/null
+++ b/src/views/store-operation/notices/index.ts
@@ -0,0 +1 @@
+export { NoticesView } from './ui/NoticesView';
diff --git a/src/views/store-operation/notices/ui/NoticesView.tsx b/src/views/store-operation/notices/ui/NoticesView.tsx
new file mode 100644
index 0000000..d2b12b9
--- /dev/null
+++ b/src/views/store-operation/notices/ui/NoticesView.tsx
@@ -0,0 +1,77 @@
+'use client';
+
+import { Plus } from 'lucide-react';
+import { mockNotices } from '@/entities/notice';
+import { mockCurrentWorkspaceMember } from '@/entities/workspace-member';
+import {
+  NoticeComposer,
+  NoticeDetailPanel,
+  NoticeList,
+  useNoticeBoardState,
+} from '@/features/manage-notices';
+
+interface NoticesViewProps {
+  workspaceId: string;
+}
+
+export function NoticesView({ workspaceId }: NoticesViewProps) {
+  const {
+    notices,
+    selectedNotice,
+    editingNotice,
+    isComposerOpen,
+    openCreateComposer,
+    openEditComposer,
+    closeComposer,
+    selectNotice,
+    submitNotice,
+    deleteNotice,
+    togglePinned,
+  } = useNoticeBoardState({
+    initialNotices: mockNotices,
+    workspaceId,
+    authorName: mockCurrentWorkspaceMember.workspaceNickname,
+  });
+
+  return (
+    <section>
+      <div className="mb-6 flex items-center justify-between gap-4">
+        <h1 className="text-2xl font-bold text-slate-950">공지</h1>
+        <button
+          type="button"
+          onClick={openCreateComposer}
+          className="flex h-12 items-center gap-2 rounded-2xl bg-[var(--color-brand)] px-5 text-base font-bold text-white shadow-sm hover:bg-indigo-500"
+        >
+          <Plus className="h-5 w-5" aria-hidden="true" />
+          공지 작성
+        </button>
+      </div>
+
+      <div className="grid items-start gap-6 xl:grid-cols-[minmax(0,1fr)_360px]">
+        <div className="space-y-5">
+          {isComposerOpen ? (
+            <NoticeComposer
+              key={editingNotice?.id ?? 'new-notice'}
+              editingNotice={editingNotice}
+              onSubmit={submitNotice}
+              onCancel={closeComposer}
+            />
+          ) : null}
+
+          <NoticeList
+            notices={notices}
+            selectedNoticeId={selectedNotice?.id ?? null}
+            onSelectNotice={selectNotice}
+            onEditNotice={openEditComposer}
+            onDeleteNotice={deleteNotice}
+            onTogglePinned={togglePinned}
+          />
+        </div>
+
+        <div className="sticky top-6 hidden xl:block">
+          <NoticeDetailPanel notice={selectedNotice} />
+        </div>
+      </div>
+    </section>
+  );
+}