feat: 사이드바 파일유형 필터링 수정, 아이콘 개선, 로고 변경
- 파일유형 클릭 시 activeCat 덮어쓰던 버그 수정 - 파일유형에 전체 항목 추가 (기본 선택) - Icon 컴포넌트에 file/user/log-out/edit 추가, 미등록 아이콘 폴백 처리 - DH.png 로고로 사이드바 브랜드 마크 교체 (index/admin 공통) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
+3
-2
@@ -31,7 +31,8 @@
|
|||||||
/* SIDEBAR */
|
/* SIDEBAR */
|
||||||
.sb{display:flex;flex-direction:column;padding:14px 10px;border-right:1px solid var(--border);background:var(--bg);overflow-y:auto}
|
.sb{display:flex;flex-direction:column;padding:14px 10px;border-right:1px solid var(--border);background:var(--bg);overflow-y:auto}
|
||||||
.sb-brand{display:flex;align-items:center;gap:10px;padding:6px 8px 16px;color:var(--ink)}
|
.sb-brand{display:flex;align-items:center;gap:10px;padding:6px 8px 16px;color:var(--ink)}
|
||||||
.sb-brand-mark{width:26px;height:26px;border-radius:7px;background:var(--ink);display:grid;place-items:center;color:#fff;font-weight:700;font-size:12px;flex-shrink:0}
|
.sb-brand-mark{width:32px;height:32px;border-radius:7px;background:#fff;display:grid;place-items:center;flex-shrink:0;overflow:hidden}
|
||||||
|
.sb-brand-mark img{width:100%;height:100%;object-fit:contain}
|
||||||
.sb-brand-name{font-weight:600;font-size:14px}
|
.sb-brand-name{font-weight:600;font-size:14px}
|
||||||
.sb-brand-sub{font-size:11px;color:var(--muted);font-family:var(--font-mono);margin-top:1px}
|
.sb-brand-sub{font-size:11px;color:var(--muted);font-family:var(--font-mono);margin-top:1px}
|
||||||
.sb-item{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:6px;color:var(--ink-2);cursor:default;font-size:13.5px;user-select:none}
|
.sb-item{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:6px;color:var(--ink-2);cursor:default;font-size:13.5px;user-select:none}
|
||||||
@@ -781,7 +782,7 @@ function AdminContent({ onLogout }) {
|
|||||||
<div className="app">
|
<div className="app">
|
||||||
<aside className="sb">
|
<aside className="sb">
|
||||||
<div className="sb-brand">
|
<div className="sb-brand">
|
||||||
<div className="sb-brand-mark">자</div>
|
<div className="sb-brand-mark"><img src="/DH.png" alt="로고" /></div>
|
||||||
<div>
|
<div>
|
||||||
<div className="sb-brand-name">자료실 관리자</div>
|
<div className="sb-brand-name">자료실 관리자</div>
|
||||||
<div className="sb-brand-sub">Admin Console</div>
|
<div className="sb-brand-sub">Admin Console</div>
|
||||||
|
|||||||
+17
-4
@@ -42,7 +42,8 @@
|
|||||||
/* SIDEBAR */
|
/* SIDEBAR */
|
||||||
.sb{display:flex;flex-direction:column;gap:0;padding:14px 10px;border-right:1px solid var(--border);background:var(--bg);overflow-y:auto;min-height:0}
|
.sb{display:flex;flex-direction:column;gap:0;padding:14px 10px;border-right:1px solid var(--border);background:var(--bg);overflow-y:auto;min-height:0}
|
||||||
.sb-brand{display:flex;align-items:center;gap:10px;padding:6px 8px 14px;color:var(--ink)}
|
.sb-brand{display:flex;align-items:center;gap:10px;padding:6px 8px 14px;color:var(--ink)}
|
||||||
.sb-brand-mark{width:26px;height:26px;border-radius:7px;background:var(--ink);display:grid;place-items:center;color:#fff;font-weight:700;font-size:12px;letter-spacing:-.02em;flex-shrink:0}
|
.sb-brand-mark{width:32px;height:32px;border-radius:7px;background:#fff;display:grid;place-items:center;flex-shrink:0;overflow:hidden}
|
||||||
|
.sb-brand-mark img{width:100%;height:100%;object-fit:contain}
|
||||||
.sb-brand-name{font-weight:600;font-size:15px;letter-spacing:-.01em}
|
.sb-brand-name{font-weight:600;font-size:15px;letter-spacing:-.01em}
|
||||||
.sb-brand-sub{font-size:11px;color:var(--muted);font-family:var(--font-mono);margin-top:1px}
|
.sb-brand-sub{font-size:11px;color:var(--muted);font-family:var(--font-mono);margin-top:1px}
|
||||||
.sb-search{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--surface-2);border-radius:7px;margin:2px 4px 12px;color:var(--muted)}
|
.sb-search{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--surface-2);border-radius:7px;margin:2px 4px 12px;color:var(--muted)}
|
||||||
@@ -598,10 +599,15 @@ const Icon = ({ name, size = 16, stroke = 1.75, ...rest }) => {
|
|||||||
cloud: <><path d="M17 18a4 4 0 0 0 .8-7.9 6 6 0 0 0-11.6 1A4.5 4.5 0 0 0 7 19h10Z"/></>,
|
cloud: <><path d="M17 18a4 4 0 0 0 .8-7.9 6 6 0 0 0-11.6 1A4.5 4.5 0 0 0 7 19h10Z"/></>,
|
||||||
image: <><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-5-5-9 9"/></>,
|
image: <><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-5-5-9 9"/></>,
|
||||||
video: <><rect x="3" y="6" width="13" height="12" rx="2"/><path d="m22 8-6 4 6 4V8Z"/></>,
|
video: <><rect x="3" y="6" width="13" height="12" rx="2"/><path d="m22 8-6 4 6 4V8Z"/></>,
|
||||||
|
file: <><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></>,
|
||||||
|
user: <><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></>,
|
||||||
|
"log-out": <><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/></>,
|
||||||
|
edit: <><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4Z"/></>,
|
||||||
};
|
};
|
||||||
|
const fallback = paths['folder'];
|
||||||
return (
|
return (
|
||||||
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" {...rest}>
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" {...rest}>
|
||||||
{paths[name] || null}
|
{paths[name] || fallback}
|
||||||
</svg>
|
</svg>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
@@ -691,7 +697,7 @@ const Sidebar = ({ activeFolder, setActiveFolder, activeCat, setActiveCat, categ
|
|||||||
return (
|
return (
|
||||||
<aside className={`sb scrollbar${open ? ' open' : ''}`}>
|
<aside className={`sb scrollbar${open ? ' open' : ''}`}>
|
||||||
<div className="sb-brand">
|
<div className="sb-brand">
|
||||||
<div className="sb-brand-mark" style={{ background: accent }}>자</div>
|
<div className="sb-brand-mark"><img src="/DH.png" alt="로고" /></div>
|
||||||
<div>
|
<div>
|
||||||
<div className="sb-brand-name">자료실</div>
|
<div className="sb-brand-name">자료실</div>
|
||||||
<div className="sb-brand-sub">v2.4 · 워크스페이스</div>
|
<div className="sb-brand-sub">v2.4 · 워크스페이스</div>
|
||||||
@@ -720,10 +726,17 @@ const Sidebar = ({ activeFolder, setActiveFolder, activeCat, setActiveCat, categ
|
|||||||
<span>파일 유형</span>
|
<span>파일 유형</span>
|
||||||
</div>
|
</div>
|
||||||
<div style={{ display:"flex", flexDirection:"column", gap:1 }}>
|
<div style={{ display:"flex", flexDirection:"column", gap:1 }}>
|
||||||
|
<div
|
||||||
|
className={`sb-item ${activeCat === null ? "active" : ""}`}
|
||||||
|
onClick={() => { setActiveCat(null); onClose?.(); }}>
|
||||||
|
<Icon name="folder-open" size={15} className="ico" />
|
||||||
|
<span className="lbl">전체</span>
|
||||||
|
<span className="cnt">{folders.all ?? 0}</span>
|
||||||
|
</div>
|
||||||
{categories.map(c => (
|
{categories.map(c => (
|
||||||
<div key={c.id}
|
<div key={c.id}
|
||||||
className={`sb-item ${activeCat === c.id ? "active" : ""}`}
|
className={`sb-item ${activeCat === c.id ? "active" : ""}`}
|
||||||
onClick={() => { setActiveCat(c.id); setActiveFolder("all"); onClose?.(); }}>
|
onClick={() => { setActiveCat(c.id); onClose?.(); }}>
|
||||||
<Icon name={c.icon} size={15} className="ico" />
|
<Icon name={c.icon} size={15} className="ico" />
|
||||||
<span className="lbl">{c.label}</span>
|
<span className="lbl">{c.label}</span>
|
||||||
<span className="cnt">{catStats[c.id] ?? 0}</span>
|
<span className="cnt">{catStats[c.id] ?? 0}</span>
|
||||||
|
|||||||
Reference in New Issue
Block a user