feat: 메인페이지 디자인 수정 #25

prgrms-web-devcourse-final-project · Feb 17, 2025 · 5d04f27 · 5d04f27
1 parent b462d6d
commit 5d04f27
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 19 deletions.
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "@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",

diff --git a/src/components/MainPage/ScheduleBox.tsx b/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>

diff --git a/src/components/MainPage/TodaySchedule.tsx b/src/components/MainPage/TodaySchedule.tsx
@@ -1,17 +1,43 @@
-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] px-5 py-10 border border-main-green02 rounded-[10px]
+      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 scrollbar-none w-full h-full flex flex-col gap-2 min-h-0">
@@ -22,7 +48,7 @@ const TodaySchedule = () => {
               remainingTime="40분"
               scheduleName="퍼블리싱"
               projectName="이룸 프로젝트"
-              isDeadline={i < 4}
+              isDeadline={i < 4} // 임시
             />
           ))}
         </div>

diff --git a/src/styles/Calandar.css b/src/styles/Calandar.css
@@ -1,7 +1,3 @@
-.fc-media-screen {
-  /* height: 100% !important; */
-}
-
 .fc-toolbar-chunk {
   display: flex;
   align-items: center;