Feat/4 dashboard

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@monaco-editor/react": "^4.7.0",
     "@tailwindcss/postcss": "^4.3.2",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",

src/App.jsx

@@ -1,10 +1,20 @@
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import MainLayout from './layouts/MainLayout';
+import Dashboard from './pages/Dashboard';
+import Report from './pages/Report';
+import ReviewNote from './pages/ReviewNote';
+import AiChat from './pages/AiChat';
 
 function App() {
   return (
     <BrowserRouter>
       <Routes>
-
+        <Route element={<MainLayout />}>
+          <Route path="/" element={<Dashboard />} />
+          <Route path="/report" element={<Report />} />
+          <Route path="/review-note" element={<ReviewNote />} />
+          <Route path="/ai-chat" element={<AiChat />} />
+        </Route>
       </Routes>
     </BrowserRouter>
   );

src/components/IdeDisconnected.jsx

@@ -0,0 +1,14 @@
+function IdeDisconnected() {
+  return (
+    <div className="flex justify-center items-center w-full h-full select-none">
+      <div className="panel-base no-hover justify-center w-[33.80vw] h-[29.72vh] gap-[2.04vh]">
+        <div className="text-white font-bold text-[2.59vh]">
+          IDE에 연결 되어 있지 않습니다.
+        </div>
+        <div className="text-gray400 text-[2.22vh]">연결을 확인해 주세요.</div>
+      </div>
+    </div>
+  );
+}
+
+export default IdeDisconnected;

src/components/IdeStatus.jsx

@@ -0,0 +1,19 @@
+function IdeStatus({ isConnected = false }) {
+    return (
+        <div className="flex justify-end w-full h-[6.39vh] select-none">
+            <div 
+                className={`
+                    flex justify-center items-center w-[11.93vw] h-full rounded-[1.04vw] border text-[2.22vh] font-bold transition-colors
+                    ${isConnected 
+                        ? 'bg-green500-10 border-[0.09vh] border-green500-20 text-green400' 
+                        : 'bg-red500-10 border-[0.09vh] border-red500-20 text-red400'
+                    }
+                `}
+            >
+                {isConnected ? '🟢 IDE 연동 중' : '🔴 IDE 연동 전'}
+            </div>
+        </div>
+    );
+}
+
+export default IdeStatus;

src/components/NotLoggedIn.jsx

@@ -0,0 +1,17 @@
+function NotLoggedIn() {
+  return (
+    <div className="flex justify-center items-center w-full h-full select-none">
+      <div className="panel-base no-hover justify-center w-[33.80vw] h-[29.72vh] gap-[2.04vh]">
+        <div className="text-white font-bold text-[2.59vh]">
+          로그인이 되어 있지 않습니다.
+        </div>
+        <div className="flex text-gray400 text-[2.22vh]">
+            <div className="font-bold cursor-pointer underline not-only-of-type:decoration-[0.09vh]">로그인</div>
+            <div>을 진행해 주세요.</div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default NotLoggedIn;

src/components/SideNav/SideNav.jsx

@@ -0,0 +1,93 @@
+import { useState, useEffect, useRef } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import SettingIcon from "../../assets/SettingIcon.png";
+import UserModal from "./UserModal"; 
+
+function SideNav() {
+    const menuItems = [
+        { name: 'DASHBOARD', path: '/' },
+        { name: 'REPORT', path: '/report' },
+        { name: 'REVIEW NOTE', path: '/review-note' },
+        { name: 'AI CHAT', path: '/ai-chat' }
+    ];
+
+    const location = useLocation(); 
+    const navigate = useNavigate();
+
+    const [isModalOpen, setIsModalOpen] = useState(false);
+
+    const modalRef = useRef(null);
+
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (modalRef.current && !modalRef.current.contains(event.target)) {
+                setIsModalOpen(false);
+            }
+        };
+
+        document.addEventListener('mousedown', handleClickOutside);
+
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, []);
+
+    return (
+        <div className="panel-base no-hover flex flex-col justify-between w-[17vw] h-full py-[1.67vh] px-[0.94vw] select-none">
+            <div className="flex flex-col items-center w-[15.10vw] gap-[6.57vh]">
+                <div className="mt-[5.37vh] text-[3.7vh] font-bold text-purple400">CoFix</div>
+
+                <div className="flex flex-col gap-[1.02vh] w-[15.10vw]">
+                    {menuItems.map((item) => {
+                        const isActive = location.pathname === item.path;
+
+                        return (
+                            <button
+                                key={item.path} 
+                                onClick={() => navigate(item.path)}
+                                className={`
+                                flex items-center w-full h-[7.12vh] px-[2.3vw] rounded-[1.04vw] 
+                                text-[1.85vh] transition-colors cursor-pointer
+                                ${isActive
+                                        ? 'bg-purple500-10 border-[0.09vh] border-purple500-20 text-purple400 font-bold'
+                                        : 'text-gray400 border-[0.09vh] border-transparent hover:bg-white-5'
+                                    }
+                            `}
+                            >
+                                {item.name}
+                            </button>
+                        );
+                    })}
+                </div>
+            </div>
+
+            <div 
+                ref={modalRef} 
+                className="relative flex justify-between items-center w-full h-[7.12vh] px-[2.3vw] bg-gray800-50 rounded-[1.04vw]"
+            >
+                {isModalOpen && (
+                    <div className="absolute bottom-[8.5vh] left-[2vw] w-full z-10">
+                        <UserModal />
+                    </div>
+                )}
+
+                <div 
+                    className="flex items-center gap-[0.73vw] cursor-pointer"
+                    onClick={() => setIsModalOpen(!isModalOpen)}
+                >
+                    <div className="w-[1.77vw] h-[1.77vw] rounded-[50%] bg-gray-200"></div>
+                    <div className="text-[1.85vh] font-bold text-gray400">사용자</div>
+                </div>
+
+                <img 
+                    src={SettingIcon} 
+                    alt="settings" 
+                    className="w-[1.46vw] cursor-pointer"
+                    onClick={() => setIsModalOpen(!isModalOpen)}
+                />
+            </div>
+        </div>
+    );
+}
+
+export default SideNav;

src/components/SideNav/UserModal.jsx

@@ -0,0 +1,44 @@
+import { useState } from 'react';
+
+function UserModal() {
+    const [isDarkMode, setIsDarkMode] = useState(true);
+
+    return (
+        <div className="flex flex-col justify-center items-center w-[10.73vw] h-[18vh] bg-gray800-50 border-[0.09vh] border-white-5 rounded-[1.04vw] text-gray400">
+            <div className="flex flex-col items-center mb-[0.7vh]">
+                <div className="w-[4.17vh] h-[4.17vh] mb-[0.3vh] bg-gray200 rounded-[50%]"></div>
+                <div className="font-bold text-[2vh]">사용자</div>
+            </div>
+
+            <div 
+                onClick={() => setIsDarkMode(!isDarkMode)}
+                className="relative flex items-center w-[5vw] h-[2.96vh] mb-[0.9vh] border-[0.09vh] border-gray400 rounded-[1.04vw] cursor-pointer"
+            >
+                <div 
+                    className={`
+                        absolute flex justify-center items-center w-[1.77vw] h-[2.41vh] bg-gray400 rounded-[1.04vw]
+                        transition-all duration-300 ease-in-out
+                        ${isDarkMode ? 'left-[calc(100%-1.77vw-0.15vw)]' : 'left-[0.15vw]'}
+                    `}
+                >
+                    <svg 
+                        xmlns="http://www.w3.org/2000/svg" 
+                        viewBox="0 0 24 24" 
+                        fill="currentColor" 
+                        className="w-[1.4vh] h-[1.4vh] text-gray-800" 
+                    >
+                        <path fillRule="evenodd" d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z" clipRule="evenodd" />
+                    </svg>
+                </div>
+            </div>
+
+            <div className="flex gap-[0.47vw] text-[1.4vh]">
+                <div className="cursor-pointer hover:text-white transition-colors">계정관리</div>
+                <p>|</p>
+                <div className="cursor-pointer hover:text-white transition-colors">로그아웃</div>
+            </div>
+        </div>
+    );
+}
+
+export default UserModal;