fix: merge conflict 해결

- main.tsx
- userInvite.tsx
- userInviteDialog.tsx

Author: gihwan-dev

docs/jalee_evaluationmetrics.md

@@ -0,0 +1,5 @@
+## 캘린더 메인 렌더링 성능 지표
+
+- 정의: 캘린더가 모두 그려진 시간
+- 목표: 0.1s
+- 참고: FCP 권장값 참고

src/App.tsx

@@ -1,7 +1,59 @@
 import MyCalendarPage from './pages/MyCalendarPage';
 
 function App() {
-  return <MyCalendarPage />;
+
+  return (
+    <div>
+      <header className="relative z-10">
+        <div className="drawer">
+          <input id="my-drawer-3" type="checkbox" className="drawer-toggle" />
+          <div className="drawer-content flex flex-col">
+            {/* Navbar */}
+            <div className="navbar w-full">
+              <div className="flex-none lg:hidden">
+                <label htmlFor="my-drawer-3" aria-label="open sidebar" className="btn btn-square btn-ghost">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    className="inline-block h-6 w-6 stroke-current"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      d="M4 6h16M4 12h16M4 18h16"
+                    ></path>
+                  </svg>
+                </label>
+              </div>
+              <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>
+          <div className="drawer-side">
+            <label htmlFor="my-drawer-3" aria-label="close sidebar" className="drawer-overlay"></label>
+            <ul className="menu min-h-full w-80 bg-base-200 p-4">
+              {/* Sidebar content here */}
+              <li>
+                <a>그룹 일정 캘린더 1</a>
+              </li>
+              <li>
+                <a>그룹 일정 캘린더 2</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </header>
+      <main className="z-1 relative flex-grow">
+        <div className="ml-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <Calendar />
+        </div>
+      </main>
+    </div>
+  );
+
 }
 
 export default App;

src/components/Group/GroupForm.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, useState } from 'react';
 import GroupFormNameInput from './GroupFormNameInput';
 import GroupFormDescriptionInput from './GroupFormDescriptionInput';
 import GroupFormDateInput from './GroupFormDateInput';
