From eb3c79f369233bd9e46d42186c02615708db35d5 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Tue, 21 Jul 2026 14:05:43 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=ED=96=A5=EC=83=81?=
 =?UTF-8?q?=EB=90=9C=20=EC=B9=B4=EB=93=9C=20=EB=A7=81=ED=81=AC=20=ED=81=B4?=
 =?UTF-8?q?=EB=A6=AD=20=EC=98=81=EC=97=AD=20=EC=A7=80=EC=9B=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

.project-grid 영역의 카드 컨포넌트들에서 텍스트 링크에만 의존하던 클릭 영역을
CSS `::after`와 `inset: 0`을 사용하여 카드 전체로 확장했습니다. 이를 통해 사용자가
정확한 텍스트를 클릭하지 않아도 편하게 상호작용할 수 있게 하여 접근성과 사용성을 크게 개선했습니다.
---
 .Jules/palette.md |  4 ++++
 styles.css        | 18 ++++++++++++++++++
 2 files changed, 22 insertions(+)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index 7fb6a23..f15bc8c 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -17,3 +17,7 @@
 ## 2024-07-10 - prefers-reduced-motion 지원 추가
 **Learning:** 시스템 레벨에서 애니메이션 줄이기(prefers-reduced-motion)를 설정한 사용자를 위해 과도한 애니메이션과 부드러운 스크롤을 비활성화하는 것이 필요합니다. 이때 `0s` 대신 `0.01ms`를 사용하여 `transitionend`와 같은 브라우저 이벤트가 정상적으로 발생하도록 해야 자바스크립트 콜백이 멈추는(hanging) 문제를 방지할 수 있습니다.
 **Action:** 항상 `styles.css` 하단에 `prefers-reduced-motion: reduce` 미디어 쿼리를 추가하여 모든 요소의 `animation-duration`과 `transition-duration`을 `0.01ms`로 설정하고 `scroll-behavior: auto`를 적용합니다.
+
+## 2024-05-30 - 카드 컴포넌트의 클릭 가능 영역 확장
+**Learning:** 그리드나 리스트 형식의 카드 컴포넌트에서 링크 텍스트에만 클릭 이벤트를 바인딩하면, 사용자가 정확하게 텍스트를 겨냥하여 클릭해야 하므로 사용성이 저하됨을 확인했습니다.
+**Action:** CSS 가상 요소 `::after`와 `inset: 0` 속성을 활용해 텍스트 링크의 클릭 가능 영역을 카드(article) 전체로 확장하여, 사용자가 카드 영역 어디든 편하게 클릭할 수 있도록 접근성과 사용성을 크게 개선합니다.
diff --git a/styles.css b/styles.css
index 02cfeb6..5cfab2c 100644
--- a/styles.css
+++ b/styles.css
@@ -505,12 +505,30 @@ h1 {
   line-height: 1.16;
 }
 
+.project-grid article {
+  position: relative;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.project-grid article:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow);
+  z-index: 1;
+}
+
 .project-grid h3 a {
   color: inherit;
   text-decoration-thickness: 1px;
   text-underline-offset: 5px;
 }
 
+.project-grid h3 a::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+}
+
 .project-grid h3 a:hover {
   color: var(--ink);
 }