Merge pull request #35 from KTB-Hackathon-GoLang/dev

Test
KTB-Hackathon-GoLang · Sep 6, 2024 · 64d4d8f · 64d4d8f
2 parents 8197cc6 + 8b29ed6
commit 64d4d8f
Show file tree

Hide file tree

Showing 25 changed files with 481 additions and 157 deletions.
diff --git a/index.html b/index.html
@@ -9,5 +9,10 @@
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>
+    <script
+      src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.2/kakao.min.js"
+      integrity="sha384-TiCUE00h649CAMonG018J2ujOgDKW/kVWlChEuu4jK2vxfAAD0eZxzCKakxg55G4"
+      crossorigin="anonymous"
+    ></script>
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
     "recoil": "^0.7.7",
     "regenerator-runtime": "^0.14.1",
     "slick-carousel": "^1.8.1",
+    "socket.io-client": "^4.7.5",
     "styled-components": "^6.1.13",
     "swiper": "^11.1.12",
     "zustand": "^4.5.5"

diff --git a/src/api/getEmotionData.js b/src/api/getEmotionData.js
@@ -0,0 +1,11 @@
+import {instance} from "./instance";
+
+export const getEmotionData= async () => {
+    try {
+        const response = await instance.get('/a');
+        return response.data;
+    } catch (error) {
+        console.error("대화 분석 결과 데이터 불러오기", error.message);
+        throw error;
+    }
+};
diff --git a/src/assets/img/banner1.png b/src/assets/img/banner1.png
diff --git a/src/assets/img/banner2.png b/src/assets/img/banner2.png
diff --git a/src/assets/img/banner3.png b/src/assets/img/banner3.png
diff --git a/src/assets/img/banner4.png b/src/assets/img/banner4.png
diff --git a/src/components/Banner/Banner.jsx b/src/components/Banner/Banner.jsx
@@ -3,21 +3,28 @@ import Slider from 'react-slick';
 import * as style from './styled/Banner.styled.js';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
-import logoImg from "../../assets/img/buttonimg2.png";
+import bannerImg1 from "../../assets/img/banner1.png";
+import bannerImg2 from "../../assets/img/banner2.png"
+import bannerImg3 from "../../assets/img/banner3.png"
+import bannerImg4 from "../../assets/img/banner4.png"
 
 // 이미지 배열 (Banners)
 const Banners = [
     {
         num: 0,
-        img: logoImg,
+        img: bannerImg1,
     },
     {
         num: 1,
-        img: logoImg,
+        img: bannerImg2,
     },
     {
         num: 2,
-        img: logoImg,
+        img: bannerImg3,
+    },
+    {
+        num: 3,
+        img: bannerImg4,
     },
 ];
 
@@ -28,7 +35,7 @@ const BannerSlider = () => {
         speed: 500,           // 슬라이드 전환 속도
         slidesToShow: 1,      // 한 번에 하나의 슬라이드만 보여줌
         slidesToScroll: 1,    // 한 번에 하나의 슬라이드를 넘김
-        autoplay: true,       // 자동 슬라이드 활성화
+        autoplay: false,       // 자동 슬라이드 활성화
         autoplaySpeed: 5000,  // 자동 슬라이드 속도 (5초)
     };
 

diff --git a/src/components/Banner/styled/Banner.styled.js b/src/components/Banner/styled/Banner.styled.js
@@ -1,20 +1,19 @@
 import styled from 'styled-components';
 
 export const TotalWrapper = styled.div`
-  width: 100%;
+  width: 90%;
     height: 40%;
   margin: 0 auto;
+    border-radius: 50px;
     
 `;
 
 export const BannerWrap = styled.div`
-  width: 80%;
-    height:80%;
+  width: 100%;
+    height:100%;
     display: flex;
   justify-content: center;
   align-items: center;
-    border-radius: 30px;
-    background-color: white;
     margin-top: 40px;
 `;
 

diff --git a/src/pages/ChatPage/ChatPage.jsx b/src/pages/ChatPage/ChatPage.jsx
@@ -3,16 +3,18 @@ import { EndButton } from "@/components/Button/Button";
 import * as S from "./style";
 import BOT_IMG from "@/assets/bot.png";
 import CHATTING_LAYOUT from "@/assets/chatLayout.svg";
-import { DUMMY_TEXT } from "@/constant/dummy";
-import { useRef, useEffect } from "react";
-import { useParams } from "react-router-dom";
+import { useRef, useEffect, useState } from "react";
 import useSpeechToText from "@/hooks/useSpeechToText";