@@ -22,13 +22,15 @@ const GroupForm: FC<Props> = ({
   memo = '',
   onSubmit,
 }) => {
+  const [member, setMember] = useState<any[]>([]);
+
   return (
     <form onSubmit={onSubmit} className="container mx-auto flex max-w-sm flex-1 flex-col gap-4 pb-[50px] pt-4">
       <div className="flex h-full w-full flex-1 flex-col gap-4">
         <GroupFormNameInput name={name} />
         <GroupFormDescriptionInput description={description ?? ''} />
         <GroupFormDateInput startDate={startDate} endDate={endDate} />
-        <UserInvite />
+        <UserInvite member={member} setMember={setMember} />
         <GroupFormMemoInput memo={memo ?? ''} />
       </div>
       <button type="submit" className="btn btn-outline btn-primary w-full">

src/components/common/Calendar.tsx

@@ -1,17 +1,52 @@
 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';
 import { useEventState } from '@/stores/myEventsStore';
 import { getPersonalSchedule } from '@/apis/personalScheduleApi';
 
-const Calendar: React.FC = () => {
+
+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' },
+  { title: 'Meeting', start: '2024-05-08' },
+  { title: 'Meeting', start: '2024-05-08' },
+];
+
+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.');
     }
@@ -21,6 +56,7 @@ const Calendar: React.FC = () => {
     const calendarApi = calendarRef?.current?.getApi();
     if (calendarApi) {
       calendarApi.next();
+      setSelectedDate(null);
     } else {
       console.error('Calendar API is not available.');
     }
@@ -80,42 +116,42 @@ const Calendar: React.FC = () => {
 
   return (
     <div>
-      <FullCalendar
-        ref={calendarRef}
-        plugins={[dayGridPlugin, interactionPlugin]}
-        initialView="dayGridMonth"
-        events={events}
-        dayMaxEvents={2} //Max개수까지보이고 나머지는 more
-        navLinks={true} // 날짜/주 이름을 클릭하여 뷰를 변경할 수 있습니다.
-        editable={true} // 이벤트를 수정할 수 있습니다.
-        eventContent={renderEventContent}
-        contentHeight={calendarHeight}
-        titleFormat={{
-          year: 'numeric',
-          month: '2-digit',
-        }}
-        eventTimeFormat={{
-          hour: '2-digit',
-          minute: '2-digit',
-          meridiem: false,
-        }}
-        dayHeaderFormat={{
-          weekday: 'short',
-        }}
-        headerToolbar={{
-          left: 'prevButton',
-          center: 'title',
-          right: 'nextButton',
-        }}
-        customButtons={{
-          prevButton: {
-            click: handlePrev,
-          },
-          nextButton: {
-            click: handleNext,
-          },
-        }}
-      />
+      <div className="rounded bg-white p-6 px-4 sm:px-0">
+        <FullCalendar
+          ref={calendarRef}
+          plugins={[dayGridPlugin, interactionPlugin]}
+          initialView="dayGridMonth"
+          events={events}
+          eventClick={handleDateClick}
+          dayMaxEvents={2} //Max개수까지보이고 나머지는 more
+          //navLinks={true} // 날짜/주 이름을 클릭하여 뷰를 변경할 수 있습니다.
+          editable={true} // 이벤트를 수정할 수 있습니다.
+          eventContent={renderEventContent}
+          contentHeight={calendarHeight}
+          titleFormat={{
+            year: 'numeric',
+            month: '2-digit',
+          }}
+          eventTimeFormat={{
+            hour: '2-digit',
+            minute: '2-digit',
+            meridiem: false,
+          }}
+          dayHeaderFormat={{
+            weekday: 'short',
+          }}
+          headerToolbar={{
+            left: 'prevButton',
+            center: 'title',
+            right: 'nextButton',
+          }}
+          customButtons={{
+            prevButton: { click: handlePrev },
+            nextButton: { click: handleNext },
+          }}
+        />
+      </div>
+      <div className="mt-10">{selectedDate && <EventCards events={selectedEvents} date={selectedDate} />}</div>
     </div>
   );
 };
@@ -138,4 +174,52 @@ function renderEventContent(eventInfo: EventInfo) {
   );
 }
 
-export default Calendar;
+
+function EventCards({ events, date }: EventCardsProps) {
+  const [menuOpen, setMenuOpen] = useState(-1);
+
+  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);
+
+  return (
+    <div>
+      <h2 className="ml-2">{formattedDate}</h2>
+      <div className="flex gap-5 overflow-x-auto">
+        {events.map((event, index) => (
+          <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">{new Date(event.start).toLocaleTimeString()}</p>
+            {/* 메뉴 버튼 */}
+            <div
+              className="absolute right-2 top-2 flex cursor-pointer flex-col items-center justify-center"
+              onClick={() => setMenuOpen(menuOpen === index ? -1 : index)}
+            >
+              <div className="mb-1 h-1 w-1 rounded-full bg-[#429400]"></div>
+              <div className="mb-1 h-1 w-1 rounded-full bg-[#429400]"></div>
+              <div className="h-1 w-1 rounded-full bg-[#429400]"></div>
+            </div>
+            {menuOpen === index && (
+              <div className="absolute right-0 top-10 z-10 rounded-lg bg-white shadow-md">
+                <ul>
+                  <li className="cursor-pointer p-2 hover:bg-gray-100">편집</li>
+                  <li className="cursor-pointer p-2 hover:bg-gray-100">삭제</li>
+                </ul>
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+

src/components/common/UserInvite.tsx

@@ -1,20 +1,58 @@
-import { FC } from 'react';
+import { FC, useState } from 'react';
+import { searchUser } from '../../apis/authApis.ts';
 import DialogButton from '@/components/common/DialogButton';
 import { IconUserPlus } from '@/assets/icons';
 import UserInviteDialog from '@/components/common/UserInviteDialog';
+import UserInvited from './UserInvited';
+import UserInviteList from './UserInviteList.tsx';
+
+interface Props {
+  member: any;
+  setMember: any;
+}
+
+const UserInvite: FC<Props> = ({ member, setMember }) => {
+  const [email, setEamil] = useState('');
+  const [list, setList] = useState<any[]>([]);
+
+  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setEamil(event.target.value);
+  };
+
+  const onSearchClick = () => {
+    searchUser(email).then((nickNames) => {
+      if (!nickNames.length) {
+        alert('해당 닉네임을 찾을 수 없습니다.');
+        return;
+      }
+      nickNames.map(({ user_nickname, id }) => {
+        setList([
+          <UserInviteList
+            user_nickname={user_nickname}
+            id={id}
+            key={id + '-UserInviteList'}
+            onClick={() => {
+              if (!user_nickname.length) return;
+              setMember([...member, <UserInvited user_nickname={user_nickname} id={id} key={id + '-Member'} />]);
+            }}
+          />,
+        ]);
+      });
+    });
+  };
 
-export const UserInvite: FC = () => {
   return (
     <div>
       멤버 초대하기 *
       <ul className="flex gap-2">
+        {member}
         <li>
           <DialogButton
             classname={'userInvite bg-base-200 hover:bg-base-300'}
             name={<IconUserPlus />}
             title={'멤버 찾기'}
             desc={''}
-            children={<UserInviteDialog />}
+            children={<UserInviteDialog list={list} onChange={onChange} onSearchClick={onSearchClick} />}
           />
         </li>
       </ul>

src/components/common/UserInviteDialog.tsx

@@ -1,32 +1,13 @@
 import InputForm from './InputForm.tsx';
-import { searchUser } from '../../apis/authApis.ts';
-import { FC, useState } from 'react';
+import { FC } from 'react';
 import { IconSearch } from '@/assets/icons';
-import UserInviteList from './UserInviteList.tsx';
-
-const UserInvite: FC = () => {
-  const [email, setEamil] = useState('');
-  const [list, setList] = useState<any[]>([]);
-
-  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setEamil(event.target.value);
-  };
-
-  const onSearchClick = () => {
-    searchUser(email).then((nickNames) => {
-      if (!nickNames.length) {
-        alert('해당 닉네임을 찾을 수 없습니다.');
-        return;
-      }
-      setList(
-        nickNames.map(({ user_nickname, id }) => {
-          return <UserInviteList user_nickname={user_nickname} key={id + '-UserInviteList'} />;
-        }),
-      );
-      return list;
-    });
-  };
+interface Props {
+  list: any[];
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onSearchClick: () => void;
+}
 
+const UserInvite: FC<Props> = ({ list, onChange, onSearchClick }) => {
   return (
     <div>
       <div className="flex items-end">