feat: #68 복구안 비교 및 미리보기 화면 구현

[borissal1207]

배경

하루 종료(#65) 후 계획이 위험하거나 불가능해졌을 때 보여주는 화면이다.
PLAN B의 핵심 가치인 "실패 이후의 재계산"이 사용자에게 드러나는 지점으로,
두 복구안을 비교하고 승인해야만 미래 계획이 바뀐다.

구현 대상

• planner/templates/planner/recovery_compare.html — 복구안 비교
• planner/templates/planner/recovery_result.html — 미리보기 및 적용
• planner/templates/planner/includes/recovery_card.html — 복구안 카드 (신규)
• static/css/planner.css, static/css/tokens.css — 스타일/유틸리티 클래스 추가
• static/js/planner.js — 복구안 선택 토글
• templates/includes/icons.html — 아이콘 추가

화면 구성

1. 복구안 비교
   • 왜 복구가 필요한지 — 못한 분량, 속도 보정, 남은 가능시간
   • 복구안 2개 — 분량 유지형(maintain_volume) / 핵심 집중형(core_focus), 같은 축의 Fit Bar로 비교
   • 제외되는 작업 수와 목록(항상 펼쳐진 상태로 노출), 추가로 필요한 시간
   • 하단 고정 바 — 선택한 안 표시 + 적용 버튼
2. 미리보기 및 적용
   • 날짜별 공부량 변화 (지금 계획 vs 복구 후, before만 가능시간 초과 표시)
   • 유지 / 이동 / 제외 작업 수
   • "적용해도 나중에 다시 바꿀 수 있습니다" 안내
   • 적용 버튼

리뷰 반영 (셀프 체크 중 발견)

• #i-clock, .sr-only, .ico-lg 클래스/심볼이 참조만 되고 정의가 없던 것 추가 (.ico-lg는 기존 task_row.html도 쓰고 있던 걸 이번에 같이 고침)
• 하단 바의 기본 선택 표시가 plans.1로 인덱스 하드코딩되어 있던 것 → {% with selected_plan=plans|last %}로 루프의 forloop.last 기준과 일치시킴 (분량 유지형/핵심 집중형 중 하나가 용량 부족으로 생성되지 않아 plans가 1개만 내려오는 케이스가 실제로 존재해서, 인덱스 하드코딩 시 빈 텍스트가 뜰 수 있었음)
• recovery_compare.html 상단에 남아있던 디자인 툴 복붙 잔재 텍스트 제거

주요 원칙 (기준안)

• 복구안은 생성 즉시 적용하지 않고, 사용자 승인 후에만 미래 계획을 변경한다
• 제외되는 작업을 명확히 보여주고, 승인 없이 제외하지 않는다
• 복구 유형은 2개다 (깊이 조절형은 MVP 제외)

이번 PR 범위 밖

• View/URL 연결 (BE 담당) — 더미 데이터로 마크업만 진행

확인 기준

• 복구안 2개가 같은 눈금의 Fit Bar로 렌더
• 제외되는 작업 목록이 접히지 않고 보임
• 선택한 복구안이 하단 바에 표시됨 (복구안이 1개만 내려오는 경우도 포함)
• 미리보기에서 날짜별 변화가 before/after로 비교됨
• 320 / 375 / 767 / 1440 레이아웃 정상

Close #68

[wngjs8114]

확인했습니다! recovery_card.html에 plan context 필드를 comment로 문서화해주신 게 특히 좋았어요. View 만들 때 계약으로 바로 참고할 수 있을 것 같습니다. 인덱스 하드코딩이나 누락된 아이콘/클래스를 셀프 체크해주신 부분도 확인했습니다.

병합 전에 네 가지만 확인 부탁드려요.

1. messages 루프가 빠졌습니다

recovery_compare.html, recovery_result.html 둘 다 {% block body %}를 통째로 재정의하면서 base.html의 messages 루프가 빠집니다.

복구안 적용 시 가용시간 변경 등으로 적용에 실패하면 View에서 messages.error()로 안내할 예정이라, 두 화면 모두 messages 출력 영역을 추가 부탁드립니다.

{% for message in messages %}
  <div class="banner">{{ message }}</div>
{% endfor %}

2. RecoveryPlan PK를 전달할 수 있어야 합니다

현재 recovery_card.html의 radio value는 plan.recovery_type이고, recovery_result.html의 적용 버튼에도 plan 식별자가 없습니다.

하지만 실제 적용은 특정 RecoveryPlan을 대상으로 해야 하고, maintain_volume / core_focus 같은 recovery_type만으로는 어느 복구 그룹의 계획인지 특정할 수 없습니다.

라디오와 적용 버튼 모두 plan.id를 기준으로 연결할 수 있도록 부탁드립니다.

<input type="radio" name="recovery" value="{{ plan.id }}" ...>

<button class="btn btn-accent btn-lg"
        type="button"
        data-plan-id="{{ plan.id }}">
  {{ plan.type_label }} 적용
</button>

recovery_card.html 상단의 plan context 필드 목록에도 id를 추가해주시면 좋을 것 같습니다.

3. 복구안이 0개 생성되는 경우도 처리 부탁드립니다

현재 1개만 생성되는 경우는 잘 처리되어 있는데, 실제 복구 로직에서는 분량 유지형과 핵심 집중형이 둘 다 생성되지 않을 수도 있습니다.

이 경우 현재 템플릿에서는 카드가 하나도 없는데 하단의 선택한 복구안과 미리보기 버튼은 그대로 남게 됩니다.

plans가 비어 있을 경우 별도 empty state를 보여주고 미리보기 버튼은 노출되지 않도록 처리 부탁드립니다.

예시 문구는
현재 남은 가용시간으로 적용 가능한 복구안을 만들 수 없습니다.
정도면 될 것 같습니다.

4. 오늘 못한 분량에 PARTIAL 잔여분도 포함되어야 합니다

현재 화면은 reason.not_done_minutes, reason.not_done_count 기준인데, 실제 복구 로직은 NOT_DONE뿐 아니라 PARTIAL 작업의 남은 분량도 복구 대상으로 계산합니다.

예를 들어 50% 일부완료한 작업은 남은 50%가 복구 대상으로 넘어갑니다.

따라서 오늘 못한 분량보다는 오늘 남은 분량 또는 오늘 미완료 분량으로 표현하고, context도 PARTIAL 잔여분까지 포함할 수 있는 형태로 잡아주시면 좋을 것 같습니다.

위 네 가지 반영되면 화면 구현 범위에서는 승인하겠습니다!

[borissal1207]

피드백 4가지 모두 반영했습니다.

1. recovery_compare.html, recovery_result.html에 messages 출력 영역({% for message in messages %}<div class="banner">...) 추가
2. 라디오 value·적용 버튼 모두 plan.id(RecoveryPlan PK) 기준으로 변경, recovery_card.html 필드 주석에도 id 추가
3. plans가 비어있는 경우 empty state("현재 남은 가용시간으로 적용 가능한 복구안을 만들 수 없습니다.")로 분기, 이 경우 선택/미리보기 바는 노출 안 함
4. reason.not_done_* → reason.remaining_*로 변경, 라벨도 "오늘 남은 분량"으로 수정해 일부완료 잔여분 포함되는 걸 반영

확인 부탁드립니다!