From 0c6ccecc90b9ca55ab2f0a8af52466153314f379 Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Tue, 14 Apr 2026 00:26:44 +0900
Subject: [PATCH] =?UTF-8?q?=ED=95=B4=EB=B0=A9=20=EC=A7=84=ED=96=89?=
 =?UTF-8?q?=EB=8F=84=20UI=20=EC=84=B8=EB=B6=80=20=EC=A1=B0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 라벨/밑줄과 세그먼트 바 간격 조정
- 1차/2차 밑줄 사이 간격을 세그먼트 바와 동일하게 맞춤
- 세그먼트 진행도 색상을 인라인 스타일로 변경 (Tailwind 컴파일 이슈 회피)
- 예상 해방 날짜 표시 위치/스타일 다듬기

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../liberation/components/ProgressBar.jsx     | 35 +++++++++----------
 1 file changed, 16 insertions(+), 19 deletions(-)

diff --git a/frontend/src/features/liberation/components/ProgressBar.jsx b/frontend/src/features/liberation/components/ProgressBar.jsx
index 3a8d6a0..7954d73 100644
--- a/frontend/src/features/liberation/components/ProgressBar.jsx
+++ b/frontend/src/features/liberation/components/ProgressBar.jsx
@@ -22,14 +22,12 @@ export default function ProgressBar({ totalAccumulated, completionDate }) {
 
   const renderSegment = ({ chapter, status, current }) => {
     const pct = (current / chapter.required) * 100
+    const bg = status === 'done' ? '#10b981' : status === 'active' ? '#fbbf24' : 'transparent'
     return (
       <div key={`seg-${chapter.idx}`} className="flex-1 h-2 rounded bg-gray-900 overflow-hidden">
         <div
-          className={`h-full transition-all ${
-            status === 'done' ? 'bg-emerald-500' :
-            status === 'active' ? 'bg-amber-400' : 'bg-transparent'
-          }`}
-          style={{ width: `${pct}%` }}
+          className="h-full transition-all"
+          style={{ width: `${pct}%`, background: bg }}
         />
       </div>
     )
@@ -62,24 +60,23 @@ export default function ProgressBar({ totalAccumulated, completionDate }) {
       {/* 섹션 제목 */}
       <div className="text-lg font-semibold text-emerald-300">퀘스트 진행 상황</div>
 
-      {/* 1차 / 2차 라벨 */}
-      <div className="flex items-center gap-3">
-        <div className="flex-1 flex flex-col items-center gap-2">
-          <span className="text-base font-bold" style={{ color: '#5eead4' }}>1차 해방</span>
-          <div style={{ width: '100%', height: 3, background: 'rgba(94, 234, 212, 0.5)', borderRadius: 999 }} />
+      {/* 1차 / 2차 라벨 + 세그먼트 바 */}
+      <div className="space-y-3">
+        <div className="flex items-center gap-1">
+          <div className="flex-1 flex flex-col items-center gap-2">
+            <span className="text-base font-bold" style={{ color: '#5eead4' }}>1차 해방</span>
+            <div style={{ width: '100%', height: 3, background: 'rgba(94, 234, 212, 0.5)', borderRadius: 999 }} />
+          </div>
+          <div className="flex-1 flex flex-col items-center gap-2">
+            <span className="text-base font-bold" style={{ color: '#fda4af' }}>2차 해방</span>
+            <div style={{ width: '100%', height: 3, background: 'rgba(253, 164, 175, 0.5)', borderRadius: 999 }} />
+          </div>
         </div>
-        <div className="w-2" />
-        <div className="flex-1 flex flex-col items-center gap-2">
-          <span className="text-base font-bold" style={{ color: '#fda4af' }}>2차 해방</span>
-          <div style={{ width: '100%', height: 3, background: 'rgba(253, 164, 175, 0.5)', borderRadius: 999 }} />
+        <div className="flex gap-1">
+          {chapterStates.map(renderSegment)}
         </div>
       </div>
 
-      {/* 세그먼트 바 (붙어있음) */}
-      <div className="flex gap-1">
-        {chapterStates.map(renderSegment)}
-      </div>
-
       {/* 초상화 (붙어있음) */}
       <div className="flex gap-1">
         {chapterStates.map(renderPortrait)}