Fix: Resolve yarn.lock merge conflict after reinstall

Author: Ubuntu

package-lock.json

@@ -22,11 +22,12 @@
     "regenerator-runtime": "^0.14.1",
     "sass": "^1.85.1",
     "sockjs-client": "^1.6.1",
-    "stompjs": "^2.3.3"
+    "stompjs": "^2.3.3",
+    "swiper": "^11.2.10"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",
-    "@types/node": "^22.13.10",
+    "@types/node": "^22.17.0",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
     "@types/react-speech-recognition": "^3.9.6",

package.json

@@ -17,6 +17,7 @@ $gray-900: #161618
 
 $purple-50: #EEE8FD
 $purple-100: #D3C6FA
+$purple-300: #9776F6
 $purple-400: #7C55F4
 $purple-500: #5E35F0
 $purple-600: #4F31E9

src/assets/imgs/icon/toltip.svg

@@ -27,7 +27,7 @@ import useRecordingTimer from "@/views/meeting/components/RecodingTimer";
 import { useEffect, useState, useRef } from "react";
 import { Client } from "@stomp/stompjs";
 import html2canvas from "html2canvas";
-
+import toltip from "@/assets/imgs/icon/toltip.svg";
 // type
 import { conferenceData } from "@/types/conferanceData";
 import { RealTimeSummaryData } from "@/types/realTimeSummaryData";
