diff --git a/react-whenMeet/src/components/Button.js b/react-whenMeet/src/components/Button.js index c716d3293aee7e1c416f20138b60491b7c2d843b..8ddf720c4e8136001e6bd9c6d86d05af4b6be203 100644 --- a/react-whenMeet/src/components/Button.js +++ b/react-whenMeet/src/components/Button.js @@ -1,7 +1,8 @@ -function Button({type,text}){ +function Button({type,text,onClick}){ return( <button type = {type} + onClick={onClick} > {text} </button> diff --git a/react-whenMeet/src/routes/HomeMake.js b/react-whenMeet/src/routes/HomeMake.js index 82c13526b6b3f52c5abfe88b739868bb6d2ff029..e60f7648f9d9ee2bc213a8403baf0f51a0a84c51 100644 --- a/react-whenMeet/src/routes/HomeMake.js +++ b/react-whenMeet/src/routes/HomeMake.js @@ -40,7 +40,7 @@ function HomeMake() { /> <br /> <Input - type="text" + type="password" value={password} onChange={onPasswordChange} placeholder="관리용 Password" diff --git a/react-whenMeet/src/routes/LinkPage.js b/react-whenMeet/src/routes/LinkPage.js index 30b71b70a5c351a7001a542aec117a7bad57e6d7..022d63b2123afff37da35a44ab31efb35c98ca96 100644 --- a/react-whenMeet/src/routes/LinkPage.js +++ b/react-whenMeet/src/routes/LinkPage.js @@ -1,7 +1,61 @@ -function LinkPage(){ - return( - <h1>LinkPage</h1> - ); -} +import {useState, useEffect} from "react"; +import "../styles/HomeMake.css" +import Input from "../components/Input"; +import Button from "../components/Button"; +import { useNavigate } from "react-router-dom"; -export default LinkPage; \ No newline at end of file +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 diff --git a/react-whenMeet/src/routes/MeetingInfo.js b/react-whenMeet/src/routes/MeetingInfo.js index f5d9c9fa8a786a1b4eb4d7f339edb3df79e47fb3..4d48d9e82eeaed843cfc62c6a63198977e189c58 100644 --- a/react-whenMeet/src/routes/MeetingInfo.js +++ b/react-whenMeet/src/routes/MeetingInfo.js @@ -11,7 +11,7 @@ function MeetingInfo() { const [endTime, setEndTime] = useState(""); const navigate = useNavigate(); - const handleOnClick = (event) => { + const handleOnChange = (event) => { setMeetingPurpose(event.target.value); } const handleCalendar = (value) => { @@ -25,7 +25,7 @@ function MeetingInfo() { } const handleSubmit = (event) => { event.preventDefault(); - if (meetingPurpose === "") { + if (meetingPurpose === "" || meetingPurpose === "선택") { return alert("목적을 선택하세요");; } else { @@ -38,7 +38,8 @@ function MeetingInfo() { <h1>약속 일정 만들기</h1> <label> 목적: - <select value={meetingPurpose} onClick={handleOnClick}> + <select value={meetingPurpose} onChange={handleOnChange}> + <option>선택</option> <option>식사</option> <option>공부</option> <option>놀기</option>