회의진행 화면내 녹음재개 기능 추가

.gitignore

@@ -43,6 +43,8 @@ examples/
 .claude/settings.local.json
 
 # Backup files
-design/*/*backup.md
+design/*/*/*backup.*
-design/*backup.md
+design/*/*backup.*
+design/*backup.m*
 backup/
+.vscode/settings.json

design/uiux/prototype/05-회의진행.html

@@ -94,6 +94,11 @@
       50% { opacity: 0.3; }
     }
 
+    .recording-indicator.paused .recording-dot,
+    .recording-indicator.paused .waveform-bar {
+      animation-play-state: paused;
+    }
+
     .recording-time {
       font-size: var(--font-small);
       font-weight: var(--font-weight-medium);
@@ -593,6 +598,11 @@
       height: 32px;
     }
 
+    .rec-icon {
+      width: 32px;
+      height: 32px;
+    }
+
     .end-meeting-btn {
       flex: 1;
       font-size: var(--font-body);
@@ -609,7 +619,7 @@
       </div>
 
       <div class="recording-status-bar">
-        <div class="recording-indicator">
+        <div class="recording-indicator" id="recordingIndicator">
           <span class="recording-dot"></span>
           <span class="recording-time" id="recordingTime">00:15:51</span>
           <div class="waveform">
@@ -990,11 +1000,12 @@
 
     <!-- 하단 고정 버튼 영역 -->
     <div class="bottom-action-bar">
-      <button class="btn btn-ghost pause-btn" onclick="pauseRecording()" id="pauseBtn">
+      <button class="btn btn-ghost pause-btn" onclick="toggleRecording()" id="pauseBtn">
-        <svg class="pause-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <svg class="pause-icon" id="pauseIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
           <rect x="6" y="4" width="4" height="16" rx="1"></rect>
           <rect x="14" y="4" width="4" height="16" rx="1"></rect>
         </svg>
+        <img class="rec-icon" id="recIcon" src="img/rec.png" alt="녹음 재개" style="display: none;">
       </button>
       <button class="btn btn-error end-meeting-btn" onclick="endMeeting()">
         회의 종료
@@ -1179,9 +1190,42 @@
       }
     });
 
-    // 녹음 일시정지
+    // 녹음 상태 관리
-    function pauseRecording() {
+    let isRecording = true;
-      alert('녹음이 일시정지되었습니다');
+    let timerInterval = null;
+
+    // 녹음 일시정지/재개 토글
+    function toggleRecording() {
+      const pauseIcon = document.getElementById('pauseIcon');
+      const recIcon = document.getElementById('recIcon');
+      const recordingIndicator = document.getElementById('recordingIndicator');
+
+      if (isRecording) {
+        // 일시정지
+        isRecording = false;
+        pauseIcon.style.display = 'none';
+        recIcon.style.display = 'block';
+        recordingIndicator.classList.add('paused');
+
+        // 타이머 정지
+        if (timerInterval) {
+          clearInterval(timerInterval);
+          timerInterval = null;
+        }
+
+        alert('녹음이 일시정지되었습니다');
+      } else {
+        // 재개
+        isRecording = true;
+        pauseIcon.style.display = 'block';
+        recIcon.style.display = 'none';
+        recordingIndicator.classList.remove('paused');
+
+        // 타이머 재시작
+        startTimer();
+
+        alert('녹음이 재개되었습니다');
+      }
     }
 
     // 회의 종료
@@ -1195,14 +1239,22 @@
       }
     }
 
-    // 타이머 업데이트
+    // 타이머 시작 함수
-    function updateTimer() {
+    function startTimer() {
       const timerElement = document.getElementById('recordingTime');
-      let seconds = 51;
-      let minutes = 15;
-      let hours = 0;
 
-      setInterval(() => {
+      // 이미 타이머가 실행 중이면 중복 실행 방지
+      if (timerInterval) {
+        return;
+      }
+
+      timerInterval = setInterval(() => {
+        // 현재 시간을 파싱
+        const currentTime = timerElement.textContent.split(':');
+        let hours = parseInt(currentTime[0]);
+        let minutes = parseInt(currentTime[1]);
+        let seconds = parseInt(currentTime[2]);
+
         seconds++;
         if (seconds === 60) {
           seconds = 0;
@@ -1222,6 +1274,11 @@
       }, 1000);
     }
 
+    // 타이머 초기화 함수
+    function updateTimer() {
+      startTimer();
+    }
+
     // 관련 회의록 열기
     function openRelatedDoc(docId) {
       // 새 탭으로 회의록 상세조회 화면 열기