x

client/src/components/Home/AddRoom.js

@@ -5,9 +5,7 @@ const AddRoom = () => {
   return (
     <div>
       <div className="mx-4 my-3 d-flex justify-content-between">
-        <div className="fs-4">
-          참여중인 방목록
-        </div>
+        <div className="fs-4">참여중인 방목록</div>
         <button
           type="button"
           className="py-1 px-2"
@@ -45,7 +43,6 @@ const AddRoom = () => {
                     className="p-3"
                     data-bs-toggle="modal"
                     data-bs-target="#joinModal"
-                    // data-bs-dismiss="modal"
                     style={{
                       display: "flex",
                       flexDirection: "column",
@@ -54,7 +51,8 @@ const AddRoom = () => {
                       backgroundColor: "#E0CEE8",
                       borderColor: "#E0CEE8",
                     }}
-                  >방참여하기
+                  >
+                    방참여하기
                   </button>
                   <div
                     className="modal fade"
@@ -74,7 +72,6 @@ const AddRoom = () => {
                     className="p-3"
                     data-bs-toggle="modal"
                     data-bs-target="#makeModal"
-                    // data-bs-dismiss="modal"
                     style={{
                       display: "flex",
                       flexDirection: "column",
@@ -83,7 +80,8 @@ const AddRoom = () => {
                       backgroundColor: "#f5cfe3",
                       borderColor: "#f5cfe3",
                     }}
-                  >방생성하기
+                  >
+                    방생성하기
                   </button>
                   <div
                     className="modal fade"

client/src/components/Home/CreateRoom.js

@@ -23,17 +23,14 @@ const CreateRoom = () => {
     }, [room]);
 
     function handleChange(event) {
-        // console.log(room)
         const { name, value } = event.target
         setRoom({ ...room, [name]: value })
     }
 
     async function handleSubmit(e) {
         e.preventDefault()
-        // console.log('룸룸', room)
         try {
             const res = await roomApi.create(room)
-            // console.log(res)
             const Id = res.id
             console.log(Id)
             alert(`방참여코드는 ${Id}입니다`)

client/src/components/Home/HomeProfile.js

@@ -6,28 +6,27 @@ import catchErrors from "../../context/catchError";
 const userprofile = localStorage.getItem("user");
 const INIT_USER = {
   id: userprofile,
-  email: '',
-  img: '',
-}
+  email: "",
+  img: "",
+};
 
 const HomeProfile = () => {
-  const [user, setUser] = useState(INIT_USER)
-
+  const [user, setUser] = useState(INIT_USER);
+  const [error, setError]= useState("");
+  
   async function getSetUser(userID) {
     try {
-      // console.log('userID', userID)
-      const data = await userApi.getUser(userID)
-      // console.log(data)
-      setUser(data)
-      // console.log(user)
+      const data = await userApi.getUser(userID);
+
+      setUser(data);
     } catch (error) {
-      // catchErrors(error, setError)
+      catchErrors(error, setError);
     }
   }
 
   useEffect(() => {
-    getSetUser(userprofile)
-  }, [userprofile])
+    getSetUser(userprofile);
+  }, [userprofile]);
 
   return (
     <Link to={`/profile/${user.id}`} className="text-decoration-none text-dark">
@@ -40,7 +39,6 @@ const HomeProfile = () => {
               width: "157px",
               height: "157px",
             }}
-            // value={user.img}
           />
         </div>
         <h1 className="d-flex justify-content-center"> {user.email} </h1>

client/src/components/Home/JoinRoom.js

 import { useEffect, useState } from "react";
 import { Redirect } from "react-router-dom";
 import roomApi from "../../apis/room.api";
+import catchErrors from "../../context/catchError";
 
-const userId = localStorage.getItem('user');
+const userId = localStorage.getItem("user");
 
 const JoinRoom = () => {
-    const [roomId, setRoomId] = useState('');
-    const [disabled, setDisabled] = useState(true);
-    const [error, setError] = useState("");
-    const [success, setSuccess] = useState(false);
+  const [roomId, setRoomId] = useState("");
+  const [disabled, setDisabled] = useState(true);
+  const [error, setError] = useState("");
+  const [success, setSuccess] = useState(false);
 
-    useEffect(() => {
-        const isRoom = Object.values(roomApi).every((el) => Boolean(el));
-        isRoom ? setDisabled(false) : setDisabled(true);
-    }, [roomId]);
+  useEffect(() => {
+    const isRoom = Object.values(roomApi).every((el) => Boolean(el));
+    isRoom ? setDisabled(false) : setDisabled(true);
+  }, [roomId]);
 
-    function handleChange(event) {
-        const { value } = event.target;
-        setRoomId(value);
-        // console.log(roomId);
-    }
+  function handleChange(event) {
+    const { value } = event.target;
+    setRoomId(value);
+  }
 
-    async function handleSubmit(e) {
-        e.preventDefault();
-        try {
-            // setLoading(true);
-            // setError("");
-            // console.log('userId:', userId)
-            // console.log('roomId:', roomId)
-            const data = await roomApi.join({ userId: userId, roomId: roomId });
-            // console.log(data);
-            setSuccess(true);
-        } catch (error) {
-            // catchErrors(error, setError);
-        } finally {
-            // setLoading(false);
-        }
-    }
-    if (success) {
-        return <Redirect to="/user" />;
+  async function handleSubmit(e) {
+    e.preventDefault();
+    try {
+      // setLoading(true);
+      setError("");
+      const data = await roomApi.join({ userId: userId, roomId: roomId });
+      setSuccess(true);
+    } catch (error) {
+      catchErrors(error, setError);
+    } finally {
+      // setLoading(false);
     }
+  }
+  if (success) {
+    return <Redirect to="/user" />;
+  }
 
-    return (
-        <div className="modal-content">
-            <form onSubmit={handleSubmit}>
-                <div className="modal-header">
-                    <div className="modal-title" id="joinModal">방참여하기</div>
-                    <button
-                        type="button"
-                        className="btn-close"
-                        data-bs-dismiss="modal"
-                        aria-label="Close"
-                    ></button>
-                </div>
-                <div className="modal-body">
-                    <div className="input-group mb-3">
-                        <input
-                            type="text"
-                            className="form-control"
-                            placeholder="참여코드를 입력하세요"
-                            aria-label="참여코드를 입력하세요"
-                            aria-describedby="basic-addon1"
-                            name="roomId"
-                            value={roomId}
-                            onChange={handleChange}
-                        />
-                    </div>
-                    <div className="modal-footer">
-                        <button type="submit" className="btn btn-primary">
-                            확인
-                        </button>
-                    </div>
-                </div>
-            </form>
+  return (
+    <div className="modal-content">
+      <form onSubmit={handleSubmit}>
+        <div className="modal-header">
+          <div className="modal-title" id="joinModal">
+            방참여하기
+          </div>
+          <button
+            type="button"
+            className="btn-close"
+            data-bs-dismiss="modal"
+            aria-label="Close"
+          ></button>
+        </div>
+        <div className="modal-body">
+          <div className="input-group mb-3">
+            <input
+              type="text"
+              className="form-control"
+              placeholder="참여코드를 입력하세요"
+              aria-label="참여코드를 입력하세요"
+              aria-describedby="basic-addon1"
+              name="roomId"
+              value={roomId}
+              onChange={handleChange}
+            />
+          </div>
+          <div className="modal-footer">
+            <button type="submit" className="btn btn-primary">
+              확인
+            </button>
+          </div>
         </div>
-    );
+      </form>
+    </div>
+  );
 };
 
-export default JoinRoom;
\ No newline at end of file
+export default JoinRoom;

client/src/components/Profile/Info.js

 import userApi from "../../apis/user.api";
 import { useEffect, useState } from "react";
+import catchErrors from "../../context/catchError";
 
 const userprofile = localStorage.getItem("user");
 const INIT_PROFILE = {
@@ -11,12 +12,15 @@ const INIT_PROFILE = {
 
 const Info = () => {
   const [profile, setProfile] = useState(INIT_PROFILE);
+  const [error, setError]= useState("");
 
   async function getProfile(userID) {
     try {
       const data = await userApi.getUser(userID);
       setProfile(data);
-    } catch (error) {}
+    } catch (error) {
+      catchErrors(error, setError);
+    }
   }
   useEffect(() => {
     getProfile(userprofile);

client/src/components/Profile/InfoUpdate.js

 import { Link, useParams } from "react-router-dom";
 import React, { useEffect, useState } from "react";
 import userApi from "../../apis/user.api";
+import catchErrors from "../../context/catchError";
 
 const userprofile = localStorage.getItem("user");
 const INIT_PROFILE = {
@@ -16,12 +17,15 @@ const InfoUpdate = () => {
 
 
   const [profile, setProfile] = useState(INIT_PROFILE);
+  const [error,setError]=useState("");
 
   async function getProfile(userID) {
     try {
       const data = await userApi.getUser(userID);
       setProfile(data);
-    } catch (error) {}
+    } catch (error) {
+      catchErrors(error, setError);
+    }
   }
 
   useEffect(() => {
@@ -39,7 +43,9 @@ const InfoUpdate = () => {
         setProfile({...profile, img:res})
       }else{
         setProfile()
-      }   } catch (error) {}
+      }   } catch (error) {
+        catchErrors(error, setError);
+      }
   };
 
   const changeinfo = async (event) => {

client/src/components/Profile/Profile.js

 import { Link, useParams } from "react-router-dom";
 import { useState, useEffect } from "react";
 import userApi from "../../apis/user.api";
-
+import catchErrors from "../../context/catchError";
 
 const userprofile = localStorage.getItem("user");
 const INIT_PROFILE = {
@@ -11,13 +11,15 @@ const INIT_PROFILE = {
 const Profile = () => {
   
   const [profile, setProfile] = useState(INIT_PROFILE);
-
+  const [error,setError]= useState("");
   async function getProfile(userID) {
     try {
       const data = await userApi.getUser(userID);
       setProfile(data.img)
       
-    } catch (error) {}
+    } catch (error) {
+      catchErrors(error, setError);
+    }
   }
   useEffect(() => {
     getProfile(userprofile);