[ADD] API

react-whenMeet/package-lock.json

@@ -11,6 +11,7 @@
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "axios": "^1.6.2",
         "gh-pages": "^6.0.0",
         "prop-types": "^15.8.1",
         "react": "^18.2.0",
@@ -5362,6 +5363,29 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.2.tgz",
+      "integrity": "sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
@@ -14606,6 +14630,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",

react-whenMeet/package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.6.2",
     "gh-pages": "^6.0.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",

react-whenMeet/src/App.js

@@ -12,8 +12,8 @@ function App() {
     <Router>
       <Routes>
         <Route path="/meetinginfo/linkpage" element={<LinkPage />}></Route>
-        <Route path="/homeparticipate/usertimeinfo" element={<UserTimeInfo />}></Route>
-        <Route path="/homeparticipate" element={<HomeParticipate />}></Route>
+        <Route path="/homeparticipate/:id/usertimeinfo" element={<UserTimeInfo />}></Route>
+        <Route path="/homeparticipate/:id" element={<HomeParticipate />}></Route>
         <Route path="/meetinginfo" element={<MeetingInfo />}></Route>
         <Route path="/result" element={<ResultMake />}></Route>//결과확인페이지
         <Route path="/resultend" element={<ResultEnd />}></Route>// 투표 종료

react-whenMeet/src/components/HomeMakeForm.js

@@ -23,7 +23,7 @@ function HomeMakeForm() {
         } else if (password === "") {
             return alert("Password를 입력하세요");
         } else {
-            navigate("/MeetingInfo");
+            navigate("/MeetingInfo", {state : {title, password}});
         }
     };
 

react-whenMeet/src/components/HomeParticipateForm.js

-import { useState } from "react";
+import { useState, useEffect } from "react";
 import Input from "./Input";
 import Button from "./Button";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
