Merge remote-tracking branch 'refs/remotes/origin/main'

Author: Eunjin03

src/assets/imgs/icon/btn_pause.svg

@@ -70,7 +70,7 @@
       +background('@/assets/imgs/icon/project.svg', no-repeat, center)
 
     .record::before
-      +background('@/assets/imgs/icon/mic.svg', no-repeat, center)
+      +background('@/assets/imgs/icon/mic_gray.svg', no-repeat, center)
 
     .summary::before
       +background('@/assets/imgs/icon/note.svg', no-repeat, center)

src/assets/imgs/icon/btn_stop.svg

@@ -1,10 +1,15 @@
 import { ReactFlow } from '@xyflow/react';
 
+// style
+import '@xyflow/react/dist/style.css';
+import "@/views/meeting/style/mind-map.sass";
+
 // component
 import UseSpeechToText from "@/views/meeting/components/UseSpeechToText";
 
-import '@xyflow/react/dist/style.css';
-import "@/views/meeting/style/mind-map.sass";
+// import
+// import { useState, useEffect } from "react";
+
 
 const MindMapComponent = () => {
   const {
@@ -17,6 +22,8 @@ const MindMapComponent = () => {
     audioUrl,
   } = UseSpeechToText();
 
+  // const [mode, setMode] = useState<string>("none");
+
   const initialNodes = [
     { id: '1', position: { x: 0, y: 0 }, data: { label: '2' } },
     { id: '2', position: { x: 0, y: 100 }, data: { label: '2' } },
@@ -28,32 +35,43 @@ const MindMapComponent = () => {
 
   return (
     <div className="mind-map-container">
-      <div className='mind-map-wrap'>
-        <ReactFlow nodes={initialNodes} edges={initialEdges} />
-        <ReactFlow nodes={initialNodes} edges={initialEdges} />
-      </div>
-      <div className="middle-bar">
-        <div className="record-length-wrap">
-          <div className="box-wrap">
-            <div className='red box'></div>
-            {Array.from({ length: 9 }).map(() => (
-              <div className='box'></div>
-            ))}
-          </div>
-          <div className="box-time">
-            13:28
+      {
+        !isRecording ? (
+          <div className='start-wrap'>
+            <p>녹음을 시작하고 자동으로 생성되는<br/>마인드맵을 확인해보세요.</p>
+            <button className='btn-mic' onClick={toggleListening}>녹음 시작하기</button>
           </div>
-          <div>
-            {isRecording && !isPaused && (
-              <button onClick={pauseRecording}>⏸️</button>
-            )}
-            {isRecording && isPaused && (
-              <button onClick={resumeRecording}>▶️ 재개</button>
-            )}
-            <button onClick={toggleListening}>{isRecording ? "정지" : "시작"}</button>
+        ) : (
+          <div className="mind-map-main">
+            <div className='mind-map-wrap'>
+              <ReactFlow nodes={initialNodes} edges={initialEdges} />
+              <ReactFlow nodes={initialNodes} edges={initialEdges} />
+            </div>
+            <div className="middle-bar">
+              <div className="record-length-wrap">
+                <div className="box-wrap">
+                  <div className='red box'></div>
+                  {Array.from({ length: 9 }).map(() => (
+                    <div className='box'></div>
+                  ))}
+                </div>
+                <div className="box-time">
+                  13:28
+                </div>
+                <div className="box-menu">
+                  {isRecording && !isPaused && (
+                    <button className='btn-pause' onClick={pauseRecording}>일시정지</button>
+                  )}
+                  {isRecording && isPaused && (
+                    <button className='btn-resume' onClick={resumeRecording}>▶️ 재개</button>
+                  )}
+                  <button className='btn-record' onClick={toggleListening}>{isRecording ? "정지" : "시작"}</button>
+                </div>
+              </div>
+            </div>
           </div>
-        </div>
-      </div>
+        )
+      }
     </div>
   );
 }

src/assets/imgs/icon/live_off.svg

@@ -13,4 +13,7 @@
 
 .sidebar-closed
   +size(calc(100vw - 56px), calc(100vh - 60px))
-  +padding(60px 0 0 56px)
+  +padding(60px 0 0 56px)
+
+.project-content
+  height: 100%

src/assets/imgs/icon/live_on.svg

@@ -5,35 +5,67 @@
 
 
 .mind-map-container
+  background-color: $gray-50
   position: relative
+  +size(100%, 100%)
 
-  .mind-map-wrap
-    +size(100vw, 100vh)
-
-  .middle-bar
-    +size(435px, 64px)
-    +flex-box(center, center)
+  .start-wrap
+    +flex-box(center, center, 28px)
+    flex-direction: column
     position: absolute
-    bottom: 117px
-    border-radius: 16px
-    background-color: $gray-50
+    top: 50%
     left: 50%
     transform: translate(-50%, -50%)
+    p
+      font-size: 16px
+      font-weight: 500
+      color: $gray-600
+      line-height: 24px
+      text-align: center
+    
+    .btn-mic
+      +flex-box(center, center, 8px)
+      +btn(160px, 48px, 50px)
+      background-color: $page-color
+      color: $white
+      font-weight: 700
+      font-size: 16px
+      
+
+      &:before
+        +size(20px, 20px)
+        content : url('@/assets/imgs/icon/mic.svg')
+
+
+  .mind-map-main
+    .mind-map-wrap
+      +size(100vw, 100vh)
+
+    .middle-bar
+      +size(435px, 64px)
+      +flex-box(center, center)
+      position: absolute
+      bottom: 117px
+      border-radius: 16px
+      background-color: $gray-100
+      left: 50%
+      transform: translate(-50%, -50%)
 
-    .record-length-wrap
-      +flex-box(center, center, 10px)
+      .record-length-wrap
+        +flex-box(center, center, 10px)
 
-      .box-wrap
-        +flex-box(center, center, 4.86px)
+        .box-wrap
+          +flex-box(center, center, 4.86px)
 
-        .box
-          +size(5.5px, 13px)
-          background-color: $gray-300
+          .box
+            +size(5.5px, 13px)
+            background-color: $gray-300
 
-        .red
-          background-color: #F05B56
+          .red
+            background-color: #F05B56
 
-      .box-time
-        color: #505457
-        font-weight: 500
-        line-height: 21px
+        .box-time
+          color: #505457
+          font-weight: 500
+          line-height: 21px
+