Merge branch 'dev' of https://github.com/imaginer-dev/DateLeaf into 29-그룹-일정과-관련된-데이터를-수정할-수-있어야한다

Author: gihwan-dev

src/App.tsx

@@ -27,7 +27,7 @@ function App() {
                 </label>
               </div>
               <div className="flex-1">
-                <h1 className="base-200 min-w-40 p-2 text-center">개인 일정 캘린더</h1>
+                <h1 className="flex-end min-w-40 rounded bg-base-200 p-2 text-center text-sm">개인 일정 캘린더</h1>
               </div>
             </div>
           </div>
@@ -46,7 +46,7 @@ function App() {
         </div>
       </header>
       <main className="z-1 relative flex-grow">
-        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="ml-auto max-w-7xl px-4 sm:px-6 lg:px-8">
           <div className="rounded bg-white p-6 px-4 sm:px-0">
             <Calendar />
           </div>

src/components/common/Calendar.tsx

@@ -31,17 +31,50 @@ export function Calendar() {
     }
   };
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const updateSize = () => {
+    const isMobile = window.innerWidth < 768;
+    setCalendarHeight(isMobile ? 500 : 'auto');
+    updateTitle();
+  };
+
+  const updateTitle = () => {
+    const calendarApi = calendarRef?.current?.getApi();
+    if (calendarApi) {
+      const calendarView = calendarApi.view;
+
+      const date = new Date(calendarView.currentStart);
+      const year = date.getFullYear();
+      const month = (date.getMonth() + 1).toString().padStart(2, '0');
+      const newTitle = `${year}.${month}`;
+
+      const titleElement = document.querySelector('.fc-toolbar-title');
+      if (titleElement) {
+        titleElement.textContent = newTitle;
+      }
+    }
+  };
+
   useEffect(() => {
-    const updateSize = () => {
-      const isMobile = window.innerWidth < 768;
-      setCalendarHeight(isMobile ? 500 : 'auto');
-    };
+    const calendarApi = calendarRef?.current?.getApi();
+
+    if (calendarApi) {
+      calendarApi.on('datesSet', updateTitle);
+    }
+
+    updateTitle(); // 컴포넌트 마운트 시 제목 업데이트
 
+    /* 캘린더 - 반응형 사이즈 */
     window.addEventListener('resize', updateSize);
-    updateSize();
+    updateSize(); // 컴포넌트 마운트 시 화면 크기에 따른 업데이트
 
-    return () => window.removeEventListener('resize', updateSize);
-  }, []);
+    return () => {
+      window.removeEventListener('resize', updateSize);
+      if (calendarApi) {
+        calendarApi.off('datesSet', updateTitle);
+      }
+    };
+  }, [updateSize]);
 
   return (
     <div>
@@ -58,6 +91,10 @@ export function Calendar() {
         titleFormat={{
           year: 'numeric',
           month: '2-digit',
+        }}
+        eventTimeFormat={{
+          hour: '2-digit',
+          minute: '2-digit',
           meridiem: false,
         }}
         dayHeaderFormat={{
@@ -70,11 +107,9 @@ export function Calendar() {
         }}
         customButtons={{
           prevButton: {
-            icon: 'chevron-left',
             click: handlePrev,
           },
           nextButton: {
-            icon: 'chevron-right',
             click: handleNext,
           },
         }}
@@ -93,8 +128,10 @@ interface EventInfo {
 function renderEventContent(eventInfo: EventInfo) {
   return (
     <>
-      <b>{eventInfo.timeText}</b>
-      <i>{eventInfo.event.title}</i>
+      <div className="w-full border-0 bg-secondary p-0.5 text-white">
+        <b className="border-0">{eventInfo.timeText}</b>
+        <i> {eventInfo.event.title}</i>
+      </div>
     </>
   );
 }

src/img/icon_arrow_left.png

@@ -14,55 +14,61 @@ import UserInvite from './components/common/UserInvite.tsx';
 const router = createBrowserRouter([
   {
     path: '/',
-    element: (
-      <ProtectedRoute>
-        <App />
-      </ProtectedRoute>
-    ),
-  },
-  {
-    path: '/login',
-    element: <LoginPage />,
-  },
-  {
-    path: '/join',
-    element: <JoinPage />,
-  },
-  {
-    path: '/editPw',
-    element: <ResetPwPage />,
-  },
-  {
-    path: '/change-password',
-    element: <ChangePasswordPage />,
-  },
-  {
-    path: '*',
-    element: <NotFound />,
-  },
-  {
-    path: '/test',
     children: [
       {
-        path: 'inputForm',
-        element: <TextInputForm />,
+        index: true,
+        element: (
+          <ProtectedRoute>
+            <App />
+          </ProtectedRoute>
+        ),
       },
+
       {
-        path: 'UserInvite',
-        element: <UserInvite />,
+        path: '/login',
+        element: <LoginPage />,
+      },
+      {
+        path: '/join',
+        element: <JoinPage />,
+      },
+      {
+        path: '/editPw',
+        element: <ResetPwPage />,
+      },
+      {
+        path: '/change-password',
+        element: <ChangePasswordPage />,
+      },
+      {
+        path: '*',
+        element: <NotFound />,
       },
-    ],
-  },
-  {
-    path: '/policy',
-    children: [
       {
-        path: 'personalInfo',
-        element: <Policy.PersonalInfoPage />,
+        path: '/test',
+        children: [
+          {
+            path: 'inputForm',
+            element: <TextInputForm />,
+          },
+          {
+            path: 'UserInvite',
+            element: <UserInvite />,
+          },
+        ],
       },
       {
-        path: 'usecondition',
-        element: <Policy.UseConditionPage />,
+        path: '/policy',
+        children: [
+          {
+            path: 'personalInfo',
+            element: <Policy.PersonalInfoPage />,
+          },
+          {
+            path: 'usecondition',
+            element: <Policy.UseConditionPage />,
+          },
+        ],
       },
     ],
   },

src/img/icon_arrow_right.png

@@ -2,6 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
+
 .userInvite {
   display: flex;
   justify-content: center;
@@ -11,3 +12,60 @@
   border: 1px solid oklch(var(--b3));
   border-radius: 0.5rem;
 }
+
+@media (min-width: 1024px) {
+  .drawer-toggle {
+    display: none;
+  }
+  .drawer-content {
+    flex-direction: row;
+  }
+  .drawer-side {
+    width: 15%;
+    visibility: visible;
+    overflow-y: auto;
+  }
+  .drawer-side > *:not(.drawer-overlay) {
+    transform: translateX(0%);
+  }
+
+  .drawer-overlay {
+    visibility: visible;
+  }
+}
+
+@layer base {
+  @font-face {
+    font-family: 'Pretendard-Regular';
+    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff') format('woff');
+    font-weight: 400;
+    font-style: normal;
+  }
+}
+
+/* 캘린더 - 화살표 아이콘 */
+.fc .fc-button-primary:hover {
+  background-color: var(--fc-event-text-color);
+}
+.fc .fc-prevButton-button {
+  background-color: transparent;
+  border: 0;
+  background-image: url('../img/icon_arrow_left.png');
+  width: 20px;
+  height: 20px;
+  display: block;
+  background-size: contain;
+}
+.fc .fc-nextButton-button {
+  background-color: transparent;
+  border: 0;
+  background-image: url('../img/icon_arrow_right.png');
+  width: 20px;
+  height: 20px;
+  display: block;
+  background-size: contain;
+}
+/* 캘린더 - 일정컬러 */
+.fc .fc-h-event {
+  border: var(--fc-event-text-color);
+}

src/main.tsx

@@ -6,6 +6,11 @@ export default {
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
   theme: {
     extend: {},
+    fontFamily: {
+      sans: ['Pretendard-Regular', 'sans-serif'],
+      serif: ['Pretendard-Regular', 'sans-serif'],
+      mono: ['Pretendard-Regular', 'sans-serif'],
+    },
   },
 
   daisyui: {