[Modify&ADD] MeetingInfoForm

react-whenMeet/src/App.js

-import { useState, useEffect } from "react";
 import HomeMake from "./routes/HomeMake";
 import MeetingInfo from "./routes/MeetingInfo";
 import LinkPage from "./routes/LinkPage";
 import HomeParticipate from "./routes/HomeParticipate";
-import UserTimeInfo from "./routes/HomeMake";
+import UserTimeInfo from "./routes/UserTimeInfo";
 import ResultMake from "./routes/ResultMake";
 import ResultEnd from "./routes/ResultEnd";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
@@ -12,20 +11,13 @@ function App() {
   return (
     <Router>
       <Routes>
-        <Route path="/" element={<HomeMake />}>
-          {" "}
-        </Route>
-        <Route path="/homeparticipate" element={<HomeParticipate />}></Route>
-        <Route path="/meetinginfo" element={<MeetingInfo />}>
-          {" "}
-        </Route>
         <Route path="/meetinginfo/linkpage" element={<LinkPage />}></Route>
-        <Route
-          path="/homeparticipate/usertimeinfo"
-          element={<UserTimeInfo />}
-        ></Route>
+        <Route path="/homeparticipate/usertimeinfo" element={<UserTimeInfo />}></Route>
+        <Route path="/homeparticipate" element={<HomeParticipate />}></Route>
+        <Route path="/meetinginfo" element={<MeetingInfo />}></Route>
         <Route path="/result" element={<ResultMake />}></Route>//결과확인페이지
         <Route path="/resultend" element={<ResultEnd />}></Route>// 투표 종료
+        <Route path="/" element={<HomeMake />}> </Route>
         페이지
       </Routes>
     </Router>

react-whenMeet/src/components/Calendar.js

@@ -7,7 +7,6 @@ import CalendarMonth from "./CalendarMonth";
 function Calendar({ onChange }) {
   return (
     <div>
-      <h2>달력</h2>
       <CalendarMonth />
     </div>
   );

react-whenMeet/src/components/CalendarMonth.jsx

@@ -87,6 +87,7 @@ function CalendarMonth(){
 
     return(
         <div className="calendar">
+            <h1>달력</h1>
             <MakeHeader nowMonth={nowMonth} prevMonth={prevMonth} nextMonth={nextMonth}></MakeHeader>
             <h1>{nowYear}</h1>
             <table className="calendarTable">

react-whenMeet/src/components/LinkPageForm.js

-import { useState, useEffect } from "react";
+import { useState } from "react";
 import Input from "../components/Input";
 import Button from "../components/Button";
 import { useNavigate } from "react-router-dom";
 
 function LinkPageForm() {
-    const [random, setRandom] = useState("");
     const [link, setLink] = useState("");
     const navigate = useNavigate();
 
-    const generateRandom = () => {
-        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-        const linkLength = 10;
-
-        let randomLink = '';
-        for (let i = 0; i < linkLength; i++) {
-            const randomIndex = Math.floor(Math.random() * characters.length);
-            randomLink += characters[randomIndex];
-        }
-        setRandom(randomLink);
-    };
-
     const copyToClipboard = async (link) => {
         try {
-            const textToCopy = `localhost:3000/HomeParticipate/${random}`;
+            const textToCopy = `localhost:3000/HomeParticipate`;
             await navigator.clipboard.writeText(textToCopy);
             alert('클립보드에 복사되었습니다');
         } catch (err) {
@@ -32,17 +19,15 @@ function LinkPageForm() {
 
     const handleSubmit = (event) => {
         event.preventDefault();
-        setLink(`/HomeParticipate/${random}`)
+        setLink(`/HomeParticipate`)
         navigate(link);
     }
-    useEffect(() => {
-        generateRandom();
-    }, [])
+
     return (
         <form onSubmit={handleSubmit}>
             <div>
                 <Input
-                    value={`localhost:3000/HomeParticipate/${random}`}
+                    value={`localhost:3000/HomeParticipate/`}
                 />
                 <Button
                     type="button"

react-whenMeet/src/components/MakeHeader.jsx

-export default function MakeHeader(props){
-    return(
-        <div className="header">
-            <h1>{props.nowMonth}월</h1>
-            <button onClick={props.prevMonth}>prev</button>
-            <button onClick={props.nextMonth}>next</button>
+import Button from "./Button";
+
+export default function MakeHeader({ prevMonth, nextMonth, nowMonth }) {
+    return (
+        <div>
+            <h2>
+                <span className="header">
+                    <Button
+                        type="button"
+                        text="prev"
+                        onClick={prevMonth}
+                    />
+                    {nowMonth}월
+                    <Button
+                        type="button"
+                        text="next"
+                        onClick={nextMonth}
+                    />
+                </span>
+            </h2>
         </div>
     );
-}
\ No newline at end of file
+}

react-whenMeet/src/components/MeetingInfoForm.js

@@ -7,7 +7,9 @@ import { useNavigate } from "react-router-dom";
 function MeetingInfoForm() {
     const [meetingPurpose, setMeetingPurpose] = useState("");
     const [number, setNumber] = useState();
-    const [endTime, setEndTime] = useState("");
+    const [endVote, setEndVote] = useState("");
+    const [start, setStart] = useState();
+    const [end, setEnd] = useState();
     const toDo = [
         '선택',
         '식사',
@@ -29,8 +31,16 @@ function MeetingInfoForm() {
         setNumber(event.target.value);
     }
 
+    const handleVoteEnd = (event) => {
+        setEndVote(event.target.value);
+    }
+
+    const handleStart = (event) => {
+        setStart(event.target.value);
+    }
+
     const handleEnd = (event) => {
-        setEndTime(event.target.value);
+        setEnd(event.target.value);
     }
 
     const handleSubmit = (event) => {
@@ -41,16 +51,36 @@ function MeetingInfoForm() {
     return (
         <form onSubmit={handleSubmit}>
             <div>
-                <h1>약속 일정 만들기</h1>
-                <label>
-                    목적:
-                    <select value={meetingPurpose} onChange={handleOnChange}>
-                        {toDo.map((todo, index) => (
-                            <option key={index}>{todo}</option>
-                        ))}
-                    </select>
-                </label>
+                <div className="purpose-selector">
+                    <h1>약속 일정 만들기</h1>
+                    <label>
+                        목적:
+                        <select value={meetingPurpose} onChange={handleOnChange}>
+                            {toDo.map((todo, index) => (
+                                <option key={index}>{todo}</option>
+                            ))}
+                        </select>
+                    </label>
+                </div>
+
                 <Calendar onChange={handleCalendar} />
+                <div className="timeStartEnd">
+                    시작:
+                    <Input
+                        type="time"
+                        value={start}
+                        onChange={handleStart}
+                        placeholder="시작"
+                    />
+                    종료:
+                    <Input
+                        type="time"
+                        value={end}
+                        onChange={handleEnd}
+                        placeholder="종료"
+                    />
+
+                </div>
                 <Input
                     type="number"
                     value={number}
@@ -59,8 +89,8 @@ function MeetingInfoForm() {
                 />
                 <Input
                     type="datetime-local"
-                    value={endTime}
-                    onChange={handleEnd}
+                    value={endVote}
+                    onChange={handleVoteEnd}
                 />
                 <Button
                     type="submit"

react-whenMeet/src/routes/HomeParticipate.js

+import HomeParticipateForm from "../components/HomeParticipateForm";
+import "../styles/HomeMake.css";
+
 function HomeParticipate(){
+
     return(
-        <h1>HomeParticipate</h1>
+        <div className="center-container">
+            <HomeParticipateForm />
+        </div>
     );
 }
 

react-whenMeet/src/routes/UserTimeInfo.js

-function UserTimeInfo(){
-    return(
-        <h1>UserTimeInfo</h1>
+import { useState } from "react";
+import Button from "../components/Button";
+import Calendar from "../components/Calendar"
+import "../styles/HomeMake.css"
+
+function UserTimeInfo() {
+    const [state, setState] = useState(true);
+
+    const handleState = () => {
+        setState((state) => !state);
+    }
+    const handleCalendar = (value) => {
+        console.log('Selected Date:', value);
+    };
+    return (
+        <div className="center-container">
+            <Button
+                type="button"
+                text="가능한 시간"
+                onClick={handleState}
+            />
+            <Button
+                type="button"
+                text="불가능한 시간"
+                onClick={handleState}
+            />
+            {state ? <Calendar
+                onChange={handleCalendar}
+            /> :
+                <Calendar
+                    onChange={handleCalendar}
+                />
+            }
+        </div>
     );
 }
 

react-whenMeet/src/styles/CalendarWeek.css

 .calendar-container {
-  position: absolute;
-  left: 100px;
-  margin-top: 100px;
-  width: auto;
+  margin-top: 20px;;
 }
 
 table {

react-whenMeet/src/styles/HomeMake.css

@@ -6,7 +6,7 @@ body {
 
 .center-container {
   display: flex;
-  justify-content: center;
+  flex-direction: column; /* 세로 방향으로 정렬 */
   align-items: center;
   height: 100vh;
 }
@@ -27,6 +27,22 @@ h1 {
   font-family: "Lato";
 }
 
+h2 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  white-space: nowrap;
+  margin: 0;
+}
+
+.timeStartEnd{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  white-space: nowrap;
+  margin: 0;
+}
+
 input {
   width: 100%;
   padding: 10px;
@@ -51,6 +67,14 @@ button:hover {
   background-color: #2980b9;
 }
 
+.header{
+  display: flex;
+  gap: 100px;
+}
+
+.purpose-selector{
+  margin : 20px;
+}
 .calendarTable {
   margin: 0 auto; /* 가운데 정렬을 위해 margin을 auto로 설정합니다. */
 }

react-whenMeet/src/styles/ResultEnd.css

@@ -3,6 +3,8 @@
   margin-bottom: 20px;
   padding: 0;
 }
+
 .calendar {
-  margin-top: 100px;
+  border: 1px solid;
+  padding : 10px;
 }