시간2분할 수정

package.json

@@ -4,10 +4,12 @@
   "private": true,
   "homepage": "https://linklion.com/main",
   "dependencies": {
+    "axios": "^1.7.9",
     "cra-template": "1.2.0",
     "prop-types": "^15.7.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-modal": "^3.16.3",
     "react-router": "^7.1.3",
     "react-router-dom": "^7.1.3",
     "react-scripts": "5.0.1"

src/App.js

@@ -1,5 +1,4 @@
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
-
 import Home from "./routes/Home";
 import List from "./routes/List";
 import Join from "./routes/Join";

src/components/CreatGroupModal.js

@@ -1,6 +1,6 @@
 import { useState, useRef } from "react";
 import Modal from "react-modal";
-import "../src/App.css";
+import "../styles/Creatgroup.css";
 import axios from 'axios'; 
 
 const eventData = {
@@ -19,11 +19,14 @@ const eventData = {
 
 const apiUrl = "https://one3th-front-api.onrender.com/grouping/addGroup"
 
-function CreatGroupModal() {
+function CreatGroupModal({setIsModalOpen}) {
+
   const [isOpen, setIsOpen] = useState(false);
   const [formData, setFormData] = useState({
+
     groupName: "",
-    time: "",
+    startTime: "",
+    endTime: "",
     date: "",
     location: "",
     description: "",
@@ -69,7 +72,8 @@ function CreatGroupModal() {
   const [description, setDescription] = useState("");
   const [maxNum, setMaxNum] = useState("");
   const [date, setDate] = useState("");
-  const [time, setTime] = useState("00:00");
+  const [startTime, setStartTime] = useState("00:00");
+  const [endTime, setEndTime] = useState("00:00");
   const [location, setLocation] = useState("");
   const [category, setCategory] = useState("");
 
@@ -110,7 +114,7 @@ function CreatGroupModal() {
 
   return (
     <div className="Back">
-      <button onClick={openModal}>소모임 생성</button>
+      <button onClick={openModal} className="openBtn">소모임 생성</button>
 
       <Modal className="FormContainer" isOpen={isOpen} onRequestClose={closeModal} >
 
@@ -126,8 +130,8 @@ function CreatGroupModal() {
               className="nameBox"
               type="text"
               placeholder="여기에 작성해 주세요"
-              value={groupName}
-              onChange={(e) => setGroupName(e.target.value)}
+              value={formData.groupName}
+              onChange={(e) => handleChange(e)}
             />
           </div>
 
@@ -171,8 +175,8 @@ function CreatGroupModal() {
             <br></br>
             <select 
               className="selectBox"
-              value={maxNum} 
-              onChange={(e) => setMaxNum(e.target.value)}>
+              value={formData.maxNum} 
+              onChange={(e) => handleChange(e)}>
               <option value="">선택</option>
               <option value="3명">3명</option>
               <option value="4명">4명</option>
@@ -192,8 +196,8 @@ function CreatGroupModal() {
             <input 
               className="dateBox"
               type="date"
-              value={date} 
-              onChange={(e) => setDate(e.target.value)} />
+              value={formData.date} 
+              onChange={(e) => handleChange(e)} />
           </div>
 
           <div className="inputTime">
@@ -202,8 +206,15 @@ function CreatGroupModal() {
             <input
               className="TimeBox"
               type="time"
-              value={time}
-              onChange={(e) => setTime(e.target.value)}
+              value={formData.startTime}
+              onChange={(e) => handleChange(e)}
+            />
+            ~
+            <input
+              className="TimeBox"
+              type="time"
+              value={formData.endTime}
+              onChange={(e) => handleChange(e)}
             />
           </div>
 
@@ -216,7 +227,7 @@ function CreatGroupModal() {
                   type="radio"
                   value={cate}
                   checked={category === cate}
-                  onChange={(e) => setCategory(e.target.value)}
+                  onChange={(e) => handleChange(e)}
                 />
                 {cate}
               </label>
@@ -230,8 +241,8 @@ function CreatGroupModal() {
               className="locateBox"
               type="text"
               placeholder="여기에 작성해 주세요 (ex: 평봉)"
-              value={location}
-              onChange={(e) => setLocation(e.target.value)}
+              value={formData.location}
+              onChange={(e) => handleChange(e)}
             />
           </div>
         </div>{/* 우측 */}

src/routes/Home.js

@@ -1,12 +1,21 @@
 import { useEffect, useState } from "react";
 // import background from "../assets/Main_BackGround.png";
-import logo from "../assets/Logo(Icon).png";
+import logo from "../assets/Home/logo.png";
 import Appbar from "../assets/Home/앱바.svg";
 import background from "../assets/Home/Intersect.png";
 import "../styles/Main.css";
+import CreatGroupModal from "../components/CreatGroupModal";
 
 
 function Home(){
+
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const toggleModal = () => {
+    setIsModalOpen(true);
+    console.log("ismodalOpen" + isModalOpen)
+  };
+
   return(
     <div>
       <div className="HomeBody">
@@ -15,15 +24,18 @@ function Home(){
           <img className="headerImg" src={Appbar} alt="header"/>
           <div className="Logo">
             <img src={logo}/>
+            <span>LINKLION</span>
           </div>
-          <span>LINKLION</span>
         </header>
-        <button className="Enter"  >입장하기</button>
+
+        <button className="Enter" onClick={toggleModal}  >입장하기</button>
+
         <div className="TextBox">
           <h1>LINKLION</h1>
           <span>멋쟁이 사자처럼의 혁신과 연대를 상징하는 소모임 플랫폼</span>
         </div>
       </div>
+      <CreatGroupModal setIsModalOpen={isModalOpen} />
     </div>
   )
 }