playground/ai-dev-portal
121
3
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(css): 단일 style.css 를 역할별 파일로 분할 + Pretendard 로컬 호스팅

Browse Source 
public/css/{tokens,base,layout,components,modal}.css 로 분리하고 _header 에서 다중 link 로드.
tokens.css 에 Pretendard @font-face(public/fonts/PretendardVariable.woff2, 없으면 시스템 폰트 폴백).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
이혜민(2620227)
2026-06-29 17:53:36 +09:00
parent 272b315ab0
commit bc1327a6dc
7 changed files with 417 additions and 400 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
public/css/components.css Normal file
View File

@@ -0,0 +1,138 @@
/* 콘텐츠 컴포넌트 — 개발 도구 · 내 프로젝트 · 공유 피드 카드. */
/* ===================== ① 개발 도구 ===================== */
.tools-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tool-card {
position: relative; text-align: left; background: var(--card); border: 1px solid var(--border-soft);
border-radius: 12px; padding: 16px; cursor: pointer; font-family: inherit; display: block;
transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease;
}
.tool-card:hover { border-color: var(--link); box-shadow: 0 6px 18px var(--shadow-hover); transform: translateY(-3px); }
.tool-card.admin { border-color: var(--admin-bd); }
.tool-icon {
width: 44px; height: 44px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
font-size: 24px; background: var(--tile); border: 1px solid var(--tile-bd);
}
.tool-card.admin .tool-icon { background: var(--admin-bg); border-color: var(--admin-bd); }
.tool-name { display: block; margin-top: 14px; font-size: 14.5px; font-weight: 700; color: var(--fg); }
.tool-desc { display: block; margin-top: 3px; font-size: 12.5px; color: var(--fg2); line-height: 1.45; }
.sso-badge {
position: absolute; top: 13px; right: 13px; font-size: 10px; font-weight: 700; letter-spacing: .06em;
color: var(--accent-fg); background: var(--accent-bg); border: 1px solid var(--accent-bd); border-radius: 4px; padding: 2px 6px;
}
.tool-admin-badge {
display: inline-flex; align-items: center; gap: 5px; margin-top: 11px; font-size: 11px; font-weight: 600;
color: var(--admin-fg); background: var(--admin-bg); border: 1px solid var(--admin-bd); border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}
/* ===================== ② 내 프로젝트 ===================== */
.myproj { position: relative; background: var(--panel); border: 1px solid var(--border-soft); border-radius: 14px; padding: 22px 22px 24px; }
.myproj-accent { position: absolute; left: 0; top: 18px; bottom: 18px; width: 4px; border-radius: 0 4px 4px 0; background: var(--link); }
.myproj-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding-left: 8px; flex-wrap: wrap; }
.myproj-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filter-tabs { display: inline-flex; align-items: center; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 2px; gap: 2px; }
.filter-tab {
display: inline-flex; align-items: center; gap: 5px; background: transparent; border: 0; border-radius: 6px; padding: 5px 11px;
cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--fg2); white-space: nowrap;
transition: background .14s ease, color .14s ease;
}
.filter-tab.on { background: var(--panel); color: var(--fg); box-shadow: inset 0 0 0 1px var(--border); }
.new-proj-btn {
display: inline-flex; align-items: center; gap: 6px; background: var(--success);
border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent); border-radius: 8px; padding: 7px 13px;
cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; transition: background .14s ease;
}
.new-proj-btn:hover { background: var(--success-hover); }
.myproj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding-left: 8px; }
/* 프로젝트 카드 (내 프로젝트 / 피드 공용 베이스) */
.pcard {
background: var(--card); border: 1px solid var(--border-soft); border-radius: 12px; padding: 15px 16px 14px;
cursor: pointer; transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease; display: flex; flex-direction: column;
}
.pcard:hover { border-color: var(--link); box-shadow: 0 6px 18px var(--shadow); transform: translateY(-2px); }
.pcard.private { background: var(--bg); border: 1.5px dashed var(--border); }
.pcard-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pcard-titlewrap { display: flex; align-items: center; gap: 7px; min-width: 0; }
.pcard-repoico { display: inline-flex; color: var(--fg2); flex: 0 0 auto; }
.pcard-title { font-size: 14px; font-weight: 700; color: var(--link); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard-desc { margin-top: 8px; font-size: 12.5px; color: var(--fg2); line-height: 1.5; flex: 1; }
.pcard-tags { margin-top: 11px; display: flex; flex-wrap: wrap; gap: 6px; }
.pcard-foot { margin-top: 13px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pcard-stats { display: flex; align-items: center; gap: 13px; font-size: 12px; color: var(--fg2); }
.pcard-stats .stat { display: inline-flex; align-items: center; gap: 4px; }
.lang-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.ico-heart { display: inline-flex; color: var(--heart); }
.ico-star { display: inline-flex; color: var(--attn); }
.ico-comment { display: inline-flex; color: var(--fg2); }
.vis-badge {
display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; font-size: 11px; font-weight: 600;
border-radius: 999px; padding: 1px 8px 1px 7px; white-space: nowrap;
}
.vis-badge.public { color: var(--success-fg); background: var(--success-bg); border: 1px solid var(--success-bd); }
.vis-badge.private { color: var(--fg2); background: var(--panel); border: 1px solid var(--border); }
.toggle-share-btn { background: transparent; border: 0; padding: 0; cursor: pointer; font-family: inherit; font-size: 11.5px; font-weight: 600; color: var(--fg3); white-space: nowrap; }
.toggle-share-btn:hover { color: var(--fg); }
.private-note { font-size: 11.5px; color: var(--fg3); }
.share-mini-btn {
display: inline-flex; align-items: center; gap: 5px; background: var(--success);
border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent); border-radius: 7px; padding: 4px 10px;
cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 700; color: #fff; white-space: nowrap; transition: background .14s ease;
}
.share-mini-btn:hover { background: var(--success-hover); }
.add-card {
background: transparent; border: 1.5px dashed var(--border); border-radius: 12px; padding: 16px; cursor: pointer; font-family: inherit;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--fg2); min-height: 158px; width: 100%;
transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.add-card:hover { border-color: var(--success); color: var(--success); background: var(--card); }
.add-card-plus { width: 38px; height: 38px; border-radius: 50%; background: var(--success-bg); border: 1px solid var(--success-bd); display: inline-flex; align-items: center; justify-content: center; color: var(--success); }
.add-card-title { font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.add-card-sub { font-size: 11.5px; text-align: center; line-height: 1.4; }
.empty { grid-column: 1 / -1; text-align: center; padding: 30px; color: var(--fg2); font-size: 13px; border: 1px dashed var(--border); border-radius: 12px; }
/* ===================== ③ 공유 피드 ===================== */
.feed-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--border-soft); }
.feed-head .section-titlewrap { padding-bottom: 14px; }
.feed-head-right { display: flex; align-items: flex-end; gap: 14px; }
.feed-star-btn {
display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--btn-bd); border-radius: 7px;
padding: 6px 12px; margin-bottom: 8px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--fg2); white-space: nowrap;
transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.feed-star-btn:hover { border-color: var(--attn-bd); color: var(--attn-fg); }
.feed-star-btn.on { background: var(--attn-bg); border-color: var(--attn-bd); color: var(--attn-fg); }
.feed-star-btn .ico { display: inline-flex; }
.sort-tabs { display: flex; gap: 2px; }
.sort-tab { background: transparent; border: 0; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; padding: 8px 14px 14px; color: var(--fg2); transition: color .14s ease; }
.sort-tab.on { color: var(--fg); box-shadow: inset 0 -2px 0 var(--tab-underline); }
.feed-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.fcard { background: var(--card); border: 1px solid var(--border-soft); border-radius: 12px; padding: 18px; cursor: pointer; transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease; display: flex; flex-direction: column; }
.fcard:hover { border-color: var(--link); box-shadow: 0 6px 18px var(--shadow); transform: translateY(-2px); }
.fcard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fcard-titlewrap { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fcard-title { font-size: 15px; font-weight: 700; color: var(--link); line-height: 1.3; }
.react-btns { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.react-btn {
display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; background: var(--btn-bg); border: 1px solid var(--btn-bd);
border-radius: 7px; padding: 4px 9px; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--fg);
transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.react-btn .count { font-variant-numeric: tabular-nums; }
.react-btn.heart.on { background: var(--heart-bg); border-color: var(--heart-bd); color: var(--heart-fg); }
.react-btn.star.on { background: var(--attn-bg); border-color: var(--attn-bd); color: var(--attn-fg); }
/* 채움(on) / 외곽선(off) 아이콘 토글 — JS 가 .on 클래스만 바꾸면 됨 */
.react-btn .ico, .modal-action .ico { display: inline-flex; }
.react-btn .ico-on, .modal-action .ico-on { display: none; }
.react-btn.on .ico-on, .modal-action.on .ico-on { display: inline-flex; }
.react-btn.on .ico-off, .modal-action.on .ico-off { display: none; }
.fcard-desc { margin-top: 8px; font-size: 13px; color: var(--fg2); line-height: 1.55; }
.fcard-tags { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.fcard-foot { margin-top: 15px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.fcard-author { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fcard-author .sabun { font-size: 12.5px; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }
.fcard-author .date { font-size: 11.5px; color: var(--fg3); }
.fcard-meta { display: flex; align-items: center; gap: 13px; font-size: 12px; color: var(--fg2); }
.fcard-meta .stat { display: inline-flex; align-items: center; gap: 5px; }
.bara-link { display: inline-flex; align-items: center; gap: 4px; background: transparent; border: 0; padding: 0; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--link); white-space: nowrap; }