로그인 후 bingo 판 생성하고 /bingo로 이동

Author: 4roring

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<string[]>([]);
   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);

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 ? (
         <Wrapper>
           <InputBox
             placeholder="나의 닉네임을 입력"
@@ -167,15 +165,15 @@ const BingoPresenter = (props: BingoPresenterProps) => {
             draggable // 드래그 가능
             pauseOnHover // 마우스를 올리면 알람 정지
             theme="light"
-          // limit={1} // 알람 개수 제한
+            // limit={1} // 알람 개수 제한
           />
         </Wrapper>
       ) : (
         <Wrapper>
           <MyInfo>My Id: {props.myID}</MyInfo>
-          {props.userSelectedWords.map((word) => (
+          {/* {props.userSelectedWords.map((word) => (
             <LongTextBox key={word} text={word} />
-          ))}
+          ))} */}
           <RecentSendUserWrapper>
             {props.recentSendUser === "" ? (
               ""
@@ -224,7 +222,7 @@ const BingoPresenter = (props: BingoPresenterProps) => {
               draggable // 드래그 가능
               pauseOnHover // 마우스를 올리면 알람 정지
               theme="light"
-            // limit={1} // 알람 개수 제한
+              // limit={1} // 알람 개수 제한
             />
             <Button onClick={props.onRefreshBingoWords}>내 빙고판 갱신</Button>
           </FormControl>

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 (