From 21253327a0720f10aed4e8ffb725d96ae10c4f3e Mon Sep 17 00:00:00 2001
From: okorion <ok.or.orion@gmail.com>
Date: Mon, 29 Jun 2026 17:27:03 +0900
Subject: [PATCH] =?UTF-8?q?[style]=20=EB=B0=98=EC=9D=91=ED=98=95=20?=
 =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=A0=95=EB=8F=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 변경 유형: style
- 주된 영역: src/
- 변경 의도: src/의 시각 표현, 레이아웃, 접근성을 더 읽기 좋게 다듬습니다.

Co-authored-by: Codex
---
 src/App.tsx   | 29 +++++++++++++++++++++--------
 src/index.css | 22 ++++++++++++++++++++--
 2 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 102093e..d915e63 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -165,14 +165,27 @@ export default function App() {
             </div>
           </dl>
           <ul className="bucket-list" aria-label={`${selectedPeriod.metricLabel} 활동 유형별 분포`}>
-            {selectedPeriod.buckets.map((bucket) => (
-              <li key={bucket.label}>
-                <span className="bucket-swatch" style={{ backgroundColor: bucket.color }} aria-hidden="true" />
-                <span className="bucket-label">{bucket.displayLabel}</span>
-                <strong>{bucket.count}</strong>
-                <small>{Math.round((bucket.count / totalActivityCount) * 100)}%</small>
-              </li>
-            ))}
+            {selectedPeriod.buckets.map((bucket) => {
+              const share = Math.round((bucket.count / totalActivityCount) * 100)
+
+              return (
+                <li key={bucket.label}>
+                  <span className="bucket-swatch" style={{ backgroundColor: bucket.color }} aria-hidden="true" />
+                  <span className="bucket-label">{bucket.displayLabel}</span>
+                  <strong>{bucket.count}</strong>
+                  <small>{share}%</small>
+                  <span className="bucket-share" aria-hidden="true">
+                    <span
+                      style={{
+                        width: `${share}%`,
+                        color: bucket.color,
+                        backgroundColor: bucket.color,
+                      }}
+                    />
+                  </span>
+                </li>
+              )
+            })}
           </ul>
         </div>
         <div className="galaxy" aria-label={`${selectedPeriod.metricLabel} GitHub 활동 3D 지도`}>
diff --git a/src/index.css b/src/index.css
index c533f50..3e713e3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -157,10 +157,11 @@ h1 {
 .bucket-list li {
   display: grid;
   grid-template-columns: 10px minmax(0, 1fr) auto auto;
+  grid-template-rows: auto 5px;
   gap: 8px;
   align-items: center;
-  min-height: 42px;
-  padding: 10px 12px;
+  min-height: 54px;
+  padding: 10px 12px 12px;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-frame);
   background: rgb(255 255 255 / 68%);
@@ -192,6 +193,23 @@ h1 {
   font-variant-numeric: tabular-nums;
 }
 
+.bucket-share {
+  grid-column: 2 / -1;
+  width: 100%;
+  height: 5px;
+  overflow: hidden;
+  border-radius: var(--radius-pill);
+  background: rgb(17 70 105 / 8%);
+}
+
+.bucket-share span {
+  display: block;
+  height: 100%;
+  min-width: 5px;
+  border-radius: inherit;
+  box-shadow: 0 0 10px currentColor;
+}
+
 .orbit-label {
   display: block;
   min-width: max-content;