feat: 캘린더 메인 - 일정클릭시 해당날짜의 일정리스트 노출

Author: jeongah2651

src/App.tsx

@@ -26,8 +26,8 @@ function App() {
                   </svg>
                 </label>
               </div>
-              <div className="flex-1">
-                <h1 className="flex-end min-w-40 rounded bg-base-200 p-2 text-center text-sm">개인 일정 캘린더</h1>
+              <div className="flex-1 justify-end">
+                <h1 className="min-w-40 rounded bg-base-200 p-2 text-center text-sm">개인 일정 캘린더</h1>
               </div>
             </div>
           </div>

src/components/common/Calendar.tsx

@@ -1,8 +1,18 @@
 import FullCalendar from '@fullcalendar/react';
+import { EventClickArg } from '@fullcalendar/core';
 import dayGridPlugin from '@fullcalendar/daygrid';
 import interactionPlugin from '@fullcalendar/interaction';
 import { useRef, useState, useEffect } from 'react';
 
+type Event = {
+    title: string;
+    start: Date | string; 
+}
+interface EventCardsProps {
+    events: Event[];
+    date: Date | string | null;
+}
+
 const events = [
   { title: 'Meeting', start: new Date() },
   { title: 'Meeting', start: '2024-05-08' },
@@ -13,10 +23,28 @@ const events = [
 export function Calendar() {
   const [calendarHeight, setCalendarHeight] = useState<string | number>('auto');
   const calendarRef = useRef<FullCalendar | null>(null);
+  const [selectedEvents, setSelectedEvents] = useState<Event[]>([]);
+  const [selectedDate, setSelectedDate] = useState<Date | null>(null);
+
+  const handleDateClick = (clickInfo: EventClickArg) => {
+    if(clickInfo.event.start) {
+        const clickStartDate = new Date(clickInfo.event.start);
+        setSelectedDate(clickStartDate);
+
+        const clickedStartDate = new Date(clickInfo.event.start).toDateString();
+        setSelectedEvents(events.filter(event => 
+            new Date(event.start).toDateString() === clickedStartDate
+          ));
+    } else {
+        console.log("not available");
+    }
+  }
+
   const handlePrev = () => {
     const calendarApi = calendarRef?.current?.getApi();
     if (calendarApi) {
       calendarApi.prev();
+      setSelectedDate(null);
     } else {
       console.error('Calendar API is not available.');
     }
@@ -26,6 +54,7 @@ export function Calendar() {
     const calendarApi = calendarRef?.current?.getApi();
     if (calendarApi) {
       calendarApi.next();
+      setSelectedDate(null);
     } else {
       console.error('Calendar API is not available.');
     }
@@ -83,8 +112,9 @@ export function Calendar() {
         plugins={[dayGridPlugin, interactionPlugin]}
         initialView="dayGridMonth"
         events={events}
+        eventClick={handleDateClick}
         dayMaxEvents={2} //Max개수까지보이고 나머지는 more
-        navLinks={true} // 날짜/주 이름을 클릭하여 뷰를 변경할 수 있습니다.
+        //navLinks={true} // 날짜/주 이름을 클릭하여 뷰를 변경할 수 있습니다.
         editable={true} // 이벤트를 수정할 수 있습니다.
         eventContent={renderEventContent}
         contentHeight={calendarHeight}
@@ -106,14 +136,11 @@ export function Calendar() {
           right: 'nextButton',
         }}
         customButtons={{
-          prevButton: {
-            click: handlePrev,
-          },
-          nextButton: {
-            click: handleNext,
-          },
+            prevButton: { click: handlePrev },
+            nextButton: { click: handleNext },
         }}
       />
+       {selectedDate && <EventCards events={selectedEvents} date={selectedDate} />}
     </div>
   );
 }
@@ -135,3 +162,33 @@ function renderEventContent(eventInfo: EventInfo) {
     </>
   );
 }
+
+
+function EventCards({ events, date }: EventCardsProps) {
+    if (!date) {
+        return <div>No date provided</div>;  // date가 null인 경우 처리
+    }
+    
+    const formattedDate = new Date(date).toLocaleDateString('ko-KR', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit'
+    }).replace(/\. /g,".").slice(0, -1);
+    console.log(formattedDate)
+
+    return (
+        <div>
+            <h2>{formattedDate}</h2>
+            <div className="flex overflow-x-auto">
+            {events.map((event, index) => (
+                <div key={index} className="min-w-[200px] m-2 p-2 bg-blue-200 text-white">
+                <h3>{event.title}</h3>
+                <p>{new Date(event.start).toLocaleTimeString()}</p>
+                </div>
+            ))}
+            </div>
+
+        </div>
+        
+    );
+}

src/styles/index.css

@@ -2,7 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-
 .userInvite {
   display: flex;
   justify-content: center;
@@ -68,3 +67,4 @@
 /* 캘린더 - 일정컬러 */
 .fc .fc-h-event {
   border: var(--fc-event-text-color);
+}