Merge pull request #142 from imaginer-dev/127--ui--calendarmain

Author: CreatorDodo

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>

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

@@ -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/img/icon_arrow_right.png

@@ -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: {