+import axios from "axios";
 
 function HomeParticipateForm() {
-    const [name,setName] = useState("");
-    const [password,setPassword] = useState("");
-    const [email,setEmail] = useState("");
+    const [name, setName] = useState("");
+    const [password, setPassword] = useState("");
+    const [email, setEmail] = useState("");
     const navigate = useNavigate();
+    const location = useLocation();
+    const { id } = location.state;
 
-    const handleName = (event)=>{
+    const handleName = (event) => {
         setName(event.target.value);
     }
-    const handlePassword = (event)=>{
+    const handlePassword = (event) => {
         setPassword(event.target.value);
     }
-    const handleEmail = (event)=>{
+    const handleEmail = (event) => {
         setEmail(event.target.value);
     }
+    const checkParticipantExistence = async()=>{
+        const response = await axios.get(`http://43.200.79.42:3000/meetings/${id}/participants/?name=${name}`);
+        if(response.data){
+            alert('이미 존재하는 이름입니다.')
+        }
+        return response.data.name;
+    }
 
-    const handleSubmit = (event) => {
+    const newHandleSubmit = async (event) => {
+        event.preventDefault();
+        if (name === "") {
+            alert('이름을 입력하세요')
+        }
+        else {
+            try {
+                const response = await axios.post(`http://43.200.79.42:3000/meetings/${id}/participants`, {
+                    name: name,
+                    password: password,
+                    email: email
+                });
+                navigate('UserTimeInfo', { state: { id } });
+            }
+            catch (error) {
+                console.error(error);
+            }
+        }
+    };
+    const oldHandleSubmit = async (event) => {
         event.preventDefault();
-        name === "" ? alert('이름을 입력하세요') : navigate('UserTimeInfo');
+        if (name === "") {
+            alert('이름을 입력하세요')
+        }
+        else {
+            try {
+                const response = await axios.post(`http://43.200.79.42:3000/meetings/${id}/entry`,{
+                    name : name,
+                    password : password
+                });
+                if(response.status === 401 ){
+                    alert('이름 또는 Password를 잘못 입력하였습니다');
+                    return;
+                }
+                else if(response.status === 404){
+                    alert('일치하는 참가자가 존재하지 않습니다');
+                    return;
+                }
+                //navigate('UserTimeInfo', { state: { id } });
+            }
+            catch (error) {
+                if (error.response) {
+                    if (error.response.status === 401) {
+                        alert('이름 또는 Password를 잘못 입력하였습니다');
+                    } else if (error.response.status === 404) {
+                        alert('일치하는 참가자가 존재하지 않습니다');
+                    } else {
+                        alert(`Unexpected status code: ${error.response.status}`);
+                    }
+                } else {
+                    // Handle other types of errors
+                    console.error(error);
+                }
+                
+            }
+        }
     };
 
     return (
         <form>
             <div>
-                <h1>약속 Title</h1>
-                <Input 
-                type="text"
-                value={name}
-                onChange={handleName}
-                placeholder="이름"
+                <h1>투표에 참여하기</h1>
+                {console.log({id})}
+                <Input
+                    type="text"
+                    value={name}
+                    onChange={handleName}
+                    placeholder="이름"
                 />
-                <Input 
-                type="password"
-                value={password}
-                onChange={handlePassword}
-                placeholder="Password(선택)"
+                <Input
+                    type="password"
+                    value={password}
+                    onChange={handlePassword}
+                    placeholder="Password"
                 />
-                <Input 
-                type="text"
-                value={email}
-                onChange={handleEmail}
-                placeholder="이메일(선택)"
+                <Input
+                    type="text"
+                    value={email}
+                    onChange={handleEmail}
+                    placeholder="이메일(선택)"
+                />
+                <Button
+                    type='submit'
+                    text='신규참여'
+                    onClick={newHandleSubmit}
                 />
                 <Button
-                type='submit'
-                text='다음'
-                onClick={handleSubmit}
+                    type='submit'
+                    text='재참여'
+                    onClick={oldHandleSubmit}
                 />
             </div>
         </form>

react-whenMeet/src/components/LinkPageForm.js

 import { useState } from "react";
 import Input from "../components/Input";
 import Button from "../components/Button";
-import { useNavigate } from "react-router-dom";
+import { useNavigate,useLocation } from "react-router-dom";
+import axios from "axios";
 
 function LinkPageForm() {
     const [link, setLink] = useState("");
+    const location = useLocation();
     const navigate = useNavigate();
+    const {id} = location.state;
+
 
     const copyToClipboard = async (link) => {
         try {
-            const textToCopy = `localhost:3000/HomeParticipate`;
+            const textToCopy = `localhost:3000/HomeParticipate/${id}`;
             await navigator.clipboard.writeText(textToCopy);
             alert('클립보드에 복사되었습니다');
         } catch (err) {
@@ -17,17 +21,17 @@ function LinkPageForm() {
         }
     };
 
-    const handleSubmit = (event) => {
+    const handleSubmit = async(event) => {
         event.preventDefault();
-        setLink(`/HomeParticipate`)
-        navigate(link);
+        console.log({id});
+        navigate(`/HomeParticipate/${id}`,{state : {id}});
     }
 
     return (
         <form onSubmit={handleSubmit}>
             <div>
                 <Input
-                    value={`localhost:3000/HomeParticipate/`}
+                    value={`localhost:3000/HomeParticipate/${id}`}
                 />
                 <Button
                     type="button"

react-whenMeet/src/components/MeetingInfoForm.js

@@ -2,7 +2,8 @@ import { useState } from "react";
 import Input from "../components/Input";
 import Button from "../components/Button";
 import Calendar from "../components/Calendar";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
+import axios from "axios";
 
 function MeetingInfoForm() {
     const [meetingPurpose, setMeetingPurpose] = useState("");
@@ -18,6 +19,8 @@ function MeetingInfoForm() {
         '기타'
     ];
     const navigate = useNavigate();
+    const location = useLocation();
+    const { title, password } = location.state;
 
     const [usingDate, setUsingDate] = useState([]);
 
@@ -45,11 +48,29 @@ function MeetingInfoForm() {
         setEnd(event.target.value);
     }
 
-    const handleSubmit = (event) => {
+    const handleSubmit = async (event) => {
         event.preventDefault();
-        console.log(usingDate);
-        (meetingPurpose === "" || meetingPurpose === "선택") ? alert("목적을 선택하세요") : navigate("LinkPage");
-    }
+
+        if (meetingPurpose === "" || meetingPurpose === "선택") {
+            alert("목적을 선택하세요");
+        } else {
+            try {
+                const response = await axios.post("http://43.200.79.42:3000/meetings", {
+                    title: title,
+                    adminPassword: password,
+                    purpose: meetingPurpose,
+                    startDate: start,
+                    endDate: end,
+                    maxParticipants: number,
+                    voteExpiresAt: endVote
+                });
+                const id = response.data.id;
+                navigate("LinkPage",{state : {id}});
+            } catch (error) {
+                console.error("Error sending data to the backEnd", error);
+            }
+        }
+    };
 
     return (
         <form onSubmit={handleSubmit}>
@@ -66,18 +87,18 @@ function MeetingInfoForm() {
                     </label>
                 </div>
 
-                <Calendar onChange={handleCalendar} usingDate={usingDate} setUsingDate={setUsingDate}/>
+                <Calendar onChange={handleCalendar} usingDate={usingDate} setUsingDate={setUsingDate} />
                 <div className="timeStartEnd">
                     시작:
                     <Input
-                        type="time"
+                        type="date"
                         value={start}
                         onChange={handleStart}
                         placeholder="시작"
                     />
                     종료:
                     <Input
-                        type="time"
+                        type="date"
                         value={end}
                         onChange={handleEnd}
                         placeholder="종료"

react-whenMeet/src/routes/UserTimeInfo.js

-import { useState } from "react";
+import { useState,useEffect } from "react";
 import Button from "../components/Button";
 import Calendar from "../components/Calendar"
 import "../styles/HomeMake.css"
+import axios from "axios";
+import { useNavigate, useLocation } from "react-router-dom";
 
 function UserTimeInfo() {
     const [state, setState] = useState(true);
 
+
+    const location = useLocation();
+    const {id} = location.state;
+
     const handleState = () => {
         setState((state) => !state);
     }
     const handleCalendar = (value) => {
         console.log('Selected Date:', value);
     };
+
+    useEffect(() => {
+        const fetchData = async () => {
+            try {
+                const response = await axios.get(`http://43.200.79.42:3000/meetings/${id}/`);
+                console.log(response.data.title);
+            } catch (error) {
+                console.error(error);
+            }
+        };
+        fetchData();
+    }, [id]); 
     return (
         <div className="center-container">
             <Button