From b7a1c651d614ffb203fbb985dcb98870a90756f3 Mon Sep 17 00:00:00 2001
From: okorion <ok.or.orion@gmail.com>
Date: Mon, 3 Aug 2026 13:01:17 +0900
Subject: [PATCH] =?UTF-8?q?[feat]=20=EA=B8=B0=EA=B0=84=EB=B3=84=20?=
 =?UTF-8?q?=ED=99=9C=EB=8F=99=20=EC=9D=B8=EC=82=AC=EC=9D=B4=ED=8A=B8=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 변경 유형: feat
- 주된 영역: src/
- 변경 의도: src/에 작고 검증 가능한 사용자 기능 개선을 추가합니다.

Co-authored-by: Codex
---
 src/App.tsx   | 32 +++++++++++++++++++++++++-------
 src/index.css | 44 +++++++++++++++++++++++++++++++-------------
 2 files changed, 56 insertions(+), 20 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 750d59a..07350ea 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -25,11 +25,19 @@ export default function App() {
   const [isRotating, setIsRotating] = useState(() => !prefersReducedMotion())
   const [resetRevision, setResetRevision] = useState(0)
   const selectedPeriod = getPeriodOption(mode)
+  const comparisonPeriod = getPeriodOption(mode === 'week' ? 'month' : 'week')
   const allActivityCount = sumActivityCount(selectedPeriod.buckets)
+  const comparisonActivityCount = sumActivityCount(comparisonPeriod.buckets)
   const visibleBuckets = selectedPeriod.buckets.filter((bucket) => visibleKinds.has(bucket.kind))
   const visibleActivityCount = sumActivityCount(visibleBuckets)
   const topBucket = getTopBucket(visibleBuckets)
   const selectedBucket = selectedPeriod.buckets.find((bucket) => bucket.kind === selectedKind) ?? topBucket
+  const comparisonBucket =
+    comparisonPeriod.buckets.find((bucket) => bucket.kind === selectedBucket.kind) ?? comparisonPeriod.buckets[0]
+  const selectedShare = getActivityShare(selectedBucket, allActivityCount)
+  const comparisonShare = getActivityShare(comparisonBucket, comparisonActivityCount)
+  const shareDelta = selectedShare - comparisonShare
+  const shareDeltaLabel = shareDelta === 0 ? '변화 없음' : `${shareDelta > 0 ? '+' : ''}${shareDelta}%p`
   const listedBuckets = [...selectedPeriod.buckets].sort((left, right) =>
     listOrder === 'count' ? right.count - left.count : 0,
   )
@@ -205,13 +213,23 @@ export default function App() {
               </button>
             </div>
             <p>{selectedBucket.description}</p>
-            <div className="share-meter" aria-label={`전체 활동의 ${getActivityShare(selectedBucket, allActivityCount)}%`}>
-              <span
-                style={{
-                  width: `${getActivityShare(selectedBucket, allActivityCount)}%`,
-                  backgroundColor: selectedBucket.color,
-                }}
-              />
+            <div
+              className="period-comparison"
+              role="group"
+              aria-label={`${selectedBucket.shortLabel} 활동 비중 비교. ${selectedPeriod.metricLabel} ${selectedShare}%, ${comparisonPeriod.metricLabel} ${comparisonShare}%, ${shareDeltaLabel}.`}
+            >
+              <span>
+                {selectedPeriod.metricLabel} <strong>{selectedShare}%</strong>
+              </span>
+              <span className="comparison-divider" aria-hidden="true">
+                ·
+              </span>
+              <span>
+                {comparisonPeriod.metricLabel} <strong>{comparisonShare}%</strong>
+              </span>
+              <strong className="comparison-delta">
+                {comparisonPeriod.metricLabel} 대비 {shareDeltaLabel}
+              </strong>
             </div>
           </section>
         </aside>
diff --git a/src/index.css b/src/index.css
index aa62492..4205b65 100644
--- a/src/index.css
+++ b/src/index.css
@@ -363,8 +363,12 @@ input:focus-visible {
   cursor: not-allowed;
 }
 
+.inspector {
+  padding-block: 18px;
+}
+
 .inspector p {
-  margin: 12px 0 0;
+  margin: 8px 0 0;
   color: var(--color-muted);
   font-size: 13px;
   line-height: 1.55;
@@ -374,7 +378,7 @@ input:focus-visible {
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  margin-top: 12px;
+  margin-top: 8px;
   border: 1px solid var(--color-border);
   border-radius: 6px;
   padding: 3px;
@@ -407,19 +411,33 @@ input:focus-visible {
   font-weight: 800;
 }
 
-.share-meter {
-  height: 5px;
-  margin-top: 14px;
-  overflow: hidden;
-  border-radius: var(--radius-pill);
-  background: color-mix(in srgb, var(--color-text) 8%, transparent);
+.period-comparison {
+  min-height: 30px;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px 7px;
+  margin-top: 8px;
+  padding: 5px 8px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-frame);
+  color: var(--color-muted);
+  background: var(--color-bg);
+  font-size: 10px;
 }
 
-.share-meter span {
-  display: block;
-  height: 100%;
-  min-width: 5px;
-  border-radius: inherit;
+.period-comparison strong {
+  color: var(--color-text);
+  font-variant-numeric: tabular-nums;
+}
+
+.comparison-divider {
+  color: var(--color-subtle);
+}
+
+.comparison-delta {
+  margin-left: auto;
+  font-size: 10px;
 }
 
 .galaxy-stage {