Hyein/PTC
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

style: improve visibility of selected management category item

Browse Source
This commit is contained in:
김혜인
2026-05-06 09:03:39 +09:00
parent d7a322a6ca
commit 039bc4c5a3
1 changed files with 51 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
PTC/management_dashboard_preview.html
View File

@@ -6452,7 +6452,11 @@
</div>
</div>
<div style={{ display: "grid", gap: 8, marginTop: 14 }}>
{(yearItem.categories || []).map((category) => (
{(yearItem.categories || []).map((category) => {
const isSelected =
selectedManagementYear === yearItem.year &&
selectedManagementCategory === category.name;
return (
<button
key={`${yearItem.year}-${category.name}`}
type="button"
@@ -6466,38 +6470,39 @@
display: "flex",
justifyContent: "space-between",
gap: 12,
alignItems: "baseline",
alignItems: "center",
width: "100%",
height: "auto",
minHeight: 40,
minHeight: 44,
boxSizing: "border-box",
padding: "8px 10px",
borderColor:
selectedManagementYear === yearItem.year &&
selectedManagementCategory === category.name
? "#d8e4ef"
: "transparent",
color:
selectedManagementYear === yearItem.year &&
selectedManagementCategory === category.name
? "var(--blue-700)"
: "var(--text)",
background:
selectedManagementYear === yearItem.year &&
selectedManagementCategory === category.name
? "#f8fbfe"
: "transparent",
boxShadow:
selectedManagementYear === yearItem.year &&
selectedManagementCategory === category.name
? "inset 3px 0 0 var(--blue)"
: "none",
padding: "9px 11px",
borderRadius: 12,
border: isSelected ? "1px solid #0e4f84" : "1px solid transparent",
color: isSelected ? "#0a2a43" : "var(--text)",
background: isSelected ? "linear-gradient(180deg, #eef6fd 0%, #e2f0fb 100%)" : "transparent",
boxShadow: isSelected ? "inset 4px 0 0 #0f5e9c" : "none",
}}
>
<span className="subtle" style={{ color: "inherit" }}>{category.name}</span>
<strong>{fmtEokManagement(category.amount || 0)}</strong>
<span style={{ display: "flex", alignItems: "center", gap: 8, minWidth: 0 }}>
<span
className="subtle"
style={{
color: isSelected ? "#0f5e9c" : "var(--subtle)",
fontWeight: isSelected ? 700 : 500,
}}
>
{category.name}
</span>
{isSelected && (
<span style={{ fontSize: 11, fontWeight: 700, color: "#0f5e9c", background: "#d7ebfb", borderRadius: 999, padding: "2px 7px" }}>
선택됨
</span>
)}
</span>
<strong style={{ color: isSelected ? "#083454" : "var(--text)" }}>{fmtEokManagement(category.amount || 0)}</strong>
</button>
))}
);
})}
<div
style={{
marginTop: 4,