diff --git a/package-lock.json b/package-lock.json index 6af047a8..e3b84b16 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.1.0", "dependencies": { "@mui/material": "^5.15.3", + "@stomp/stompjs": "^7.0.0", "@types/jest": "^29.5.11", "@types/node": "^20.10.6", "@types/react": "^18.2.46", @@ -26,6 +27,7 @@ "react-textarea-autosize": "^8.5.3", "recoil": "^0.7.7", "recoil-persist": "^5.1.0", + "sockjs-client": "^1.6.1", "styled-components": "^6.1.0", "styled-normalize": "^8.1.0", "typescript": "^4.9.5" @@ -3796,6 +3798,11 @@ "@sinonjs/commons": "^1.7.0" } }, + "node_modules/@stomp/stompjs": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/@stomp/stompjs/-/stompjs-7.0.0.tgz", + "integrity": "sha512-fGdq4wPDnSV/KyOsjq4P+zLc8MFWC3lMmP5FBgLWKPJTYcuCbAIrnRGjB7q2jHZdYCOD5vxLuFoKIYLy5/u8Pw==" + }, "node_modules/@surma/rollup-plugin-off-main-thread": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz", @@ -8196,6 +8203,14 @@ "node": ">=0.8.x" } }, + "node_modules/eventsource": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-2.0.2.tgz", + "integrity": "sha512-IzUmBGPR3+oUG9dUeXynyNmf91/3zUSJg1lCktzKw47OXuhco54U3r9B7O4XX+Rb1Itm9OZ2b0RkTs10bICOxA==", + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/execa": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz", @@ -16002,6 +16017,32 @@ "websocket-driver": "^0.7.4" } }, + "node_modules/sockjs-client": { + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.6.1.tgz", + "integrity": "sha512-2g0tjOR+fRs0amxENLi/q5TiJTqY+WXFOzb5UwXndlK6TO3U/mirZznpx6w34HVMoc3g7cY24yC/ZMIYnDlfkw==", + "dependencies": { + "debug": "^3.2.7", + "eventsource": "^2.0.2", + "faye-websocket": "^0.11.4", + "inherits": "^2.0.4", + "url-parse": "^1.5.10" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://tidelift.com/funding/github/npm/sockjs-client" + } + }, + "node_modules/sockjs-client/node_modules/debug": { + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", + "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==", + "dependencies": { + "ms": "^2.1.1" + } + }, "node_modules/source-list-map": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz", diff --git a/package.json b/package.json index 0564b86b..80561037 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "private": true, "dependencies": { "@mui/material": "^5.15.3", + "@stomp/stompjs": "^7.0.0", "@types/jest": "^29.5.11", "@types/node": "^20.10.6", "@types/react": "^18.2.46", @@ -21,6 +22,7 @@ "react-textarea-autosize": "^8.5.3", "recoil": "^0.7.7", "recoil-persist": "^5.1.0", + "sockjs-client": "^1.6.1", "styled-components": "^6.1.0", "styled-normalize": "^8.1.0", "typescript": "^4.9.5" diff --git a/src/components/Buyer/BuyerCounselorProfile/CounselorReview.tsx b/src/components/Buyer/BuyerCounselorProfile/CounselorReview.tsx index a8c3f501..71020560 100644 --- a/src/components/Buyer/BuyerCounselorProfile/CounselorReview.tsx +++ b/src/components/Buyer/BuyerCounselorProfile/CounselorReview.tsx @@ -22,7 +22,7 @@ export const CounselorReview = ({ counselorId }: CounselorReviewProps) => { const fetchReviewData = async () => { setIsLoading(true); const params = { - cursorId: 0, + reviewId: 0, }; const res: any = await getReviews(counselorId, { params }); if (res.status === 200) { diff --git a/src/pages/Buyer/BuyerChat.tsx b/src/pages/Buyer/BuyerChat.tsx index a02bddf2..0a36cfbb 100644 --- a/src/pages/Buyer/BuyerChat.tsx +++ b/src/pages/Buyer/BuyerChat.tsx @@ -1,121 +1,64 @@ -import { useState } from 'react'; +// import { useState } from 'react'; import SockJs from 'sockjs-client'; -import Stomp from 'stompjs'; - +import * as StompJs from '@stomp/stompjs'; export const BuyerChat = () => { - // const [stompClient, setStompClient] = useState(null); - // const [chatId] = useState(20); - // const [isCustomer] = useState(true); - // const [token, setToken] = useState(''); - // const [messages, setMessages] = useState([]); - // const [messageInput, setMessageInput] = useState(''); - // const connect = () => { - // const socket = new SockJs('/chat'); - // const client = Stomp.over(socket); - // client.connect( - // { - // Authorization: 'Bearer ' + token, - // isCustomer: isCustomer, - // }, - // (frame) => { - // console.log('Connected: ' + frame); - // // Subscribe to channels - // client.subscribe( - // '/queue/chattings/notifications/customers/19', - // (notification) => { - // console.log('Notification: ', notification.body); - // }, - // ); - // client.subscribe( - // '/queue/chattings/customers/' + chatId, - // (statusUpdate) => { - // console.log('Status Update: ', statusUpdate.body); - // }, - // ); - // client.subscribe( - // '/queue/chattings/status/customers/' + chatId, - // (statusAutoUpdate) => { - // console.log('Status Auto Update: ', statusAutoUpdate.body); - // }, - // ); - // client.subscribe( - // '/queue/chattings/exception/customers/' + chatId, - // (error) => { - // console.log('Error: ', error.body); - // }, - // ); - // client.subscribe( - // '/queue/chatMessages/customers/' + chatId, - // (message) => { - // console.log('Message: ', message.body); - // displayMessage(message.body); - // }, - // ); - // setStompClient(client); - // }, - // ); - // }; - // const sendMessage = () => { - // if (stompClient !== null) { - // stompClient.send( - // `/app/api/v1/chatMessages/customers/${chatId}`, - // {}, - // JSON.stringify({ content: messageInput }), - // ); - // } - // }; - // const sendChatStartRequest = () => { - // stompClient.send( - // `/app/api/v1/chat/customers/${chatId}`, - // {}, - // JSON.stringify({ chatWebsocketStatus: 'COUNSELOR_CHAT_START_REQUEST' }), - // ); - // }; - // const sendChatStartResponse = () => { - // stompClient.send( - // `/app/api/v1/chat/customers/${chatId}`, - // {}, - // JSON.stringify({ chatWebsocketStatus: 'CUSTOMER_CHAT_START_RESPONSE' }), - // ); - // }; - // const sendChatFinishRequest = () => { - // stompClient.send( - // `/app/api/v1/chat/customers/${chatId}`, - // {}, - // JSON.stringify({ chatWebsocketStatus: 'CUSTOMER_CHAT_FINISH_REQUEST' }), - // ); - // }; - // const displayMessage = (message) => { - // setMessages([...messages, message]); - // }; - return ( - <> - //
- //

Customer Chat

- //
- // - // setToken(e.target.value)} - // /> - // - //
- //
- // {messages.map((message, index) => ( - //
{message}
- // ))} - //
- // setMessageInput(e.target.value)} - // /> - // - // - // - // - //
- ); + const socket = new SockJs('/chat'); + const stompClient = StompJs.Stomp.over(socket); + const chatId = 20; + const headers = { + Authorization: + 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJjaGF0QGdtYWlsLmNvbSIsImF1dGhvcml0aWVzIjoiUk9MRV9DVVNUT01FUiIsImV4cCI6MTcwNjMyNDE0Nn0.NL23laiKzJFOlzyvgSMwXcm5Q-NsFqmu6PYFhvbl_QQ', + isCustomer: 'true', + }; + + stompClient.configure({ + brokerURL: '/chat', + connectHeaders: headers, + reconnectDelay: 5000, + heartbeatIncoming: 4000, + heartbeatOutgoing: 4000, + onConnect: (frame) => { + console.log('Connected: ' + frame); + + // 구독 + stompClient.subscribe( + '/queue/chattings/notifications/customers/19', + (notification) => { + console.log('Notification: ', notification.body); + }, + ); + + stompClient.subscribe( + '/queue/chattings/customers/' + chatId, + (statusUpdate) => { + console.log('Status Update: ', statusUpdate.body); + }, + ); + + stompClient.subscribe( + '/queue/chattings/status/customers/' + chatId, + (statusAutoUpdate) => { + console.log('Status Auto Update: ', statusAutoUpdate.body); + }, + ); + + stompClient.subscribe( + '/queue/chattings/exception/customers/' + chatId, + (error) => { + console.log('Error: ', error.body); + }, + ); + + stompClient.subscribe( + '/queue/chatMessages/customers/' + chatId, + (message) => { + console.log('Message: ', message.body); + // displayMessage(message.body); + }, + ); + }, + }); + + stompClient.activate(); + return <>; }; diff --git a/src/pages/Buyer/BuyerReviewManage.tsx b/src/pages/Buyer/BuyerReviewManage.tsx index ebf5540b..8b89ae45 100644 --- a/src/pages/Buyer/BuyerReviewManage.tsx +++ b/src/pages/Buyer/BuyerReviewManage.tsx @@ -26,10 +26,9 @@ export const BuyerReviewManage = () => { const setScrollLock = useSetRecoilState(scrollLockState); useLayoutEffect(() => { const fetchReviewData = async () => { - const params = { isCompleted: !isReviewWrite, cursorId: 0 }; + const params = { isCompleted: !isReviewWrite, reviewId: 0 }; const res: any = await getReviewsCustomer({ params }); if (res.status === 200) { - console.log(res.data); setReviewData(res.data); } else if (res.response.status === 404) { alert('존재하지 않는 회원입니다.'); diff --git a/src/pages/Buyer/BuyerSavedCounselor.tsx b/src/pages/Buyer/BuyerSavedCounselor.tsx index a30ab4cf..decd2bdc 100644 --- a/src/pages/Buyer/BuyerSavedCounselor.tsx +++ b/src/pages/Buyer/BuyerSavedCounselor.tsx @@ -29,6 +29,7 @@ export const BuyerSavedCounselor = () => { const res: any = await postWishLists(body); if (res.status === 200) { setWishlistData(res.data); + console.log(res.data[res.data.length]); } else if (res.response.status !== 401) { navigate('/buyer/mypage'); } diff --git a/src/socket.d.ts b/src/socket.d.ts deleted file mode 100644 index 19cec88f..00000000 --- a/src/socket.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare module 'sockjs-client'; -declare var SockJS: any;