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

97
PTC/management_dashboard_preview.html
View File

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