@@ -154,17 +154,17 @@ const MindMapComponent = ({
     clientRef.current = client;
   };
 
-  const handleDownload = (title: string, ref: React.RefObject<HTMLDivElement>) => () => {
-    if (!ref.current) return;
+  // const handleDownload = (title: string, ref: React.RefObject<HTMLDivElement>) => () => {
+  //   if (!ref.current) return;
 
-    html2canvas(ref.current).then((canvas) => {
-      const link = document.createElement('a');
-      link.href = canvas.toDataURL('image/png');
-      link.download = title === '' ? '제목없음' : title;
-      document.body.appendChild(link);
-      link.click();
-    });
-  };
+  //   html2canvas(ref.current).then((canvas) => {
+  //     const link = document.createElement('a');
+  //     link.href = canvas.toDataURL('image/png');
+  //     link.download = title === '' ? '제목없음' : title;
+  //     document.body.appendChild(link);
+  //     link.click();
+  //   });
+  // };
 
   useEffect(() => {
     if (finalTranscript !== "") {
@@ -191,7 +191,7 @@ const MindMapComponent = ({
             destination: `/app/conference/${conferenceData.projectId}/script`,
             body: JSON.stringify(data),
           });
-          
+
           console.log(JSON.stringify(data))
 
           setScriptList([]);
@@ -441,7 +441,15 @@ const ClickKeyword = (keyword: string) => {
             {mode === "live" ? (
               <>
                 <div className="main-keyword-wrap">
-                  <h3>주요 키워드</h3>
+                  <h3>
+                    주요 키워드
+                    <div className="toltip-wrap">
+                      <img src={toltip} alt="" />
+                      <div className="toltip">
+                        녹음 중 자동으로 추출된 핵심 키워드예요. 대화에서 자주 언급되는 단어나 중요한 개념을 실시간으로 분석해 제공해요.
+                      </div>
+                    </div>
+                  </h3>
                   {mainKeyword.length ? (
                     <div className="keyword-wrap">
                       {mainKeyword.map((x: any) => (
@@ -459,7 +467,15 @@ const ClickKeyword = (keyword: string) => {
                   )}
                 </div>
                 <div className="recommend-keyword-wrap">
-                  <h3>추천 키워드</h3>
+                  <h3>
+                    추천 키워드
+                    <div className="toltip-wrap">
+                      <img src={toltip} alt="" />
+                      <div className="toltip">
+                        마인드맵에 추가하면 좋을 키워드를 추천해요. 대화의 흐름과 맥락을 분석해 관련성이 높은 키워드를 제안해요.
+                      </div>
+                    </div>
+                  </h3>
                   {recommendKeyword.length ? (
                     <div className="keyword-wrap">
                       {recommendKeyword.map((x: any) => (

src/assets/imgs/meeting/tutorial/img-1.png

@@ -0,0 +1,114 @@
+import { useRef, useState } from "react";
+import img1 from "@/assets/imgs/meeting/tutorial/img-1.png";
+import img2 from "@/assets/imgs/meeting/tutorial/img-2.png";
+import img3 from "@/assets/imgs/meeting/tutorial/img-3.png";
+import img4 from "@/assets/imgs/meeting/tutorial/img-4.png";
+import "@/views/meeting/style/tutorial-modal.sass";
+import Modal from "@/views/components/modal";
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Swiper as SwiperClass } from "swiper";
+import { Pagination, EffectFade } from 'swiper/modules';
+
+import 'swiper/css';
+import 'swiper/css/effect-fade';
+import 'swiper/css/pagination';
+
+const slides = [
+  {
+    img: img1,
+    title: "함께할 팀원을 초대하고 프로젝트를 시작하세요",
+    desc: [
+      "‘공유하기’ 버튼을 눌러 이메일 또는 링크로 팀원을 간편하게 초대해요.",
+      "초대한 팀원은 공유 목록에서 바로 확인할 수 있어요.",
+      "프로젝트명을 클릭해 자유롭게 수정할 수 있어요.",
+    ],
+  },
+  {
+    img: img2,
+    title: "녹음을 시작하면 자동으로 펼쳐지는 아이디어",
+    desc: [
+      "음성 녹음을 시작하면, 대화 중 자주 언급되거나 중요한 단어는",
+      "키워드로 실시간 추출되며 아이디어 마인드맵이 실시간으로 정리돼요.",
+      "또한 AI가 대화 흐름을 분석해 요약본도 함께 제공해요.",
+    ],
+  },
+  {
+    img: img3,
+    title: "마인드맵을 직접 수정하며 생각을 확장해보세요!",
+    desc: [
+      "라이브모드를 해제하면 마인드맵을 직접 수정할 수 있어요.",
+      "직접 키워드를 선택해 마인드맵에 추가하거나, 추천 키워드를 참고해",
+      "아이디어를 확장해보세요. 키워드를 추가할수록 마인드맵이 더 풍부해져요.",
+    ],
+  },
+  {
+    img: img4,
+    title: "아이디어를 정리하고, 언제든 다시 꺼내봐요",
+    desc: [
+      "‘회의 종료’ 버튼을 누르면 지금까지의 아이디어들이 정리돼 저장돼요.",
+      "언제든 메인 페이지에서 프로젝트 파일을 한눈에 확인하세요.",
+      "마인드맵, 키워드, 요약본을 각 파일로 다운로드할 수도 있어요!",
+    ],
+  },
+];
+
+interface TutorialModalProps {
+  onCloseModal: () => void;
+}
+
+const TutorialModal = ({
+  onCloseModal,
+}: TutorialModalProps) => {
+  const swiperRef = useRef<SwiperClass | null>(null);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const isLastSlide = activeIndex === slides.length - 1;
+
+  return (
+    <Modal onCloseModal={onCloseModal}>
+      <div className="modal-wrap">
+        <Swiper
+          onSwiper={(swiper) => (swiperRef.current = swiper)}
+          onSlideChange={(swiper) => setActiveIndex(swiper.activeIndex)}
+          effect="fade"
+          speed={500}
+          fadeEffect={{ crossFade: true }}
+          pagination={{ clickable: true }}
+          allowTouchMove={false}
+          modules={[EffectFade, Pagination]}
+          className="mySwiper"
+        >
+          {slides.map((slide, index) => (
+            <SwiperSlide key={index}>
+              <div className="img-wrap">
+                <img src={slide.img} alt={`slide-${index}`} />
+              </div>
+              <div className="desc-wrap">
+                <b>{slide.title}</b>
+                <p>
+                  {slide.desc.map((line, i) => (
+                    <span key={i}>
+                      {line}
+                      <br />
+                    </span>
+                  ))}
+                </p>
+              </div>
+            </SwiperSlide>
+          ))}
+        </Swiper>
+        <div className="btn-wrap">
+          <button onClick={onCloseModal}>건너뛰기</button>
+          <button className="btn-next" onClick={() => {
+              if (isLastSlide) {
+                onCloseModal();
+              } else {
+                swiperRef.current?.slideNext();
+              }
+            }}>{isLastSlide ? "시작하기" : "다음"}</button>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default TutorialModal;