From e7ef5e9b122c63018fcfd633566ec072016061d0 Mon Sep 17 00:00:00 2001 From: inyoung Date: Sat, 27 Jan 2024 14:12:55 +0900 Subject: [PATCH 01/10] =?UTF-8?q?Feat:=20=EC=84=9C=EB=B9=84=EC=8A=A4=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20init?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Router.tsx | 6 +- .../Seller/SellerChat/ChatBottomSection.tsx | 97 ++++++++++++++++++- src/pages/Common/Service.tsx | 22 +++++ 3 files changed, 121 insertions(+), 4 deletions(-) create mode 100644 src/pages/Common/Service.tsx diff --git a/src/Router.tsx b/src/Router.tsx index d66a0024..c873bbfe 100644 --- a/src/Router.tsx +++ b/src/Router.tsx @@ -43,6 +43,7 @@ import { SellerTerminate } from 'pages/Seller/SellerTerminate'; import { SellerLogout } from 'pages/Seller/SellerLogout'; import { Admin } from 'pages/Common/Admin'; import { BuyerChat } from 'pages/Buyer/BuyerChat'; +import Service from 'pages/Common/Service'; const Router = () => { const navigate = useNavigate(); return ( @@ -115,7 +116,7 @@ const Router = () => { {/* 판매자 : 상담 */} {/* 판매자 : 채팅 */} - } /> + } /> {/* 판매자 : 편지 */} {/* 질문, 답장, 추가질문 , 추가답장 탭 페이지*/} @@ -148,6 +149,9 @@ const Router = () => { {/* 판매자 : 마인더 인증 */} } /> } /> + + {/* 서비스 소개 */} + } /> ); }; diff --git a/src/components/Seller/SellerChat/ChatBottomSection.tsx b/src/components/Seller/SellerChat/ChatBottomSection.tsx index b45fd495..5ea0b13b 100644 --- a/src/components/Seller/SellerChat/ChatBottomSection.tsx +++ b/src/components/Seller/SellerChat/ChatBottomSection.tsx @@ -1,11 +1,14 @@ import { Button } from 'components/Common/Button'; import Input from 'components/Common/Input'; import { Space } from 'components/Common/Space'; -import React, { useRef, useState } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import styled from 'styled-components'; import { Green, Grey3, Grey5, Grey6 } from 'styles/color'; import { ReactComponent as SendIcon } from 'assets/icons/icon-send.svg'; import TextareaAutosize from 'react-textarea-autosize'; +import SockJS from 'sockjs-client'; +import * as StompJs from '@stomp/stompjs'; +import { useParams } from 'react-router-dom'; function ChatBottomSection() { // 상담 시작 요청했는지여부 @@ -14,8 +17,91 @@ function ChatBottomSection() { const [isStart, setIsStart] = useState(false); // 상담이 종료 요청했는지 여부 const [isEnd, setIsEnd] = useState(false); + // 내가 보낼 텍스트 + + const [counselorStomp, setCounselorStomp] = useState(); const [text, setText] = useState(''); - + const { chatid } = useParams(); + + const connect = () => { + const socket = new SockJS('https://sharemindapp.com/chat'); + const stomp = StompJs.Stomp.over(socket); + setCounselorStomp(stomp); + stomp.connect( + { Authorization: localStorage.accessToken, isCustomer: false }, + (frame: any) => { + console.log('Connected: ' + frame); + stomp.subscribe( + `/queue/chattings/notifications/counselors/${chatid}`, + (notification: any) => { + console.log('Notification: ', notification.body); + }, + ); + stomp.subscribe( + `/queue/chattings/counselors/${chatid}`, + (statusUpdate: any) => { + console.log('Status Update: ', statusUpdate.body); + }, + ); + stomp.subscribe( + `/queue/chattings/status/counselors/${chatid}`, + (statusAutoUpdate: any) => { + console.log('Status Auto Update: ', statusAutoUpdate.body); + }, + ); + stomp.subscribe( + `/queue/chattings/exception/counselors/${chatid}`, + (error: any) => { + console.log('Error: ', error.body); + }, + ); + stomp.subscribe( + `/queue/chatMessages/counselors/${chatid}`, + (receivedMessage: any) => { + console.log('Message: ', receivedMessage.body); + + }, + ); + }, + ); + }; + + useEffect(() => { + connect(); + }, []); + + const sendMessage = () => { + counselorStomp?.send( + '/app/api/v1/chatMessages/counselors/' + 20, + {}, + JSON.stringify({ content: text }), + ); + }; + + const sendChatStartRequest = () => { + counselorStomp?.send( + `/app/api/v1/chat/counselors/${chatid}`, + {}, + JSON.stringify({ chatWebsocketStatus: 'COUNSELOR_CHAT_START_REQUEST' }), + ); + }; + + const sendChatStartResponse = () => { + counselorStomp?.send( + `/app/api/v1/chat/counselors/${chatid}`, + {}, + JSON.stringify({ chatWebsocketStatus: 'CUSTOMER_CHAT_START_RESPONSE' }), + ); + }; + + const sendChatFinishRequest = () => { + counselorStomp?.send( + `/app/api/v1/chat/counselors/${chatid}`, + {}, + JSON.stringify({ chatWebsocketStatus: 'CUSTOMER_CHAT_FINISH_REQUEST' }), + ); + }; + return ( @@ -54,7 +140,12 @@ function ChatBottomSection() { rows={1} maxRows={4} /> - 0 ? Green : Grey3} /> + 0 ? Green : Grey3} + onClick={() => { + sendMessage(); + }} + /> ); diff --git a/src/pages/Common/Service.tsx b/src/pages/Common/Service.tsx new file mode 100644 index 00000000..8bb84670 --- /dev/null +++ b/src/pages/Common/Service.tsx @@ -0,0 +1,22 @@ +import { BackIcon, HeaderWrapper } from 'components/Buyer/Common/Header'; +import React from 'react'; +import { useNavigate } from 'react-router-dom'; +import { Heading } from 'styles/font'; + +function Service() { + const navigate = useNavigate(); + return ( + <> + + { + navigate('/seller/'); + }} + /> + 서비스 소개 + + + ); +} + +export default Service; From df8ea56b65cb927c2f7a29290058eafc3af50c7a Mon Sep 17 00:00:00 2001 From: inyoung Date: Mon, 29 Jan 2024 18:27:34 +0900 Subject: [PATCH 02/10] =?UTF-8?q?Feat:=20=EB=A7=88=EC=9D=B8=EB=8D=94=20?= =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=95=84=EC=9B=83=20=EA=B8=B0=EB=8A=A5,=20?= =?UTF-8?q?=EC=83=81=EB=8B=B4=20=EC=A2=85=EB=A3=8C=EB=90=98=EC=97=88?= =?UTF-8?q?=EC=9D=84=20=EB=95=8C=20=EB=A6=AC=EB=B7=B0=EC=9E=88=EB=8A=94?= =?UTF-8?q?=EC=A7=80=20=EC=97=AC=EB=B6=80=EC=97=90=20=EB=94=B0=EB=A5=B8=20?= =?UTF-8?q?view?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Seller/Common/OngoingCounsultBox.tsx | 15 +++++++++++---- .../Seller/SellerChat/ChatBottomSection.tsx | 2 +- src/pages/Seller/SellerLogout.tsx | 4 +++- 3 files changed, 15 insertions(+), 6 deletions(-) diff --git a/src/components/Seller/Common/OngoingCounsultBox.tsx b/src/components/Seller/Common/OngoingCounsultBox.tsx index 8d456cf7..46638ddf 100644 --- a/src/components/Seller/Common/OngoingCounsultBox.tsx +++ b/src/components/Seller/Common/OngoingCounsultBox.tsx @@ -9,22 +9,23 @@ import { Grey3, Grey4, Grey6, - Red, White, } from 'styles/color'; import { Characters } from 'utils/Characters'; import { TagA2Consult } from 'components/Common/TagA2Consult'; import { Button } from 'components/Common/Button'; import { TagA2Cartegory } from 'components/Common/TagA2Cartegory'; +import { useNavigate } from 'react-router-dom'; interface OngoingCounsultBoxProps { - categoryStatus?: CartegoryState; - consultStatus?: ConsultState; + categoryStatus?: string; + consultStatus?: string; counselorName: string | undefined; beforeMinutes: string | null; content: string | null; newMessageCounts: number | null; counselorprofileStatus: number | undefined; onClick?: () => void; + reviewCompleted?: boolean; } function OngoingCounsultBox({ categoryStatus, @@ -35,7 +36,9 @@ function OngoingCounsultBox({ content, newMessageCounts = 0, onClick, + reviewCompleted, }: OngoingCounsultBoxProps) { + const navigate = useNavigate(); return (
@@ -76,7 +79,7 @@ function OngoingCounsultBox({ {content}
- {consultStatus === '상담 종료' && ( + {consultStatus === '상담 종료' && reviewCompleted && (