feat: 73 날짜 및 시간 포맷

Author: jeongah2651

src/components/common/Calendar.tsx

@@ -7,6 +7,7 @@ import { useRef, useState, useEffect, useCallback } from 'react';
 import { useEventState } from '@/stores/myEventsStore';
 import { getPersonalSchedule } from '@/apis/personalScheduleApi';
 import { Events } from '../../utils/index.ts';
+import { formatDateRange, formatTime } from '../../utils/dateUtils';
 /*
 type Event = {
   title: string;
@@ -246,10 +247,13 @@ function EventCards({ events, date }: EventCardsProps) {
       <h2 className="ml-2">{date}</h2>
       <div className="flex gap-5 overflow-x-auto">
         {events.map((event, index) => {
+          const eventDateRange = formatDateRange(event.start, event.end);
+          const eventTime = formatTime(event.start);
           return (
             <div key={index} className="relative min-h-[150px] min-w-[240px] bg-white p-4 text-black">
               <h3>{event.title}</h3>
-              <p className="mt-1 text-xs">{event.start === event.end ? event.start : `${event.start}~${event.end}`}</p>
+              <p className="mt-1 text-xs">{eventDateRange}</p>
+              <p className="mt-1 text-xs">{eventTime}</p>
               {/* 메뉴 버튼 */}
               <div
                 className="absolute right-2 top-2 flex cursor-pointer flex-col items-center justify-center"

src/utils/dateUtils.ts

@@ -4,3 +4,26 @@ export const dateToYYMMDD = (date: Date) => {
   const day = date.getDate();
   return `${year}-${month < 10 ? `0${month}` : month}-${day < 10 ? `0${day}` : day}`;
 };
+
+export function formatDateRange(start: string, end: string): string {
+  const startDate = new Date(start);
+  const endDate = new Date(end);
+  const startStr = startDate.toISOString().split('T')[0];
+  const endStr = endDate.toISOString().split('T')[0];
+
+  return startStr === endStr ? startStr : `${startStr}~${endStr}`;
+}
+
+export function formatTime(date: string): string {
+  const newDate = new Date(date);
+  const hoursUTC = newDate.getUTCHours();
+  const minutesUTC = newDate.getUTCMinutes();
+
+  // 한국 시간대로 변환 (UTC+9)
+  const hoursKST = (hoursUTC + 9) % 24;
+  const isAM = hoursKST < 12;
+  const formattedHours = isAM ? hoursKST : hoursKST - 12;
+  const formattedMinutes = minutesUTC < 10 ? `0${minutesUTC}` : minutesUTC;
+
+  return isAM ? `오전${formattedHours}:${formattedMinutes}` : `오후${formattedHours}:${formattedMinutes}`;
+}