[ADD] API connect

react-whenMeet/src/components/CalendarMonth.jsx

@@ -79,7 +79,7 @@ function MakeCell({ nowYear, nowMonth, usingDate, setUsingDate }){//주차 데
         }
         // console.log(startDate);
         // console.log(endDate);
-        setUsingDate([{startDate:startDate, endDate:endDate}])
+        setUsingDate({startDate:startDate, endDate:endDate})
     };
 
     const handleClick = (newDate) => {

react-whenMeet/src/components/HomeParticipateForm.js

 import { useState, useEffect } from "react";
 import Input from "./Input";
 import Button from "./Button";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import axios from "axios";
 
 function HomeParticipateForm() {
@@ -9,8 +9,7 @@ function HomeParticipateForm() {
     const [password, setPassword] = useState("");
     const [email, setEmail] = useState("");
     const navigate = useNavigate();
-    const location = useLocation();
-    const { id } = location.state;
+    const { id } = useParams();
 
     const handleName = (event) => {
         setName(event.target.value);
@@ -22,11 +21,13 @@ function HomeParticipateForm() {
         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('이미 존재하는 이름입니다.')
+        try{
+            const response = await axios.get(`http://43.200.79.42:3000/meetings/${id}/participants/?name=${name}`);
+            return false;
+        }
+        catch(err){
+            return true;
         }
-        return response.data.name;
     }
 
     const newHandleSubmit = async (event) => {
@@ -35,16 +36,22 @@ function HomeParticipateForm() {
             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 } });
+            let checkParticipant =  await checkParticipantExistence();
+            if(checkParticipant){
+                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);
+                }
             }
-            catch (error) {
-                console.error(error);
+            else{
+                alert('이미 존재하는 이름입니다.');
             }
         }
     };
@@ -59,27 +66,22 @@ function HomeParticipateForm() {
                     name : name,
                     password : password
                 });
