chore : design update

src/App.tsx

@@ -8,6 +8,7 @@ import MobileLoginPage from "./pages/mobile/MobileLoginPage";
 import MobileRegisterPage from "./pages/mobile/MobileRegisterPage";
 import ProtectedRoute from "./components/ProtectedRoute";
 import MobileProtectedRoute from "./components/MobileProtectedRoute";
+import HomePage from "./pages/HomePage";
 
 const App = () => {
   return (
@@ -37,6 +38,7 @@ const App = () => {
         />
         <Route path="/app/login" element={<MobileLoginPage />} />
         <Route path="/app/register" element={<MobileRegisterPage />} />
+        <Route path="/home" element={<HomePage />} />
 
 
       </Routes>

src/components/auth/LoginBanner.tsx

@@ -1,16 +1,34 @@
-import React from 'react';
+import React from "react";
 
 const LoginBanner = () => {
   return (
-    <div className="w-[600px] relative bg-cover bg-center hidden md:block z-10" style={{
-      backgroundImage: `url('https://nanu.cc/NANU-Brand-Loader.jpg')`
-    }}>
+    <div
+      className="w-[600px] relative bg-cover bg-center hidden md:block z-10"
+      style={{
+        backgroundImage: `url('https://nanu.cc/NANU-Brand-Loader.jpg')`,
+      }}
+    >
       <div className="absolute top-10 left-10">
-        <h1 className="text-xl text-white mb-2 font-bold">최대 보안. 최대 편리함.</h1>
-        <img src="https://nanu.cc/NANU_Brand_Logo/NANU_ID_FULL_XS.svg" alt="NAMU Logo" className="w-40" />
+        <h1 className="text-xl text-white mb-2 font-bold">
+          최대 보안. 최대 편리함.
+        </h1>
+        <img
+          src="https://nanu.cc/NANU_Brand_Logo/NANU_ID_FULL_XS.svg"
+          alt="NAMU Logo"
+          className="w-40"
+        />
+      </div>
+
+      <div className="absolute bottom-10 left-10 text-left">
+        <span className="text-white block mb-1 font-primary">Advanced Security By</span>
+        <img
+          src="/supporters_crowdstrike.png"
+          alt="Crowdstrike"
+          className="w-[200px] h-auto"
+        />
       </div>
     </div>
   );
 };
 
-export default LoginBanner;
+export default LoginBanner;

src/components/home/HomeLayout.tsx

@@ -0,0 +1,15 @@
+import React, { ReactNode } from "react";
+import Sidebar from "./Sidebar";
+
+interface LayoutProps {
+  children: ReactNode;
+}
+
+const Layout: React.FC<LayoutProps> = ({ children }) => (
+  <div className="flex min-h-screen bg-gray-50">
+     <Sidebar name="이동현" email="m**@*******n.cc" />
+    <main className="flex-1 p-4 md:p-6 max-w-5xl">{children}</main>
+  </div>
+);
+
+export default Layout;

src/components/home/LoginHistoryItem.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+interface LoginHistoryItemProps {
+  date: string;
+  service: string;
+  device: string;
+  onClick: () => void;
+}
+
+const LoginHistoryItem: React.FC<LoginHistoryItemProps> = ({
+  date,
+  service,
+  device,
+  onClick,
+}) => (
+  <div className="bg-gray-100 rounded-lg p-4 mb-3">
+    <div className="flex justify-between items-start">
+      <div>
+        <p className="text-gray-600 text-sm">{date}</p>
+        <p className="font-medium">서비스: {service}</p>
+        <p className="text-sm text-gray-600">기기: {device}</p>
+      </div>
+      <button
+        onClick={onClick}
+        className="px-4 py-2 text-sm bg-gray-200 rounded-lg hover:bg-gray-300"
+      >
+        자세히 알아보기
+      </button>
+    </div>
+  </div>
+);
+
+export default LoginHistoryItem;

src/components/home/Sidebar.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import SidebarLink from "./SidebarLink";
+
+interface SidebarProps {
+  name: string;
+  email: string;
+}
+
+const Sidebar: React.FC<SidebarProps> = ({ name, email }) => (
+  <aside className="w-20 md:w-64 bg-white border-r border-gray-200 hidden md:block flex-shrink-0">
+    <div className="p-4">
+      <img
+        src="https://nanu.cc/NANU_Brand_Logo/NANU_ID_FULL_XS.svg"
+        alt="NAMU Logo"
+        style={{height:"25px"}}
+      />
+    </div>
+
+    <div className="p-4 border-b border-gray-200">
+      <div className="flex items-center space-x-3">
+        <div className="w-10 h-10 rounded-full bg-gray-200"></div>
+        <div className="flex-1">
+          <p className="font-medium">{name}</p>
+          <p className="text-sm text-gray-500">{email}</p> 
+        </div>
+      </div>
+      <div className="mt-2 px-2 py-1 text-xs bg-orange-100 text-orange-600 rounded inline-block">
+        MFA 활성화
+      </div>
+    </div>
+
+    <nav className="flex-1 p-2">
+      <SidebarLink to="/home" icon="🏠" text="홈" active />
+      <SidebarLink to="/tokens" icon="🔑" text="토큰" />
+      <SidebarLink to="/auth" icon="🔒" text="보안" />
+      <SidebarLink to="/info" icon="ℹ️" text="마이페이지" />
+    </nav>
+  </aside>
+);
+
+export default Sidebar;

src/components/home/SidebarLink.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+interface SidebarLinkProps {
+  to: string;
+  icon: React.ReactNode;
+  text: string;
+  active?: boolean;
+}
+
+const SidebarLink: React.FC<SidebarLinkProps> = ({ to, icon, text, active }) => (
+  <Link
+    to={to}
+    className={`flex items-center space-x-3 p-3 rounded-lg ${
+      active ? "bg-gray-100" : "hover:bg-gray-50"
+    }`}
+  >
+    <span className="text-xl">{icon}</span>
+    <span className="text-gray-700">{text}</span>
+  </Link>
+);
+
+export default SidebarLink;

src/components/home/StatusCard.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+interface StatusCardProps {
+  title: string;
+  subtitle: string;
+  active?: boolean;
+}
+
+const StatusCard: React.FC<StatusCardProps> = ({
+  title,
+  subtitle,
+  active = true,
+}) => (
+  <div
+    className={`rounded-3xl p-4 ${
+      active
+        ? "bg-[#FFB4A2] text-[#8B0000]" 
+        : "bg-[#F0ECEC] text-[#5C5C5C]"
+    }`}
+  >
+    <h3 className="font-medium">{title}</h3>
+    <p className="text-sm opacity-80">{subtitle}</p>
+  </div>
+);
+
+export default StatusCard;

src/index.css

@@ -1,20 +1,33 @@
-@import url('https://fastly.jsdelivr.net/gh/wanteddev/[email protected]/packages/wanted-sans/fonts/webfonts/variable/split/WantedSansVariable.min.css');
+@import url("https://fastly.jsdelivr.net/gh/wanteddev/[email protected]/packages/wanted-sans/fonts/webfonts/variable/split/WantedSansVariable.min.css");
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 @font-face {
-  font-family: 'Freesentation-9Black';
-  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/Freesentation-9Black.woff2') format('woff2');
+  font-family: "Freesentation-9Black";
+  src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/Freesentation-9Black.woff2")
+    format("woff2");
   font-weight: 900;
   font-style: normal;
 }
 
+@font-face {
+  font-family: "NanumHumanTTFBold";
+  src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/NanumHumanTTFBold.woff2")
+    format("woff2");
+  font-weight: 700;
+  font-style: normal;
+}
+
 * {
-  font-family: 'Wanted Sans', sans-serif;
+  font-family: "Wanted Sans", sans-serif;
 }
 
 .font-bold {
-  font-family: 'Freesentation-9Black';
-}
+  font-family: "Freesentation-9Black";
+}
+
+.font-primary {
+  font-family: "NanumHumanTTFBold";
+}

src/pages/HomePage.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import StatusCard from "../components/home/StatusCard";
+import LoginHistoryItem from "../components/home/LoginHistoryItem";
+import Layout from "../components/home/HomeLayout";
+
+const HomePage: React.FC = () => (
+  <Layout>
+    <div className="max-w-5xl mx-auto">
+      <header className="mb-8">
+        <h2 className="text-5xl font-bold mb-1">반가워요</h2>
+        <h1 className="text-5xl font-bold">이동현 님</h1>
+      </header>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
+        <StatusCard title="NANU ID APP MFA" subtitle="앱이 연결되지 않음" />
+        <StatusCard
+          title="이메일 사용 인증"
+          subtitle="이메일이 인증되지 않음"
+        />
+        <StatusCard
+          title="비밀번호"
+          subtitle="이메일이 인증되지 않음"
+          active={false}
+        />
+      </div>
+
+      <div className="bg-white rounded-2xl p-6">
+        <div className="flex justify-between items-center mb-4">
+          <h3 className="text-lg font-medium">로그인 기록</h3>
+          <button className="text-blue-500 hover:underline">전체 기록</button>
+        </div>
+
+        <LoginHistoryItem
+          date="2024.1.23 AM 9:00 KST"
+          service="DASHBOARD(NANUID)"
+          device="Android Web"
+          onClick={() => console.log("LoginHistoryItem clicked")}
+        />
+        <LoginHistoryItem
+          date="2024.1.21 AM 2:00 KST"
+          service="VocaVault Service"
+          device="Windows Web"
+          onClick={() => console.log("Another LoginHistoryItem clicked")}
+        />
+      </div>
+    </div>
+  </Layout>
+);
+
+export default HomePage;