From 379897e73b5632484a28f2922838f3f9e1e7860e Mon Sep 17 00:00:00 2001
From: mindongmindong <dcmin123@ajou.ac.kr>
Date: Sat, 18 Nov 2023 20:05:21 +0900
Subject: [PATCH] [Modify&ADD] MeetingInfoForm
---
react-whenMeet/src/App.js | 18 ++----
react-whenMeet/src/components/Calendar.js | 1 -
.../src/components/CalendarMonth.jsx | 1 +
react-whenMeet/src/components/LinkPageForm.js | 25 ++-------
react-whenMeet/src/components/MakeHeader.jsx | 28 +++++++---
.../src/components/MeetingInfoForm.js | 56 ++++++++++++++-----
react-whenMeet/src/routes/HomeParticipate.js | 8 ++-
react-whenMeet/src/routes/UserTimeInfo.js | 37 +++++++++++-
react-whenMeet/src/styles/CalendarWeek.css | 5 +-
react-whenMeet/src/styles/HomeMake.css | 26 ++++++++-
react-whenMeet/src/styles/ResultEnd.css | 4 +-
11 files changed, 145 insertions(+), 64 deletions(-)
diff --git a/react-whenMeet/src/App.js b/react-whenMeet/src/App.js
index c223046..6468946 100644
--- a/react-whenMeet/src/App.js
+++ b/react-whenMeet/src/App.js
@@ -1,9 +1,8 @@
-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>
diff --git a/react-whenMeet/src/components/Calendar.js b/react-whenMeet/src/components/Calendar.js
index 6989702..d95a42d 100644
--- a/react-whenMeet/src/components/Calendar.js
+++ b/react-whenMeet/src/components/Calendar.js
@@ -7,7 +7,6 @@ import CalendarMonth from "./CalendarMonth";
function Calendar({ onChange }) {
return (
<div>
- <h2>달력</h2>
<CalendarMonth />
</div>
);
diff --git a/react-whenMeet/src/components/CalendarMonth.jsx b/react-whenMeet/src/components/CalendarMonth.jsx
index 6d28111..4c15c1b 100644
--- a/react-whenMeet/src/components/CalendarMonth.jsx
+++ b/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">
diff --git a/react-whenMeet/src/components/LinkPageForm.js b/react-whenMeet/src/components/LinkPageForm.js
index b91819c..45edc9a 100644
--- a/react-whenMeet/src/components/LinkPageForm.js
+++ b/react-whenMeet/src/components/LinkPageForm.js
@@ -1,28 +1,15 @@
-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"
diff --git a/react-whenMeet/src/components/MakeHeader.jsx b/react-whenMeet/src/components/MakeHeader.jsx
index dfb51d8..93d10c2 100644
--- a/react-whenMeet/src/components/MakeHeader.jsx
+++ b/react-whenMeet/src/components/MakeHeader.jsx
@@ -1,9 +1,23 @@
-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
+}
diff --git a/react-whenMeet/src/components/MeetingInfoForm.js b/react-whenMeet/src/components/MeetingInfoForm.js
index 1fdb5f0..47bbb35 100644
--- a/react-whenMeet/src/components/MeetingInfoForm.js
+++ b/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"
diff --git a/react-whenMeet/src/routes/HomeParticipate.js b/react-whenMeet/src/routes/HomeParticipate.js
index 28e6b01..9f383a5 100644
--- a/react-whenMeet/src/routes/HomeParticipate.js
+++ b/react-whenMeet/src/routes/HomeParticipate.js
@@ -1,6 +1,12 @@
+import HomeParticipateForm from "../components/HomeParticipateForm";
+import "../styles/HomeMake.css";
+
function HomeParticipate(){
+
return(
- <h1>HomeParticipate</h1>
+ <div className="center-container">
+ <HomeParticipateForm />
+ </div>
);
}
diff --git a/react-whenMeet/src/routes/UserTimeInfo.js b/react-whenMeet/src/routes/UserTimeInfo.js
index 3e3ae68..610bc18 100644
--- a/react-whenMeet/src/routes/UserTimeInfo.js
+++ b/react-whenMeet/src/routes/UserTimeInfo.js
@@ -1,6 +1,37 @@
-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>
);
}
diff --git a/react-whenMeet/src/styles/CalendarWeek.css b/react-whenMeet/src/styles/CalendarWeek.css
index b9371ef..12876b8 100644
--- a/react-whenMeet/src/styles/CalendarWeek.css
+++ b/react-whenMeet/src/styles/CalendarWeek.css
@@ -1,8 +1,5 @@
.calendar-container {
- position: absolute;
- left: 100px;
- margin-top: 100px;
- width: auto;
+ margin-top: 20px;;
}
table {
diff --git a/react-whenMeet/src/styles/HomeMake.css b/react-whenMeet/src/styles/HomeMake.css
index 60d7874..5ea58f7 100644
--- a/react-whenMeet/src/styles/HomeMake.css
+++ b/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로 설정합니다. */
}
diff --git a/react-whenMeet/src/styles/ResultEnd.css b/react-whenMeet/src/styles/ResultEnd.css
index 77afcb7..56d5806 100644
--- a/react-whenMeet/src/styles/ResultEnd.css
+++ b/react-whenMeet/src/styles/ResultEnd.css
@@ -3,6 +3,8 @@
margin-bottom: 20px;
padding: 0;
}
+
.calendar {
- margin-top: 100px;
+ border: 1px solid;
+ padding : 10px;
}
--
GitLab