hyunho/MH-DashBoard-organization
1
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

공통 베이스 스타일 구조 도입

Browse Source
This commit is contained in:
hyunho
2026-03-25 12:30:26 +09:00
parent 2bfde8ce58
commit 8a5db81b85
5 changed files with 152 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
DashBoard-organization.html
View File

@@ -8,6 +8,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Pretendard:wght@400;600;700;900&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=Pretendard:wght@400;600;700;900&display=swap" rel="stylesheet" />
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="/legacy/static/common.css" />
<link rel="stylesheet" href="/legacy/static/organization.css" /> <link rel="stylesheet" href="/legacy/static/organization.css" />
</head> </head>
<body> <body>

1
frontend/public/index.html
View File

@@ -7,6 +7,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pretendard:wght@400;600;700;900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Pretendard:wght@400;600;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/legacy/static/common.css">
<link rel="stylesheet" href="/styles.css"> <link rel="stylesheet" href="/styles.css">
</head> </head>
<body> <body>

45
frontend/public/styles.css
View File

@@ -1,49 +1,10 @@
:root {
--bg: #f1f5f9;
--bg-strong: #e2e8f0;
--panel: rgba(255, 255, 255, 0.92);
--line: rgba(148, 163, 184, 0.35);
--text: #0f172a;
--muted: #64748b;
--header: #1e293b;
--accent: #4f46e5;
--accent-soft: #e0e7ff;
--shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
min-height: 100%;
font-family: "Pretendard", sans-serif;
color: var(--text);
background:
radial-gradient(circle at top left, rgba(79, 70, 229, 0.12), transparent 22%),
radial-gradient(circle at bottom right, rgba(148, 163, 184, 0.18), transparent 28%),
var(--bg);
}
body {
min-height: 100vh;
}
button,
input,
a {
font: inherit;
}
.hidden { .hidden {
display: none !important; display: none !important;
} }
.eyebrow { .eyebrow {
margin: 0 0 10px; margin: 0 0 10px;
color: var(--accent); color: var(--color-accent);
font-size: 11px; font-size: 11px;
font-weight: 900; font-weight: 900;
letter-spacing: 0.16em; letter-spacing: 0.16em;
@@ -78,7 +39,7 @@ a {
grid-template-columns: 1.3fr 0.7fr; grid-template-columns: 1.3fr 0.7fr;
overflow: hidden; overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 22px; border-radius: var(--radius-lg);
background: rgba(71, 85, 105, 0.34); background: rgba(71, 85, 105, 0.34);
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24); box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24);
backdrop-filter: blur(14px); backdrop-filter: blur(14px);
@@ -230,7 +191,7 @@ a {
} }
.nav-pill.active { .nav-pill.active {
background: var(--accent); background: var(--color-accent);
border-color: transparent; border-color: transparent;
color: #fff; color: #fff;
box-shadow: 0 10px 24px rgba(79, 70, 229, 0.3); box-shadow: 0 10px 24px rgba(79, 70, 229, 0.3);

107
legacy/static/common.css Normal file
View File

@@ -0,0 +1,107 @@
:root {
--font-sans: "Pretendard", sans-serif;
--color-bg: #f1f5f9;
--color-bg-soft: #eef2ff;
--color-surface: #ffffff;
--color-surface-soft: rgba(255, 255, 255, 0.88);
--color-surface-strong: #e2e8f0;
--color-text: #1e293b;
--color-text-soft: #475569;
--color-text-muted: #64748b;
--color-border: #cbd5e1;
--color-border-soft: rgba(148, 163, 184, 0.3);
--color-header: #1e293b;
--color-header-soft: #334155;
--color-accent: #4f46e5;
--color-accent-soft: #e0e7ff;
--color-accent-strong: #4338ca;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 18px;
--radius-xl: 24px;
--radius-pill: 999px;
--shadow-soft: 0 4px 14px rgba(15, 23, 42, 0.08);
--shadow-card: 0 18px 44px rgba(15, 23, 42, 0.12);
--shadow-float: 0 18px 36px rgba(79, 70, 229, 0.16);
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
min-height: 100%;
font-family: var(--font-sans);
color: var(--color-text);
background:
radial-gradient(circle at top left, rgba(79, 70, 229, 0.12), transparent 22%),
radial-gradient(circle at bottom right, rgba(148, 163, 184, 0.18), transparent 28%),
var(--color-bg);
}
body {
min-height: 100vh;
}
button,
input,
select,
textarea,
a {
font: inherit;
}
.ui-card {
background: var(--color-surface-soft);
border: 1px solid var(--color-border-soft);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-soft);
backdrop-filter: blur(10px);
}
.ui-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 38px;
padding: 0 14px;
border-radius: var(--radius-pill);
}
.ui-button-primary {
border: none;
color: #fff;
background: var(--color-accent);
box-shadow: var(--shadow-float);
}
.ui-button-secondary {
border: 1px solid var(--color-border-soft);
color: var(--color-text);
background: rgba(255, 255, 255, 0.72);
}
.ui-input {
border: 1px solid var(--color-border-soft);
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.88);
color: var(--color-text);
outline: none;
}
.ui-input:focus {
border-color: rgba(79, 70, 229, 0.45);
box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.08);
}