-                if(response.status === 401 ){
-                    alert('이름 또는 Password를 잘못 입력하였습니다');
-                    return;
-                }
-                else if(response.status === 404){
-                    alert('일치하는 참가자가 존재하지 않습니다');
-                    return;
-                }
-                //navigate('UserTimeInfo', { state: { id } });
+                navigate('UserTimeInfo', { state: { id } });
             }
             catch (error) {
                 if (error.response) {
                     if (error.response.status === 401) {
-                        alert('이름 또는 Password를 잘못 입력하였습니다');
+                        alert('Password를 잘못 입력하였습니다');
                     } else if (error.response.status === 404) {
-                        alert('일치하는 참가자가 존재하지 않습니다');
-                    } else {
+                        alert('해당하는 이름이 존재하지 않습니다');
+                    } 
+                    else if(error.response.status === 400){
+                        alert("비밀번호를 설정하셨습니다. 비밀번호를 입력해주세요")
+                    }
+                    else {
                         alert(`Unexpected status code: ${error.response.status}`);
                     }
                 } else {
-                    // Handle other types of errors
                     console.error(error);
                 }
                 
@@ -102,7 +104,7 @@ function HomeParticipateForm() {
                     type="password"
                     value={password}
                     onChange={handlePassword}
-                    placeholder="Password"
+                    placeholder="Password(선택)"
                 />
                 <Input
                     type="text"

react-whenMeet/src/components/LinkPageForm.js

@@ -24,7 +24,7 @@ function LinkPageForm() {
     const handleSubmit = async(event) => {
         event.preventDefault();
         console.log({id});
-        navigate(`/HomeParticipate/${id}`,{state : {id}});
+        navigate(`/HomeParticipate/${id}`);
     }
 
     return (

react-whenMeet/src/components/MeetingInfoForm.js

@@ -11,27 +11,16 @@ function MeetingInfoForm() {
     const [endVote, setEndVote] = useState("");
     const [start, setStart] = useState();
     const [end, setEnd] = useState();
-    const toDo = [
-        '선택',
-        '식사',
-        '공부',
-        '놀기',
-        '기타'
-    ];
     const navigate = useNavigate();
     const location = useLocation();
     const { title, password } = location.state;
 
-    const [usingDate, setUsingDate] = useState([]);
+    const [usingDate, setUsingDate] = useState({});
 
     const handleOnChange = (event) => {
         setMeetingPurpose(event.target.value);
     }
 
-    const handleCalendar = (value) => {
-        console.log('Selected Date:', value);
-    };
-
     const handleNumber = (event) => {
         setNumber(event.target.value);
     }
@@ -53,25 +42,39 @@ function MeetingInfoForm() {
 
         if (meetingPurpose === "" || meetingPurpose === "선택") {
             alert("목적을 선택하세요");
-        } else {
+        }
+        else {
+            let transformedPurpose = meetingPurpose; // 기본값은 그대로 유지
+
+            if (meetingPurpose === "스터디") {
+                transformedPurpose = 'STUDY';
+            } else if (meetingPurpose === '회의') {
+                transformedPurpose = 'MEETING';
+            } else if (meetingPurpose === '놀기') {
+                transformedPurpose = 'PLAYING';
+            } else if (meetingPurpose === '식사') {
+                transformedPurpose = 'FOOD';
+            } else if (meetingPurpose === '기타') {
+                transformedPurpose = 'ETC';
+            }
             try {
                 const response = await axios.post("http://43.200.79.42:3000/meetings", {
                     title: title,
                     adminPassword: password,
-                    purpose: meetingPurpose,
-                    startDate: start,
-                    endDate: end,
+                    purpose: transformedPurpose,
+                    startDate: usingDate.startDate,
+                    endDate: usingDate.endDate,
                     maxParticipants: number,
                     voteExpiresAt: endVote
                 });
                 const id = response.data.id;
-                navigate("LinkPage",{state : {id}});
+                navigate("LinkPage", { state: { id } });
             } catch (error) {
                 console.error("Error sending data to the backEnd", error);
             }
+            console.log(meetingPurpose);
         }
     };
-
     return (
         <form onSubmit={handleSubmit}>
             <div>
@@ -80,25 +83,28 @@ function MeetingInfoForm() {
                     <label>
                         목적:
                         <select value={meetingPurpose} onChange={handleOnChange}>
-                            {toDo.map((todo, index) => (
-                                <option key={index}>{todo}</option>
-                            ))}
+                            <option value="선택">선택</option>
+                            <option value="스터디">스터디</option>
+                            <option value="회의">회의</option>
+                            <option value="놀기">놀기</option>
+                            <option value="식사">식사</option>
+                            <option value="기타">기타</option>
                         </select>
                     </label>
                 </div>
 
-                <Calendar onChange={handleCalendar} usingDate={usingDate} setUsingDate={setUsingDate} />
+                <Calendar usingDate={usingDate} setUsingDate={setUsingDate} />
                 <div className="timeStartEnd">
                     시작:
                     <Input
-                        type="date"
+                        type="time"
                         value={start}
                         onChange={handleStart}
                         placeholder="시작"
                     />
                     종료:
                     <Input
-                        type="date"
+                        type="time"
                         value={end}
                         onChange={handleEnd}
                         placeholder="종료"

react-whenMeet/src/routes/UserTimeInfo.js

@@ -3,16 +3,13 @@ import Button from "../components/Button";
 import CalendarWeek2 from "../components/CalendarWeek2"
 import "../styles/HomeMake.css"
 import axios from "axios";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 
 function UserTimeInfo() {
     const [state, setState] = useState(true);
     const [availableSchedules, setAvailableSchedules] = useState([]);
     const [availableTimes, setAvailableTimes] = useState([]);
-
-
-    const location = useLocation();
-    const {id} = location.state;
+    const {id} = useParams();
 
     const handleState = () => {
         setState((state) => !state);