Merge pull request #157 from imaginer-dev/73----날짜-및-시간-포맷

73    날짜 및 시간 포맷

Author: gihwan-dev

src/App.tsx

@@ -1,6 +1,5 @@
 import Calendar from './components/common/Calendar';
 
-
 function App() {
   return (
     <div>

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;
@@ -18,7 +19,6 @@ type Event = {
 };
 */
 
-
 interface EventInfo {
   timeText: string;
   event: {
@@ -214,7 +214,6 @@ export default function Calendar() {
       <div className="mt-10">{selectedDate && <EventCards events={selectedEvents} date={selectedDate} />}</div>
     </div>
   );
-
 }
 
 function renderEventContent(eventInfo: EventInfo) {
@@ -246,10 +245,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}`;
+}