[] 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
<div class="page">
<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 class="page">
<!-- 상단 네비게이션 (떠 있음) -->
<div class="top-nav">
<div class="top-title">
<h1 class="prj-title">PROJECT</h1>
</div>
</div>
<main>
<div class="side-menu">
<NavMenu />
</div>
<!-- 본문 콘텐츠 -->
<main class="content-container">
<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>

View File

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