[✨] MainLayout 수정 중

App.razor

@@ -1,8 +1,10 @@
 <Router AppAssembly="@typeof(App).Assembly">
+    
     <Found Context="routeData">
-        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
-        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
+        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)"/>
+        <FocusOnNavigate RouteData="@routeData" Selector="h1"/>
     </Found>
+
     <NotFound>
         <PageTitle>Not found</PageTitle>
         <LayoutView Layout="@typeof(MainLayout)">

Program/Layout/MainLayout.razor

@@ -1,16 +1,24 @@
 @inherits LayoutComponentBase
 <div class="page">
-    <div class="sidebar">
-        <NavMenu />
+    <div class="top-row navbar navbar-dark bg-dark px-3">
+        <div class="top-title">
+            @* <TopMenu /> *@
+            <h1 class = "prj-title">PROJECT</h1>
+        </div>
+        
+        <div class="top-menu">
+            <TopMenu />
+        </div>
     </div>
 
     <main>
-        <div class="top-row px-4">
-            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
+        <div class="side-menu">
+            <NavMenu />
         </div>
 
-        <article class="content px-4">
+        <article class="content">
             @Body
         </article>
+        
     </main>
 </div>

Program/Layout/MainLayout.razor.css

@@ -1,77 +1,93 @@
 .page {
-    position: relative;
     display: flex;
     flex-direction: column;
-}
-
-main {
-    flex: 1;
-}
-
-.sidebar {
-    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
+    height: 100vh;
+    overflow: hidden;
 }
 
 .top-row {
-    background-color: #f7f7f7;
-    border-bottom: 1px solid #d6d5d5;
-    justify-content: flex-end;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
     height: 3.5rem;
     display: flex;
     align-items: center;
+    background-color: #f7f7f7;
+    border-bottom: 1px solid #ddd;
+    z-index: 100;
+    padding: 0 1rem;
 }
 
-    .top-row ::deep a, .top-row ::deep .btn-link {
-        white-space: nowrap;
-        margin-left: 1.5rem;
-        text-decoration: none;
-    }
+.top-title {
+    width: 250px;
+    font-weight: bold;
+}
 
-    .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
-        text-decoration: underline;
-    }
+.top-menu {
+    flex: 1;
+    display: flex;
+    justify-content: flex-end;
+    gap: 1rem;
+}
 
-    .top-row ::deep a:first-child {
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
+/* 본문 구조 */
+main {
+    display: flex;
+    flex: 1;
+    margin-top: 3.5rem;
+    overflow: hidden;
+    /*height: calc(100vh - 3.5rem);*/
+}
 
-@media (max-width: 640.98px) {
+.side-menu {
+    width: 250px;
+    background: linear-gradient(180deg, rgb(5, 39, 103), #3a0647);
+    color: white;
+    padding: 1rem;
+    overflow-y: auto;
+    flex-shrink: 0;
+}
+
+.content {
+    flex: 1;
+    padding: 1.5rem;
+    overflow-y: auto;
+    background-color: #fff;
+}
+
+/* ✅ 모바일 대응 */
+@media (max-width: 768px) {
     .top-row {
+        flex-direction: row;
         justify-content: space-between;
     }
 
-    .top-row ::deep a, .top-row ::deep .btn-link {
-        margin-left: 0;
+    .top-title {
+        width: auto;
+        font-size: 1rem;
     }
-}
 
-@media (min-width: 641px) {
-    .page {
+    .top-menu {
+        justify-content: flex-end;
+    }
+
+    main {
+        flex-direction: column;
+        height: calc(100vh - 3.5rem);
+    }
+
+    .side-menu {
+        display: flex;
         flex-direction: row;
+        overflow-x: auto;
+        width: 100%;
+        white-space: nowrap;
+        padding: 0.5rem 1rem;
     }
 
-    .sidebar {
-        width: 250px;
-        height: 100vh;
-        position: sticky;
-        top: 0;
-    }
-
-    .top-row {
-        position: sticky;
-        top: 0;
-        z-index: 1;
-    }
-
-    .top-row.auth ::deep a:first-child {
+    .content {
         flex: 1;
-        text-align: right;
-        width: 0;
-    }
-
-    .top-row, article {
-        padding-left: 2rem !important;
-        padding-right: 1.5rem !important;
+        padding: 1rem;
     }
 }

Program/Layout/TopMenu.razor

@@ -0,0 +1 @@
+<h3>TopMenu</h3>

wwwroot/index.html

@@ -7,7 +7,7 @@
     <!-- 반응형 웹 설정 -->
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <!-- 브라우저의 탭에 표시되는 제목 -->
-    <title>Front</title>
+    <title>AcaMate</title>
     <!-- 라우팅 시스템을 위한 기본 주소. 절대 경로로 링크를 인식하게 함 -->
     <base href="/" />
     <!-- CSS 파일 연결 부분 -->