[] MainLayout 수정 중 2

This commit is contained in:
김선규 2025-04-23 17:50:00 +09:00
parent deba36e3d5
commit 9dcf0db303
3 changed files with 92 additions and 88 deletions

View File

@ -1,24 +1,26 @@
@inherits LayoutComponentBase @inherits LayoutComponentBase
<div class="page"> <div class="page">
<div class="top-row navbar navbar-dark bg-dark px-3"> <!-- 상단 네비게이션 (떠 있음) -->
<div class="top-nav">
<div class="top-title"> <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>
</div> </div>
<main> <!-- 본문 콘텐츠 -->
<div class="side-menu"> <main class="content-container">
<NavMenu />
</div>
<article class="content"> <article class="content">
@Body @Body
</article> </article>
</main> </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> </div>

View File

@ -1,93 +1,48 @@
/* 전체 페이지 wrapper */
.page { .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; position: fixed;
top: 0; top: 0;
left: 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%; 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);
} }

View File

@ -101,3 +101,50 @@ a, .btn-link {
code { code {
color: #c02d76; 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;
}