feat: 캘린더 디자인 #25

src/components/MainPage/Calendar.tsx

@@ -0,0 +1,61 @@
+import FullCalendar from "@fullcalendar/react";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import koLocale from "@fullcalendar/core/locales/ko";
+import interactionPlugin from "@fullcalendar/interaction";
+import "../../styles/Calandar.css";
+
+const PROJECT_BUTTON = {
+  text: "프로젝트",
+  click: (info: any) => console.log(info),
+};
+
+const TASK_BUTTON = {
+  text: "개인업무",
+  click: (info: any) => console.log(info),
+};
+const Calendar = () => {
+  // 캘린더 상단 커스텀 버튼(프로젝트, 개인업무)
+
+  return (
+    <FullCalendar
+      plugins={[dayGridPlugin, interactionPlugin]}
+      customButtons={{ project: PROJECT_BUTTON, task: TASK_BUTTON }}
+      initialView="dayGridMonth"
+      height="100%"
+      viewHeight="100%"
+      headerToolbar={{
+        left: "prev title next",
+        center: "",
+        right: "project task",
+      }}
+      // 한국어
+      locale={koLocale}
+      // 데이터
+      events={[
+        {
+          title: "event 1",
+          date: "2025-02-14",
+          color: "#CAD2CB",
+          start: "2025-02-14",
+          end: "2025-02-23",
+        },
+        {
+          title: "event 2",
+          date: "2025-02-20",
+          color: "#FEE500",
+          textColor: "black",
+        },
+      ]}
+      // 데이터 클릭이벤트
+      eventClick={() => {
+        // alert("Event:" + info.event.title);
+      }}
+      // 드래그
+      editable={true}
+      droppable={true}
+      eventDrop={(info) => console.log(info)}
+    />
+  );
+};
+
+export default Calendar;

src/components/MainPage/TodaySchedule.tsx

@@ -7,14 +7,14 @@ const TodaySchedule = () => {
 
   return (
     <div
-      className="w-[450px] bg-red-100 px-5 py-10
-      flex flex-col gap-10 items-center"
-      style={{ height: "calc(100vh - 50px)" }}
+      className="w-[450px] px-5 py-10 border border-main-green02 rounded-[10px]
+      flex flex-col gap-10 items-center bg-white"
+      style={{ maxHeight: "calc(100vh - 50px)" }}
     >
       <p className="font-bold text-[26px]">현재 날짜 시간</p>
 
       <div className="w-full flex-1 min-h-0">
-        <div className="overflow-y-auto w-full h-full flex flex-col gap-2 min-h-0">
+        <div className="overflow-y-auto scrollbar-none w-full h-full flex flex-col gap-2 min-h-0">
           {arr.map((_, i) => (
             <ScheduleBox
               key={i}

src/pages/MainPage.tsx

@@ -1,60 +1,25 @@
-import FullCalendar from "@fullcalendar/react";
-import dayGridPlugin from "@fullcalendar/daygrid";
 import TodaySchedule from "../components/MainPage/TodaySchedule";
 import { useOutletContext } from "react-router";
 import { twMerge } from "tailwind-merge";
-import koLocale from "@fullcalendar/core/locales/ko";
-import interactionPlugin from "@fullcalendar/interaction";
+import Calendar from "../components/MainPage/Calendar";
 
 const MainPage = () => {
   const sidebarToggle = useOutletContext();
 
   return (
     <div
       className={twMerge(
-        `px-5 bg-gray-100 flex gap-2 ${sidebarToggle ? "" : "pl-[130px]"}`
+        `bg-gradient-to-t from-white/0 via-[#BFCDB7]/30 to-white/0
+        px-5 py-5 flex gap-2 h-[calc(100vh-50px)] ${
+          sidebarToggle ? "" : "pl-[130px]"
+        }`
       )}
-      style={{ height: "calc(100vh - 50px)" }}
     >
       {/* 캘린더 */}
-      <div className="flex-1 px-[60px] flex flex-col gap-2">
-        <div className="flex justify-end">
-          <ul className="flex gap-2 font-bold">
-            <li className="bg-[#a1a1a1] px-3 py-1 cursor-pointer">프로젝트</li>
-            <li className="bg-[#a1a1a1] px-3 py-1 cursor-pointer">개인업무</li>
-          </ul>
+      <div className="flex-1 pl-[50px] pr-[40px] ">
+        <div className="h-[calc(100vh-90px)] border rounded-[10px] border-main-green02 px-5 py-5 bg-white">
+          <Calendar />
         </div>
-        <FullCalendar
-          plugins={[dayGridPlugin, interactionPlugin]}
-          initialView="dayGridMonth"
-          height={"calc(100vh - 50px)"}
-          headerToolbar={{
-            start: "prev title next",
-            center: "",
-            end: "",
-          }}
-          // 한국어
-          locale={koLocale}
-          // 데이터
-          events={[
-            {
-              title: "event 1",
-              date: "2025-02-14",
-              color: "#CAD2CB",
-              start: "2025-02-14",
-              end: "2025-02-23",
-            },
-            { title: "event 2", date: "2025-02-20" },
-          ]}
-          // 데이터 클릭이벤트
-          eventClick={(info) => {
-            // alert("Event:" + info.event.title);
-          }}
-          // 드래그
-          editable={true}
-          droppable={true}
-          eventDrop={() => alert("ss")}
-        />
       </div>
 
       {/* 오늘의 일정 */}

src/styles/Calandar.css

@@ -0,0 +1,54 @@
+.fc-media-screen {
+  /* height: 100% !important; */
+}
+
+.fc-toolbar-chunk {
+  display: flex;
+  align-items: center;
+}
+
+.fc-next-button,
+.fc-prev-button {
+  width: 25px;
+  height: 25px;
+  background-color: white;
+  display: flex !important;
+  justify-content: center;
+  align-items: center;
+  background-color: white !important;
+  border: 1px solid #cad2cb !important;
+}
+
+.fc .fc-button:focus {
+  box-shadow: none !important;
+}
+
+.fc-icon::before {
+  color: #cad2cb !important;
+}
+
+/* 커스텀 프로젝트 버튼 */
+.fc-project-button {
+  width: 70px !important;
+  height: 30px !important;
+  font-size: 14px !important;
+  font-weight: bold !important;
+  background-color: #465448 !important;
+  color: #fff6e9 !important;
+  padding: 0 !important;
+  border: none !important;
+  border-radius: 5px !important;
+}
+
+/* 커스텀 개인업무 버튼 */
+.fc-task-button {
+  width: 70px !important;
+  height: 30px !important;
+  font-size: 14px !important;
+  font-weight: bold !important;
+  background-color: #fff !important;
+  color: #cad2cb !important;
+  padding: 0 !important;
+  border: 1px solid #cad2cb !important;
+  border-radius: 5px !important;
+}