From 62745d23fc8d7faa7b90b541db85caa2d23aeeab Mon Sep 17 00:00:00 2001
From: mindongmindong <dcmin123@ajou.ac.kr>
Date: Mon, 13 Nov 2023 20:46:25 +0900
Subject: [PATCH] Make <form> to Component
---
react-whenMeet/src/components/HomeMakeForm.js | 57 ++++++++++++++
react-whenMeet/src/components/LinkPageForm.js | 61 +++++++++++++++
.../src/components/MeetingInfoForm.js | 74 +++++++++++++++++++
react-whenMeet/src/routes/HomeMake.js | 49 +-----------
react-whenMeet/src/routes/LinkPage.js | 67 +++--------------
react-whenMeet/src/routes/MeetingInfo.js | 64 +---------------
6 files changed, 206 insertions(+), 166 deletions(-)
create mode 100644 react-whenMeet/src/components/HomeMakeForm.js
create mode 100644 react-whenMeet/src/components/LinkPageForm.js
create mode 100644 react-whenMeet/src/components/MeetingInfoForm.js
diff --git a/react-whenMeet/src/components/HomeMakeForm.js b/react-whenMeet/src/components/HomeMakeForm.js
new file mode 100644
index 0000000..7e7c8f4
--- /dev/null
+++ b/react-whenMeet/src/components/HomeMakeForm.js
@@ -0,0 +1,57 @@
+import { useState } from "react";
+import Input from "../components/Input";
+import Button from "../components/Button";
+import { useNavigate } from "react-router-dom";
+
+function HomeMakeForm() {
+ const [title, setTitle] = useState("");
+ const [password, setPassword] = useState("");
+ const navigate = useNavigate();
+
+ const onTitleChange = (event) => {
+ setTitle(event.target.value);
+ };
+
+ const onPasswordChange = (event) => {
+ setPassword(event.target.value);
+ };
+
+ const handleSubmit = (event) => {
+ event.preventDefault();
+ if (title === "") {
+ return alert("Title을 입력하세요");
+ } else if (password === "") {
+ return alert("Password를 입력하세요");
+ } else {
+ navigate("/MeetingInfo");
+ }
+ };
+
+ return (
+ <form onSubmit={handleSubmit}>
+ <div>
+ <h1>When we meet?</h1>
+ <Input
+ type="text"
+ value={title}
+ onChange={onTitleChange}
+ placeholder="약속 Title"
+ />
+ <br />
+ <Input
+ type="password"
+ value={password}
+ onChange={onPasswordChange}
+ placeholder="관리용 Password"
+ />
+ <br />
+ <Button
+ type="submit"
+ text="시작하기"
+ />
+ </div>
+ </form>
+ );
+}
+
+export default HomeMakeForm;
diff --git a/react-whenMeet/src/components/LinkPageForm.js b/react-whenMeet/src/components/LinkPageForm.js
new file mode 100644
index 0000000..b91819c
--- /dev/null
+++ b/react-whenMeet/src/components/LinkPageForm.js
@@ -0,0 +1,61 @@
+import { useState, useEffect } 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}`;
+ await navigator.clipboard.writeText(textToCopy);
+ alert('클립보드에 복사되었습니다');
+ } catch (err) {
+ alert('클립보드 복사에 실패하였습니다');
+ }
+ };
+
+ const handleSubmit = (event) => {
+ event.preventDefault();
+ setLink(`/HomeParticipate/${random}`)
+ navigate(link);
+ }
+ useEffect(() => {
+ generateRandom();
+ }, [])
+ return (
+ <form onSubmit={handleSubmit}>
+ <div>
+ <Input
+ value={`localhost:3000/HomeParticipate/${random}`}
+ />
+ <Button
+ type="button"
+ onClick={copyToClipboard}
+ text="링크 복사"
+ />
+ <Button
+ type="submit"
+ text="투표 페이지로 이동"
+ />
+ </div>
+ </form>
+ );
+}
+
+export default LinkPageForm;
\ No newline at end of file
diff --git a/react-whenMeet/src/components/MeetingInfoForm.js b/react-whenMeet/src/components/MeetingInfoForm.js
new file mode 100644
index 0000000..1fdb5f0
--- /dev/null
+++ b/react-whenMeet/src/components/MeetingInfoForm.js
@@ -0,0 +1,74 @@
+import { useState } from "react";
+import Input from "../components/Input";
+import Button from "../components/Button";
+import Calendar from "../components/Calendar";
+import { useNavigate } from "react-router-dom";
+
+function MeetingInfoForm() {
+ const [meetingPurpose, setMeetingPurpose] = useState("");
+ const [number, setNumber] = useState();
+ const [endTime, setEndTime] = useState("");
+ const toDo = [
+ '선택',
+ '식사',
+ '공부',
+ '놀기',
+ '기타'
+ ];
+ const navigate = useNavigate();
+
+ const handleOnChange = (event) => {
+ setMeetingPurpose(event.target.value);
+ }
+
+ const handleCalendar = (value) => {
+ console.log('Selected Date:', value);
+ };
+
+ const handleNumber = (event) => {
+ setNumber(event.target.value);
+ }
+
+ const handleEnd = (event) => {
+ setEndTime(event.target.value);
+ }
+
+ const handleSubmit = (event) => {
+ event.preventDefault();
+ (meetingPurpose === "" || meetingPurpose === "선택") ? alert("목적을 선택하세요") : navigate("LinkPage");
+ }
+
+ return (
+ <form onSubmit={handleSubmit}>
+ <div>
+ <h1>약속 일정 만들기</h1>
+ <label>
+ 목적:
+ <select value={meetingPurpose} onChange={handleOnChange}>
+ {toDo.map((todo, index) => (
+ <option key={index}>{todo}</option>
+ ))}
+ </select>
+ </label>
+ <Calendar onChange={handleCalendar} />
+ <Input
+ type="number"
+ value={number}
+ onChange={handleNumber}
+ placeholder="예상 투표 인원(선택)"
+ />
+ <Input
+ type="datetime-local"
+ value={endTime}
+ onChange={handleEnd}
+ />
+ <Button
+ type="submit"
+ text="시작하기"
+ />
+ </div>
+ </form>
+ );
+}
+
+export default MeetingInfoForm;
diff --git a/react-whenMeet/src/routes/HomeMake.js b/react-whenMeet/src/routes/HomeMake.js
index e60f764..0a7bd91 100644
--- a/react-whenMeet/src/routes/HomeMake.js
+++ b/react-whenMeet/src/routes/HomeMake.js
@@ -1,56 +1,11 @@
-import Input from "../components/Input";
-import Button from "../components/Button";
-import { useState } from "react";
-import { useNavigate } from "react-router-dom";
+import HomeMakeForm from "../components/HomeMakeForm";
import "../styles/HomeMake.css";
function HomeMake() {
- const [title, setTitle] = useState("");
- const [password,setPassword] = useState("");
- const navigate = useNavigate();
-
- const onTitleChange = (event) => {
- setTitle(event.target.value);
- }
- const onPasswordChange = (event) => {
- setPassword(event.target.value);
- }
- const handleSubmit = (event)=>{
- event.preventDefault();
- if(title === ""){
- return alert("Title을 입력하세요");;
- }
- else if(password === ""){
- return alert("Password를 입력하세요");;
- }
- else{
- navigate("/MeetingInfo");
- }
- }
return (
<div className="center-container">
- <form onSubmit={handleSubmit}>
- <h1>When we meet?</h1>
- <Input
- type="text"
- value={title}
- onChange={onTitleChange}
- placeholder="약속 Title"
- />
- <br />
- <Input
- type="password"
- value={password}
- onChange={onPasswordChange}
- placeholder="관리용 Password"
- />
- <br/>
- <Button
- type="submit"
- text="시작하기"
- />
- </form>
+ <HomeMakeForm />
</div>
);
}
diff --git a/react-whenMeet/src/routes/LinkPage.js b/react-whenMeet/src/routes/LinkPage.js
index 022d63b..94a9ecd 100644
--- a/react-whenMeet/src/routes/LinkPage.js
+++ b/react-whenMeet/src/routes/LinkPage.js
@@ -1,61 +1,12 @@
-import {useState, useEffect} from "react";
+import LinkPageForm from "../components/LinkPageForm";
import "../styles/HomeMake.css"
-import Input from "../components/Input";
-import Button from "../components/Button";
-import { useNavigate } from "react-router-dom";
function LinkPage() {
- const [link, setLink] = useState("");
- const navigate = useNavigate();
-
- const generateLink = () => {
- 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];
- }
- setLink(randomLink);
- };
-
- const copyToClipboard = () => {
- const textField = document.createElement('textarea');
- textField.innerText = `localhost:3000/UserTimeInfo/${link}`;
- document.body.appendChild(textField);
- textField.select();
- document.execCommand('copy');
- document.body.removeChild(textField);
- alert('링크가 복사되었습니다.');
- };
-
- const handleSubmit = (event)=>{
- event.preventDefault();
- navigate(`/UserTimeInfo/${link}`);
- }
- useEffect(()=>{
- generateLink();
- },[])
- return (
- <div className="center-container">
- <form onSubmit={handleSubmit}>
- <Input
- value={`localhost:3000/UserTimeInfo/${link}`}
- />
- <Button
- type= "button"
- onClick={copyToClipboard}
- text= "링크 복사"
- />
- <Button
- type= "submit"
- text = "투표 페이지로 이동"
- />
- </form>
-
- </div>
- );
- }
-
- export default LinkPage;
\ No newline at end of file
+ return (
+ <div className="center-container">
+ <LinkPageForm />
+ </div>
+ );
+}
+
+export default LinkPage;
\ No newline at end of file
diff --git a/react-whenMeet/src/routes/MeetingInfo.js b/react-whenMeet/src/routes/MeetingInfo.js
index 4d48d9e..7f6aa35 100644
--- a/react-whenMeet/src/routes/MeetingInfo.js
+++ b/react-whenMeet/src/routes/MeetingInfo.js
@@ -1,69 +1,11 @@
-import { useState } from "react";
-import Input from "../components/Input";
-import Button from "../components/Button";
-import Calendar from "../components/Calendar";
-import { useNavigate } from "react-router-dom";
+import MeetingInfoForm from "../components/MeetingInfoForm";
import "../styles/HomeMake.css"
function MeetingInfo() {
- const [meetingPurpose, setMeetingPurpose] = useState("");
- const [number, setNumber] = useState();
- const [endTime, setEndTime] = useState("");
- const navigate = useNavigate();
-
- const handleOnChange = (event) => {
- setMeetingPurpose(event.target.value);
- }
- const handleCalendar = (value) => {
- console.log('Selected Date:', value);
- };
- const handleNumber = (event) => {
- setNumber(event.target.value);
- }
- const handleEnd = (event) => {
- setEndTime(event.target.value);
- }
- const handleSubmit = (event) => {
- event.preventDefault();
- if (meetingPurpose === "" || meetingPurpose === "선택") {
- return alert("목적을 선택하세요");;
- }
- else {
- navigate("LinkPage");
- }
- }
+
return (
<div className="center-container">
- <form onSubmit={handleSubmit}>
- <h1>약속 일정 만들기</h1>
- <label>
- 목적:
- <select value={meetingPurpose} onChange={handleOnChange}>
- <option>선택</option>
- <option>식사</option>
- <option>공부</option>
- <option>놀기</option>
- <option>기타</option>
- </select>
- </label>
- <Calendar onChange={handleCalendar} />
- <Input
- type="number"
- value={number}
- onChange={handleNumber}
- placeholder="예상 투표 인원"
- />
- <Input
- type="datetime-local"
- value={endTime}
- onChange={handleEnd}
- placeholder="투표 종료 시간"
- />
- <Button
- type="submit"
- text="시작하기"
- />
- </form>
+ <MeetingInfoForm />
</div>
);
}
--
GitLab