Skip to content
Snippets Groups Projects
Select Git revision
1 result Searching

signal_handlers.c

Blame
  • Forked from sce213ta / mysh-1
    Source project has a limited visibility.
    recruitDetail.js 8.19 KiB
    import React, { useState, useContext } from "react";
    import recruitDetailStyles from './recruitDetail.module.css';
    import Comment from './comment';
    import MyScheduleApp from '../calendar/calendar';
    import { AuthContext } from '../../App';
    import ModifyRecruit from "./modifyRecruit";
    import DeleteRecruit from "./deleteRecruit";
    import StateRecruit from "./stateRecruit";
    
    const RecruitDetail = ({ isOpen, onClose, data }) => {
      const [isCalendarVisible, setIsCalendarVisible] = useState(false);
      const [isModifyOpen, setIsModifyOpen] = useState(false);
      const [isDeleteOpen, setIsDeleteOpen] = useState(false);
      const [isStateOpen, setIsStateOpen] = useState(false);
      const { userData } = useContext(AuthContext);
    
      let state = '';
    
      if(data.state === 'Recruiting'){
        state = '모집중';
      } else if(data.state === 'Closed'){
        state = '모집완료';
      } else if(data.state === 'Completed'){
        state = '활동종료';
      }
    
      const handleModifyOpen = (e) => {
        e.stopPropagation();
        setIsModifyOpen(true);
      }
    
      const handleDeleteOpen = (e) => {
        e.stopPropagation();
        setIsDeleteOpen(true);
      }
    
      const handleStateOpen = (e) => {
        e.stopPropagation();
        setIsStateOpen(true);
      }
    
      const handleModifyClose = () => {
        setIsModifyOpen(false);
      }
    
      const handleDeleteClose = () => {
        setIsDeleteOpen(false);
      }
    
      const handleStateClose = () => {
        setIsStateOpen(false);
      }
    
      const handleClick = () => {
        setIsCalendarVisible(!isCalendarVisible); // 클릭할 때마다 가시성을 토글
      };
    
      const applyInfo = async ()=>{
        try{
          const response = await fetch(`/api/recruits/${data.id}`,{
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
          });
    
          if (response.ok){
            alert('신청되었습니다.');
            window.location.reload();
          }else{
            alert('이미 신청되었거나 신청이 불가능합니다.');
          }
        } catch(error){
          console.log('Error during fetch:', error);
        }
      }
    
      return (
        <div>
          {isOpen && (
            <div className={recruitDetailStyles.overlay} onClick={onClose}>
              <div className={recruitDetailStyles.modal} onClick={(e) => e.stopPropagation()}>
                <button className={recruitDetailStyles.x} onClick={onClose}>X</button>
                <div className={recruitDetailStyles.info}>
                  <div className={recruitDetailStyles.imgContainer}>
                    <img 
                      className={recruitDetailStyles.img} 
                      src={data.imagePath} 
                      alt='recruit img'
                      style={{ width: '258px', height: '338px' }}
                    />
                  </div>
    
                  <div className={recruitDetailStyles.notImgContainer}>
                    <div className={recruitDetailStyles.top}>
                      <div className={recruitDetailStyles.title}>{data.title} ({data.Writer.nickname})</div>
                      {data.timeCategory === 'D' ? (null) : (<div className={recruitDetailStyles.tbd}>시간미정</div>)}
                      <div className={`
                        ${state === '모집중' ? 
                        recruitDetailStyles.Recruiting:(
                        state === '모집완료'? 
                        recruitDetailStyles.Closed: 
                        recruitDetailStyles.Completed)}`}
                        onClick={handleStateOpen}>{state}
                      </div>
                      {userData.nickname === data.Writer.nickname && (
                        <StateRecruit isOpen={isStateOpen} onClose={handleStateClose} data={data}/>
                      )}
                    </div>
    
                    <div className={recruitDetailStyles.topMiddle}>
                      <div className={recruitDetailStyles.region}>{data.regionFirst} {data.regionSecond}</div>
                      <div className={recruitDetailStyles.people}>
                        <svg className={recruitDetailStyles.peopleIcon} width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M8 2C9.1 2 10 2.9 10 4C10 5.1 9.1 6 8 6C6.9 6 6 5.1 6 4C6 2.9 6.9 2 8 2ZM8 12C10.7 12 13.8 13.29 14 14H2C2.23 13.28 5.31 12 8 12ZM8 0C5.79 0 4 1.79 4 4C4 6.21 5.79 8 8 8C10.21 8 12 6.21 12 4C12 1.79 10.21 0 8 0ZM8 10C5.33 10 0 11.34 0 14V16H16V14C16 11.34 10.67 10 8 10Z" fill="black"/>
                        </svg>
                        <span className={recruitDetailStyles.peopleNum}>{data.participateNum}/{data.peopleNum}</span>
                      </div>
                    </div>
    
                    <div className={recruitDetailStyles.middle}>
                      <div className={recruitDetailStyles.content}>{data.content}</div>
                      {userData.nickname === data.Writer.nickname && ( //data.Writer.id
                      <div className={recruitDetailStyles.modifyDeleteContainer}>
                        <div className={recruitDetailStyles.modify} onClick={handleModifyOpen}>수정</div>
                        <div><ModifyRecruit isOpen={isModifyOpen} onClose={handleModifyClose} data={data}/></div>
                        <div className={recruitDetailStyles.delete} onClick={handleDeleteOpen}>삭제</div>
                        <div><DeleteRecruit isOpen={isDeleteOpen} onClose={handleDeleteClose} data={data}/></div>
                      </div>
                      )}
                    </div>
    
                    <div className={recruitDetailStyles.bottom}>
                      <div className={recruitDetailStyles.dateTimeContainer}>
                        <div className={recruitDetailStyles.dateContainer}>
                          <svg className={recruitDetailStyles.dateIcon} width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M18 2H17V0H15V2H5V0H3V2H2C0.9 2 0 2.9 0 4V20C0 21.1 0.9 22 2 22H18C19.1 22 20 21.1 20 20V4C20 2.9 19.1 2 18 2ZM18 20H2V9H18V20ZM18 7H2V4H18V7Z" fill="#FF5959"/>
                          </svg>
                          <span className={recruitDetailStyles.date}>{data.startDate}~{data.endDate}</span>
                        </div>
    
                        <div className={recruitDetailStyles.timeContainer}>
                          {data.timeCategory === 'D' ? (
                          <div>
                            <svg className={recruitDetailStyles.timeIcon} width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                              <path d="M21.8333 4.19668L16.85 0.0150146L15.4525 1.67251L20.4358 5.85418L21.8333 4.19668ZM6.53667 1.67251L5.15 0.0150146L0.166668 4.18585L1.56417 5.84335L6.53667 1.67251ZM11.5417 6.66668H9.91667V13.1667L15.0625 16.2542L15.875 14.9217L11.5417 12.3542V6.66668ZM11 2.33335C5.61583 2.33335 1.25 6.69918 1.25 12.0833C1.25 17.4675 5.605 21.8333 11 21.8333C16.3842 21.8333 20.75 17.4675 20.75 12.0833C20.75 6.69918 16.3842 2.33335 11 2.33335ZM11 19.6667C6.8075 19.6667 3.41667 16.2758 3.41667 12.0833C3.41667 7.89085 6.8075 4.50001 11 4.50001C15.1925 4.50001 18.5833 7.89085 18.5833 12.0833C18.5833 16.2758 15.1925 19.6667 11 19.6667Z" fill="#FF5959"/>
                            </svg>     
                            <span className={recruitDetailStyles.time}>{data.startTime}~{data.endTime}</span>
                          </div>
                          ) : (null)}
                        </div>
                      </div>
    
                      <button className={recruitDetailStyles.scheduleCheck} onClick={handleClick}>일정확인</button>
                      {isCalendarVisible && (
                      <div className={recruitDetailStyles.calendarOverlay} onClick={handleClick}>
                        <div className={recruitDetailStyles.calendarModal} onClick={(e) => e.stopPropagation()}>
                          <MyScheduleApp/>
                        </div>
                      </div>
                      )}
                      {data.state === "Recruiting" ? (
                      <button type="button" className={recruitDetailStyles.apply} onClick={applyInfo}>신청</button>
                      ):(
                      <button type="button" className={recruitDetailStyles.endApply} onClick={applyInfo} disabled>신청</button>
                      )}
                    </div>
                  </div>
                </div>
                  
                <div className={recruitDetailStyles.comment}>
                  <Comment id={data.id}/>
                </div>
              </div>
            </div>
          )}
        </div>
      );
    }
    
    export default RecruitDetail;