feat(M02): 마스터 템플릿 페이지 틀 — 대시보드 단추 · 길 · 좌측 패널(층·목록·새로·본떠·지우기·프로젝트 단추 다섯) · 메인 자리 · 공용 모달 (PLAN 10-1)

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0148XFUpPfpiuTjxF1EK9c95
2026-09-25 09:36:07 +09:00
parent a0787a7859
commit 483c6fd7c8
14 changed files with 971 additions and 22 deletions
@@ -0,0 +1,114 @@
+/* M02 마스터 템플릿 — 좌측 패널 + 메인. 색·간격은 공용 토큰. */
+.m02-side {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-12);
+  padding-top: var(--spacing-8);
+}
+
+.m02-side__layers {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--spacing-4);
+}
+
+.m02-side__layers .ui-btn.is-active {
+  border-color: var(--color-accent);
+  color: var(--color-accent);
+  font-weight: var(--font-weight-bold);
+}
+
+.m02-side__group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+}
+
+.m02-side__group h4 {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--text-body-sm);
+}
+
+.m02-side__item {
+  width: 100%;
+  padding: var(--spacing-4) var(--spacing-8);
+  border: 0;
+  border-radius: var(--radius-md);
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.m02-side__item:hover {
+  background: var(--color-paper);
+}
+
+.m02-side__item.is-active {
+  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
+  font-weight: var(--font-weight-bold);
+}
+
+.m02-side__empty {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--text-body-sm);
+}
+
+.m02-side__row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-4);
+}
+
+.m02-main {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-12);
+  min-width: 0;
+  padding: var(--spacing-16) var(--spacing-24);
+}
+
+.m02-main__head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-12);
+}
+
+.m02-main__title {
+  flex: 1 1 auto;
+  margin: 0;
+  color: var(--color-text);
+  font-size: var(--text-body);
+}
+
+.m02-main__notice {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+  padding: var(--spacing-8) var(--spacing-12);
+  border-left: 4px solid var(--color-danger);
+  background: color-mix(in srgb, var(--color-danger) 10%, var(--color-canvas));
+  color: var(--color-danger);
+  font-size: var(--text-body-sm);
+}
+
+.m02-main__host {
+  min-height: 240px;
+}
+
+.m02-main__empty {
+  margin: 0;
+  padding: var(--spacing-24);
+  color: var(--color-text-muted);
+  text-align: center;
+}
+
+.m02-modal__field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+}