diff --git a/package-lock.json b/package-lock.json index 6149e571..b671a91f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,6 @@ "@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", @@ -21,11 +20,8 @@ "match-sorter": "^6.3.1", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-hook-form": "^7.48.2", "react-icons": "^4.11.0", "react-router-dom": "^6.18.0", - "react-spinners": "^0.13.8", - "recoil": "^0.7.7", "socket.io-client": "^4.7.2", "sort-by": "^1.2.0", "styled-components": "^6.1.0" @@ -2647,51 +2643,6 @@ "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", @@ -2754,24 +2705,6 @@ "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", @@ -4272,11 +4205,6 @@ "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", @@ -4820,15 +4748,6 @@ "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", @@ -4921,27 +4840,6 @@ "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", @@ -4997,11 +4895,6 @@ "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", @@ -5158,22 +5051,12 @@ "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", "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==", "dev": true }, - "node_modules/hamt_plus": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/hamt_plus/-/hamt_plus-1.0.2.tgz", - "integrity": "sha512-t2JXKaehnMb9paaYA7J0BX8QQAY8lwfQ9Gjf4pg/mk4krt+cmwmU652HOoWonf+7+EQV97ARPMhhVgU1ra2GhA==" - }, "node_modules/has-bigints": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz", @@ -5858,17 +5741,6 @@ "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", @@ -6632,21 +6504,6 @@ } } }, - "node_modules/react-hook-form": { - "version": "7.48.2", - "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.48.2.tgz", - "integrity": "sha512-H0T2InFQb1hX7qKtDIZmvpU1Xfn/bdahWBN1fH19gSe4bBEqTfmlr7H3XWTaVtiK4/tpPaI1F3355GPMZYge+A==", - "engines": { - "node": ">=12.22.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/react-hook-form" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17 || ^18" - } - }, "node_modules/react-icons": { "version": "4.11.0", "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.11.0.tgz", @@ -6744,15 +6601,6 @@ "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", @@ -6775,25 +6623,6 @@ } } }, - "node_modules/recoil": { - "version": "0.7.7", - "resolved": "https://registry.npmjs.org/recoil/-/recoil-0.7.7.tgz", - "integrity": "sha512-8Og5KPQW9LwC577Vc7Ug2P0vQshkv1y3zG3tSSkWMqkWSwHmE+by06L8JtnGocjW6gcCvfwB3YtrJG6/tWivNQ==", - "dependencies": { - "hamt_plus": "1.0.2" - }, - "peerDependencies": { - "react": ">=16.13.1" - }, - "peerDependenciesMeta": { - "react-dom": { - "optional": true - }, - "react-native": { - "optional": true - } - } - }, "node_modules/reflect.getprototypeof": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz", @@ -7459,11 +7288,6 @@ "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", @@ -7488,11 +7312,6 @@ "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", @@ -7557,22 +7376,6 @@ "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", @@ -7695,14 +7498,6 @@ "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", @@ -8053,14 +7848,6 @@ "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 7b86358f..7df89eae 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,6 @@ "@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", @@ -25,11 +24,8 @@ "match-sorter": "^6.3.1", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-hook-form": "^7.48.2", "react-icons": "^4.11.0", "react-router-dom": "^6.18.0", - "react-spinners": "^0.13.8", - "recoil": "^0.7.7", "socket.io-client": "^4.7.2", "sort-by": "^1.2.0", "styled-components": "^6.1.0" diff --git a/src/components/Login/SignUpModal/index.tsx b/src/components/Login/SignUpModal/index.tsx index 7a48eec4..9ae11b9f 100644 --- a/src/components/Login/SignUpModal/index.tsx +++ b/src/components/Login/SignUpModal/index.tsx @@ -1,10 +1,10 @@ -import React, { useState } from "react"; -import { useForm, Controller } from "react-hook-form"; -import { Input, Button, Text, Alert, AlertIcon } from "@chakra-ui/react"; -import useFetch from "../../../hooks/useFetch"; +import useInput from "../../../hooks/useInput"; +import { Input } from "@chakra-ui/react"; +import { Button } from "@chakra-ui/react"; +import { useEffect, useState } from "react"; import axios from "axios"; -interface FormData { +interface Data { id: string; password: string; name: string; @@ -12,180 +12,46 @@ interface FormData { } const SignUpModal = () => { - const { - control, - handleSubmit, - setError, - clearErrors, - formState: { errors }, - } = useForm(); - const signUpFetch = useFetch({ - url: "https://fastcampus-chat.net/signup", - method: "POST", - data: {}, - start: false, + const idInput = useInput(""); + const pwInput = useInput(""); + const nameInput = useInput(""); + const [data, setData] = useState({ + id: "", + password: "", + name: "", }); - const [selectedFile, setSelectedFile] = useState(null); - const [signUpStatus, setSignUpStatus] = useState<{ - type: "success" | "error"; - message: string; - } | null>(null); - const checkIdDuplication = async (id: string): Promise => { - try { - const response = await axios.post( - "https://fastcampus-chat.net/check/id", - { id }, - ); - return response.data.isDuplicated; - } catch (error) { - console.error("Error checking ID duplication", error); - return false; - } - }; - - // 회원가입 제출 - const onSubmit = async (formData: FormData) => { - let pictureAsString: string | undefined; - - // 파일을 Base64 문자열로 변환 - const toBase64 = (file: File) => - new Promise((resolve, reject) => { - const reader = new FileReader(); - reader.readAsDataURL(file); - reader.onload = () => resolve(reader.result as string); - reader.onerror = (error) => reject(error); - }); - - if (selectedFile) { - pictureAsString = await toBase64(selectedFile); - } - - const dataToSend = { - ...formData, - picture: pictureAsString, - }; - // 회원가입 요청 및 결과 처리 - try { - const response = await axios.post( - "https://fastcampus-chat.net/signup", - dataToSend, - { - headers: { - "content-type": "application/json", - serverId: import.meta.env.VITE_APP_SERVER_ID, - }, + useEffect(() => { + const copy = { ...data }; + copy.id = idInput.value; + copy.password = pwInput.value; + copy.name = nameInput.value; + + setData(copy); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [idInput.value, pwInput.value, nameInput.value]); + + const handleSignup = () => { + axios + .post("https://fastcampus-chat.net/signup", data, { + headers: { + "content-type": "application/json", + serverId: "6603aca7", }, - ); - if (response.status === 200) { - console.log("회원가입 성공:", response.data); - setSignUpStatus({ - type: "success", - message: "회원가입에 성공하였습니다.", - }); - } - } catch (error) { - console.error("회원가입 실패:", error); - setSignUpStatus({ type: "error", message: "회원가입에 실패하였습니다." }); - } + }) + .then((res) => console.log(res)); }; - return ( <>
회원가입
- {signUpStatus && ( - - - {signUpStatus.message} - - )} -
- ( - { - const file = event.target.files?.[0]; - if (file) { - if (file.size > 1024 * 1024) { - console.error("File size exceeds 1MB"); - } else { - setSelectedFile(file); - onChange(file); - } - } - }} - /> - )} - /> - { - try { - const isDuplicated = await checkIdDuplication(id); - if (isDuplicated) { - setError("id", { - type: "manual", - message: "이미 사용중인 ID입니다.", - }); - return false; - } - clearErrors("id"); - return true; - } catch (error) { - console.error("ID 중복 확인 중 오류 발생:", error); - return "ID 중복 확인 중 오류가 발생했습니다."; - } - }, - }} - render={({ field }) => ( - - )} - /> - {errors.id && {errors.id.message}} - - ( - - )} - /> - {errors.password && ( - {errors.password.message} - )} - - ( - - )} - /> - {errors.name && {errors.name.message}} - - - + + + + ); }; diff --git a/src/components/Main/CreateGameModal/index.tsx b/src/components/Main/CreateGameModal/index.tsx index 922796ef..b1121208 100644 --- a/src/components/Main/CreateGameModal/index.tsx +++ b/src/components/Main/CreateGameModal/index.tsx @@ -1,15 +1,14 @@ 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 { ChangeEvent, useEffect, useState } from "react"; import { useNavigate } from "react-router-dom"; +// import { io } from "socket.io-client"; import styled from "styled-components"; import useFetch from "../../../hooks/useFetch"; import useFireFetch from "../../../hooks/useFireFetch"; import useInput from "../../../hooks/useInput"; -import connect from "../../../socket/socket"; -import Loader from "../../common/Loader"; import UserCard from "../../common/UserCard"; +import useSocket from "../../../hooks/useSocket"; const Container = styled.div` position: absolute; @@ -79,7 +78,7 @@ const ImgBox = styled.div` font-size: 3rem; - margin-bottom: 0.5rem; + margin-bottom: 1.5rem; `; const Empty = styled.div` @@ -148,34 +147,10 @@ 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); // 소켓 연결 - const socket = connect("9fe8a1af-9c60-4937-82dd-21d6da5b9cd9"); + const sendMessage = useSocket("9fe8a1af-9c60-4937-82dd-21d6da5b9cd9"); // 게임 데이터 const [roomData, setRoomData] = useState({ @@ -188,9 +163,7 @@ const CreateGameModal = ({ setModal }: Props) => { // 방제목 빈값이면 true const [inputAction, setInpuAction] = useState(false); - // 유저 데이터 const [userList, setUserList] = useState([]); - const [userListSearch, setUserListSearch] = useState([]); // input 초기화 const titleInput = useInput(""); @@ -219,9 +192,7 @@ 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]); @@ -237,12 +208,12 @@ const CreateGameModal = ({ setModal }: Props) => { // 유저 검색 기능 useEffect(() => { if (users.result) { - const filter = userList.filter((value: UserType) => + const filter = users.result.filter((value: UserType) => value.name.includes(searchInput.value), ); - setUserListSearch(filter); + setUserList(filter); } - }, [searchInput.value, users.result, userList]); + }, [searchInput.value, users.result]); // 게임 생성 함수 const handleMakeRoom = () => { @@ -269,11 +240,10 @@ const CreateGameModal = ({ setModal }: Props) => { // 파이어베이스 게임 데이터 생성 const newData = { ...roomData, - users: [...roomData.users, token.id], id: createGame.result.id, host: token.id, createdAt: serverTimestamp(), - bg: emoji, + bg: "⭐", status: "대기중", }; @@ -289,7 +259,7 @@ const CreateGameModal = ({ setModal }: Props) => { const text = JSON.stringify(inviteUser); // 초대 메시지 전달 - socket.emit("message-to-server", text); + sendMessage(text); // 해당 게임방으로 이동 navigate(`/game?gameId=${createGame.result.id}`); @@ -302,16 +272,7 @@ const CreateGameModal = ({ setModal }: Props) => {
- {emoji} - + ⭐ { onChange={searchInput.onChange} />
- {users.result && - userListSearch.map((value: UserType) => { + userList.map((value: UserType) => { return ( { - return ( - - ); -}; - -export default Loader; diff --git a/src/hooks/useSocket.ts b/src/hooks/useSocket.ts new file mode 100644 index 00000000..1943ed00 --- /dev/null +++ b/src/hooks/useSocket.ts @@ -0,0 +1,42 @@ +import { useEffect } from "react"; +import { io } from "socket.io-client"; + +interface Message { + id: string; + text: string; + userId: string; + createdAt: Date; +} + +const useSocket = ( + chatId: string, + callback?: (messageObject: Message) => void, +) => { + const token = JSON.parse(localStorage.getItem("token") as string); + + // 소켓 연결 + const socket = io(`https://fastcampus-chat.net/chat?chatId=${chatId}`, { + extraHeaders: { + Authorization: `Bearer ${token.accessToken}`, + serverId: import.meta.env.VITE_APP_SERVER_ID, + }, + }); + + // 변화 감지 + useEffect(() => { + if (callback) { + socket.on("message-to-client", (messageObject) => { + callback(messageObject); + }); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [socket]); + // 메시지 보내기 + const sendMessage = (text: string) => { + socket.emit("message-to-server", text); + }; + + return sendMessage; +}; + +export default useSocket; diff --git a/src/pages/Example/index.tsx b/src/pages/Example/index.tsx index dcd89069..be058c9e 100644 --- a/src/pages/Example/index.tsx +++ b/src/pages/Example/index.tsx @@ -1,17 +1,13 @@ 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"; import useFireFetch from "../../hooks/useFireFetch"; import useInput from "../../hooks/useInput"; -import connect from "../../socket/socket"; - -interface MessageInfo { - id: string; - text: string; -} +import useSocket from "../../hooks/useSocket"; const Example = () => { const token = JSON.parse(localStorage.getItem("token") as string); @@ -27,10 +23,9 @@ const Example = () => { }); // 소켓 통신 - const socket = connect("9fe8a1af-9c60-4937-82dd-21d6da5b9cd9"); - - useEffect(() => { - socket.on("message-to-client", (messageObject) => { + const sendMessage = useSocket( + "9fe8a1af-9c60-4937-82dd-21d6da5b9cd9", + (messageObject) => { // 일반 채팅인지 초대 메시지인지 구별 if (messageObject.text.slice(-5, -2) === "*&^") { // 초대 상태 저장 @@ -44,34 +39,30 @@ const Example = () => { setRoomData(room); } else { // 메시지 데이터, 작성 유저 상태 저장 - const message = { - id: messageObject.userId, - text: messageObject.text, - }; - - console.log(message); - setMessages((prev) => [...prev, message]); + const copy = { ...message }; + copy.id = messageObject.userId; + copy.text = messageObject.text; + setMessage(copy); } - }); - - // 채팅 기록 확인 - socket.on("messages-to-client", (messageObject) => { - console.log(messageObject); - }); - - // 초대 메시지 - socket.on("new-chat", (messageObject) => { - console.log(messageObject); - }); + }, + ); - return () => { - socket.off("message-to-client"); - }; - }, [socket]); + // // 채팅 서버 연결 + // 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 [messages, setMessages] = useState([]); - + const [message, setMessage] = useState({ + id: "", + text: "", + }); // 초대방 정보 데이터 const [roomData, setRoomData] = useState({ id: "", @@ -105,7 +96,7 @@ const Example = () => { url: "https://fastcampus-chat.net/chat/leave", method: "PATCH", data: { - chatId: "535add19-c98f-4a9b-bc6f-c145c496cb91", + chatId: "e6d8fd5b-00e3-4598-b826-11366c8c4676", }, start: false, }); @@ -113,10 +104,40 @@ 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(() => { - console.log(messages); - }, [messages]); + if (message.id !== "") console.log(message); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [message.text]); //팝업 변화 감지 useEffect(() => { @@ -168,9 +189,7 @@ const Example = () => { body: "updated", createdAt: serverTimestamp(), }; - fireFetch.updateData("notice", "asdasdasdasdasd", newData); - const copy = [...notice.data]; const index = copy.findIndex((v) => v.id === "asdasdasdasdasd"); copy[index] = newData; @@ -178,22 +197,22 @@ const Example = () => { notice.setData(copy); }; - const getMessages = () => { - socket.emit("fetch-messages"); + const postData_A = () => { + console.log(1); }; - const liveChat = () => { + const deleteData_A = () => { live.refresh(); }; // api get 요청으로 가져온 데이터 출력 - const getFetchData = () => { + const getData_A = () => { console.log(users.result, users.loading, users.statusCode); }; // 메시지 보내는 함수 const submitMessage = () => { - socket.emit("message-to-server", messageValue.value); + sendMessage(messageValue.value); }; return ( @@ -210,9 +229,9 @@ const Example = () => { {/* 벡엔드 rest api 통신 */}
- - - + + +
{/* 메시지 소켓 통신 */} diff --git a/src/socket/socket.ts b/src/socket/socket.ts deleted file mode 100644 index 9d86793e..00000000 --- a/src/socket/socket.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { io } from "socket.io-client"; - -const connect = (chatId: string) => { - const token = JSON.parse(localStorage.getItem("token") as string); - - const socket = io( - `https://fastcampus-chat.net/${ - chatId === "main" ? "server" : `chat?chatId=${chatId}` - }`, - { - extraHeaders: { - Authorization: `Bearer ${token.accessToken}`, - serverId: import.meta.env.VITE_APP_SERVER_ID, - }, - }, - ); - - return socket; -}; - -export default connect;