From 075b86f7557e108a2ce7f9475a764bb3e4906add Mon Sep 17 00:00:00 2001 From: Yonghun Date: Fri, 10 Nov 2023 16:21:49 +0900 Subject: [PATCH 1/4] Feat: Add imoBtn --- package-lock.json | 172 ++++++++++++++++++ package.json | 2 + src/components/Main/CreateGameModal/index.tsx | 56 +++++- 3 files changed, 221 insertions(+), 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index b671a91f..c760f027 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "@chakra-ui/react": "^2.8.1", "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", + "@joeattardi/emoji-button": "^4.6.4", "@tanstack/react-query": "^5.7.2", "@tanstack/react-query-devtools": "^5.7.4", "axios": "^1.6.0", @@ -22,6 +23,7 @@ "react-dom": "^18.2.0", "react-icons": "^4.11.0", "react-router-dom": "^6.18.0", + "react-spinners": "^0.13.8", "socket.io-client": "^4.7.2", "sort-by": "^1.2.0", "styled-components": "^6.1.0" @@ -2643,6 +2645,51 @@ "resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-0.10.3.tgz", "integrity": "sha512-+ZplYUN3HOpgCfgInqgdDAbkGGVzES1cs32JJpeqoh87SkRobGXElJx+1GZSaDqzFL+bYiX18qEcBK76mYs8uA==" }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "0.2.36", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz", + "integrity": "sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==", + "hasInstallScript": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-svg-core": { + "version": "1.2.36", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz", + "integrity": "sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "^0.2.36" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-regular-svg-icons": { + "version": "5.15.4", + "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.15.4.tgz", + "integrity": "sha512-9VNNnU3CXHy9XednJ3wzQp6SwNwT3XaM26oS4Rp391GsxVYA+0oDR2J194YCIWf7jNRCYKjUCOduxdceLrx+xw==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "^0.2.36" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-solid-svg-icons": { + "version": "5.15.4", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz", + "integrity": "sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "^0.2.36" + }, + "engines": { + "node": ">=6" + } + }, "node_modules/@grpc/grpc-js": { "version": "1.9.9", "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.9.9.tgz", @@ -2705,6 +2752,24 @@ "integrity": "sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==", "dev": true }, + "node_modules/@joeattardi/emoji-button": { + "version": "4.6.4", + "resolved": "https://registry.npmjs.org/@joeattardi/emoji-button/-/emoji-button-4.6.4.tgz", + "integrity": "sha512-vXji10ZwgxRG6xGQ93SIBUQEltWYTs3do/FSEn3qrRWUuavrqIUhh1oMEPmhKARF0pokW6bNRCvVKI6wq//H6w==", + "deprecated": "Emoji Button is now PicMo! Please install the 'picmo' package, see https://picmojs.com for details", + "dependencies": { + "@fortawesome/fontawesome-svg-core": "^1.2.28", + "@fortawesome/free-regular-svg-icons": "^5.13.0", + "@fortawesome/free-solid-svg-icons": "^5.13.0", + "@popperjs/core": "^2.4.0", + "escape-html": "^1.0.3", + "focus-trap": "^5.1.0", + "fuzzysort": "^1.1.4", + "tiny-emitter": "^2.1.0", + "tslib": "^2.0.0", + "twemoji": "^12.1.2" + } + }, "node_modules/@jridgewell/gen-mapping": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz", @@ -4205,6 +4270,11 @@ "node": ">=6" } }, + "node_modules/escape-html": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", + "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==" + }, "node_modules/escape-string-regexp": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", @@ -4748,6 +4818,15 @@ "node": ">=10" } }, + "node_modules/focus-trap": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-5.1.0.tgz", + "integrity": "sha512-CkB/nrO55069QAUjWFBpX6oc+9V90Qhgpe6fBWApzruMq5gnlh90Oo7iSSDK7pKiV5ugG6OY2AXM5mxcmL3lwQ==", + "dependencies": { + "tabbable": "^4.0.0", + "xtend": "^4.0.1" + } + }, "node_modules/follow-redirects": { "version": "1.15.3", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz", @@ -4840,6 +4919,27 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz", "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==" }, + "node_modules/fs-extra": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz", + "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==", + "dependencies": { + "graceful-fs": "^4.2.0", + "jsonfile": "^4.0.0", + "universalify": "^0.1.0" + }, + "engines": { + "node": ">=6 <7 || >=8" + } + }, + "node_modules/fs-extra/node_modules/jsonfile": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", + "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==", + "optionalDependencies": { + "graceful-fs": "^4.1.6" + } + }, "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -4895,6 +4995,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/fuzzysort": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/fuzzysort/-/fuzzysort-1.9.0.tgz", + "integrity": "sha512-MOxCT0qLTwLqmEwc7UtU045RKef7mc8Qz8eR4r2bLNEq9dy/c3ZKMEFp6IEst69otkQdFZ4FfgH2dmZD+ddX1g==" + }, "node_modules/gensync": { "version": "1.0.0-beta.2", "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz", @@ -5051,6 +5156,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/graceful-fs": { + "version": "4.2.11", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz", + "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==" + }, "node_modules/graphemer": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz", @@ -5741,6 +5851,17 @@ "node": ">=6" } }, + "node_modules/jsonfile": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-5.0.0.tgz", + "integrity": "sha512-NQRZ5CRo74MhMMC3/3r5g2k4fjodJ/wh8MxjFbCViWKFjxrnudWSY5vomh+23ZaXzAS7J3fBZIR2dV6WbmfM0w==", + "dependencies": { + "universalify": "^0.1.2" + }, + "optionalDependencies": { + "graceful-fs": "^4.1.6" + } + }, "node_modules/jsx-ast-utils": { "version": "3.3.5", "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz", @@ -6601,6 +6722,15 @@ "react-dom": ">=16.8" } }, + "node_modules/react-spinners": { + "version": "0.13.8", + "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.8.tgz", + "integrity": "sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==", + "peerDependencies": { + "react": "^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-style-singleton": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz", @@ -7288,6 +7418,11 @@ "url": "https://opencollective.com/unts" } }, + "node_modules/tabbable": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-4.0.0.tgz", + "integrity": "sha512-H1XoH1URcBOa/rZZWxLxHCtOdVUEev+9vo5YdYhC9tCY4wnybX+VQrCYuy9ubkg69fCBxCONJOSLGfw0DWMffQ==" + }, "node_modules/terser": { "version": "5.24.0", "resolved": "https://registry.npmjs.org/terser/-/terser-5.24.0.tgz", @@ -7312,6 +7447,11 @@ "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==", "dev": true }, + "node_modules/tiny-emitter": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz", + "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==" + }, "node_modules/tiny-invariant": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz", @@ -7376,6 +7516,22 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" }, + "node_modules/twemoji": { + "version": "12.1.6", + "resolved": "https://registry.npmjs.org/twemoji/-/twemoji-12.1.6.tgz", + "integrity": "sha512-FIKi9Jne5IiDGDWekoANJ1a8ltUKVbJLEIR8XUpbFRDMqIPgLWnYgjeWZ1KOrdiTztRCAa9x4v+5w5OuiJOGVw==", + "dependencies": { + "fs-extra": "^8.0.1", + "jsonfile": "^5.0.0", + "twemoji-parser": "12.1.3", + "universalify": "^0.1.2" + } + }, + "node_modules/twemoji-parser": { + "version": "12.1.3", + "resolved": "https://registry.npmjs.org/twemoji-parser/-/twemoji-parser-12.1.3.tgz", + "integrity": "sha512-ND4LZXF4X92/PFrzSgGkq6KPPg8swy/U0yRw1k/+izWRVmq1HYi3khPwV3XIB6FRudgVICAaBhJfW8e8G3HC7Q==" + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", @@ -7498,6 +7654,14 @@ "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==" }, + "node_modules/universalify": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", + "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==", + "engines": { + "node": ">= 4.0.0" + } + }, "node_modules/untildify": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/untildify/-/untildify-4.0.0.tgz", @@ -7848,6 +8012,14 @@ "node": ">=0.4.0" } }, + "node_modules/xtend": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", + "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==", + "engines": { + "node": ">=0.4" + } + }, "node_modules/y18n": { "version": "5.0.8", "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", diff --git a/package.json b/package.json index 7df89eae..9940d0d5 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "@chakra-ui/react": "^2.8.1", "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", + "@joeattardi/emoji-button": "^4.6.4", "@tanstack/react-query": "^5.7.2", "@tanstack/react-query-devtools": "^5.7.4", "axios": "^1.6.0", @@ -26,6 +27,7 @@ "react-dom": "^18.2.0", "react-icons": "^4.11.0", "react-router-dom": "^6.18.0", + "react-spinners": "^0.13.8", "socket.io-client": "^4.7.2", "sort-by": "^1.2.0", "styled-components": "^6.1.0" diff --git a/src/components/Main/CreateGameModal/index.tsx b/src/components/Main/CreateGameModal/index.tsx index b1121208..4c5a4b5c 100644 --- a/src/components/Main/CreateGameModal/index.tsx +++ b/src/components/Main/CreateGameModal/index.tsx @@ -1,8 +1,8 @@ import { Button, Input } from "@chakra-ui/react"; import { serverTimestamp } from "firebase/firestore"; -import { ChangeEvent, useEffect, useState } from "react"; +import { ChangeEvent, useEffect, useRef, useState } from "react"; import { useNavigate } from "react-router-dom"; -// import { io } from "socket.io-client"; +import { EmojiButton } from "@joeattardi/emoji-button"; import styled from "styled-components"; import useFetch from "../../../hooks/useFetch"; import useFireFetch from "../../../hooks/useFireFetch"; @@ -78,7 +78,7 @@ const ImgBox = styled.div` font-size: 3rem; - margin-bottom: 1.5rem; + margin-bottom: 0.5rem; `; const Empty = styled.div` @@ -147,6 +147,30 @@ const CreateGameModal = ({ setModal }: Props) => { const navigate = useNavigate(); const fireFetch = useFireFetch(); + // 이모지 인스턴스 및 데이터 생성 + const [emoji, setEmoji] = useState("⭐"); + const pickerRef = useRef(null); + const picker = new EmojiButton({ + showSearch: false, + showPreview: false, + showRecents: false, + theme: "dark", + zIndex: 10000, + position: { + top: "45%", + right: "50%", + }, + }); + picker.on("emoji", (selection) => { + // 선택된 이모지 처리 + setEmoji(selection.emoji); + }); + + // 버튼을 클릭할 때 picker를 토글 + const handleButtonClick = () => { + picker.togglePicker(pickerRef as unknown as HTMLElement); + }; + const token = JSON.parse(localStorage.getItem("token") as string); // 소켓 연결 @@ -163,7 +187,9 @@ const CreateGameModal = ({ setModal }: Props) => { // 방제목 빈값이면 true const [inputAction, setInpuAction] = useState(false); + // 유저 데이터 const [userList, setUserList] = useState([]); + const [userListSearch, setUserListSearch] = useState([]); // input 초기화 const titleInput = useInput(""); @@ -192,7 +218,9 @@ const CreateGameModal = ({ setModal }: Props) => { const filter = users.result.filter( (value: UserType) => value.id !== token.id, ); + setUserList(filter); + setUserListSearch(filter); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [users.result]); @@ -208,12 +236,12 @@ const CreateGameModal = ({ setModal }: Props) => { // 유저 검색 기능 useEffect(() => { if (users.result) { - const filter = users.result.filter((value: UserType) => + const filter = userList.filter((value: UserType) => value.name.includes(searchInput.value), ); - setUserList(filter); + setUserListSearch(filter); } - }, [searchInput.value, users.result]); + }, [searchInput.value, users.result, userList]); // 게임 생성 함수 const handleMakeRoom = () => { @@ -240,10 +268,11 @@ const CreateGameModal = ({ setModal }: Props) => { // 파이어베이스 게임 데이터 생성 const newData = { ...roomData, + users: [...roomData.users, token.id], id: createGame.result.id, host: token.id, createdAt: serverTimestamp(), - bg: "⭐", + bg: emoji, status: "대기중", }; @@ -272,7 +301,16 @@ const CreateGameModal = ({ setModal }: Props) => {
- ⭐ + {emoji} + { />
{users.result && - userList.map((value: UserType) => { + userListSearch.map((value: UserType) => { return ( Date: Fri, 10 Nov 2023 16:34:17 +0900 Subject: [PATCH 2/4] Feat: Add loading ui --- src/components/Main/CreateGameModal/index.tsx | 6 ++++-- src/components/common/Loader/index.tsx | 14 ++++++++++++++ 2 files changed, 18 insertions(+), 2 deletions(-) create mode 100644 src/components/common/Loader/index.tsx diff --git a/src/components/Main/CreateGameModal/index.tsx b/src/components/Main/CreateGameModal/index.tsx index 4c5a4b5c..7a5f089c 100644 --- a/src/components/Main/CreateGameModal/index.tsx +++ b/src/components/Main/CreateGameModal/index.tsx @@ -1,14 +1,15 @@ import { Button, Input } from "@chakra-ui/react"; +import { EmojiButton } from "@joeattardi/emoji-button"; import { serverTimestamp } from "firebase/firestore"; import { ChangeEvent, useEffect, useRef, useState } from "react"; import { useNavigate } from "react-router-dom"; -import { EmojiButton } from "@joeattardi/emoji-button"; import styled from "styled-components"; import useFetch from "../../../hooks/useFetch"; import useFireFetch from "../../../hooks/useFireFetch"; import useInput from "../../../hooks/useInput"; -import UserCard from "../../common/UserCard"; import useSocket from "../../../hooks/useSocket"; +import Loader from "../../common/Loader"; +import UserCard from "../../common/UserCard"; const Container = styled.div` position: absolute; @@ -419,6 +420,7 @@ const CreateGameModal = ({ setModal }: Props) => { onChange={searchInput.onChange} /> + {users.result && userListSearch.map((value: UserType) => { return ( diff --git a/src/components/common/Loader/index.tsx b/src/components/common/Loader/index.tsx new file mode 100644 index 00000000..207710ff --- /dev/null +++ b/src/components/common/Loader/index.tsx @@ -0,0 +1,14 @@ +import ClockLoader from "react-spinners/ClockLoader"; + +const Loader = ({ loading }: { loading: boolean }) => { + return ( + + ); +}; + +export default Loader; From 92f7429647a5d43960b6d5c74bbc15018a3139d2 Mon Sep 17 00:00:00 2001 From: Yonghun Date: Fri, 10 Nov 2023 17:20:45 +0900 Subject: [PATCH 3/4] Fix: Duplicate message text --- src/pages/Example/index.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/pages/Example/index.tsx b/src/pages/Example/index.tsx index be058c9e..7e38224d 100644 --- a/src/pages/Example/index.tsx +++ b/src/pages/Example/index.tsx @@ -213,6 +213,10 @@ const Example = () => { // 메시지 보내는 함수 const submitMessage = () => { sendMessage(messageValue.value); + setMessage({ + id: "", + text: "", + }); }; return ( From 4fe19a9dc5bc0fa57dc1e1955deb15ae302181b6 Mon Sep 17 00:00:00 2001 From: Yonghun Date: Fri, 10 Nov 2023 18:13:24 +0900 Subject: [PATCH 4/4] format --- src/pages/Example/index.tsx | 85 +++++++++++++++++-------------------- 1 file changed, 40 insertions(+), 45 deletions(-) diff --git a/src/pages/Example/index.tsx b/src/pages/Example/index.tsx index 7e38224d..4b49c319 100644 --- a/src/pages/Example/index.tsx +++ b/src/pages/Example/index.tsx @@ -1,7 +1,6 @@ import { Button, Input } from "@chakra-ui/react"; import { serverTimestamp } from "firebase/firestore"; import { useEffect, useState } from "react"; -// import { io } from "socket.io-client"; import CreateGameModal from "../../components/Main/CreateGameModal"; import ToastNotice from "../../components/common/ToastNotice"; import useFetch from "../../hooks/useFetch"; @@ -47,17 +46,6 @@ const Example = () => { }, ); - // // 채팅 서버 연결 - // const socket = io( - // `https://fastcampus-chat.net/chat?chatId=9fe8a1af-9c60-4937-82dd-21d6da5b9cd9`, - // { - // extraHeaders: { - // Authorization: `Bearer ${token.accessToken}`, - // serverId: import.meta.env.VITE_APP_SERVER_ID, - // }, - // }, - // ); - // 메세지 데이터 const [message, setMessage] = useState({ id: "", @@ -104,35 +92,6 @@ const Example = () => { // 메시지 input value 저장 const messageValue = useInput(""); - // // 소켓 통신 시 메시지 데이터 저장 - // useEffect(() => { - // socket.on("message-to-client", (messageObject) => { - // // 일반 채팅인지 초대 메시지인지 구별 - - // if (messageObject.text.slice(-5, -2) === "*&^") { - // // 초대 상태 저장 - // const usersArr = JSON.parse(messageObject.text); - // const users = [...usersArr]; - // users.pop(); - // users.pop(); - // const room = usersArr[usersArr.length - 2]; - - // setToastUser(users); - // setRoomData(room); - // } else { - // // 메시지 데이터, 작성 유저 상태 저장 - // const copy = { ...message }; - // copy.id = messageObject.userId; - // copy.text = messageObject.text; - // setMessage(copy); - // } - - // // console.log(messageObject); - // }); - - // // eslint-disable-next-line react-hooks/exhaustive-deps - // }, [socket]); - // 메시지 값 변화시(소켓 통신 시) 콘솔에 메시지 데이터 출력 useEffect(() => { if (message.id !== "") console.log(message); @@ -213,10 +172,6 @@ const Example = () => { // 메시지 보내는 함수 const submitMessage = () => { sendMessage(messageValue.value); - setMessage({ - id: "", - text: "", - }); }; return ( @@ -260,3 +215,43 @@ const Example = () => { }; export default Example; + +// // 채팅 서버 연결 +// const socket = io( +// `https://fastcampus-chat.net/chat?chatId=9fe8a1af-9c60-4937-82dd-21d6da5b9cd9`, +// { +// extraHeaders: { +// Authorization: `Bearer ${token.accessToken}`, +// serverId: import.meta.env.VITE_APP_SERVER_ID, +// }, +// }, +// ); + +// // 소켓 통신 시 메시지 데이터 저장 +// useEffect(() => { +// socket.on("message-to-client", (messageObject) => { +// // 일반 채팅인지 초대 메시지인지 구별 + +// if (messageObject.text.slice(-5, -2) === "*&^") { +// // 초대 상태 저장 +// const usersArr = JSON.parse(messageObject.text); +// const users = [...usersArr]; +// users.pop(); +// users.pop(); +// const room = usersArr[usersArr.length - 2]; + +// setToastUser(users); +// setRoomData(room); +// } else { +// // 메시지 데이터, 작성 유저 상태 저장 +// const copy = { ...message }; +// copy.id = messageObject.userId; +// copy.text = messageObject.text; +// setMessage(copy); +// } + +// // console.log(messageObject); +// }); + +// // eslint-disable-next-line react-hooks/exhaustive-deps +// }, [socket]);