From 3e474177cf076320fc0477afc4fa3d9f75928792 Mon Sep 17 00:00:00 2001 From: Yonghun Date: Thu, 9 Nov 2023 18:15:59 +0900 Subject: [PATCH 1/5] Fix: Exclude yourself from user invite list --- src/components/Main/CreateGameModal/index.tsx | 28 ++++++++++++------- 1 file changed, 18 insertions(+), 10 deletions(-) diff --git a/src/components/Main/CreateGameModal/index.tsx b/src/components/Main/CreateGameModal/index.tsx index 4ffb3da5..2bff8365 100644 --- a/src/components/Main/CreateGameModal/index.tsx +++ b/src/components/Main/CreateGameModal/index.tsx @@ -132,6 +132,12 @@ interface ChatRoom { status?: string; } +interface UserType { + id: string; + name: string; + picture: string; +} + interface Props { setModal: React.Dispatch>; } @@ -337,16 +343,18 @@ const CreateGameModal = ({ setModal }: Props) => { marginBottom="1rem" /> {users.result && - users.result.map((value: any) => { - return ( - - ); - })} + users.result + .filter((value: UserType) => value.id !== token.id) + .map((value: UserType) => { + return ( + + ); + })} From 2523b2e2db519ef866aba7b8a3b807d5f64ed0ca Mon Sep 17 00:00:00 2001 From: Yonghun Date: Thu, 9 Nov 2023 20:21:40 +0900 Subject: [PATCH 2/5] Fix: create game title validation --- src/components/Main/CreateGameModal/index.tsx | 37 ++++++++++++++----- 1 file changed, 27 insertions(+), 10 deletions(-) diff --git a/src/components/Main/CreateGameModal/index.tsx b/src/components/Main/CreateGameModal/index.tsx index 2bff8365..b71ccb28 100644 --- a/src/components/Main/CreateGameModal/index.tsx +++ b/src/components/Main/CreateGameModal/index.tsx @@ -144,9 +144,11 @@ interface Props { const CreateGameModal = ({ setModal }: Props) => { const navigate = useNavigate(); + const fireFetch = useFireFetch(); const token = JSON.parse(localStorage.getItem("token") as string); + // 소켓 연결 const socket = io( `https://fastcampus-chat.net/chat?chatId=9fe8a1af-9c60-4937-82dd-21d6da5b9cd9`, { @@ -157,7 +159,7 @@ const CreateGameModal = ({ setModal }: Props) => { }, ); - const fireFetch = useFireFetch(); + // 게임 데이터 const [roomData, setRoomData] = useState({ name: "", users: [], @@ -165,12 +167,20 @@ const CreateGameModal = ({ setModal }: Props) => { num: 1, }); + // 방제목 빈값이면 true + const [inputAction, setInpuAction] = useState(false); + + // 방제목 input 초기화 + const titleInput = useInput(""); + + // 유저정보 요청 const users = useFetch({ url: "https://fastcampus-chat.net/users", method: "GET", start: true, }); + // 게임 만들기 post요청 선언 (호출 X) const createGame = useFetch({ url: "https://fastcampus-chat.net/chat", method: "POST", @@ -181,8 +191,7 @@ const CreateGameModal = ({ setModal }: Props) => { start: false, }); - const titleInput = useInput(""); - + // 방제목 input 저장 useEffect(() => { const copy = { ...roomData }; copy.name = titleInput.value; @@ -190,12 +199,17 @@ const CreateGameModal = ({ setModal }: Props) => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [titleInput.value, titleInput.value]); + // 게임 생성 함수 const handleMakeRoom = () => { - createGame.refresh(); - - console.log(roomData); + if (roomData.name === "") { + setInpuAction(true); + } else { + // 게임 생성 POST 호출 + createGame.refresh(); + } }; + // 게임 인원 선택 함수 const handleRadioChange = (e: ChangeEvent) => { const copy = { ...roomData }; copy.num = ~~e.target.value; @@ -203,8 +217,10 @@ const CreateGameModal = ({ setModal }: Props) => { setRoomData(copy); }; + // 게임 생성 후 파이어베이스 저장 밑 유저 초대 푸쉬알림 useEffect(() => { if (createGame.result) { + // 파이어베이스 게임 데이터 생성 const newData = { ...roomData, id: createGame.result.id, @@ -214,20 +230,21 @@ const CreateGameModal = ({ setModal }: Props) => { status: "대기중", }; + // 파이어베이스 POST요청 fireFetch.usePostData("game", createGame.result.id, newData); - // const roomText = [...JSON.stringify(newData)]; - + // 초대된 유저 목록 생성 const inviteUser: (string | ChatRoom | string[])[] = [...roomData.users]; inviteUser.push(newData); inviteUser.push("*&^"); - // const text = inviteUser.toString(); const text = JSON.stringify(inviteUser); + // 초대 메시지 전달 socket.emit("message-to-server", text); + // 해당 게임방으로 이동 navigate(`/game?gameId=${createGame.result.id}`); } // eslint-disable-next-line react-hooks/exhaustive-deps @@ -241,7 +258,7 @@ const CreateGameModal = ({ setModal }: Props) => { ⭐ Date: Thu, 9 Nov 2023 23:35:24 +0900 Subject: [PATCH 3/5] Feat: invite user search --- src/components/Main/CreateGameModal/index.tsx | 67 +++++++++++++------ 1 file changed, 46 insertions(+), 21 deletions(-) diff --git a/src/components/Main/CreateGameModal/index.tsx b/src/components/Main/CreateGameModal/index.tsx index b71ccb28..c40a102b 100644 --- a/src/components/Main/CreateGameModal/index.tsx +++ b/src/components/Main/CreateGameModal/index.tsx @@ -164,14 +164,17 @@ const CreateGameModal = ({ setModal }: Props) => { name: "", users: [], isPrivate: false, - num: 1, + num: 6, }); // 방제목 빈값이면 true const [inputAction, setInpuAction] = useState(false); - // 방제목 input 초기화 + const [userList, setUserList] = useState([]); + + // input 초기화 const titleInput = useInput(""); + const searchInput = useInput(""); // 유저정보 요청 const users = useFetch({ @@ -191,18 +194,39 @@ const CreateGameModal = ({ setModal }: Props) => { start: false, }); + useEffect(() => { + if (users.result) { + const filter = users.result.filter( + (value: UserType) => value.id !== token.id, + ); + setUserList(filter); + } + }, [users.result]); + // 방제목 input 저장 useEffect(() => { const copy = { ...roomData }; copy.name = titleInput.value; setRoomData(copy); // eslint-disable-next-line react-hooks/exhaustive-deps - }, [titleInput.value, titleInput.value]); + }, [titleInput.value]); + + // 유조 검색 기능 + useEffect(() => { + if (users.result) { + const filter = users.result.filter((value: UserType) => + value.name.includes(searchInput.value), + ); + setUserList(filter); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [searchInput.value, users.result]); // 게임 생성 함수 const handleMakeRoom = () => { if (roomData.name === "") { setInpuAction(true); + console.log(roomData); } else { // 게임 생성 POST 호출 createGame.refresh(); @@ -273,7 +297,7 @@ const CreateGameModal = ({ setModal }: Props) => { id="1" name="drone" value="1" - defaultChecked + // checked={roomData.num === 1} onChange={handleRadioChange} /> @@ -284,7 +308,7 @@ const CreateGameModal = ({ setModal }: Props) => { id="2" name="drone" value="2" - checked={roomData.num === 2} + // checked={roomData.num === 2} onChange={handleRadioChange} /> @@ -295,7 +319,7 @@ const CreateGameModal = ({ setModal }: Props) => { id="3" name="drone" value="3" - checked={roomData.num === 3} + // checked={roomData.num === 3} onChange={handleRadioChange} /> @@ -306,7 +330,7 @@ const CreateGameModal = ({ setModal }: Props) => { id="4" name="drone" value="4" - checked={roomData.num === 4} + // checked={roomData.num === 4} onChange={handleRadioChange} /> @@ -317,7 +341,7 @@ const CreateGameModal = ({ setModal }: Props) => { id="5" name="drone" value="5" - checked={roomData.num === 5} + // checked={roomData.num === 5} onChange={handleRadioChange} /> @@ -328,7 +352,7 @@ const CreateGameModal = ({ setModal }: Props) => { id="6" name="drone" value="6" - checked={roomData.num === 6} + checked onChange={handleRadioChange} /> @@ -358,20 +382,21 @@ const CreateGameModal = ({ setModal }: Props) => { placeholder="검색" textAlign="center" marginBottom="1rem" + height="2rem" + value={searchInput.value} + onChange={searchInput.onChange} /> {users.result && - users.result - .filter((value: UserType) => value.id !== token.id) - .map((value: UserType) => { - return ( - - ); - })} + userList.map((value: UserType) => { + return ( + + ); + })} From 2a6291dc906a1dac395a5128d7881ab9bbf3481b Mon Sep 17 00:00:00 2001 From: Yonghun Date: Thu, 9 Nov 2023 23:37:25 +0900 Subject: [PATCH 4/5] Fix: Add dependency --- src/components/Main/CreateGameModal/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Main/CreateGameModal/index.tsx b/src/components/Main/CreateGameModal/index.tsx index c40a102b..04a96ded 100644 --- a/src/components/Main/CreateGameModal/index.tsx +++ b/src/components/Main/CreateGameModal/index.tsx @@ -201,6 +201,7 @@ const CreateGameModal = ({ setModal }: Props) => { ); setUserList(filter); } + // eslint-disable-next-line react-hooks/exhaustive-deps }, [users.result]); // 방제목 input 저장 From fb3aa74f32e7376b1a7457e19f824914ead73163 Mon Sep 17 00:00:00 2001 From: Yonghun Date: Thu, 9 Nov 2023 23:38:59 +0900 Subject: [PATCH 5/5] Fix: Add dependency --- src/components/Main/CreateGameModal/index.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Main/CreateGameModal/index.tsx b/src/components/Main/CreateGameModal/index.tsx index 04a96ded..3cfec28f 100644 --- a/src/components/Main/CreateGameModal/index.tsx +++ b/src/components/Main/CreateGameModal/index.tsx @@ -212,7 +212,7 @@ const CreateGameModal = ({ setModal }: Props) => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [titleInput.value]); - // 유조 검색 기능 + // 유저 검색 기능 useEffect(() => { if (users.result) { const filter = users.result.filter((value: UserType) => @@ -220,7 +220,6 @@ const CreateGameModal = ({ setModal }: Props) => { ); setUserList(filter); } - // eslint-disable-next-line react-hooks/exhaustive-deps }, [searchInput.value, users.result]); // 게임 생성 함수