feat: 캘린더 기능 구현

src/app/workspaces/[workspaceId]/calendar/page.tsx

@@ -0,0 +1,15 @@
+import { CalendarPage } from '@/views/calendar';
+
+interface WorkspaceCalendarPageProps {
+  params: Promise<{
+    workspaceId: string;
+  }>;
+}
+
+export default async function WorkspaceCalendarPage({
+  params,
+}: WorkspaceCalendarPageProps) {
+  const { workspaceId } = await params;
+
+  return <CalendarPage workspaceId={workspaceId} />;
+}

src/entities/calendar-event/index.ts

@@ -0,0 +1,7 @@
+export { getMockCalendarEventsByWorkspaceId } from './model/mock-calendar-events-by-workspace';
+export type {
+  CalendarEvent,
+  CalendarEventColor,
+  CalendarEventFormValues,
+} from './model/calendar-event.types';
+export { CalendarEventChip } from './ui/CalendarEventChip';

src/entities/calendar-event/model/calendar-event.types.ts

@@ -0,0 +1,16 @@
+export type CalendarEventColor = 'violet' | 'purple' | 'blue' | 'green' | 'amber' | 'coral' | 'pink';
+
+export interface CalendarEvent {
+  id: string;
+  workspaceId: string;
+  title: string;
+  date: string;
+  time: string | null;
+  color: CalendarEventColor;
+}
+
+export interface CalendarEventFormValues {
+  title: string;
+  time: string;
+  color: CalendarEventColor;
+}

src/entities/calendar-event/model/mock-calendar-events-by-workspace.ts

@@ -0,0 +1,142 @@
+import type { CalendarEvent } from './calendar-event.types';
+
+const mockCalendarEventsByWorkspaceId: Record<string, CalendarEvent[]> = {
+  test: [
+    {
+      id: 'calendar-event-1',
+      workspaceId: 'test',
+      title: 'API 명세 마감',
+      date: '2025-07-02',
+      time: null,
+      color: 'violet',
+    },
+    {
+      id: 'calendar-event-2',
+      workspaceId: 'test',
+      title: '백로그 정리',
+      date: '2025-07-02',
+      time: '오후 1:00',
+      color: 'blue',
+    },
+    {
+      id: 'calendar-event-3',
+      workspaceId: 'test',
+      title: '와이어프레임',
+      date: '2025-07-03',
+      time: null,
+      color: 'purple',
+    },
+    {
+      id: 'calendar-event-4',
+      workspaceId: 'test',
+      title: '스프린트',
+      date: '2025-07-03',
+      time: null,
+      color: 'blue',
+    },
+    {
+      id: 'calendar-event-5',
+      workspaceId: 'test',
+      title: '사용자 리서치',
+      date: '2025-07-05',
+      time: null,
+      color: 'blue',
+    },
+    {
+      id: 'calendar-event-6',
+      workspaceId: 'test',
+      title: '회의 안건 정리',
+      date: '2025-07-05',
+      time: '오전 10:00',
+      color: 'amber',
+    },
+    {
+      id: 'calendar-event-7',
+      workspaceId: 'test',
+      title: '랜딩 디자인',
+      date: '2025-07-08',
+      time: null,
+      color: 'violet',
+    },
+    {
+      id: 'calendar-event-8',
+      workspaceId: 'test',
+      title: '카피 문구 검토',
+      date: '2025-07-08',
+      time: '오후 2:00',
+      color: 'purple',
+    },
+    {
+      id: 'calendar-event-9',
+      workspaceId: 'test',
+      title: 'MVP 완성',
+      date: '2025-07-14',
+      time: null,
+      color: 'green',
+    },
+    {
+      id: 'calendar-event-10',
+      workspaceId: 'test',
+      title: '중간 점검 회의',
+      date: '2025-07-14',
+      time: '오후 4:00',
+      color: 'blue',
+    },
+    {
+      id: 'calendar-event-11',
+      workspaceId: 'test',
+      title: 'QA 시작',
+      date: '2025-07-22',
+      time: null,
+      color: 'coral',
+    },
+    {
+      id: 'calendar-event-12',
+      workspaceId: 'test',
+      title: '버그 우선순위 정리',
+      date: '2025-07-22',
+      time: '오전 11:00',
+      color: 'pink',
+    },
+    {
+      id: 'calendar-event-13',
+      workspaceId: 'test',
+      title: '배포 준비',
+      date: '2025-07-28',
+      time: null,
+      color: 'violet',
+    },
+    {
+      id: 'calendar-event-14',
+      workspaceId: 'test',
+      title: '릴리즈 체크리스트',
+      date: '2025-07-28',
+      time: '오후 1:00',
+      color: 'green',
+    },
+    {
+      id: 'calendar-event-15',
+      workspaceId: 'test',
+      title: '최종 발표 리허설',
+      date: '2025-07-30',
+      time: '오후 3:00',
+      color: 'violet',
+    },
+    {
+      id: 'calendar-event-16',
+      workspaceId: 'test',
+      title: '발표 자료 검수',
+      date: '2025-07-30',
+      time: '오후 5:00',
+      color: 'amber',
+    },
+  ],
+};
+
+export function getMockCalendarEventsByWorkspaceId(workspaceId: string): CalendarEvent[] {
+  return (
+    mockCalendarEventsByWorkspaceId[workspaceId]?.map((event) => ({
+      ...event,
+    })) ?? []
+  );
+}

