[Fix] 서버 주소 변경 (#25)

* feat: PWA 적용

* feat: Toast 알람시 TTS 기능 추가

* feat: 서버 주소 변경

src/api/instance.ts

@@ -1,7 +1,7 @@
 import axios from "axios";
 
 export const axiosInstance = axios.create({
-  baseURL: "http://13.209.80.41:8080",
+  baseURL: "http://3.38.211.169:8080",
   headers: {
     "Content-Type": "application/json",
   },

src/components/Drive/index.tsx

@@ -2,23 +2,63 @@ import styled from "styled-components";
 import car_driving_img from "@assets/images/car_driving.gif";
 import { useNavigate } from "react-router-dom";
 import { drivingEndAPI } from "@api/drivingAPIS";
+import { useEffect, useState } from "react";
+import { Toast } from "@components/common/Toast";
 
 export const Drive = () => {
+  const [toast, setToast] = useState<boolean>(false);
+  const [message, setMessage] = useState<string>("졸음 운전이 감지되었습니다");
+
   const navigate = useNavigate();
+  let eventSource: any;
 
   const handleClickArriveBtn = () => {
     const apiResponse = drivingEndAPI();
     apiResponse.then((res) => {
       console.log(res);
       navigate(`/end/${res.reportId}`);
     });
+    eventSource.close();
   };
 
+  useEffect(() => {
+    window.speechSynthesis.getVoices();
+  }, []);
+
+  const fetchSSE = async () => {
+    try {
+      eventSource = new EventSource("/url");
+      eventSource.onmessage = async (event: any) => {
+        const response = await event.data;
+        console.log(response);
+        console.log("sse event!");
+        setToast(true);
+        setMessage("message");
+      };
+      eventSource.onerror = async (event: any) => {
+        eventSource.close();
+        console.error(event);
+      };
+    } catch {}
+  };
+
+  useEffect(() => {
+    fetchSSE();
+  }, []);
+
   return (
     <DriveContainer>
       <img src={car_driving_img} alt="주행 중" />
       <InfoText>주행 중입니다</InfoText>
+      <button
+        onClick={() => {
+          setToast(true);
+        }}
+      >
+        클릭
+      </button>
       <ArriveButton onClick={handleClickArriveBtn}>목적지 도착</ArriveButton>
+      {toast && <Toast message={message} setToast={setToast} />}
     </DriveContainer>
   );
 };

src/components/common/Toast.tsx

@@ -1,12 +1,14 @@
 import { useEffect } from "react";
 import styled from "styled-components";
 import alarm_sound from "@assets/sound/alram.mp3";
+import { getSpeech } from "@utils/getSpeech";
 
 interface ToastProps {
   message: string;
   setToast: React.Dispatch<React.SetStateAction<boolean>>;
 }
 export const Toast = ({ message, setToast }: ToastProps) => {
+  getSpeech(message);
   useEffect(() => {
     const timer = setTimeout(() => {
       setToast(false);

src/utils/getSpeech.ts

@@ -0,0 +1,33 @@
+// @ts-ignore
+
+export const getSpeech = (text: string) => {
+  let voices: any[] = [];
+
+  const setVoiceList = () => {
+    voices = window.speechSynthesis.getVoices();
+  };
+  setVoiceList();
+
+  window.speechSynthesis.onvoiceschanged = setVoiceList;
+
+  const speech = (text: string) => {
+    const lang = "ko-KR";
+    const utterThis = new SpeechSynthesisUtterance(text);
+
+    utterThis.lang = lang;
+
+    const kor_voice = voices.find(
+      (elem) => elem.lang == lang || elem.lang === lang.replace("-", "_")
+    );
+
+    if (kor_voice) {
+      utterThis.voice = kor_voice;
+    } else {
+      return;
+    }
+
+    window.speechSynthesis.speak(utterThis);
+  };
+
+  speech(text);
+};