diff --git a/src/shared/constants/calendar.ts b/src/shared/constants/calendar.ts
new file mode 100644
index 0000000..fd9570d
--- /dev/null
+++ b/src/shared/constants/calendar.ts
@@ -0,0 +1,14 @@
+export const WEEKDAY_LABELS = [
+ '일',
+ '월',
+ '화',
+ '수',
+ '목',
+ '금',
+ '토',
+] as const
+
+export const WEEKDAY_LABELS_MONDAY_FIRST = [
+ ...WEEKDAY_LABELS.slice(1),
+ WEEKDAY_LABELS[0],
+] as const
diff --git a/src/shared/lib/calendarUtils.ts b/src/shared/lib/calendarUtils.ts
new file mode 100644
index 0000000..c932465
--- /dev/null
+++ b/src/shared/lib/calendarUtils.ts
@@ -0,0 +1,30 @@
+import {
+ eachDayOfInterval,
+ endOfMonth,
+ endOfWeek,
+ isSameMonth,
+ startOfMonth,
+ startOfWeek,
+} from 'date-fns'
+
+export interface CalendarCell {
+ date: Date
+ isCurrentMonth: boolean
+}
+
+export function getCalendarCells(
+ baseDate: Date,
+ weekStartsOn: 0 | 1 = 1
+): CalendarCell[] {
+ const monthStart = startOfMonth(baseDate)
+ const monthEnd = endOfMonth(baseDate)
+ const intervalStart = startOfWeek(monthStart, { weekStartsOn })
+ const intervalEnd = endOfWeek(monthEnd, { weekStartsOn })
+
+ return eachDayOfInterval({ start: intervalStart, end: intervalEnd }).map(
+ date => ({
+ date,
+ isCurrentMonth: isSameMonth(date, baseDate),
+ })
+ )
+}
diff --git a/src/shared/ui/common/ScheduleCalendar.tsx b/src/shared/ui/common/ScheduleCalendar.tsx
new file mode 100644
index 0000000..b30693d
--- /dev/null
+++ b/src/shared/ui/common/ScheduleCalendar.tsx
@@ -0,0 +1,144 @@
+import { useEffect, useState } from 'react'
+import { isSameDay } from 'date-fns'
+import chevronLeftIcon from '@/assets/icons/nav/chevron-left.svg'
+import { getCalendarCells } from '@/shared/lib/calendarUtils'
+import { WEEKDAY_LABELS } from '@/shared/constants/calendar'
+
+interface ScheduleCalendarProps {
+ selectedDate?: Date | null
+ onDateChange: (date: Date) => void
+}
+
+export function ScheduleCalendar({
+ selectedDate,
+ onDateChange,
+}: ScheduleCalendarProps) {
+ const today = new Date()
+ const [viewYear, setViewYear] = useState(
+ selectedDate?.getFullYear() ?? today.getFullYear()
+ )
+ const [viewMonth, setViewMonth] = useState(
+ selectedDate?.getMonth() ?? today.getMonth()
+ )
+
+ useEffect(() => {
+ if (selectedDate) {
+ const year = selectedDate.getFullYear()
+ const month = selectedDate.getMonth()
+ if (viewYear !== year || viewMonth !== month) {
+ setViewYear(year)
+ setViewMonth(month)
+ }
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [selectedDate])
+
+ const baseDate = new Date(viewYear, viewMonth, 1)
+ const cells = getCalendarCells(baseDate, 0)
+ const weeks = []
+ for (let i = 0; i < cells.length; i += 7) {
+ weeks.push(cells.slice(i, i + 7))
+ }
+
+ function prevMonth() {
+ if (viewMonth === 0) {
+ setViewYear(y => y - 1)
+ setViewMonth(11)
+ } else setViewMonth(m => m - 1)
+ }
+
+ function nextMonth() {
+ if (viewMonth === 11) {
+ setViewYear(y => y + 1)
+ setViewMonth(0)
+ } else setViewMonth(m => m + 1)
+ }
+
+ return (
+
+ {/* Header */}
+
+
+
+ {viewYear}년 {viewMonth + 1}월
+
+
+
+
+ {/* Weekday headers */}
+
+ {WEEKDAY_LABELS.map(day => (
+
+
+ {day}
+
+
+ ))}
+
+
+ {/* Date grid */}
+
+ {weeks.map((week, wi) => (
+
+ {week.map(({ date, isCurrentMonth }, di) => {
+ const isSelected = selectedDate
+ ? isSameDay(date, selectedDate)
+ : false
+
+ let textColor = 'text-text-90'
+ if (!isCurrentMonth) textColor = 'text-text-50'
+ else if (di === 0) textColor = 'text-error'
+ else if (di === 6) textColor = 'text-subBlue'
+
+ return (
+
+ )
+ })}
+
+ ))}
+
+
+ )
+}
diff --git a/src/shared/ui/schedule/ColorPickerDropdown.tsx b/src/shared/ui/schedule/ColorPickerDropdown.tsx
new file mode 100644
index 0000000..6029d03
--- /dev/null
+++ b/src/shared/ui/schedule/ColorPickerDropdown.tsx
@@ -0,0 +1,75 @@
+import chevronDownIcon from '@/assets/icons/home/chevron-down.svg'
+import { ScheduleColor } from '@/features/manager/worker-schedule/types/scheduleColor'
+
+interface ColorPickerDropdownProps {
+ selectedColor: ScheduleColor
+ onColorChange: (color: ScheduleColor) => void
+ isOpen: boolean
+ onToggle: () => void
+}
+
+export function ColorPickerDropdown({
+ selectedColor,
+ onColorChange,
+ isOpen,
+ onToggle,
+}: ColorPickerDropdownProps) {
+ const colors = Object.values(ScheduleColor)
+
+ return (
+
+
+
+ {isOpen && (
+
+
+ {colors.map(color => (
+
+ ))}
+
+
+ )}
+
+ )
+}