src/entities/calendar-event/ui/CalendarEventChip.tsx

@@ -0,0 +1,30 @@
+import { cn } from '@/shared/lib/utils';
+import type { CalendarEvent, CalendarEventColor } from '../model/calendar-event.types';
+
+const colorClassNames: Record<CalendarEventColor, string> = {
+  violet: 'bg-[#6b5cff]',
+  purple: 'bg-[#7f5cff]',
+  blue: 'bg-[#2f7df6]',
+  green: 'bg-[#10b74a]',
+  amber: 'bg-[#ff9f0a]',
+  coral: 'bg-[#ff6565]',
+  pink: 'bg-[#eb2f96]',
+};
+
+interface CalendarEventChipProps {
+  event: CalendarEvent;
+}
+
+export function CalendarEventChip({ event }: CalendarEventChipProps) {
+  return (
+    <div
+      className={cn(
+        'h-5 truncate rounded-full px-2 text-[10px] leading-5 font-semibold text-white',
+        colorClassNames[event.color],
+      )}
+      title={event.title}
+    >
+      {event.title}
+    </div>
+  );
+}

src/entities/workspace/model/mock-workspace.ts

@@ -3,6 +3,11 @@ import { cache } from 'react';
 import type { Workspace } from './workspace.types';
 
 const mockWorkspacesById: Record<string, Workspace> = {
+  test: {
+    id: 'test',
+    name: '캡스톤 디자인 팀',
+    purpose: 'team-project',
+  },
   'store-workspace': {
     id: 'store-workspace',
     name: '카페 그레이 운영',

src/features/manage-calendar/index.ts

@@ -0,0 +1 @@
+export { CalendarView } from './ui/CalendarView';

src/features/manage-calendar/model/calendar-utils.ts

@@ -0,0 +1,40 @@
+export interface CalendarDayCell {
+  isoDate: string;
+  dayNumber: number;
+  isCurrentMonth: boolean;
+}
+
+function formatIsoDate(date: Date) {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+
+  return `${year}-${month}-${day}`;
+}
+
+export function createCalendarMonthLabel(currentMonth: Date) {
+  return `${currentMonth.getFullYear()}년 ${currentMonth.getMonth() + 1}월`;
+}
+
+export function createCalendarMonthGrid(currentMonth: Date): CalendarDayCell[] {
+  const year = currentMonth.getFullYear();
+  const monthIndex = currentMonth.getMonth();
+  const firstDayOfMonth = new Date(year, monthIndex, 1);
+  const startDayIndex = firstDayOfMonth.getDay();
+  const gridStartDate = new Date(year, monthIndex, 1 - startDayIndex);
+
+  return Array.from({ length: 35 }, (_, index) => {
+    const date = new Date(gridStartDate);
+    date.setDate(gridStartDate.getDate() + index);
+
+    return {
+      isoDate: formatIsoDate(date),
+      dayNumber: date.getDate(),
+      isCurrentMonth: date.getMonth() === monthIndex,
+    };
+  });
+}
+
+export function getInitialCalendarDate() {
+  return new Date(2025, 6, 1);
+}

src/features/manage-calendar/model/use-calendar-events-store.ts

@@ -0,0 +1,44 @@
+'use client';
+
+import { create } from 'zustand';
+import type { CalendarEvent } from '@/entities/calendar-event';
+
+interface CalendarEventsStore {
+  calendarEventsByWorkspaceId: Record<string, CalendarEvent[]>;
+  initializeWorkspace: (workspaceId: string, events: CalendarEvent[]) => void;
+  addCalendarEvent: (workspaceId: string, event: CalendarEvent) => void;
+  removeCalendarEvent: (workspaceId: string, eventId: string) => void;
+}
+
+export const useCalendarEventsStore = create<CalendarEventsStore>((set) => ({
+  calendarEventsByWorkspaceId: {},
+  initializeWorkspace: (workspaceId, events) =>
+    set((state) => {
+      if (state.calendarEventsByWorkspaceId[workspaceId]) {
+        return state;
+      }
+
+      return {
+        calendarEventsByWorkspaceId: {
+          ...state.calendarEventsByWorkspaceId,
+          [workspaceId]: events,
+        },
+      };
+    }),
+  addCalendarEvent: (workspaceId, event) =>
+    set((state) => ({
+      calendarEventsByWorkspaceId: {
+        ...state.calendarEventsByWorkspaceId,
+        [workspaceId]: [...(state.calendarEventsByWorkspaceId[workspaceId] ?? []), event],
+      },
+    })),
+  removeCalendarEvent: (workspaceId, eventId) =>
+    set((state) => ({
+      calendarEventsByWorkspaceId: {
+        ...state.calendarEventsByWorkspaceId,
+        [workspaceId]: (state.calendarEventsByWorkspaceId[workspaceId] ?? []).filter(
+          (event) => event.id !== eventId,
+        ),
+      },
+    })),
+}));