Skip to content

Commit

Permalink
[#123] bugfix: studyrecruit detail end time
Browse files Browse the repository at this point in the history
  • Loading branch information
@rosieyeon
rosieyeon committed Feb 18, 2022
1 parent 9627e29 commit 2163672
Showing 1 changed file with 122 additions and 54 deletions.
176 changes: 122 additions & 54 deletions src/pages/studyRecruitDetail.js
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
import axios from 'axios';
import { useCallback, useEffect, useState } from 'react';
import { Link, useParams } from 'react-router-dom';
import axios from "axios";
import { useCallback, useEffect, useState } from "react";
import { Link, useParams } from "react-router-dom";

import isLogin from '../utils/isLogin';
import '../statics/css/studyRecruitDetail.css';
import Modal from '../components/modal';
import isLogin from "../utils/isLogin";
import "../statics/css/studyRecruitDetail.css";
import Modal from "../components/modal";

export default function StudyRecruitDetail() {
const TOKEN = localStorage.getItem('accessToken');
const TOKEN = localStorage.getItem("accessToken");
const { studyseq } = useParams();
const [data, setData] = useState([]);
const [todayDate, setTodayDate] = useState(new Date());
const [isSuccess, setIsSuccess] = useState(false);
const [userSeq, setUserSeq] = useState('');
const [hostSeq, setHostSeq] = useState('');
const [profileImg, setProfileImg] = useState('');
const [userSeq, setUserSeq] = useState("");
const [hostSeq, setHostSeq] = useState("");
const [profileImg, setProfileImg] = useState("");

// 모달창
const [modalOpen, setModalOpen] = useState(false);
Expand Down Expand Up @@ -48,14 +48,18 @@ export default function StudyRecruitDetail() {
// yyyy-mm-dd
function changeDateFormat() {
if (setTodayDate === null) {
console.log('no date');
console.log("no date");
}
return (
todayDate.getFullYear() +
'-' +
(todayDate.getMonth() + 1 > 9 ? (todayDate.getMonth() + 1).toString() : '0' + (todayDate.getMonth() + 1)) +
'-' +
(todayDate.getDate() > 9 ? todayDate.getDate().toString() : '0' + todayDate.getDate().toString())
"-" +
(todayDate.getMonth() + 1 > 9
? (todayDate.getMonth() + 1).toString()
: "0" + (todayDate.getMonth() + 1)) +
"-" +
(todayDate.getDate() > 9
? todayDate.getDate().toString()
: "0" + todayDate.getDate().toString())
);
}

Expand All @@ -64,7 +68,7 @@ export default function StudyRecruitDetail() {
// test();
if (isLogin) {
axios
.get(process.env.REACT_APP_SERVER_URL + '/users', {
.get(process.env.REACT_APP_SERVER_URL + "/users", {
headers: {
Authorization: `Bearer ${TOKEN}`,
},
Expand All @@ -73,7 +77,7 @@ export default function StudyRecruitDetail() {
setUserSeq(res.data.user.userSeq);
});
axios
.get(process.env.REACT_APP_SERVER_URL + '/studies/' + studyseq, {
.get(process.env.REACT_APP_SERVER_URL + "/studies/" + studyseq, {
headers: {
Authorization: `Bearer ${TOKEN}`,
},
Expand All @@ -89,30 +93,30 @@ export default function StudyRecruitDetail() {
});
}
}, []);
const imageURL = 'https://i6a301.p.ssafy.io:8080/images/' + profileImg;
const imageURL = "https://i6a301.p.ssafy.io:8080/images/" + profileImg;

// 요일 숫자를 이름으로 바꿔주기
const numberToDay = (num) => {
if (num === 1) {
return '월';
return "월";
}
if (num === 2) {
return '화';
return "화";
}
if (num === 3) {
return '수';
return "수";
}
if (num === 4) {
return '목';
return "목";
}
if (num === 5) {
return '금';
return "금";
}
if (num === 6) {
return '토';
return "토";
}
if (num === 7) {
return '일';
return "일";
}
};

Expand Down Expand Up @@ -143,7 +147,7 @@ export default function StudyRecruitDetail() {
const deleteStudy = useCallback(() => {
axios
.patch(
'/users/studies/' + studyseq + '/end',
"/users/studies/" + studyseq + "/end",
{},
{
headers: {
Expand All @@ -165,7 +169,7 @@ export default function StudyRecruitDetail() {
const recruitStudy = useCallback(() => {
axios
.patch(
'/users/studies/' + studyseq + '/recruit-end',
"/users/studies/" + studyseq + "/recruit-end",
{},
{
headers: {
Expand All @@ -189,7 +193,7 @@ export default function StudyRecruitDetail() {
openDeleteModal();
};
function handleClick(e) {
window.location.href = '/studyrecruit';
window.location.href = "/studyrecruit";
}

const sendData = {
Expand All @@ -199,31 +203,47 @@ export default function StudyRecruitDetail() {
return (
<div className="studyrecruit-detail">
<div className="studyrecruit-detail-goback">
<Link className="studyrecruit-detail-goback__link" to={'/studyrecruit'}>
<Link className="studyrecruit-detail-goback__link" to={"/studyrecruit"}>
스터디 모집 게시판
</Link>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M3.99462 1.74978C3.9292 1.81675 3.89258 1.90666 3.89258 2.00028C3.89258 2.0939 3.9292 2.18381 3.99462 2.25078L7.64937 6.00002L3.99462 9.74852C3.9292 9.81549 3.89258 9.9054 3.89258 9.99902C3.89258 10.0926 3.9292 10.1825 3.99462 10.2495C4.02641 10.2822 4.06443 10.3081 4.10643 10.3259C4.14842 10.3436 4.19354 10.3527 4.23912 10.3527C4.2847 10.3527 4.32982 10.3436 4.37181 10.3259C4.4138 10.3081 4.45182 10.2822 4.48362 10.2495L8.37012 6.26177C8.43838 6.19174 8.47658 6.09782 8.47658 6.00002C8.47658 5.90223 8.43838 5.8083 8.37012 5.73827L4.48362 1.75053C4.45182 1.71787 4.4138 1.69192 4.37181 1.67419C4.32982 1.65647 4.2847 1.64734 4.23912 1.64734C4.19354 1.64734 4.14842 1.65647 4.10643 1.67419C4.06443 1.69192 4.02641 1.71787 3.99462 1.75053V1.74978Z"
fill="var(--textColor)"
/>
</svg>
{data.apidata && <span className="studyrecruit-detail-goback__category">{data.apidata.categoryName}</span>}
{data.apidata && (
<span className="studyrecruit-detail-goback__category">
{data.apidata.categoryName}
</span>
)}
</div>
<div className="studyrecruit-detail-box">
<div>
<div className="studyrecruit-detail-box-heading">
<div className="studyrecruit-detail-box-heading__first">
{data.apidata && <div className="studyrecruit-detail-box-heading__title">{data.apidata.studyTitle}</div>}
{data.apidata && (
<div className="studyrecruit-detail-box-heading__category">{data.apidata.categoryName}</div>
<div className="studyrecruit-detail-box-heading__title">
{data.apidata.studyTitle}
</div>
)}
{data.apidata && (
<div className="studyrecruit-detail-box-heading__category">
{data.apidata.categoryName}
</div>
)}
</div>
{userSeq === hostSeq && (
<div className="studyrecruit-detail-box-heading__first-host">
{/* [TODO]: update, delete 페이지로 링크 필요 */}
<Link
to={'/studyrecruit/modify'}
to={"/studyrecruit/modify"}
className="studyrecruit-detail-box-heading__first-host-btn update"
state={{}}
>
Expand All @@ -232,23 +252,35 @@ export default function StudyRecruitDetail() {
<span
className="studyrecruit-detail-box-heading__first-host-btn"
onClick={onClick}
style={{ cursor: 'pointer' }}
style={{ cursor: "pointer" }}
>
삭제
</span>
<Modal open={deleteModalOpen} close={closeDeleteModal} header=" ">
<Modal
open={deleteModalOpen}
close={closeDeleteModal}
header=" "
>
{checkAxios && (
<div>
<div className="studyapply-modal-msg">삭제되었습니다</div>
<button className="studyapply-modal-ok" onClick={handleClick}>
<button
className="studyapply-modal-ok"
onClick={handleClick}
>
확인
</button>
</div>
)}
{!checkAxios && (
<div>
<div className="studyapply-modal-msg">스터디 호스트가 아닙니다</div>
<button className="studyapply-modal-ok" onClick={closeDeleteModal}>
<div className="studyapply-modal-msg">
스터디 호스트가 아닙니다
</div>
<button
className="studyapply-modal-ok"
onClick={closeDeleteModal}
>
확인
</button>
</div>
Expand Down Expand Up @@ -287,11 +319,19 @@ export default function StudyRecruitDetail() {
</clipPath>
</defs>
</svg>
{data.apidata.hostImg !== null && <img className="studyrecruit-detail-img" src={imageURL} alt="" />}
{data.apidata.hostImg !== null && (
<img
className="studyrecruit-detail-img"
src={imageURL}
alt=""
/>
)}
</div>
)}
{data.apidata && (
<div className="studyrecruit-detail-box-heading__nickname">{data.apidata.hostNickName}</div>
<div className="studyrecruit-detail-box-heading__nickname">
{data.apidata.hostNickName}
</div>
)}
</div>
<hr></hr>
Expand All @@ -300,17 +340,22 @@ export default function StudyRecruitDetail() {
<table>
<tbody>
<tr className="studyrecruit-detail-box-body__row">
<td className="studyrecruit-detail-box-body__title">스터디 일정</td>
<td className="studyrecruit-detail-box-body__title">
스터디 일정
</td>
{data.apidata &&
data.apidata.day.map((days) => (
<td key={days.dayNumber}>
<div className="studyrecruit-detail-box-body__days">
<div className="studyrecruit-detail-box-body__day name">{numberToDay(days.dayNumber)}</div>
<div className="studyrecruit-detail-box-body__day name">
{numberToDay(days.dayNumber)}
</div>
<div className="studyrecruit-detail-box-body__day timestart">
{days.timeStart.slice(0, 5)} ~{' '}
{days.timeStart.slice(0, 5)} ~{" "}
</div>
<div className="studyrecruit-detail-box-body__day timeend">
{days.timeEnd.slice(0, 5)}
</div>
<div className="studyrecruit-detail-box-body__day timeend">{days.timeEnd.slice(0, 5)}</div>
<div className="studyrecruit-detail-box-body__day timeend">{days.timeEnd.slice(0, 5)}</div>
</div>
</td>
))}
Expand All @@ -320,7 +365,9 @@ export default function StudyRecruitDetail() {
<table>
<tbody>
<tr className="studyrecruit-detail-box-body__row">
<td className="studyrecruit-detail-box-body__title">모집 기간</td>
<td className="studyrecruit-detail-box-body__title">
모집 기간
</td>
{data.apidata && (
<td className="studyrecruit-detail-box-body__enddate">
{changeDateFormat()} ~ {data.apidata.studyRecruitEnd}
Expand All @@ -331,31 +378,52 @@ export default function StudyRecruitDetail() {
</table>
</div>
{data.apidata && (
<div className="studyrecruit-detail-box-body__shortdesc">{data.apidata.studyShortDesc}</div>
<div className="studyrecruit-detail-box-body__shortdesc">
{data.apidata.studyShortDesc}
</div>
)}
{data.apidata && (
<div className="studyrecruit-detail-box-body__desc">
{data.apidata.studyDesc}
</div>
)}
{data.apidata && <div className="studyrecruit-detail-box-body__desc">{data.apidata.studyDesc}</div>}
</div>
</div>
{userSeq !== hostSeq && (
<center>
<div className="studyrecruit-detail-box-footer">
<button onClick={onApply} className="studyrecruit-detail-box-footer__btn">
<button
onClick={onApply}
className="studyrecruit-detail-box-footer__btn"
>
스터디 신청
</button>
<Modal open={modalOpen} close={closeModal} header=" ">
{isSuccess && <div className="studyapply-modal-msg">신청이 완료되었습니다</div>}
{!isSuccess && <div className="studyapply-modal-msg">이미 신청한 스터디입니다</div>}
{isSuccess && (
<div className="studyapply-modal-msg">
신청이 완료되었습니다
</div>
)}
{!isSuccess && (
<div className="studyapply-modal-msg">
이미 신청한 스터디입니다
</div>
)}
<button className="studyapply-modal-ok" onClick={closeModal}>
확인
</button>
<button className="studyapply-modal-go-to-mystudy">내 스터디 보러가기</button>
<button className="studyapply-modal-go-to-mystudy">
내 스터디 보러가기
</button>
</Modal>
</div>
</center>
)}
{userSeq === hostSeq && (
<center>
<button className="studyrecruit-detail-box-footer__host">신청자 목록 조회하기</button>
<button className="studyrecruit-detail-box-footer__host">
신청자 목록 조회하기
</button>
</center>
)}
</div>
Expand Down

0 comments on commit 2163672

Please sign in to comment.