[Feature] 배틀 진행 현황판 UI 개선 (#140)

rhxfkg · web-flow · commit c577e640050b · 2026-01-16T11:11:22.000+09:00
* feat: ProgressBoard 가로 크기 확장 및 6단계 표시 로직 구현 #140 - 가로 크기를 400px에서 850px로 확장 - 6단계 정의 추가 (의견공유 → 공격(1차) → 수비(1차) → 공격(2차) → 수비(2차) → 팀변경) - isActiveStage 함수로 현재 활성 단계 확인 로직 구현 - STAGES 배열을 map으로 순회하여 6개 아이콘 렌더링 * feat: 텍스트 라벨 제거 #140 - 배틀 진행 상황 텍스트 제거 - Round 텍스트 제거 - 아이콘 영역 상단 여백 조정 * feat: 라운드-페이즈 번호 표시 및 아이콘 라벨 제거 #140 - 맨 왼쪽에 현재 라운드-페이즈 번호 표시 - PENDING 상태일 때 배틀 대기중으로 표시 - StageIcon에서 아이콘 밑 라벨 텍스트 제거 * feat: 프로그레스 바를 ProgressBoard 하단에 통합 #140 - TimeProgressBar 로직을 ProgressBoard에 복사하여 통합 - 프로그레스 바를 아이콘 영역 하단에 배치 - 그라데이션 색상 적용 - shrink 애니메이션으로 남은 시간 시각화 * style: 레이아웃 크기 조정 및 라운드 표시 개선 #140 - 가로 크기 축소 (850px → 750px) - 라운드-페이즈 구분자에 공백 추가 - 라운드 표시 글자 크기 증가 및 높이 조정 * fix: 라운드-페이즈 번호 계산 로직 수정 #140 - phaseCount 기반으로 step 번호 계산 (1-6 순환) - turn 속성 제거하고 phaseCount 활용 - 각 라운드마다 1-1부터 1-6까지 표시되도록 수정 * fix: phaseCount 기반 step 계산 로직 수정 #140 - phase와 phaseCount를 조합하여 정확한 step 계산 - ATTACK: phaseCount * 2, DEFENSE: phaseCount * 2 + 1 * style: 대기 상태 텍스트 간소화 #140 - 배틀 대기중 → 대기중으로 변경 - 줄바꿈 방지를 위한 텍스트 길이 축소 * feat: 배틀 현황판 아이콘 활성화/비활성화 상태 및 크기 변화 효과 추가 #140 - 활성화된 아이콘: 원래 색상 유지 + 크기 증가 (48px → 56px) - 비활성화된 아이콘: 회색 배경(#0A0A1A) + 회색 테두리(#364153) + 회색 아이콘(#99A1AF) - 모든 아이콘 크기 통일 (기존 의견공유 아이콘만 컸던 문제 해결) - transition 효과 추가: duration-300 ease-in-out으로 부드러운 전환 * refactor: 배틀 헤더에서 TimeProgressBar 제거 #140 - TimeProgressBar 컴포넌트 import 및 렌더링 제거 - 프로그레스 바는 ProgressBoard에 통합되어 중복 제거 - 헤더 높이 조정 (185px → 179px) * style: sticky 옵션 개선 및 상단 주황색 줄 제거 #140 - z-index를 0에서 10으로 상향하여 sticky 동작 개선 - 상단 주황색 gradient 줄 제거 (프로그레스 바와 혼동 방지) - 패딩 조정 (pt-6 → pt-2) * style: 배틀 현황판 높이 최소화 #140 - 전체 높이 감소 (143.33px → 100px) - 하단 패딩 추가 (pb-3)로 프로그레스 바 하단 여백 최적화 - 상단 여백 감소 (top-[16px] → top-[12px]) - 요소 간 gap 감소 (gap-2 → gap-1.5) - 프로그레스 바 상단 여백 감소 (mt-4 → mt-1.5) * fix: 배틀 현황판 sticky 동작 수정 #140 - ProgressBoard를 div 래퍼 밖으로 이동하여 sticky 제대로 동작하도록 수정 - 마진 조정으로 기존 레이아웃 유지 (-mt-[10px]) * feat: 페이즈 아이콘에 상세 설명 툴팁 추가 #140 - StageIcon 컴포넌트에 tooltip prop 추가 - 호버 시 각 페이즈의 상세 설명을 아이콘 하단에 표시 - 툴팁 내용: - 의견공유: 대주제 확인 및 이의제기 준비 안내 - 1차/2차 공격: 상대 코드 문제점 지적 및 투표 안내 - 1차/2차 수비: 반박 논리 작성 및 방어 내용 선정 안내 - 팀변경: 진영 재선택 가능 안내 - 툴팁 디자인: 다크 테마 배경, 상단 화살표, 부드러운 페이드 효과 * feat: 대기 중 현황판 숨김 및 시작 시 슬라이드 다운 애니메이션 추가 #140 - PENDING 상태일 때 ProgressBoard 컴포넌트 완전히 숨김 처리 - 배틀 시작 시 슬라이드 다운 애니메이션 효과 추가 (0.5s ease-out) - 애니메이션: 상단에서 하단으로 슬라이드되며 페이드 인 * style: 라운드 표시 방식을 Round N 형태로 변경 및 글자 크기 조정 #140 - 기존 라운드-페이즈 형태에서 Round N으로 간소화 - 페이즈 정보는 활성화된 아이콘으로 시각적 표현 - 글자 크기 감소 (32px → 22px, 약 30% 축소) * refactor: 사용되지 않는 raiseZIndex prop 제거 #140 * style: 툴팁 화살표 테두리 추가 및 두께 조정 #140
diff --git a/frontend/src/pages/battlePage/components/header/index.tsx b/frontend/src/pages/battlePage/components/header/index.tsx
@@ -2,7 +2,6 @@ import ParticipantRatioBar from './ParticipantRatioBar';
 import StageIndicator from './StageIndicator';
 import BattleTimer from './BattleTimer';
 import TeamCounter from './TeamCounter';
-import TimeProgressBar from './TimeProgressBar';
 import {
   useBattleStore,
   selectBattleProgress,
@@ -33,10 +32,9 @@ export default function BattleHeader() {
 
   return (
     <header
-      className="h-[185px] w-[1800px] bg-[#1E1E2F] rounded-lg mb-2 overflow-hidden flex flex-col"
+      className="h-[179px] w-[1800px] bg-[#1E1E2F] rounded-lg mb-2 overflow-hidden flex flex-col"
       data-tutorial="phase-guide"
     >
-      <TimeProgressBar />
       <div className="px-8 flex-1 grid grid-cols-3 items-center">
         <StageIndicator />
         <div className="flex flex-col items-center justify-center" data-tutorial="timer">
diff --git a/frontend/src/pages/battlePage/components/progressBoard/ProgressBoard.tsx b/frontend/src/pages/battlePage/components/progressBoard/ProgressBoard.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 import { StageIcon } from './StageIcon';
 import DownArrowIcon from '@/assets/icon/downArrow.svg?react';
 import { selectBattleProgress, useBattleStore } from '../../stores/battleStore';
@@ -13,42 +13,121 @@ const COLOR_MAP = {
   PENDING: { bg: '#0A0A1A', border: '#364153', text: '#99A1AF' }
 };
 
-interface BattleProgressBoardProps {
-  raiseZIndex?: boolean;
-}
-
-export default function BattleProgressBoard({ raiseZIndex = false }: BattleProgressBoardProps) {
+// 6단계 정의 (한 라운드당 6개 페이즈)
+const STAGES = [
+  {
+    step: 1,
+    phase: 'OPINION_SHARE',
+    icon: 'message',
+    label: '의견공유',
+    description:
+      '의견공유 시간입니다. 현재 라운드의 대주제를 확인하고 라운지에서 자유롭게 의견을 나누며 이의제기를 준비해주세요!'
+  },
+  {
+    step: 2,
+    phase: 'ATTACK',
+    icon: 'battle',
+    label: '공격(1차)',
+    description:
+      '1차 이의제기 시간입니다. 주어진 3분 동안 상대 코드의 문제점을 찾고 투표를 통해 공격할 내용을 선정해보세요!'
+  },
+  {
+    step: 3,
+    phase: 'DEFENSE',
+    icon: 'shield',
+    label: '수비(1차)',
+    description:
+      '1차 반론 시간입니다. 주어진 4분 동안 상대의 공격에 대한 반박 논리를 작성하고 투표를 통해 방어할 내용을 선정해보세요!'
+  },
+  {
+    step: 4,
+    phase: 'ATTACK',
+    icon: 'battle',
+    label: '공격(2차)',
+    description:
+      '2차 이의제기 시간입니다. 주어진 3분 동안 상대 코드 혹은 반론에 대한 문제점을 찾고 투표를 통해 공격할 내용을 선정해보세요!'
+  },
+  {
+    step: 5,
+    phase: 'DEFENSE',
+    icon: 'shield',
+    label: '수비(2차)',
+    description:
+      '2차 반론 시간입니다. 주어진 4분 동안 상대의 공격에 대한 반박 논리를 작성하고 투표를 통해 최종적으로 방어할 내용을 선정해보세요!'
+  },
+  {
+    step: 6,
+    phase: 'TEAM_SWITCH',
+    icon: 'switch',
+    label: '팀변경',
+    description:
+      '진영 선택 시간입니다. 라운드를 진행하며 나눈 공격과 수비를 다시 확인해보고 지지하시는 팀으로 변경하실 수 있습니다!'
+  }
+] as const;
+
+export default function BattleProgressBoard() {
   const [collapsed, setCollapsed] = useState(false);
   const battleProgress = useBattleStore(selectBattleProgress);
+
+  // 프로그레스 바 duration 계산
+  const duration = useMemo(() => {
+    if (!battleProgress?.expiredAt || !battleProgress?.startedAt) return 60;
+    return Math.max(0, (battleProgress.expiredAt - battleProgress.startedAt) / 1000);
+  }, [battleProgress?.expiredAt, battleProgress?.startedAt]);
+
   if (!battleProgress) return null;
 
-  const { round, phase } = battleProgress;
+  const { round, phase, phaseCount } = battleProgress;
+
+  // PENDING 상태일 때는 아예 렌더링하지 않음
+  if ((phase as string) === 'PENDING') {
+    return null;
+  }
 
-  const isActive = (stage: BattlePhase) => phase === stage;
+  // 현재 페이즈의 step 번호 계산 (1-6)
+  const getCurrentPhaseStep = () => {
+    // phaseCount는 ATTACK/DEFENSE 반복 횟수 (1~BATTLE_MAX_PHASE_COUNT)
+    // phase와 phaseCount로 step 계산
+    if (phase === 'OPINION_SHARE') return 1;
+    if (phase === 'ATTACK') return phaseCount * 2; // 1차: 2, 2차: 4
+    if (phase === 'DEFENSE') return phaseCount * 2 + 1; // 1차: 3, 2차: 5
+    if (phase === 'TEAM_SWITCH') return 6;
+    return 1;
+  };
 
-  const getStageColor = (stage: BattlePhase) => (isActive(stage) ? COLOR_MAP[stage] : COLOR_MAP.BASE);
+  // 현재 활성 단계인지 확인
+  const isActiveStage = (stageStep: number) => {
+    return getCurrentPhaseStep() === stageStep;
+  };
+
+  // 현재 라운드 번호 표시
+  const getCurrentStageNumber = () => {
+    return `Round ${round}`;
+  };
+
+  const getStageColor = (stage: BattlePhase) => COLOR_MAP[stage] || COLOR_MAP.BASE;
 
   return (
     <div
-      className={`
-        sticky top-0
+      className="
+        sticky top-0 z-10
         flex justify-center
         pointer-events-none
-        ${raiseZIndex ? 'z-[110]' : 'z-0'}
-      `}
+        animate-slideDown
+      "
     >
       <div
         data-tutorial="progress-board"
         className={`
           pointer-events-auto
           relative
-          w-[400px]
+          w-[750px]
           rounded-lg
           bg-[#1a1a2ef2]
           border-b-[1.333px] border-b-[#1E2939]
           shadow-[0px_25px_50px_-12px_rgba(0,0,0,0.25)]
           transition-all duration-300 ease-in-out
-          ${collapsed ? '-translate-y-[120px] h-[32px]' : 'h-[143.33px]'}
+          ${collapsed ? '-translate-y-[120px] h-[32px]' : 'h-[100px] pb-3'}
         `}
       >
         {!collapsed && (
@@ -107,52 +186,62 @@ export default function BattleProgressBoard({ raiseZIndex = false }: BattleProgr
 
         <div
           className={`
-            absolute left-[26.21px] top-[16px]
-            w-[347.58px]
-            flex flex-col gap-2
+            absolute left-[26.21px] top-[12px]
+            w-[700px]
+            flex flex-col gap-1.5
             transition-opacity duration-200
             ${collapsed ? 'opacity-0 pointer-events-none' : 'opacity-100'}
           `}
         >
-          <div
-            className="absolute left-[6px] top-[-4px] h-[4px] w-[336px]
-              bg-gradient-to-r from-[#FF6900] via-[#FF8904] to-[#F54900]"
-          />
-
-          <div className="text-center text-[12px] tracking-[0.6px] uppercase text-[#FF6900]">배틀 진행 상황</div>
-
-          <div className="flex items-center gap-4">
-            <StageIcon
-              label="의견 공유"
-              icon="message"
-              {...getStageColor('OPINION_SHARE')}
-              active={isActive('OPINION_SHARE')}
-            />
-
-            <DownArrowIcon className="-rotate-90 opacity-40 -translate-y-2" />
-
-            <StageIcon label="이의제기" icon="battle" small {...getStageColor('ATTACK')} active={isActive('ATTACK')} />
-
-            <DownArrowIcon className="-rotate-90 opacity-40 -translate-y-2" />
-
-            <StageIcon label="반박" icon="shield" small {...getStageColor('DEFENSE')} active={isActive('DEFENSE')} />
-
-            <DownArrowIcon className="-rotate-90 opacity-40 -translate-y-2" />
-
-            <StageIcon
-              label="팀 변경"
-              icon="switch"
-              small
-              {...getStageColor('TEAM_SWITCH')}
-              active={isActive('TEAM_SWITCH')}
-            />
+          <div className="flex items-center gap-4 px-4">
+            <div className="text-[22px] font-bold text-[#FF6900] min-w-[100px] flex items-center justify-center h-[56px]">
+              {getCurrentStageNumber()}
+            </div>
+            {STAGES.map((stage, index) => (
+              <div key={stage.step} className="flex items-center gap-3">
+                <StageIcon
+                  icon={stage.icon as 'message' | 'battle' | 'shield' | 'switch'}
+                  {...getStageColor(stage.phase as BattlePhase)}
+                  active={isActiveStage(stage.step)}
+                  small={true}
+                  tooltip={stage.description}
+                />
+                {index < STAGES.length - 1 && <DownArrowIcon className="-rotate-90 opacity-40" />}
+              </div>
+            ))}
           </div>
 
-          <div className="relative mt-1 h-[15px]">
-            <div className="text-center text-[10px] font-bold text-[#6A7282]">Round {round}</div>
+          <div className="mt-1.5 h-[6px] bg-[#0A0A1A] rounded-full overflow-hidden">
+            <div
+              key={`${battleProgress?.expiredAt}-${battleProgress?.startedAt}`}
+              className="h-full bg-gradient-to-r from-[#FF6900] via-[#FF8904] to-[#F54900]"
+              style={{
+                animation: `shrink ${duration}s linear`,
+                animationFillMode: 'forwards'
+              }}
+            />
           </div>
         </div>
       </div>
+      <style>{`
+        @keyframes shrink {
+          from { width: 100%; }
+          to { width: 0%; }
+        }
+        @keyframes slideDown {
+          from {
+            transform: translateY(-100%);
+            opacity: 0;
+          }
+          to {
+            transform: translateY(0);
+            opacity: 1;
+          }
+        }
+        .animate-slideDown {
+          animation: slideDown 0.5s ease-out;
+        }
+      `}</style>
     </div>
   );
 }
diff --git a/frontend/src/pages/battlePage/components/progressBoard/StageIcon.tsx b/frontend/src/pages/battlePage/components/progressBoard/StageIcon.tsx
@@ -4,25 +4,28 @@ import ShieldIcon from '@/assets/icon/shield.svg?react';
 import SwitchIcon from '@/assets/icon/switch.svg?react';
 
 export function StageIcon({
-  label,
   icon,
   bg,
   border,
   text,
   active,
-  small
+  small,
+  tooltip
 }: {
-  label: string;
   icon: 'message' | 'battle' | 'shield' | 'switch';
   bg: string;
   border: string;
   text: string;
   active?: boolean;
   small?: boolean;
+  tooltip?: string;
 }) {
-  const size = small ? 'w-[48px] h-[48px]' : 'w-[52.8px] h-[52.8px]';
-  const iconClass = `w-[20px] h-[20px] ${active ? '' : 'opacity-40'}`;
-  const iconStyle = active ? { color: text } : undefined;
+  const baseSize = small ? 48 : 52.8;
+  const activeSize = small ? 56 : 60;
+  const size = active ? activeSize : baseSize;
+
+  const iconClass = `w-[20px] h-[20px] transition-all`;
+  const iconStyle = active ? { color: text } : { color: '#99A1AF' };
 
   const renderIcon = () => {
     switch (icon) {
@@ -40,27 +43,59 @@ export function StageIcon({
   };
 
   return (
-    <div className="flex flex-col items-center gap-1">
+    <div className="relative flex flex-col items-center gap-1 group">
       <div
         className={`
-          ${size}
           rounded-[12px]
           flex items-center justify-center
           border-[1.333px]
-          transition-all
+          transition-all duration-300 ease-in-out
           ${active ? 'shadow-[0px_20px_25px_-5px_rgba(0,0,0,0.25)]' : ''}
         `}
         style={{
-          background: bg,
-          borderColor: border
+          width: `${size}px`,
+          height: `${size}px`,
+          background: active ? bg : '#0A0A1A',
+          borderColor: active ? border : '#364153'
         }}
       >
         {renderIcon()}
       </div>
-
-      <div className="text-[10px] font-bold text-center" style={{ color: active ? text : '#99A1AF' }}>
-        {label}
-      </div>
+      {tooltip && (
+        <div
+          className="
+            absolute top-full mt-2 px-3 py-2
+            bg-[#1E1E2F] text-white text-sm rounded-lg
+            shadow-lg border border-[#364153]
+            opacity-0 group-hover:opacity-100
+            pointer-events-none
+            transition-opacity duration-200
+            whitespace-nowrap z-20
+          "
+        >
+          {tooltip}
+          {/* 테두리용 화살표 (더 크게) */}
+          <div
+            className="
+              absolute bottom-full left-1/2 -translate-x-1/2 translate-y-[0.5px]
+              w-0 h-0
+              border-l-[8px] border-l-transparent
+              border-r-[8px] border-r-transparent
+              border-b-[8px] border-b-[#364153]
+            "
+          />
+          {/* 배경색 화살표 (작게, 위에 겹침) */}
+          <div
+            className="
+              absolute bottom-full left-1/2 -translate-x-1/2
+              w-0 h-0
+              border-l-[6px] border-l-transparent
+              border-r-[6px] border-r-transparent
+              border-b-[6px] border-b-[#1E1E2F]
+            "
+          />
+        </div>
+      )}
     </div>
   );
 }
diff --git a/frontend/src/pages/battlePage/index.tsx b/frontend/src/pages/battlePage/index.tsx
@@ -111,10 +111,10 @@ export default function BattlePage() {
           isSidebarOpen ? 'ml-sidebar' : 'ml-0'
         }`}
       >
-        <div className={`transition-all duration-300 ${isSidebarOpen ? 'main-width-open' : 'main-width-closed'}`}>
-          <div className="-mb-[10px]">
-            <BattleProgressBoard raiseZIndex={isTutorialOpen && currentStep === 'progressBoard'} />
-          </div>
+        <BattleProgressBoard />
+        <div
+          className={`transition-all duration-300 ${isSidebarOpen ? 'main-width-open' : 'main-width-closed'} -mt-[10px]`}
+        >
           <BattleHeader />
         </div>
         <main className={`transition-all duration-300 ${isSidebarOpen ? 'main-width-open' : 'main-width-closed'}`}>
