From df0bb7d14bf8c0fcb7b3903d03d763b1a186b3aa Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Thu, 16 Apr 2026 18:49:52 +0900
Subject: [PATCH] =?UTF-8?q?=ED=95=B4=EB=B0=A9=20=EA=B3=84=EC=82=B0?=
 =?UTF-8?q?=EA=B8=B0/=EA=B4=80=EB=A6=AC=EC=9E=90=20=ED=8F=BC=20=EC=86=8C?=
 =?UTF-8?q?=EC=86=8C=ED=95=9C=20UI=20=EC=A1=B0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 해방: 현재 진행 상태의 흔적 입력 우측에 / N 필요량 표시 (관리자 경로 입력 스타일, text-base)
- 해방: 날짜/퀘스트/흔적 3열을 1:1:1 균등 비율로 정렬
- 주차별 계산 헤더 분모를 6500 고정 → 현재 진행 기준 남은 흔적
- 보스/메뉴 관리자 폼 mx-auto 중앙 정렬

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/features/admin/AdminMenuForm.jsx |  2 +-
 .../features/boss-crystal/admin/BossForm.jsx  |  2 +-
 .../src/features/liberation/Liberation.jsx    | 20 ++++++++++++-------
 .../liberation/components/WeeklyDefault.jsx   |  4 ++--
 4 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/frontend/src/features/admin/AdminMenuForm.jsx b/frontend/src/features/admin/AdminMenuForm.jsx
index 0ad3012..4ba4e9f 100644
--- a/frontend/src/features/admin/AdminMenuForm.jsx
+++ b/frontend/src/features/admin/AdminMenuForm.jsx
@@ -119,7 +119,7 @@ export default function AdminMenuForm() {
   })
 
   return (
-    <div className="space-y-6 max-w-2xl">
+    <div className="space-y-6 max-w-2xl mx-auto">
       <div>
         <h2 className="text-lg font-semibold">{isEdit ? '메뉴 항목 편집' : '메뉴 항목 추가'}</h2>
         <p className="text-sm text-gray-500 mt-0.5">홈 화면에 표시되는 카드의 정보를 설정합니다</p>
diff --git a/frontend/src/features/boss-crystal/admin/BossForm.jsx b/frontend/src/features/boss-crystal/admin/BossForm.jsx
index 8a94b74..e9a2e4f 100644
--- a/frontend/src/features/boss-crystal/admin/BossForm.jsx
+++ b/frontend/src/features/boss-crystal/admin/BossForm.jsx
@@ -174,7 +174,7 @@ export default function BossForm() {
   const displayImage = imagePreview || existingImageUrl
 
   return (
-    <div className="space-y-6 max-w-2xl">
+    <div className="space-y-6 max-w-2xl mx-auto">
       <div>
         <h2 className="text-lg font-semibold">{isEdit ? '보스 편집' : '보스 추가'}</h2>
         <p className="text-sm text-gray-500 mt-0.5">보스 이름과 난이도별 결정 정보를 입력합니다</p>
diff --git a/frontend/src/features/liberation/Liberation.jsx b/frontend/src/features/liberation/Liberation.jsx
index eba1c99..66dd762 100644
--- a/frontend/src/features/liberation/Liberation.jsx
+++ b/frontend/src/features/liberation/Liberation.jsx
@@ -370,7 +370,7 @@ export default function Liberation() {
       <div className="max-w-3xl mx-auto rounded-2xl border border-white/10 bg-gray-900/60 p-6 space-y-4">
         <div className="text-lg font-semibold text-emerald-300">현재 진행 상태</div>
 
-        <div className="grid gap-3" style={{ gridTemplateColumns: '1.2fr 1.2fr 0.7fr' }}>
+        <div className="grid gap-3 grid-cols-3">
           <div className="space-y-1.5">
             <label className="block text-xs text-gray-400">시작 날짜</label>
             <DatePicker
@@ -389,12 +389,17 @@ export default function Liberation() {
 
           <div className="space-y-1.5">
             <label className="block text-xs text-gray-400">현재 흔적</label>
-            <PointsInput
-              value={state.currentPoints}
-              max={3000}
-              onChange={(n) => setState((prev) => ({ ...prev, currentPoints: n }))}
-              className="w-full h-12 rounded-lg border border-white/10 bg-gray-950 px-3 text-base text-right tabular-nums outline-none focus:border-emerald-500/50 hover:border-white/20 transition"
-            />
+            <div className="flex items-stretch rounded-lg border border-white/10 bg-gray-950 transition focus-within:border-emerald-500/50 hover:border-white/20">
+              <PointsInput
+                value={state.currentPoints}
+                max={3000}
+                onChange={(n) => setState((prev) => ({ ...prev, currentPoints: n }))}
+                className="flex-1 min-w-0 bg-transparent px-3 h-12 text-base text-right tabular-nums outline-none"
+              />
+              <span className="flex items-center px-3 text-base text-gray-500 border-l border-white/10 select-none tabular-nums">
+                / {(GENESIS_CHAPTERS[state.startChapter]?.required ?? 0).toLocaleString()}
+              </span>
+            </div>
           </div>
         </div>
       </div>
@@ -404,6 +409,7 @@ export default function Liberation() {
         onChange={(w) => setState((prev) => ({ ...prev, weekly: w }))}
         totalWeekly={headerWeekly}
         totalMonthly={headerMonthly}
+        remaining={remaining}
         mode={calcMode}
         startDate={state.startDate}
         weeks={state.schedulerWeeks}
diff --git a/frontend/src/features/liberation/components/WeeklyDefault.jsx b/frontend/src/features/liberation/components/WeeklyDefault.jsx
index bc368ff..71e279d 100644
--- a/frontend/src/features/liberation/components/WeeklyDefault.jsx
+++ b/frontend/src/features/liberation/components/WeeklyDefault.jsx
@@ -69,7 +69,7 @@ export function BossRow({ boss, sel, onChange, monthly = false, showDone = true
   )
 }
 
-export default function WeeklyDefault({ weekly, onChange, totalWeekly, totalMonthly, mode = 'simple', startDate, weeks, onChangeWeeks }) {
+export default function WeeklyDefault({ weekly, onChange, totalWeekly, totalMonthly, remaining, mode = 'simple', startDate, weeks, onChangeWeeks }) {
   const updateBoss = (key, patch) => {
     onChange({ ...weekly, bosses: { ...weekly.bosses, [key]: { ...weekly.bosses[key], ...patch } } })
   }
@@ -88,7 +88,7 @@ export default function WeeklyDefault({ weekly, onChange, totalWeekly, totalMont
               <span className="text-gray-500 mx-1">+</span>
               <span className="text-amber-300 font-semibold">{totalMonthly}</span>
               <span className="text-gray-500 mx-1">/</span>
-              <span className="text-gray-300 font-semibold">6500</span>
+              <span className="text-gray-300 font-semibold">{(remaining ?? 0).toLocaleString()}</span>
             </>
           ) : (
             <span className="text-emerald-300 font-semibold">+{totalWeekly + totalMonthly}</span>