[ADD] resultEnd, resultMake페이지 추가

package-lock.json

+{
+  "name": "whenmeet",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "whenmeet",
+      "version": "1.0.0",
+      "license": "ISC"
+    }
+  }
+}

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{
-  BrowserRouter as Router,
-  Routes,
-  Route,
-} from "react-router-dom";
+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 ResultMake from "./routes/ResultMake";
+import ResultEnd from "./routes/ResultEnd";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 
 function App() {
   return (
     <Router>
       <Routes>
-        <Route path="/" element={<HomeMake/>}> </Route>
+        <Route path="/" element={<HomeMake />}>
+          {" "}
+        </Route>
         <Route path="/homeparticipate" element={<HomeParticipate />}></Route>
-        <Route path="/meetinginfo" element={<MeetingInfo />}> </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="/result" element={<ResultMake />}></Route>//결과확인페이지
+        <Route path="/resultend" element={<ResultEnd />}></Route>// 투표 종료
+        페이지
       </Routes>
     </Router>
   );
 }
 
-
-export default App;
\ No newline at end of file
+export default App;

react-whenMeet/src/components/Calendar.js

-import React from 'react';
-import { useState } from 'react';
-import Input from './Input';
-import CalendarMonth from './CalendarMonth';
-import CalendarWeek from './CalendarWeek';
+import React from "react";
+import { useState } from "react";
+import Input from "./Input";
+import CalendarMonth from "./CalendarMonth";
+//import CalendarWeek from './CalendarWeek';
 