84
legacy/static/organization.css
View File

@@ -1,8 +1,4 @@
body { body {
margin: 0;
background: #f1f5f9;
font-family: 'Pretendard', sans-serif;
color: #1e293b;
overflow-x: hidden; overflow-x: hidden;
} }
@@ -29,23 +25,23 @@ body {
.dept-box { .dept-box {
width: fit-content; width: fit-content;
min-width: 320px; min-width: 320px;
background: white; background: var(--color-surface);
border: 1px solid #cbd5e1; border: 1px solid var(--color-border);
border-radius: 10px; border-radius: var(--radius-md);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); box-shadow: var(--shadow-soft);
position: relative; position: relative;
z-index: 20; z-index: 20;
margin-bottom: 40px; margin-bottom: 40px;
} }
.dept-header { .dept-header {
background: #1e293b; background: var(--color-header);
color: white; color: white;
padding: 12px; padding: 12px;
text-align: center; text-align: center;
font-size: 17px; font-size: 17px;
font-weight: 900; font-weight: 900;
border-radius: 10px; border-radius: var(--radius-md);
} }
.dept-header.has-members { .dept-header.has-members {
@@ -73,11 +69,11 @@ body {
.box { .box {
width: fit-content; width: fit-content;
min-width: 112px; min-width: 112px;
background: white; background: var(--color-surface);
border: 1px solid #cbd5e1; border: 1px solid var(--color-border);
border-radius: 8px; border-radius: var(--radius-sm);
padding: 6px; padding: 6px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); box-shadow: var(--shadow-soft);
position: relative; position: relative;
z-index: 10; z-index: 10;
margin-bottom: 40px; margin-bottom: 40px;
@@ -86,9 +82,9 @@ body {
.box-name { .box-name {
font-size: 13px; font-size: 13px;
font-weight: 800; font-weight: 800;
color: #475569; color: var(--color-text-soft);
text-align: center; text-align: center;
border-bottom: 1px solid #f1f5f9; border-bottom: 1px solid var(--color-bg);
padding-bottom: 4px; padding-bottom: 4px;
margin-bottom: 6px; margin-bottom: 6px;
word-break: keep-all; word-break: keep-all;
@@ -99,7 +95,7 @@ body {
} }
.box-level-그룹 .box-name { .box-level-그룹 .box-name {
background: #3f516a; background: var(--color-header-soft);
color: #ffffff; color: #ffffff;
padding: 8px; padding: 8px;
border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0;
@@ -112,7 +108,7 @@ body {
} }
.box-level-디비전 .box-name { .box-level-디비전 .box-name {
background: #869fb7; background: #7b93ab;
color: #ffffff; color: #ffffff;
padding: 8px; padding: 8px;
border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0;
@@ -140,8 +136,8 @@ body {
.cell-label { .cell-label {
grid-column: span 1; grid-column: span 1;
background: #e2e8f0; background: var(--color-surface-strong);
color: #475569; color: var(--color-text-soft);
font-size: 10px; font-size: 10px;
font-weight: 900; font-weight: 900;
text-align: center; text-align: center;
@@ -163,7 +159,7 @@ body {
border-radius: 4px; border-radius: 4px;
font-size: 11.5px; font-size: 11.5px;
text-align: left; text-align: left;
border: 1px solid #f1f5f9; border: 1px solid var(--color-bg);
border-left: 4px solid #94a3b8; border-left: 4px solid #94a3b8;
background: #f8fafc; background: #f8fafc;
cursor: pointer; cursor: pointer;
@@ -178,8 +174,8 @@ body {
} }
.member-card:hover { .member-card:hover {
background: white; background: var(--color-surface);
border-color: #4f46e5; border-color: var(--color-accent);
box-shadow: 0 4px 10px rgba(79, 70, 229, 0.2); box-shadow: 0 4px 10px rgba(79, 70, 229, 0.2);
transform: translateY(-2px); transform: translateY(-2px);
z-index: 50; z-index: 50;
@@ -192,7 +188,7 @@ body {
top: 0; top: 0;
width: 4px; width: 4px;
height: 100%; height: 100%;
background: #4f46e5; background: var(--color-accent);
border-radius: 4px; border-radius: 4px;
z-index: 20; z-index: 20;
} }
@@ -204,7 +200,7 @@ body {
top: 0; top: 0;
width: 4px; width: 4px;
height: 100%; height: 100%;
background: #4f46e5; background: var(--color-accent);
border-radius: 4px; border-radius: 4px;
z-index: 20; z-index: 20;
} }
@@ -577,11 +573,11 @@ body {
position: fixed; position: fixed;
top: 18px; top: 18px;
left: 25px; left: 25px;
background: rgba(255, 255, 255, 0.9); background: var(--color-surface-soft);
border-radius: 12px; border-radius: var(--radius-md);
padding: 10px 18px; padding: 10px 18px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); box-shadow: var(--shadow-soft);
border: 1px solid #e2e8f0; border: 1px solid var(--color-border-soft);
z-index: 1010; z-index: 1010;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -596,12 +592,12 @@ body {
background: transparent; background: transparent;
font-size: 13px; font-size: 13px;
font-weight: 700; font-weight: 700;
color: #1e293b; color: var(--color-text);
width: 180px; width: 180px;
} }
.search-icon { .search-icon {
color: #64748b; color: var(--color-text-muted);
display: flex; display: flex;
align-items: center; align-items: center;
} }
@@ -611,11 +607,11 @@ body {
top: 18px; top: 18px;
right: 25px; right: 25px;
width: 400px; width: 400px;
background: rgba(255, 255, 255, 0.9); background: var(--color-surface-soft);
border-radius: 12px; border-radius: var(--radius-md);
padding: 15px; padding: 15px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); box-shadow: var(--shadow-soft);
border: 1px solid #e2e8f0; border: 1px solid var(--color-border-soft);
z-index: 1010; z-index: 1010;
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
transition: all 0.3s; transition: all 0.3s;
@@ -633,7 +629,7 @@ body {
.stats-table th { .stats-table th {
background: #f8fafc; background: #f8fafc;
color: #64748b; color: var(--color-text-muted);
font-weight: 800; font-weight: 800;
padding: 8px 4px; padding: 8px 4px;
border: 1px solid #e2e8f0; border: 1px solid #e2e8f0;
@@ -645,12 +641,12 @@ body {
border: 1px solid #e2e8f0; border: 1px solid #e2e8f0;
text-align: center; text-align: center;
font-weight: 700; font-weight: 700;
color: #1e293b; color: var(--color-text);
} }
.stats-table .row-label { .stats-table .row-label {
background: #f8fafc; background: #f8fafc;
color: #475569; color: var(--color-text-soft);
font-weight: 800; font-weight: 800;
width: 80px; width: 80px;
} }
@@ -667,7 +663,7 @@ body {
.sum-row td { .sum-row td {
font-weight: 900 !important; font-weight: 900 !important;
color: #0f172a !important; color: var(--color-text) !important;
} }
@keyframes target-pulse { @keyframes target-pulse {
@@ -690,15 +686,15 @@ body {
z-index: 5001; z-index: 5001;
width: 45px; width: 45px;
height: 45px; height: 45px;
background: rgba(255, 255, 255, 0.9); background: var(--color-surface-soft);
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
border: 1px solid #e2e8f0; border: 1px solid var(--color-border-soft);
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 18px; font-size: 18px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); box-shadow: var(--shadow-soft);
transition: all 0.3s; transition: all 0.3s;
cursor: pointer; cursor: pointer;
} }
@@ -726,8 +722,8 @@ body {
} }
.admin-mode-btn.is-admin { .admin-mode-btn.is-admin {
background: #4f46e5; background: var(--color-accent);
border-color: #4f46e5; border-color: var(--color-accent);
box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3); box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3);
} }