diff --git a/react-whenMeet/src/App.js b/react-whenMeet/src/App.js
index c2230460ec9f578c458891c332fca4ea439f0c02..6468946fe78f5ae88926172aac10b2c2dd98d8ea 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 6989702ea3f2308e0228a27e8aecd970762ccd39..d95a42d1aff9379af45a22949c62f88531359157 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 6d28111ff3d45a9356df8d814d584b07e7597cdb..4c15c1b7002a9771c5f7e5c02c9ad1bde011e512 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 b91819c934ccbea0e5e13683961a1738ab35c078..45edc9acae93e484abe45d5ea75eb67ce3a8394a 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 dfb51d8eb19bbbebbce3104fadf087d637da9cfa..93d10c22077eb58c53db775048b09956e93bd4cd 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 1fdb5f0e4fb0567df8691c4a1a969941598d82a5..47bbb351440ce0a21ef77dae06a9dbbb49a53f9b 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 28e6b015865d3ce7d50db48715033d14fb55da28..9f383a5a169d1b899073735825a801b80c035c57 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 3e3ae683ed4659b9445cc50eed89e45f60a05104..610bc189f1a61dd2f656f90411fb12a5c69cb002 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 b9371efdb40771653bdd7ed696489dd673189f7e..12876b8328a21e3f61f1e27ee29aeeeb817bb04a 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 60d78746a0a72e7e23f0a97f0977285f7bc29d6a..5ea58f7852096c5809a766c5a13ac2c9a828a3bc 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 77afcb70d7fc824c77b53623730900f755f03801..56d58060be6e198ad2e52d261da30af1b71033f6 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;
}