diff --git a/src/app/workspaces/[workspaceId]/calendar/page.tsx b/src/app/workspaces/[workspaceId]/calendar/page.tsx index f2b8bdf..a46e435 100644 --- a/src/app/workspaces/[workspaceId]/calendar/page.tsx +++ b/src/app/workspaces/[workspaceId]/calendar/page.tsx @@ -6,8 +6,24 @@ interface WorkspaceCalendarPageProps { }>; } +function getSeoulTodayIsoDate() { + const formatter = new Intl.DateTimeFormat('en-CA', { + timeZone: 'Asia/Seoul', + year: 'numeric', + month: '2-digit', + day: '2-digit', + }); + const parts = formatter.formatToParts(new Date()); + const year = parts.find((part) => part.type === 'year')?.value; + const month = parts.find((part) => part.type === 'month')?.value; + const day = parts.find((part) => part.type === 'day')?.value; + + return `${year}-${month}-${day}`; +} + export default async function WorkspaceCalendarPage({ params }: WorkspaceCalendarPageProps) { const { workspaceId } = await params; + const initialSelectedDate = getSeoulTodayIsoDate(); - return ; + return ; } diff --git a/src/features/manage-calendar/model/calendar-utils.ts b/src/features/manage-calendar/model/calendar-utils.ts index 5bd02e2..05ebde8 100644 --- a/src/features/manage-calendar/model/calendar-utils.ts +++ b/src/features/manage-calendar/model/calendar-utils.ts @@ -4,7 +4,7 @@ export interface CalendarDayCell { isCurrentMonth: boolean; } -function formatIsoDate(date: Date) { +export 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'); @@ -16,6 +16,11 @@ export function createCalendarMonthLabel(currentMonth: Date) { return `${currentMonth.getFullYear()}년 ${currentMonth.getMonth() + 1}월`; } +export function createCalendarMonthStart(isoDate: string) { + const [year, month] = isoDate.split('-').map(Number); + return new Date(year, month - 1, 1); +} + export function createCalendarMonthGrid(currentMonth: Date): CalendarDayCell[] { const year = currentMonth.getFullYear(); const monthIndex = currentMonth.getMonth(); @@ -34,7 +39,3 @@ export function createCalendarMonthGrid(currentMonth: Date): CalendarDayCell[] { }; }); } - -export function getInitialCalendarDate() { - return new Date(2025, 6, 1); -} diff --git a/src/features/manage-calendar/ui/CalendarView.tsx b/src/features/manage-calendar/ui/CalendarView.tsx index 240f94a..a85a5b3 100644 --- a/src/features/manage-calendar/ui/CalendarView.tsx +++ b/src/features/manage-calendar/ui/CalendarView.tsx @@ -15,13 +15,14 @@ import { } from '@/entities/calendar-event'; import { plusJakartaSans } from '@/shared/lib/fonts'; import { + createCalendarMonthStart, createCalendarMonthGrid, createCalendarMonthLabel, - getInitialCalendarDate, } from '../model/calendar-utils'; interface CalendarViewProps { workspaceId: string; + initialSelectedDate: string; } const weekdayLabels = ['일', '월', '화', '수', '목', '금', '토'] as const; @@ -66,14 +67,16 @@ function formatSelectedDateLabel(isoDate: string) { return `${year}년 ${Number(month)}월 ${Number(day)}일`; } -export function CalendarView({ workspaceId }: CalendarViewProps) { +export function CalendarView({ workspaceId, initialSelectedDate }: CalendarViewProps) { const calendarEventsQuery = useCalendarEventsByWorkspaceId(workspaceId); const createCalendarEventMutation = useCreateCalendarEvent(workspaceId); const deleteCalendarEventMutation = useDeleteCalendarEvent(workspaceId); const updateCalendarEventMutation = useUpdateCalendarEvent(workspaceId); const calendarEvents = calendarEventsQuery.data ?? []; - const [currentMonth, setCurrentMonth] = useState(getInitialCalendarDate); - const [selectedDate, setSelectedDate] = useState('2025-07-30'); + const [currentMonth, setCurrentMonth] = useState(() => + createCalendarMonthStart(initialSelectedDate), + ); + const [selectedDate, setSelectedDate] = useState(initialSelectedDate); const [isAddEventOpen, setIsAddEventOpen] = useState(false); const [formValues, setFormValues] = useState(defaultFormValues); const [hasSubmitted, setHasSubmitted] = useState(false); @@ -227,7 +230,7 @@ export function CalendarView({ workspaceId }: CalendarViewProps) { onClick={() => setSelectedDate(cell.isoDate)} className={`hover:bg-brand-soft/30 relative min-h-[98px] border-r border-b border-[rgba(91,78,232,0.1)] px-[8px] pt-[5px] pb-[8px] text-left align-top transition sm:min-h-[108px] ${ (index + 1) % 7 === 0 ? 'border-r-0' : '' - } ${isSelected ? 'bg-[rgba(238,240,251,0.6)]' : ''}`} + } ${isSelected ? 'bg-brand/12' : ''}`} >
; +export default function CalendarPage({ workspaceId, initialSelectedDate }: CalendarPageProps) { + return ; }