Merge branch 'dev' of github.com:prgrms-web-devcourse-final-project/W…

…EB2_3_ERoom_FE into design-프로젝트-미팅룸-#23

package.json

@@ -12,10 +12,12 @@
   "dependencies": {
     "@fullcalendar/core": "^6.1.15",
     "@fullcalendar/daygrid": "^6.1.15",
+    "@fullcalendar/interaction": "^6.1.15",
     "@fullcalendar/react": "^6.1.15",
     "@tailwindcss/vite": "^4.0.6",
     "@tanstack/react-query": "^5.66.0",
     "axios": "^1.7.9",
+    "dayjs": "^1.11.13",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router": "^7.1.5",

src/components/AlamModal/AlarmBox.tsx

@@ -3,62 +3,35 @@ import { twMerge } from "tailwind-merge";
 
 interface AlarmBoxProps {
   project: string;
-  meetingRoom?: string;
   task?: string;
-  theme:
-    | "message"
-    | "newTask"
-    | "newProject"
-    | "urgentTask"
-    | "urgentProject"
-    | "upcomingTask"
-    | "upcomingProject";
+  theme: "message" | "newTask" | "newProject" | "endProject";
   css?: string;
   onRemove?: () => void;
 }
 
-const AlarmBox = ({
-  project,
-  meetingRoom,
-  task,
-  theme,
-  css,
-  onRemove,
-}: AlarmBoxProps) => {
+const AlarmBox = ({ project, task, theme, css, onRemove }: AlarmBoxProps) => {
   const navigate = useNavigate();
   const BASE_STYLE = "p-[10px]  rounded-[5px] cursor-pointer";
 
-  const ASSIGN_STYLE = "border border-header-red-hover bg-red";
-  const TIME_STYLE = "border border-main-green01 bg-main-green02";
-
   const THEME_STYLE = {
-    message: "border border-main-green01 bg-main-beige01",
-    newTask: ASSIGN_STYLE,
-    newProject: ASSIGN_STYLE,
-    urgentTask: TIME_STYLE,
-    urgentProject: TIME_STYLE,
-    upcomingTask: TIME_STYLE,
-    upcomingProject: TIME_STYLE,
+    message: "border border-main-green01 bg-main-beige01 text-main-green",
+    newTask: "border border-main-green01 bg-main-green02 text-main-green",
+    newProject: "border border-main-green01 bg-main-green02 text-main-green",
+    endProject: "border border-header-red-hover bg-red text-header-red",
   }[theme];
 
   const THEME_TEXT = {
     message: "새로운 메시지가 있습니다",
     newTask: "회원님에게 업무가 배정되었습니다",
     newProject: "새로운 프로젝트에 초대되었습니다",
-    urgentTask: "업무 시작 1시간 전입니다",
-    urgentProject: "프로젝트 시작 하루 전입니다",
-    upcomingTask: "업무 마감 1시간 전입니다",
-    upcomingProject: "프로젝트 마감이 하루 남았습니다",
+    endProject: "프로젝트 마감이 1일 남았습니다",
   }[theme];
 
   const THEME_FROM = {
-    message: `${meetingRoom}-${project}`,
+    message: `${project}`,
     newTask: `${task}-${project}`,
     newProject: `${project}`,
-    urgentTask: `${task}-${project}`,
-    urgentProject: `${project}`,
-    upcomingTask: `${task}-${project}`,
-    upcomingProject: `${project}`,
+    endProject: `${project}`,
   }[theme];
 
   //임시 projectId
@@ -68,10 +41,7 @@ const AlarmBox = ({
     message: `/projectRoom/${projectId}/meetingRoom`,
     newTask: `/projectRoom/${projectId}`,
     newProject: `/projectRoom/${projectId}`,
-    urgentTask: `/projectRoom/${projectId}`,
-    urgentProject: `/projectRoom/${projectId}`,
-    upcomingTask: `/projectRoom/${projectId}`,
-    upcomingProject: `/projectRoom/${projectId}`,
+    endProject: `/projectRoom/${projectId}`,
   }[theme];
 
   const handleClick = () => {
@@ -85,36 +55,11 @@ const AlarmBox = ({
       onClick={handleClick}
     >
       <div className="flex flex-col gap-[5px]">
-        <span className="text-[12px] font-bold text-main-green">
-          {THEME_TEXT}
-        </span>
-        <span className="text-[10px] text-main-green">{THEME_FROM}</span>
+        <span className="text-[12px] font-bold">{THEME_TEXT}</span>
+        <span className="text-[10px] ">{THEME_FROM}</span>
       </div>
     </div>
   );
 };
 
 export default AlarmBox;
-
-/* 메시지 => 기본 스타일/  배정 => 초록색/ 마감, 시작 => 빨간색
-- 초대받은 미팅에 대한 알람
-=> 새로운 메시지가 있습니다 / 미팅룸명 - 프로젝트명
-
-- 초대받은 프로젝트에 대한 알람
-=> 새로운 프로젝트에 초대되었습니다 / 프로젝트명
-
-- 업무 배정에 대한 알람 (추가)
-=> 회원님에게 업무가 배정되었습니다 / 업무명 - 프로젝트명
-   
-- 업무 시작 시간 1시간 전 알람
-=> 업무 시작 1시간 전입니다 / 업무명 - 프로젝트명
-
-- 업무 끝나기 30분 전 알람
-=> 업무 마감 1시간 전입니다 / 업무명 - 프로젝트명
-
-- 프로젝트 시작 24시간 전 알람
-=> 프로젝트 시작 24시간 전입니다 / 프로젝트명
-
-- 프로젝트 마감 24시간 전 알람
-=> 프로젝트 마감 24시간 전입니다 / 프로젝트명
-*/

src/components/MainPage/Calendar.tsx

@@ -0,0 +1,62 @@
+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",
+          textColor: "black",
+        },
+        {
+          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/ScheduleBox.tsx

@@ -18,27 +18,23 @@ const ScheduleBox = ({
   return (
     <div
       className={twMerge(
-        `font-bold w-full h-[80px] flex justify-around flex-shrink-0
-          items-center px-5 bg-[#a1a1a1] cursor-pointer
-          ${isDeadline && "bg-[#FF7676] text-white"}`
+        `w-full h-[110px] flex flex-col justify-around flex-shrink-0 text-main-green01
+          items-center px-3 pb-2 bg-main-green02 cursor-pointer rounded-[10px]
+          ${isDeadline && "bg-[#FF6854] text-white"}`
       )}
     >
       {/* 마감시간, 남은시간 */}
       <div>
-        <div className="flex items-center gap-2">
-          <p className="text-[12px]">마감시간</p>
+        <div className="flex items-center gap-4 text-[30px] ">
           <p>{endTime}</p>
-        </div>
 
-        <div className="flex items-center gap-2">
-          <p className="text-[12px]">남은시간</p>
-          <p>{remainingTime}</p>
+          <p className="text-[14px]">{remainingTime} 남음</p>
         </div>
       </div>
 
       {/* 업무명, 프로젝트 명 */}
-      <div>
-        <p>{scheduleName}</p>
+      <div className="w-full py-1 px-2 shadow-2xl bg-white/25 rounded-[5px]">
+        <p className="font-bold">{scheduleName}</p>
         <p>{projectName}</p>
       </div>
     </div>

src/components/MainPage/TodaySchedule.tsx

@@ -1,28 +1,54 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import ScheduleBox from "./ScheduleBox";
+import dayjs from "dayjs";
+import "dayjs/locale/ko";
 
 const TodaySchedule = () => {
+  dayjs.locale("ko");
+  // 현재 날짜
+  const now = dayjs();
+  const year = now.format("YY"); // '24' 형식
+  const month = now.format("MM"); // '02' 형식
+  const nowDate = now.format("DD"); // '16' 형식
+  const day = now.format("ddd"); // 요일 (0: 일요일 ~ 6: 토요일)
+
+  // 현재 시간
+  // 1초마다 재랜더링 이슈
+  const [time, setTime] = useState(dayjs().format("HH:mm:ss"));
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setTime(dayjs().format("HH:mm:ss"));
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, []);
+
   // 임시 배열입니다
   const [arr, setArr] = useState(Array.from({ length: 20 }, (_, i) => i));
 
   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-[400px] 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="flex flex-col items-center">
+        <p className="font-medium">
+          {year}년 {month}월 {nowDate}일 ({day})
+        </p>
+        <p className="font-bold text-[26px]">{time}</p>
+      </div>
 
       <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}
               endTime="15:00"
               remainingTime="40분"
               scheduleName="퍼블리싱"
               projectName="이룸 프로젝트"
-              isDeadline={i < 4}
+              isDeadline={i < 4} // 임시
             />
           ))}
         </div>

src/components/modals/AlarmModal.tsx

@@ -13,7 +13,6 @@ const AlarmModal = ({ onClose }: AlarmModalProps) => {
       id: 1,
       theme: "message" as const,
       project: "최종 프로젝트",
-      meetingRoom: "프론트방",
     },
     {
       id: 2,
@@ -22,20 +21,20 @@ const AlarmModal = ({ onClose }: AlarmModalProps) => {
       task: "UI 디자인 수정",
     },
     { id: 3, theme: "newProject" as const, project: "최종 프로젝트" },
+    { id: 4, theme: "endProject" as const, project: "최종 프로젝트" },
     {
-      id: 4,
-      theme: "urgentTask" as const,
+      id: 5,
+      theme: "message" as const,
       project: "최종 프로젝트",
-      task: "UI 디자인 수정",
     },
-    { id: 5, theme: "urgentProject" as const, project: "최종 프로젝트" },
     {
       id: 6,
-      theme: "upcomingTask" as const,
-      project: "사이드 프로젝트",
+      theme: "newTask" as const,
+      project: "최종 프로젝트",
       task: "UI 디자인 수정",
     },
-    { id: 7, theme: "upcomingProject" as const, project: "사이드 프로젝트" },
+    { id: 7, theme: "newProject" as const, project: "최종 프로젝트" },
+    { id: 8, theme: "endProject" as const, project: "최종 프로젝트" },
   ]);
 
   const handleRemoveAllAlarm = () => {
@@ -71,13 +70,8 @@ const AlarmModal = ({ onClose }: AlarmModalProps) => {
                 key={index}
                 theme={alarm.theme}
                 project={alarm.project}
-                meetingRoom={
-                  alarm.theme === "message" ? alarm.meetingRoom : undefined
-                }
                 task={
-                  ["newTask", "urgentTask", "upcomingTask"].includes(
-                    alarm.theme
-                  )
+                  ["newTask"].includes(alarm.theme)
                     ? alarm.task ?? undefined
                     : undefined
                 }

src/index.css

@@ -16,9 +16,10 @@
   --color-header-green: #657166;
   --color-header-green-hoverdark: #AEDCC4;
   --color-header-header-green-hoverlight: #2B3E34;
+  --color-red: #FFE3DF;
   --color-header-red: #FF6854;
   --color-header-red-hoverdark: #FF523C;
-  --color-header-red:hoverlightk: #FF1D00;
+  --color-header-red-hover: #FF1D00;
   --color-kakao: #FEE500;
   --color-black01: #212121;
   --color-gray01: #AFAFAF;

src/pages/MainPage.tsx

@@ -1,32 +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 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]}
-          initialView="dayGridMonth"
-          height={"calc(100vh - 50px)"}
-        />
       </div>
 
       {/* 오늘의 일정 */}