Make <form> to Component

react-whenMeet/src/components/HomeMakeForm.js

+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;

react-whenMeet/src/components/LinkPageForm.js

+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

react-whenMeet/src/components/MeetingInfoForm.js

+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;

react-whenMeet/src/routes/HomeMake.js

-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>
     );
 }

react-whenMeet/src/routes/LinkPage.js

-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

react-whenMeet/src/routes/MeetingInfo.js

-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>
     );
 }