+import io from "socket.io-client";
+import { useParams } from "react-router-dom";
 
 export const ChatPage = () => {
   const customInput = useRef();
   const recommendZone = useRef();
-  const { transcript, listening, toggleListening } = useSpeechToText();
-  //   const { room } = useParams();
+  const { transcript, toggleListening } = useSpeechToText();
+  const [messages, setMessages] = useState([]); // 메시지 배열
+  const socketRef = useRef();
+  const params = useParams();
 
   const handleResizeHeight = () => {
     if (customInput.current && recommendZone.current) {
@@ -30,6 +32,41 @@ export const ChatPage = () => {
     handleResizeHeight();
   }, [transcript]);
 
+  useEffect(() => {
+    // 소켓 연결 설정
+    socketRef.current = io(`https://api.golang-ktb.site/${params.room}`);
+
+    // 특정 방에 조인
+    const roomName = "y";
+    socketRef.current.emit("join", roomName);
+
+    // 메시지 수신 시 처리
+    socketRef.current.on("message", (message) => {
+      setMessages((prevMessages) => [...prevMessages, message]);
+    });
+
+    // 컴포넌트 언마운트 시 소켓 연결 해제
+    return () => {
+      socketRef.current.disconnect();
+    };
+  }, []);
+
+  const handleSendMessage = () => {
+    const message = customInput.current.value;
+    if (message.trim()) {
+      // 내가 보낸 메시지 추가
+      const newMessage = { text: message, isMine: true };
+      setMessages((prevMessages) => [...prevMessages, newMessage]);
+
+      // 서버로 메시지 전송
+      socketRef.current.emit("send-message", newMessage);
+
+      // 입력창 비우기
+      customInput.current.value = "";
+      handleResizeHeight();
+    }
+  };
+
   return (
     <S.ChatLayout
       style={{
@@ -43,17 +80,22 @@ export const ChatPage = () => {
         <EndButton>끝내기</EndButton>
       </Header>
       <S.ChattingZone>
-        {/* <S.SendZone>{DUMMY_TEXT}</S.SendZone>
-        <S.ResBox>
-          <S.ResZone>{DUMMY_TEXT}</S.ResZone>
-          <S.ResImage
-            style={{
-              backgroundImage: `url(${BOT_IMG})`,
-              backgroundSize: "cover",
-              backgroundPosition: "center",
-            }}
-          ></S.ResImage>
-        </S.ResBox> */}
+        {messages.map((message, index) =>
+          message.isMine ? (
+            <S.SendZone key={index}>{message.text}</S.SendZone>
+          ) : (
+            <S.ResBox key={index}>
+              <S.ResZone>{message.text}</S.ResZone>
+              <S.ResImage
+                style={{
+                  backgroundImage: `url(${BOT_IMG})`,
+                  backgroundSize: "cover",
+                  backgroundPosition: "center",
+                }}
+              ></S.ResImage>
+            </S.ResBox>
+          )
+        )}
       </S.ChattingZone>
       <S.RecommendTextContainer ref={recommendZone}>
         <S.RecommendText>추천1</S.RecommendText>
@@ -68,7 +110,7 @@ export const ChatPage = () => {
           maxLength={500}
         />
         <S.MicrophoneIcon onClick={toggleListening} />
-        <S.SendIcon />
+        <S.SendIcon onClick={handleSendMessage} />
       </S.InputContainer>
     </S.ChatLayout>
   );

diff --git a/src/pages/ChatSetting/ChatRelation.jsx b/src/pages/ChatSetting/ChatRelation.jsx
@@ -5,11 +5,13 @@ import { useState } from "react";
 import { CHOOSE_TEXT } from "@/constant/chatSetting";
 import { Header } from "@/components/Header/Header";
 import { postDetail } from "@/api/postDetail";
+import { useNavigate } from "react-router-dom";
 
 const relation = ["커플", "친구", "가족", "기타"];
 const sendRelation = ["COUPLE", "FRIEND", "FAMILY", "ETC"];
 
 export const ChatRelation = () => {
+  const navigate = useNavigate();
   const [selectedBox, setSelectedBox] = useState([false, false, false, false]);
   const [selectedNum, setSelectedNum] = useState(null);
   const [chatDetails, setChatDetails] = useState(""); // 상태 추가
@@ -31,7 +33,11 @@ export const ChatRelation = () => {
         chatroomDetails: chatDetails, // 입력된 값 사용
         relationship: sendRelation[selectedNum],
       });
-      console.log(res.data);
+      if (res.data.success) {
+        console.log(
+          `https://golang-ktb.site/${localStorage.getItem("chatroomUUID")}`
+        );
+      }
     } else {
       alert("모든 필드를 채워주세요.");
     }