Skip to content
Snippets Groups Projects
Select Git revision
  • e5fa519ea4abf63f5e05dfe45d57043305513b85
  • main default protected
  • develop
  • revert-00dc9115
  • feat/#14
  • feat/#13
  • feat/#11
  • feat/#9
  • feat/#10
  • feat/#8
10 results

CreateMeetingModal.jsx

Blame
  • CreateMeetingModal.jsx 7.04 KiB
    import React, { useState } from "react";
    import Modal from "./Modal";
    import Button from "./Button";
    import { createMeeting } from "../api/meeting";
    import { convertTimeToIndex } from "../utils/time";
    import { days } from "../constants/schedule";
    
    const CreateMeetingModal = ({ isOpen, onClose, onMeetingCreated }) => {
      const [title, setTitle] = useState("");
      const [description, setDescription] = useState("");
      const [location, setLocation] = useState("");
      const [dayStart, setDayStart] = useState("");
      const [hourStart, setHourStart] = useState("0");
      const [minuteStart, setMinuteStart] = useState("0");
      const [dayEnd, setDayEnd] = useState("");
      const [hourEnd, setHourEnd] = useState("0");
      const [minuteEnd, setMinuteEnd] = useState("0");
      const [maxNum, setMaxNum] = useState("1");
    
      const minutes = ["0", "15", "30", "45"];
      const hours = Array.from({ length: 24 }, (_, i) => i.toString());
      const maxParticipants = Array.from({ length: 20 }, (_, i) =>
        (i + 1).toString()
      );
    
      const handleSubmit = async () => {
        try {
          const time_idx_start = convertTimeToIndex(
            dayStart,
            parseInt(hourStart),
            parseInt(minuteStart)
          );
          const time_idx_end = convertTimeToIndex(
            dayEnd,
            parseInt(hourEnd),
            parseInt(minuteEnd)
          );
          const time_idx_deadline = convertTimeToIndex(
            dayStart,
            parseInt(hourStart),
            parseInt(minuteStart)
          );
    
          const meetingData = {
            title,
            description,
            location,
            time_idx_start,
            time_idx_end,
            time_idx_deadline,
            type: "OPEN",
            max_num: parseInt(maxNum),
          };
    
          await createMeeting(meetingData);
          alert("모임이 성공적으로 생성되었습니다!");
          onMeetingCreated(); // 모임 생성 후 상태 동기화
          onClose(); // 모달 닫기
        } catch (error) {
          console.error("Failed to create meeting:", error);
          alert("모임 생성에 실패했습니다.");
        }
      };
    
      return (
        <Modal isOpen={isOpen} onClose={onClose}>
          <h2 className="mb-4 text-2xl font-bold">번개 모임 만들기</h2>
          <hr />
          <div className="mt-4 space-y-4">
            <div>
              <label className="block mb-2 font-semibold">
                모임 이름
                <span className="relative ml-1 bottom-1 label-1 text-warning">
                  *
                </span>
              </label>
              <input
                type="text"
                className="w-full p-2 border rounded"
                placeholder="모임 이름을 입력하세요"
                value={title}
                onChange={(e) => setTitle(e.target.value)}
                required
              />
            </div>
            <div>
              <label className="block mb-2 font-semibold">
                모임 설명
                <span className="relative ml-1 bottom-1 label-1 text-warning">
                  *
                </span>
              </label>
              <textarea
                className="w-full p-2 border rounded"
                placeholder="모임 설명을 입력하세요"
                value={description}
                onChange={(e) => setDescription(e.target.value)}
              ></textarea>
            </div>
            <div>
              <label className="block mb-2 font-semibold">
                장소
                <span className="relative ml-1 bottom-1 label-1 text-warning">
                  *
                </span>
              </label>
              <input
                type="text"
                className="w-full p-2 border rounded"
                placeholder="장소를 입력하세요"
                value={location}
                onChange={(e) => setLocation(e.target.value)}
                required
              />
            </div>
            <div>
              <label className="block mb-2 font-semibold">
                시작 시간
                <span className="relative ml-1 bottom-1 label-1 text-warning">
                  *
                </span>
              </label>
              <div className="flex items-center gap-2">
                <select
                  value={dayStart}
                  onChange={(e) => setDayStart(e.target.value)}
                  className="p-2 border rounded"
                >
                  {days.map((day) => (
                    <option key={day} value={day}>
                      {day}
                    </option>
                  ))}
                </select>
                <select
                  value={hourStart}
                  onChange={(e) => setHourStart(e.target.value)}
                  className="p-2 border rounded"
                >
                  {hours.map((hour) => (
                    <option key={hour} value={hour}>
                      {hour}
                    </option>
                  ))}
                </select>
                <select
                  value={minuteStart}
                  onChange={(e) => setMinuteStart(e.target.value)}
                  className="p-2 border rounded"
                >
                  {minutes.map((minute) => (
                    <option key={minute} value={minute}>
                      {minute}
                    </option>
                  ))}
                </select>
              </div>
            </div>
            <div>
              <label className="block mb-2 font-semibold">
                종료 시간
                <span className="relative ml-1 bottom-1 label-1 text-warning">
                  *
                </span>
              </label>
              <div className="flex items-center gap-2">
                <select
                  value={dayEnd}
                  onChange={(e) => setDayEnd(e.target.value)}
                  className="p-2 border rounded"
                >
                  {days.map((day) => (
                    <option key={day} value={day}>
                      {day}
                    </option>
                  ))}
                </select>
                <select
                  value={hourEnd}
                  onChange={(e) => setHourEnd(e.target.value)}
                  className="p-2 border rounded"
                >
                  {hours.map((hour) => (
                    <option key={hour} value={hour}>
                      {hour}
                    </option>
                  ))}
                </select>
                <select
                  value={minuteEnd}
                  onChange={(e) => setMinuteEnd(e.target.value)}
                  className="p-2 border rounded"
                >
                  {minutes.map((minute) => (
                    <option key={minute} value={minute}>
                      {minute}
                    </option>
                  ))}
                </select>
              </div>
            </div>
            <div>
              <label className="block mb-2 font-semibold">최대 참가 인원</label>
              <select
                value={maxNum}
                onChange={(e) => setMaxNum(e.target.value)}
                className="w-full p-2 border rounded"
              >
                {maxParticipants.map((num) => (
                  <option key={num} value={num}>
                    {num}
                  </option>
                ))}
              </select>
            </div>
          </div>
          <div className="flex justify-end gap-4 mt-6">
            <Button size="md" theme="white" onClick={onClose}>
              취소
            </Button>
            <Button size="md" theme="mix" onClick={handleSubmit}>
              생성
            </Button>
          </div>
        </Modal>
      );
    };
    
    export default CreateMeetingModal;