-function Calendar({onChange}){    
-    return(
-        <div>
-            <h2>달력</h2>
-            <CalendarMonth/>
-        </div>
-    );
+function Calendar({ onChange }) {
+  return (
+    <div>
+      <h2>달력</h2>
+      <CalendarMonth />
+    </div>
+  );
 }
 
-export default Calendar;
\ No newline at end of file
+export default Calendar;

react-whenMeet/src/components/CalendarWeek.jsx

+import React, { useState } from "react";
+import "../styles/CalendarWeek.css";
+const hours = [...Array(24).keys()].map((i) => `${i}:00`); // 0:00 to 23:00
+const days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+
+const CalendarWeek = () => {
+  const [schedule, setSchedule] = useState({});
+
+  const toggleHour = (day, hour) => {
+    const daySchedule = schedule[day] || [];
+    if (daySchedule.includes(hour)) {
+      setSchedule({
+        ...schedule,
+        [day]: daySchedule.filter((h) => h !== hour),
+      });
+    } else {
+      setSchedule({
+        ...schedule,
+        [day]: [...daySchedule, hour],
+      });
+    }
+  };
+
+  return (
+    <table className="calendar-container">
+      <thead>
+        <tr>
+          {["", ...days].map((day) => (
+            <th key={day}>{day}</th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {hours.map((hour) => (
+          <tr key={hour}>
+            <td>{hour}</td>
+            {days.map((day) => (
+              <td
+                key={day}
+                className={schedule[day]?.includes(hour) ? "selected" : ""}
+                onClick={() => toggleHour(day, hour)}
+              />
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+export default CalendarWeek;

react-whenMeet/src/components/ResultEndForm.jsx

+import CalendarWeek from "./CalendarWeek";
+import React, { useState } from "react";
+import "../styles/ResultEnd.css";
+import "../styles/CalendarWeek.css";
+export default function ResultEndForm() {
+  const [title, setTitle] = useState("Title 예시");
+  const [resultTime, setresultTIme] = useState("00:37:30");
+  const [completedPeopleNum, setcompletedPeopleNum] = useState(3);
+  const [selectedDate, setSelectedDate] = useState("");
+  //const [possibleDates, setpossibleDate] = useState("");
+  const possibleDates = ["23.07.01 ~~~", "23.07.02 ~~~", "23.07.03 ~~~"];
+  const [completedTasks, setCompletedTasks] = useState(3);
+  const [totalTasks, setTotalTasks] = useState(7);
+  const [timeLeft, setTimeLeft] = useState("00:37:30");
+  const handleDateChange = (event) => {
+    setSelectedDate(event.target.value);
+  };
+
+  return (
+    <div style={{ textAlign: "center", width: "50%" }}>
+      <h1 className="title-box">{title}</h1>
+      <p>투표가 종료되었습니다.</p>
+      <p style={{ color: "blue" }}>약속 시간은 {resultTime}입니다.</p>
+      <div>
+        <h2>총 참여한 인원수</h2>
+        <p>{completedPeopleNum}</p>
+        <form className="form-container">
+          {possibleDates.map((date, index) => (
+            <label key={index}>
+              <input
+                type="radio"
+                name="date"
+                value={date}
+                checked={selectedDate === date}
+                onChange={handleDateChange}
+              />
+              {date}
+            </label>
+          ))}
+        </form>
+        <button
+          style={{ marginTop: "20px", padding: "10px 20px" }}
+          onClick={() => console.log(selectedDate)}
+        >
+          이 시간으로 정했어요
+        </button>
+        <button style={{ marginTop: "10px", padding: "10px 20px" }}>
+          랜덤으로 약속 시간 확정하기
+        </button>
+      </div>
+      <CalendarWeek className="calander" />
+      <span
+        className="possibleMan"
+        style={{
+          position: "absolute",
+          marginTop: "100px",
+          marginLeft: "100px",
+        }}
+      >
+        <div style={{ textAlign: "center" }}>가능한 사람</div>
+      </span>
+    </div>
+  );
+}

react-whenMeet/src/components/ResultMakeForm.js

+//결과 확인 페이지
+import React, { useState } from "react";
+import CalendarWeek from "./CalendarWeek";
+import { useNavigate } from "react-router-dom";
+
+function ResultMakeForm() {
+  const [title, setTitle] = useState("Title 예시");
+  const [completedTasks, setCompletedTasks] = useState(3);
+  const [totalTasks, setTotalTasks] = useState(7);
+  const [timeLeft, setTimeLeft] = useState("00:37:30");
+  const navigate = useNavigate();
+  // 타이머를 시작하고 관리하는 로직
+
+  const handleEdit = () => {
+    navigate("/meetinginfo/linkpage");
+  };
+
+  return (
+    <div>
+      <h1 className="title-box">{title}</h1>
+      <div>
+        현재 완료한 일업수 {completedTasks} / {totalTasks}
+      </div>
+      <div>종료까지 남은 시간 {timeLeft}</div>
+      <button onClick={handleEdit}>수정하기</button>
+      <button
+        onClick={() => {
+          navigate("/resultend");
+        }}
+      >
+        투표 종료하기
+      </button>
+      <CalendarWeek />
+      <span className="mostTime">
+        <div style={{ textAlign: "center" }}>
+          가장 많은 사람들이 가능한 일정
+        </div>
+        <ol>//일정 5개 나열</ol>
+      </span>
+      <span className="possibleMan">
+        <div style={{ textAlign: "center" }}>가능한 사람</div>
+      </span>
+    </div>
+  );
+}
+
+export default ResultMakeForm;

react-whenMeet/src/routes/ResultEnd.jsx

+import ResultEndForm from "../components/ResultEndForm";
+import "../styles/HomeMake.css";
+
+function ResultEnd() {
+  return (
+    <div className="center-container">
+      <ResultEndForm />
+    </div>
+  );
+}
+
+export default ResultEnd;

react-whenMeet/src/routes/ResultMake.js

+import ResultMakeForm from "../components/ResultMakeForm";
+import "../styles/HomeMake.css";
+
+function ResultMake() {
+  return (
+    <div className="center-container">
+      <ResultMakeForm />
+    </div>
+  );
+}
+
+export default ResultMake;

react-whenMeet/src/styles/CalendarWeek.css

+.calendar-container {
+  position: absolute;
+  left: 100px;
+  margin-top: 100px;
+  width: auto;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  text-align: center;
+}
+
+th,
+td {
+  border: 1px solid #ddd;
+  padding: 10px;
+}
+
+th {
+  background-color: #f4f4f4;
+}
+
+td {
+  background-color: #f4f4f4;
+  cursor: pointer;
+}
+td:hover {
+  background-color: aqua;
+}
+
+.selected {
+  background-color: #e0ffe0; /* 선택된 셀의 배경색 */
+}

react-whenMeet/src/styles/HomeMake.css

 body {
-    background-color: #3CB371; /* Set the background color of the entire page */
-    margin: 0;
-    padding: 0;
+  background-color: #3cb371; /* Set the background color of the entire page */
+  margin: 0;
+  padding: 0;
 }
 
 .center-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
 }
 
 form {
-    width: 30%;
-    padding: 20px;
-    background-color: #f4f4f4;
-    border-radius: 8px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-    text-align: center;
+  width: 30%;
+  padding: 20px;
+  background-color: #f4f4f4;
+  border-radius: 8px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  text-align: center;
 }
 
 h1 {
-    margin-bottom: 20px;
-    color: #333333;
-    font-size: 24px;
-    font-family: 'Lato';
+  margin-bottom: 20px;
+  color: #333333;
+  font-size: 24px;
+  font-family: "Lato";
 }
 
 input {
-    width: 100%;
-    padding: 10px;
-    margin: 8px 0;
-    box-sizing: border-box;
-    border: 1px solid #ccc;
-    border-radius: 4px;
+  width: 100%;
+  padding: 10px;
+  margin: 8px 0;
+  box-sizing: border-box;
+  border: 1px solid #ccc;
+  border-radius: 4px;
 }
 
 button {
-    width: 100%;
-    padding: 10px;
-    margin-top: 16px;
-    background-color: #3498db;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
+  width: 100%;
+  padding: 10px;
+  margin-top: 16px;
+  background-color: #3498db;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
 }
 
 button:hover {
-    background-color: #2980b9;
+  background-color: #2980b9;
 }
 
 .calendarTable {
-    margin: 0 auto; /* 가운데 정렬을 위해 margin을 auto로 설정합니다. */
+  margin: 0 auto; /* 가운데 정렬을 위해 margin을 auto로 설정합니다. */
 }
 
 .calendarTable .cellb {
-    color: gray; /* 회색으로 글자색 지정 */
+  color: gray; /* 회색으로 글자색 지정 */
 }
 
 /* cella 클래스에 대한 스타일 */
 .calendarTable .cella {
-    color: black; /* 검정색으로 글자색 지정 */
+  color: black; /* 검정색으로 글자색 지정 */
 }
 
+.mostTime {
+  position: absolute;
+  margin-top: 200px;
+  margin-left: 20px;
+  width: 20em;
+  border-width: 1px;
+  border-color: black;
+  border-style: solid;
+  padding: 20px;
+}
+.possibleMan {
+  position: absolute;
+  margin-left: 20px;
+  margin-top: 800px;
+  width: 20em;
+  border-width: 1px;
+  border-color: black;
+  border-style: solid;
+  padding: 20px;
+}
+
+.title-box {
+  text-align: center;
+  border-width: 1px;
+  border-color: black;
+  border-style: solid;
+  margin: 10px;
+  padding: 2px 10px;
+}
 /* Media queries for responsiveness */
 @media (max-width: 768px) {
-    form {
-        width: 80%;
-    }
+  form {
+    width: 80%;
+  }
 }
 @media (max-width: 576px) {
-    form {
-        width: 90%;
-    }
+  form {
+    width: 90%;
+  }
 }

react-whenMeet/src/styles/ResultEnd.css

+.form-container {
+  width: 100%;
+  margin-bottom: 20px;
+  padding: 0;
+}
+.calendar {
+  margin-top: 100px;
+}