From 38953a28916ab573e80739bd594df3e656487bb0 Mon Sep 17 00:00:00 2001 From: malloc72p Date: Fri, 10 Jul 2026 21:21:46 +0900 Subject: [PATCH 1/2] =?UTF-8?q?style(blog):=20=EB=8B=A4=ED=81=AC=20?= =?UTF-8?q?=ED=83=9C=EA=B7=B8=20=EB=B1=83=EC=A7=80=20=EC=9D=B8=EC=85=8B=20?= =?UTF-8?q?=EB=A7=81=20=EB=B3=B4=EA=B0=95=20+=20hover=20=EC=9D=B8=EB=94=94?= =?UTF-8?q?=EA=B3=A0=20=EC=96=B4=ED=8F=AC=EB=8D=98=EC=8A=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 다크에서만 secondary 뱃지에 얇은 인셋 링(white/10) 추가 — 배경과 명도차가 작아 묻히던 칩을 살짝 띄움 - hover 시 링을 인디고(brand #818cf8)로 전환해 '눌러지는 링크'임을 알림 - box-shadow 기반 링이라 레이아웃 영향 0, 라이트 모드/primary 뱃지는 무변경 --- apps/blog/src/components/badge.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/apps/blog/src/components/badge.tsx b/apps/blog/src/components/badge.tsx index 5dc2fbf..926432b 100644 --- a/apps/blog/src/components/badge.tsx +++ b/apps/blog/src/components/badge.tsx @@ -30,7 +30,11 @@ export function Badge({ href, children, onClick, color = 'secondary', active }: 'whitespace-nowrap', color === 'primary' ? 'bg-brand-strong text-white' - : 'bg-gray-100 text-gray-700', + : // secondary(태그 뱃지·비활성 시리즈 칩): 다크에서만 얇은 인셋 링으로 보강한다. + // - 링은 box-shadow 기반이라 레이아웃에 영향이 없어 라이트 모드는 100% 그대로 유지된다(border는 칩이 2px 커짐). + // - dark:ring-white/10: 다크 배경(#2b2d31)과 명도차가 작아 묻히던 칩을 살짝 띄워 준다. + // - dark:hover:ring-brand(#818cf8 인디고): hover 시 링이 인디고로 물들어 '눌러지는 링크'임을 알린다(라이트 hover는 기존 brightness 유지). + 'bg-gray-100 text-gray-700 dark:ring-1 dark:ring-inset dark:ring-white/10 dark:hover:ring-brand', 'hover:brightness-95 active:brightness-90', )} > From 033c8c2355fee1a624843c1fbd8c311790420bad Mon Sep 17 00:00:00 2001 From: malloc72p Date: Fri, 10 Jul 2026 22:33:39 +0900 Subject: [PATCH 2/2] =?UTF-8?q?style(blog):=20=ED=83=9C=EA=B7=B8=20hover?= =?UTF-8?q?=20=EB=A7=81=EC=9D=84=20=EB=AC=B4=EC=B1=84=EC=83=89=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20(#135=20=EB=AC=B4=EC=B1=84=EC=83=89=20=EC=9D=BC?= =?UTF-8?q?=EA=B4=80=EC=84=B1)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - dark:hover:ring-brand(인디고) → dark:hover:ring-white/25 - 무채색 회귀 결정(#135)에 맞춰 태그 hover도 hue 제거, 어포던스는 밝기로 유지 --- apps/blog/src/components/badge.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/blog/src/components/badge.tsx b/apps/blog/src/components/badge.tsx index 926432b..840cc6e 100644 --- a/apps/blog/src/components/badge.tsx +++ b/apps/blog/src/components/badge.tsx @@ -33,8 +33,8 @@ export function Badge({ href, children, onClick, color = 'secondary', active }: : // secondary(태그 뱃지·비활성 시리즈 칩): 다크에서만 얇은 인셋 링으로 보강한다. // - 링은 box-shadow 기반이라 레이아웃에 영향이 없어 라이트 모드는 100% 그대로 유지된다(border는 칩이 2px 커짐). // - dark:ring-white/10: 다크 배경(#2b2d31)과 명도차가 작아 묻히던 칩을 살짝 띄워 준다. - // - dark:hover:ring-brand(#818cf8 인디고): hover 시 링이 인디고로 물들어 '눌러지는 링크'임을 알린다(라이트 hover는 기존 brightness 유지). - 'bg-gray-100 text-gray-700 dark:ring-1 dark:ring-inset dark:ring-white/10 dark:hover:ring-brand', + // - dark:hover:ring-white/25: hover 시 링을 더 밝게 해 '눌러지는 링크'임을 알린다(무채색 시스템 유지 — 인디고 미사용, 라이트 hover는 기존 brightness). + 'bg-gray-100 text-gray-700 dark:ring-1 dark:ring-inset dark:ring-white/10 dark:hover:ring-white/25', 'hover:brightness-95 active:brightness-90', )} >