From ebf84d8544c66a36f18dfaa8941f80a034d85a6a Mon Sep 17 00:00:00 2001
From: mindongmindong <dcmin123@ajou.ac.kr>
Date: Mon, 13 Nov 2023 16:27:26 +0900
Subject: [PATCH] Make LinkPage.js
---
react-whenMeet/src/components/Button.js | 3 +-
react-whenMeet/src/routes/HomeMake.js | 2 +-
react-whenMeet/src/routes/LinkPage.js | 66 +++++++++++++++++++++---
react-whenMeet/src/routes/MeetingInfo.js | 7 +--
4 files changed, 67 insertions(+), 11 deletions(-)
diff --git a/react-whenMeet/src/components/Button.js b/react-whenMeet/src/components/Button.js
index c716d32..8ddf720 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 82c1352..e60f764 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 30b71b7..022d63b 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 f5d9c9f..4d48d9e 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>
--
GitLab