feat: 문장 클릭 시 하이라이트와 동시에 문장 음성으로 읽기- 구현

GlowTales · Aug 25, 2024 · 8d79bdf · 8d79bdf
1 parent 730ea4e
commit 8d79bdf
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 12 deletions.
diff --git a/src/components/tales/readTale/ReadTale.tsx b/src/components/tales/readTale/ReadTale.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import Header from "@components/common/header/Header";
 import * as S from "./ReadTale.styled";
 import Dropdown from "@components/common/dropDown/Dropdown";
@@ -7,7 +7,7 @@ import { getTale } from "@apis/createTales";
 import { useLocation } from "react-router-dom";
 import { nationElements } from "@utils/defaultData";
 import { ResponseTaleData } from "@type/createTale";
-import { toggleSpeech } from "@utils/speechUtil";
+import { speakText, toggleSpeech } from "@utils/speechUtil";
 
 const ReadTale = () => {
   const location = useLocation();
@@ -18,8 +18,26 @@ const ReadTale = () => {
   const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
   const [isSpeaking, setIsSpeaking] = useState<boolean>(false);
 
-  const handleDivClick = (index: number) => {
-    setSelectedIndex((prevIndex) => (prevIndex === index ? null : index));
+  const selectSentence = (index: number) => {
+    if (selectedIndex === index) {
+      // 선택된 문장을 다시 클릭하면 하이라이트 해제 및 음성 중단
+      setSelectedIndex(null);
+      window.speechSynthesis.cancel();
+      setIsSpeaking(false);
+    } else {
+      // 새로운 문장 선택 시 이전 음성 취소, 새로운 문장 하이라이트 및 읽기
+      setSelectedIndex(index);
+
+      if (data) {
+        const textToSpeak = data.story.split("\n")[index];
+        speakText(
+          textToSpeak,
+          () => setIsSpeaking(false), // onEnd callback
+          () => setIsSpeaking(false) // onPause callback
+        );
+        setIsSpeaking(true);
+      }
+    }
   };
 
   useEffect(() => {
@@ -58,7 +76,7 @@ const ReadTale = () => {
               {data.story.split("\n").map((line, idx) => (
                 <div
                   key={idx}
-                  onClick={() => handleDivClick(idx)}
+                  onClick={() => selectSentence(idx)}
                   style={{
                     backgroundColor:
                       selectedIndex === idx ? "#FFF4B3" : "transparent",
@@ -74,7 +92,7 @@ const ReadTale = () => {
               <NextBtn
                 width="48%"
                 isActive={true}
-                text={isSpeaking ? "🟩중지" : "🔊음성으로 듣기"}
+                text={isSpeaking ? "중지" : "음성으로 듣기"}
                 handleBtn={handleSpeechButtonClick}
               />
               <NextBtn

diff --git a/src/utils/speechUtil.ts b/src/utils/speechUtil.ts
@@ -17,17 +17,23 @@ export const speakText = (
   const detectedLang = franc(text);
   const langCode = getLangCode(detectedLang);
 
-  const utterance = new SpeechSynthesisUtterance(text.replace(/\n/g, " "));
+  const utterance = new SpeechSynthesisUtterance(text);
   utterance.lang = langCode;
   utterance.rate = 0.6;
 
+  // 현재 재생 중인 모든 음성 중지
+  window.speechSynthesis.cancel();
+
   if (onEnd) {
-    utterance.onend = () => onEnd();
+    utterance.onend = () => {
+      onEnd();
+    };
   }
   if (onPause) {
     utterance.onpause = () => onPause();
   }
 
+  // 새로운 음성 재생
   window.speechSynthesis.speak(utterance);
 };
 
@@ -40,13 +46,14 @@ export const toggleSpeech = (
     window.speechSynthesis.pause();
     setIsSpeaking(false);
   } else {
-    new SpeechSynthesisUtterance(text);
-    window.speechSynthesis.cancel();
+    if (window.speechSynthesis.speaking) {
+      window.speechSynthesis.cancel(); // 현재 재생 중인 음성 취소
+    }
 
     speakText(
       text,
-      () => setIsSpeaking(false),
-      () => setIsSpeaking(false)
+      () => setIsSpeaking(false), // onEnd callback
+      () => setIsSpeaking(false) // onPause callback
     );
     setIsSpeaking(true);
   }