design: 메인페이지 로그인상태, 레이아웃 디자인 #5

Author: kkyuheak

package.json

@@ -10,12 +10,16 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fullcalendar/core": "^6.1.15",
+    "@fullcalendar/daygrid": "^6.1.15",
+    "@fullcalendar/react": "^6.1.15",
     "@tailwindcss/vite": "^4.0.6",
     "@tanstack/react-query": "^5.66.0",
     "axios": "^1.7.9",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router": "^7.1.5",
+    "tailwind-merge": "^3.0.1",
     "tailwindcss": "^4.0.6",
     "zustand": "^5.0.3"
   },

src/App.tsx

@@ -1,14 +1,18 @@
 import { Route, Routes } from "react-router";
-import Main from "./pages/Main";
 import SignIn from "./pages/SignIn";
 import SignUp from "./pages/SignUp";
+import MainPage from "./pages/MainPage";
+import Layout from "./components/layout/Layout";
 
 const App = () => {
   return (
     <Routes>
-      <Route path="/" element={<Main />} />
       <Route path="signIn" element={<SignIn />} />
       <Route path="signUp" element={<SignUp />} />
+
+      <Route element={<Layout />}>
+        <Route path="/" element={<MainPage />} />
+      </Route>
     </Routes>
   );
 };

src/components/MainPage/ScheduleBox.tsx

@@ -0,0 +1,48 @@
+import { twMerge } from "tailwind-merge";
+
+interface ScheduleBoxProps {
+  endTime: string; // 마감시간
+  remainingTime: string; // 남은 시간
+  scheduleName: string;
+  projectName: string;
+  isDeadline?: boolean; // 마감시간 임박 시 true
+}
+
+const ScheduleBox = ({
+  endTime,
+  remainingTime,
+  scheduleName,
+  projectName,
+  isDeadline = false,
+}: ScheduleBoxProps) => {
+  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"}`
+      )}
+    >
+      {/* 마감시간, 남은시간 */}
+      <div>
+        <div className="flex items-center gap-2">
+          <p className="text-[12px]">마감시간</p>
+          <p>{endTime}</p>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <p className="text-[12px]">남은시간</p>
+          <p>{remainingTime}</p>
+        </div>
+      </div>
+
+      {/* 업무명, 프로젝트 명 */}
+      <div>
+        <p>{scheduleName}</p>
+        <p>{projectName}</p>
+      </div>
+    </div>
+  );
+};
+
+export default ScheduleBox;

src/components/MainPage/TodaySchedule.tsx

@@ -0,0 +1,34 @@
+import { useState } from "react";
+import ScheduleBox from "./ScheduleBox";
+
+const TodaySchedule = () => {
+  // 임시 배열입니다
+  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)" }}
+    >
+      <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">
+          {arr.map((_, i) => (
+            <ScheduleBox
+              key={i}
+              endTime="15:00"
+              remainingTime="40분"
+              scheduleName="퍼블리싱"
+              projectName="이룸 프로젝트"
+              isDeadline={i < 4}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TodaySchedule;

src/components/layout/Header.tsx

@@ -0,0 +1,57 @@
+import { useState } from "react";
+import { Link } from "react-router";
+
+const Header = () => {
+  const [isLogin, setIsLogin] = useState(true);
+
+  // 임시 로그인, 로그아웃 버튼
+  const handleLogin = () => {
+    setIsLogin((prev) => !prev);
+  };
+  return (
+    <>
+      <header className="h-[50px] bg-[#d6d6d6] flex items-center px-5 justify-between">
+        <div>
+          <h1 className="text-[25px] font-bold">로고</h1>
+        </div>
+
+        <ul className="flex font-bold gap-5">
+          <li>
+            <Link to={"/project-room"}>프로젝트룸</Link>
+          </li>
+          <li>
+            <Link to={"/meeting-room"}>미팅룸</Link>
+          </li>
+        </ul>
+
+        <ul className="flex font-bold gap-3">
+          <li className="cursor-pointer">다크모드</li>
+          {isLogin ? (
+            <>
+              <li className="cursor-pointer">알람</li>
+              <li>
+                <Link to={"/"}>마이페이지</Link>
+              </li>
+              <li onClick={handleLogin} className="cursor-pointer">
+                로그아웃
+              </li>
+            </>
+          ) : (
+            <>
+              <li>
+                <Link to={"/"} onClick={handleLogin}>
+                  로그인
+                </Link>
+              </li>
+              <li>
+                <Link to="/">회원가입</Link>
+              </li>
+            </>
+          )}
+        </ul>
+      </header>
+    </>
+  );
+};
+
+export default Header;

src/components/layout/Layout.tsx

@@ -0,0 +1,17 @@
+import { Outlet } from "react-router";
+import Header from "./Header";
+import Sidebar from "./Sidebar";
+
+const Layout = () => {
+  return (
+    <div>
+      <Header />
+      <div className="absolute">
+        <Sidebar />
+      </div>
+      <Outlet />
+    </div>
+  );
+};
+
+export default Layout;

src/components/layout/Sidebar.tsx

@@ -0,0 +1,14 @@
+const Sidebar = () => {
+  return (
+    <div
+      className="w-[68px] bg-[#a1a1a1]"
+      style={{ height: "calc(100vh - 50px)" }}
+    >
+      <ul className="flex justify-center pt-10">
+        <li className="font-bold">펴기</li>
+      </ul>
+    </div>
+  );
+};
+
+export default Sidebar;

src/pages/MainPage.tsx

@@ -0,0 +1,32 @@
+import FullCalendar from "@fullcalendar/react";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import TodaySchedule from "../components/MainPage/TodaySchedule";
+
+const MainPage = () => {
+  return (
+    <div
+      className="px-5 bg-gray-100 flex gap-2"
+      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>
+        <FullCalendar
+          plugins={[dayGridPlugin]}
+          initialView="dayGridMonth"
+          height={"calc(100vh - 50px)"}
+        />
+      </div>
+
+      {/* 오늘의 일정 */}
+      <TodaySchedule />
+    </div>
+  );
+};
+
+export default MainPage;