hyungi/tk-factory-services
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(css): 하단 네비 스타일을 tkfb.css 공통으로 이동

Browse Source 
- tbm-mobile.css에서 .m-bottom-nav, .m-nav-item, .m-nav-label 스타일 제거
- tkfb.css에 동일 스타일 추가 (shared-bottom-nav.js 공통 모듈 대응)
- 소모품 모바일 등 모든 페이지에서 하단 네비 정상 렌더링

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Hyungi Ahn
2026-04-01 12:46:49 +09:00
parent 6cd613c071
commit 9f181644f9
2 changed files with 42 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
system1-factory/web/css/tbm-mobile.css
View File

@@ -289,53 +289,7 @@ button, .m-tbm-row, .m-tab, .m-new-btn, .m-detail-btn, .m-load-more,
100% { background-position: -200% 0; }
}
/* Bottom nav */
.m-bottom-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 68px;
background: #ffffff;
border-top: 1px solid #e5e7eb;
box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
z-index: 1000;
padding-bottom: env(safe-area-inset-bottom);
display: flex;
align-items: center;
justify-content: space-around;
}
@media (min-width: 480px) {
.m-bottom-nav { max-width: 768px; margin: 0 auto; }
}
.m-nav-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
height: 100%;
text-decoration: none;
color: #9ca3af;
font-family: inherit;
cursor: pointer;
padding: 0.5rem 0.25rem;
-webkit-tap-highlight-color: transparent;
border: none;
background: none;
}
.m-nav-item.active { color: #2563eb; }
.m-nav-item svg {
width: 26px;
height: 26px;
margin-bottom: 4px;
}
.m-nav-item.active svg { stroke-width: 2.5; }
.m-nav-label {
font-size: 0.6875rem;
font-weight: 500;
}
.m-nav-item.active .m-nav-label { font-weight: 700; }
/* Bottom nav → tkfb.css로 이동됨 (shared-bottom-nav.js 공통) */
/* Detail badge */
.m-detail-badge {

41
system1-factory/web/static/css/tkfb.css
View File

@@ -215,3 +215,44 @@ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; b
display: flex !important;
z-index: 999 !important;
}
/* Mobile bottom nav (shared-bottom-nav.js 공통) */
.m-bottom-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 68px;
background: #ffffff;
border-top: 1px solid #e5e7eb;
box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
z-index: 1000;
padding-bottom: env(safe-area-inset-bottom);
display: flex;
align-items: center;
justify-content: space-around;
}
@media (min-width: 480px) {
.m-bottom-nav { max-width: 768px; margin: 0 auto; }
}
.m-nav-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
height: 100%;
text-decoration: none;
color: #9ca3af;
font-family: inherit;
cursor: pointer;
padding: 0.5rem 0.25rem;
-webkit-tap-highlight-color: transparent;
border: none;
background: none;
}
.m-nav-item.active { color: #2563eb; }
.m-nav-item svg { width: 26px; height: 26px; margin-bottom: 4px; }
.m-nav-item.active svg { stroke-width: 2.5; }
.m-nav-label { font-size: 0.6875rem; font-weight: 500; }
.m-nav-item.active .m-nav-label { font-weight: 700; }