Merge branch 'dev' into 24-add-new-event

Author: jane1107

src/components/common/Calendar.tsx

@@ -25,17 +25,50 @@ const Calendar: React.FC = () => {
     }
   };
 
+  // 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]);
 
   const events = useEventState();
   return (
@@ -53,6 +86,10 @@ const Calendar: React.FC = () => {
         titleFormat={{
           year: 'numeric',
           month: '2-digit',
+        }}
+        eventTimeFormat={{
+          hour: '2-digit',
+          minute: '2-digit',
           meridiem: false,
         }}
         dayHeaderFormat={{
@@ -65,11 +102,9 @@ const Calendar: React.FC = () => {
         }}
         customButtons={{
           prevButton: {
-            icon: 'chevron-left',
             click: handlePrev,
           },
           nextButton: {
-            icon: 'chevron-right',
             click: handleNext,
           },
         }}
@@ -88,8 +123,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;
@@ -32,3 +33,39 @@
     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: {