빙고 QR로 채우는 부분 추가

Author: 4roring

src/App.tsx

@@ -9,6 +9,7 @@ import Footer from "./modules/Footer/Footer.tsx";
 import SignUpForm from "./modules/Header/SignUpForm.tsx";
 import Board from "./modules/Community/index.tsx";
 import BoardView from "./modules/Community/BoardView.tsx";
+import BingoQR from "./modules/Bingo/BingoQR.tsx";
 import { Container, CssBaseline } from "@mui/material";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
 
@@ -21,13 +22,14 @@ function App() {
         <CssBaseline />
         <Container className="App">
           <Header />
-          <Routes> 
+          <Routes>
             <Route path="/" Component={Home} />
             <Route path="/builder" element={<IntroduceBuilder />} />
             <Route path="/runner" element={<Test />} />
             <Route path="/community/*" element={<Board />} />
             <Route path="/bingo" element={<Bingo />} />
             <Route path="/signup" element={<SignUpForm />} />
+            <Route path="/bingo_qr/:id" element={<BingoQR />} />
             {/* <Route path="/posts" component={Posts} />
             <Route path="/posts/:id" component={Post} />
             <Route path="/posts/new" component={NewPost} />

src/api/bingo_api.ts

@@ -117,3 +117,14 @@ export const getUserName = async (userId: string) => {
   const userName = data["username"];
   return userName;
 };
+
+export const updateBingoFromQR = async (userId: string, targetId: string) => {
+  const response = await fetch(
+    `${API_URL}/api/bingo/boards/update/${userId}/${targetId}`,
+    {
+      method: "PATCH",
+    }
+  );
+  const data = await response.json();
+  return data;
+};

src/modules/Bingo/BingoContainer.tsx

@@ -106,7 +106,6 @@ const BingoContainer = () => {
         userLatestInteraction.send_user_id
       );
       const wordList = userLatestInteraction.word_id_list;
-      localStorage.setItem("recentWords", wordList);
       localStorage.setItem("recentSendUser", sendUserName);
       setRecentWords(wordList);
       setRecentSendUser(sendUserName);

src/modules/Bingo/BingoPresenter.tsx

@@ -174,7 +174,7 @@ const BingoPresenter = (props: BingoPresenterProps) => {
           {/* {props.userSelectedWords.map((word) => (
             <LongTextBox key={word} text={word} />
           ))} */}
-          <RecentSendUserWrapper>
+          {/* <RecentSendUserWrapper>
             {props.recentSendUser === "" ? (
               ""
             ) : (
@@ -185,14 +185,14 @@ const BingoPresenter = (props: BingoPresenterProps) => {
                 <span> 님과 이야기를 나누었어요!</span>
               </>
             )}
-          </RecentSendUserWrapper>
+          </RecentSendUserWrapper> */}
           <BingoContainer>
             {props.bingoWords.map(({ value, status }) => (
               <SqaureTextBox
                 key={value}
                 value={value}
                 status={status}
-                recent_list={props.recentWords.split("|")}
+                recent_list={[""]}
               />
             ))}
           </BingoContainer>

src/modules/Bingo/BingoQR.tsx

@@ -0,0 +1,25 @@
+import { useEffect } from "react";
+import { useParams } from "react-router-dom";
+import { getUser, updateBingoBoard } from "../../api/bingo_api";
+
+const BingoQR = () => {
+  const { id } = useParams();
+
+  useEffect(() => {
+    // API 호출
+    const fetchData = async () => {
+      const myId = localStorage.getItem("myID");
+      if (myId === null) window.location.href = "";
+
+      const user = await getUser(myId);
+      const result = await updateBingoBoard(id, user.user_id);
+      if (result === true) window.location.href = "/bingo";
+    };
+
+    fetchData();
+  }, []); // 빈 배열: 컴포넌트 마운트 시 한 번 실행
+
+  return <div>QR 체크중</div>;
+};
+
+export default BingoQR;