[✨] MainLayout 수정 중 2

Program/Layout/MainLayout.razor

@@ -1,24 +1,26 @@
 @inherits LayoutComponentBase
+
 <div class="page">
-    <div class="top-row navbar navbar-dark bg-dark px-3">
+    <!-- 상단 네비게이션 (떠 있음) -->
+    <div class="top-nav">
         <div class="top-title">
-            @* <TopMenu /> *@
+            <h1 class="prj-title">PROJECT</h1>
-            <h1 class = "prj-title">PROJECT</h1>
-        </div>
-        
-        <div class="top-menu">
-            <TopMenu />
         </div>
     </div>
 
-    <main>
+    <!-- 본문 콘텐츠 -->
-        <div class="side-menu">
+    <main class="content-container">
-            <NavMenu />
-        </div>
-
         <article class="content">
             @Body
         </article>
-        
     </main>
+    
+    <!-- 하단 네비게이션 (고정) -->
+    <div class="bottom-left-btn">
+        <button class="btn-primary">TEST</button>
+    </div>
+    
+    @* <div class="bottom-right-btn"> *@
+    @*     <button class="btn-primary">TEST</button> *@
+    @* </div> *@
 </div>

Program/Layout/MainLayout.razor.css

@@ -1,93 +1,48 @@
+/* 전체 페이지 wrapper */
 .page {
-    display: flex;
+    position: relative;
-    flex-direction: column;
+    min-height: 100vh;
-    height: 100vh;
+    overflow-x: hidden;
-    overflow: hidden;
 }
 
-.top-row {
+/* TopNav를 화면 위에 떠 있게 설정 */
+.top-nav {
     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-title {
-    width: 250px;
-    font-weight: bold;
-}
-
-.top-menu {
-    flex: 1;
-    display: flex;
-    justify-content: flex-end;
-    gap: 1rem;
-}
-
-/* 본문 구조 */
-main {
-    display: flex;
-    flex: 1;
-    margin-top: 3.5rem;
-    overflow: hidden;
-    /*height: calc(100vh - 3.5rem);*/
-}
-
-.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-title {
-        width: auto;
-        font-size: 1rem;
-    }
-
-    .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: 1.5rem 2rem;
-        padding: 0.5rem 1rem;
+    background-color: rgba(255, 255, 255, 0.95); /* 반투명 배경 */
-    }
+    z-index: 1000;
-
+    display: flex;
-    .content {
+    justify-content: space-between;
-        flex: 1;
+    align-items: center;
-        padding: 1rem;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
-    }
+}
+
+/* 타이틀 텍스트 */
+.prj-title {
+    font-size: 1.5rem;
+    font-weight: bold;
+    margin: 0;
+    color: var(--text-title);
+}
+
+/* 메뉴 영역 */
+.top-menu {
+    display: flex;
+    gap: 1.5rem;
+}
+
+.bottom-left-btn {
+    position: fixed;
+    z-index: 1000;
+    left: 40px;
+    width: 100%;
+    background-color: rgba(255, 255, 255, 0.95); /* 반투명 배경 */
+    z-index: 1000;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
 }

wwwroot/css/app.css

@@ -101,3 +101,50 @@ a, .btn-link {
 code {
     color: #c02d76;
 }
+
+
+:root {
+    /* Disable */
+    --disable-light: #F8F8F8;
+    --disable-normal: #B8B9B4;
+    --disable-dark: #8A8B87;
+    --disable-darker: #40413F;
+
+    /* Information */
+    --information-light: #F7FBF8;
+    --information-normal: #B2DBBB;
+    --information-dark: #86A48C;
+    --information-darker: #3E4D41;
+
+    /* Point */
+    --point-light: #F9FBFF;
+    --point-normal: #C2D6FA;
+    --point-dark: #92A1BC;
+    --point-darker: #444B58;
+
+    /* Second */
+    --second-light: #F2F0ED;
+    --second-normal: #79654E;
+    --second-dark: #5D4C3B;
+    --second-darker: #2A231B;
+
+    /* Normal */
+    --normal-light: #FDFCFB;
+    --normal-normal: #EBDFD2;
+    --normal-dark: #B0A79E;
+    --normal-darker: #524E4A;
+
+    /* Danger */
+    --danger-light: #FFF9F9;
+    --danger-normal: #FDC6C3;
+    --danger-dark: #BE9592;
+    --danger-darker: #594544;
+
+    /* 기타 텍스트 및 상태 */
+    --text-title: #1D1D1D;
+    --text-detail: #545454;
+    --text-disabled: #8E8E8E;
+    --text-white: #FFFFFF;
+    --text-black: #000000;
+    --text-border: #C6C6C6;
+}