From 6407b7cd67dbc9949d701975dbdf0f539d100785 Mon Sep 17 00:00:00 2001 From: 4roring <4roring@naver.com> Date: Fri, 22 Nov 2024 22:06:39 +0900 Subject: [PATCH] =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=ED=9B=84=20bingo?= =?UTF-8?q?=20=ED=8C=90=20=EC=83=9D=EC=84=B1=ED=95=98=EA=B3=A0=20/bingo?= =?UTF-8?q?=EB=A1=9C=20=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modules/Bingo/BingoContainer.tsx | 49 ++++++++++++++++++---------- src/modules/Bingo/BingoPresenter.tsx | 28 ++++++++-------- src/modules/Home/Home.tsx | 18 ++++++++-- 3 files changed, 61 insertions(+), 34 deletions(-) diff --git a/src/modules/Bingo/BingoContainer.tsx b/src/modules/Bingo/BingoContainer.tsx index c1dabbf..fc144ab 100644 --- a/src/modules/Bingo/BingoContainer.tsx +++ b/src/modules/Bingo/BingoContainer.tsx @@ -1,6 +1,6 @@ import { useState, useEffect } from "react"; import BingoPresenter from "./BingoPresenter"; -import { useLocation } from 'react-router-dom'; +import { useLocation } from "react-router-dom"; import { getBingoBoard, getSelectedWords, @@ -10,7 +10,7 @@ import { singUpUser, createUserBingoInteraction, getUserLatestInteraction, - getUserName + getUserName, } from "../../api/bingo_api.ts"; import { defafultBingoBoard, @@ -25,10 +25,9 @@ const useInput = (initialValue: string) => { return { value, onChange }; }; -const BingoContainer = () => { +const BingoContainer = () => { const location = useLocation(); - if (location.search === "?logout") - { + if (location.search === "?logout") { localStorage.setItem("myWordList", ""); localStorage.setItem("recentWords", ""); localStorage.setItem("recentSendUser", ""); @@ -49,8 +48,12 @@ const BingoContainer = () => { { value: string; status: number }[] >([]); const [opponentID, setOpponentID] = useState(""); - const [recentWords, setRecentWords] = useState(localStorage.getItem("recentWords") || ""); - const [recentSendUser, setRecentSendUser] = useState(localStorage.getItem("recentSendUser") || ""); + const [recentWords, setRecentWords] = useState( + localStorage.getItem("recentWords") || "" + ); + const [recentSendUser, setRecentSendUser] = useState( + localStorage.getItem("recentSendUser") || "" + ); const MyID = useInput(localStorage.getItem("myID") || ""); const [userSelectedWords, setUserSelectedWords] = useState([]); const initBingoBoard = async () => { @@ -61,24 +64,35 @@ const BingoContainer = () => { bingoBoard.forEach((item, index) => { return (boardData[index] = { value: item.value, - status: [myWord1, myWord2, myWord3, myWord4].includes(item.value) ? 1 : 0, - selected: [myWord1, myWord2, myWord3, myWord4].includes(item.value) ? 1 : 0, + status: [myWord1, myWord2, myWord3, myWord4].includes(item.value) + ? 1 + : 0, + selected: [myWord1, myWord2, myWord3, myWord4].includes(item.value) + ? 1 + : 0, }); }); - localStorage.setItem("myWordList", [myWord1, myWord2, myWord3, myWord4].join("|")); + localStorage.setItem( + "myWordList", + [myWord1, myWord2, myWord3, myWord4].join("|") + ); if (MyID.value != "") { const result = await singUpUser(MyID.value); - if (result === false && !confirm("이미 누군가 사용중인 계정입니다. 정말 로그인하시겠습니까?") && !confirm("정말 로그인하시겠습니까???")) - { + if ( + result === false && + !confirm("이미 누군가 사용중인 계정입니다. 정말 로그인하시겠습니까?") && + !confirm("정말 로그인하시겠습니까???") + ) { localStorage.setItem("myWordList", ""); localStorage.setItem("recentWords", ""); localStorage.setItem("recentSendUser", ""); localStorage.setItem("myID", ""); - return + return; } const user = await getUser(MyID.value); + await createBingoBoard(user.user_id, boardData); } }; @@ -88,8 +102,10 @@ const BingoContainer = () => { const userLatestInteraction = await getUserLatestInteraction(user.user_id); if (userLatestInteraction) { - const sendUserName = await getUserName(userLatestInteraction.send_user_id); - const wordList = userLatestInteraction.word_id_list + const sendUserName = await getUserName( + userLatestInteraction.send_user_id + ); + const wordList = userLatestInteraction.word_id_list; localStorage.setItem("recentWords", wordList); localStorage.setItem("recentSendUser", sendUserName); setRecentWords(wordList); @@ -121,8 +137,7 @@ const BingoContainer = () => { useEffect(() => { const fetchData = async () => { const user = await getUser(MyID.value); - if (user.user_id === null) - return + if (user.user_id === null) return; const fetchedBingoWords = await getBingoBoard(user.user_id); const fetchedSelectedWords = await getSelectedWords(user.user_id); setBingoWords(fetchedBingoWords); diff --git a/src/modules/Bingo/BingoPresenter.tsx b/src/modules/Bingo/BingoPresenter.tsx index 822904c..fedc25b 100644 --- a/src/modules/Bingo/BingoPresenter.tsx +++ b/src/modules/Bingo/BingoPresenter.tsx @@ -9,19 +9,17 @@ import SqaureTextBox from "./components/SqaureTextBox.tsx"; import SelectBox from "./components/SelectBox.tsx"; import { defafultBingoBoard } from "./components/DefaultBingoBoard.ts"; +const careerOptionsArray = defafultBingoBoard.slice(0, 4); +const careerOptions = careerOptionsArray.map((data) => data.value); -const careerOptionsArray = defafultBingoBoard.slice(0, 4) -const careerOptions = careerOptionsArray.map(data => data.value) +const positionOptionArray = defafultBingoBoard.slice(4, 10); +const positionOption = positionOptionArray.map((data) => data.value); -const positionOptionArray = defafultBingoBoard.slice(4, 10) -const positionOption = positionOptionArray.map(data => data.value) - -const pseudolabOptionArray = defafultBingoBoard.slice(10, 14) -const pseudolabOption = pseudolabOptionArray.map(data => data.value) - -const talkOptionArray = defafultBingoBoard.slice(14, 20) -const talkOption = talkOptionArray.map(data => data.value) +const pseudolabOptionArray = defafultBingoBoard.slice(10, 14); +const pseudolabOption = pseudolabOptionArray.map((data) => data.value); +const talkOptionArray = defafultBingoBoard.slice(14, 20); +const talkOption = talkOptionArray.map((data) => data.value); const Wrapper = styled(Container)({ width: "60vw", @@ -92,7 +90,7 @@ type BingoPresenterProps = { const BingoPresenter = (props: BingoPresenterProps) => { return ( <> - {props.userSelectedWords.length === 0 ? ( + {props.myID.length === 0 ? ( { draggable // 드래그 가능 pauseOnHover // 마우스를 올리면 알람 정지 theme="light" - // limit={1} // 알람 개수 제한 + // limit={1} // 알람 개수 제한 /> ) : ( My Id: {props.myID} - {props.userSelectedWords.map((word) => ( + {/* {props.userSelectedWords.map((word) => ( - ))} + ))} */} {props.recentSendUser === "" ? ( "" @@ -224,7 +222,7 @@ const BingoPresenter = (props: BingoPresenterProps) => { draggable // 드래그 가능 pauseOnHover // 마우스를 올리면 알람 정지 theme="light" - // limit={1} // 알람 개수 제한 + // limit={1} // 알람 개수 제한 /> diff --git a/src/modules/Home/Home.tsx b/src/modules/Home/Home.tsx index 491c68e..43fa75a 100644 --- a/src/modules/Home/Home.tsx +++ b/src/modules/Home/Home.tsx @@ -3,7 +3,11 @@ import { toast, ToastContainer } from "react-toastify"; import { styled } from "@mui/system"; import { useState } from "react"; import { SHA256 } from "crypto-js"; -import { singUpUser } from "../../api/bingo_api"; +import { + singUpUser, + createBingoBoard, + getBingoBoard, +} from "../../api/bingo_api"; const StyledContainer = styled(Container)({ textAlign: "center", @@ -21,7 +25,7 @@ const Home = () => { console.log(loginId); const hash_password = SHA256(password).toString(); - const result = singUpUser(loginId, hash_password); + const result = await singUpUser(loginId, hash_password); if (result.ok === false) { toast.error(result.message); localStorage.setItem("myWordList", ""); @@ -30,6 +34,16 @@ const Home = () => { localStorage.setItem("myID", ""); } localStorage.setItem("myID", loginId); + + const bingoData = await getBingoBoard(loginId); + if (bingoData.length == 0) { + const boardData: { + [key: string]: { value: string; status: number; selected: number }; + } = {}; + await createBingoBoard(result.user_id, boardData); + } + + window.location.href = "/bingo"; }; return (