react moment.js 이번주 기간, 다음주 기간 구하기

react로 게시판을 만드는 중 게시판 보드에 일정관리(일정 타임라인)기능을 추가했다.

  

이번주 기간동안 보여질 일정들과 다음주 기간동안 보여질 일정들로 UI를 구성했다.

그러기위해선 등록한 일정을 기준으로 '이번주'와 '다음주' 날짜를 계산해야했다.

 

처음에 어렵게 생각했었던 것과 다르게 moment에서 쉽게 계산을 해준다.

  //이번주/다음주 날짜 데이터 계산하기
let this_monday = moment().day(1).format('YYYY-MM-DD');
let this_sunday = moment().day(7).format('YYYY-MM-DD');
let next_monday = moment().day(8).format('YYYY-MM-DD');
let next_sunday = moment().day(14).format('YYYY-MM-DD');

해당 식으로 이번주의 월요일, 이번주의 일요일 

다음주의 월요일, 다음주의 일요일의 날짜를 클라이언트단에서 구한뒤 Axios로 서버에 날려줬다.

// 이번주 타임라인 목록 가져오기
Axios.post(('/home/getTimelineThisWeekList'), {
    this_monday: this_monday,
    this_sunday: this_sunday
}).then((res) => {
    setTimelineThisWeekList(res.data);
    //console.log(res.data)
})

// 다음주 타임라인 목록 가져오기
Axios.post(('/home/getTimelineNextWeekList'), {
    next_monday: next_monday,
    next_sunday: next_sunday
}).then((res) => {
    setTimelineNextWeekList(res.data);
    //console.log(res.data)
})

그리고 서버에서는 쿼리로 처리 ^^!

// timeline view
router.post("/getTimelineThisWeekList", (req, res) => {
    const this_monday = req.body.this_monday;
    const this_sunday = req.body.this_sunday;

    // const sqlQuery = "SELECT * FROM board.timelineInfo"   
    //                + " WHERE leave_start BETWEEN ? AND ?"
    //                + " ORDER BY leave_start ASC"

    const sqlQuery = "select leave_start , GROUP_CONCAT(username) as username, GROUP_CONCAT(leave_type) as leave_type, GROUP_CONCAT(idx) as idx"
                   + " FROM timelineInfo"
                   + " GROUP BY leave_start"
                   + " HAVING leave_start BETWEEN ? AND ?"
                   + " ORDER BY leave_start ASC"
 
    db.query(sqlQuery, [this_monday, this_sunday], (err, result) => {
        if (err) {
            logger.error(err);
        }
        res.send(result);
    })
})

router.post("/getTimelineNextWeekList", (req, res) => {
    const next_monday = req.body.next_monday;
    const next_sunday = req.body.next_sunday;

    // const sqlQuery = "SELECT * FROM board.timelineInfo"   
    //                + " WHERE leave_start BETWEEN ? AND ?"
    //                + " ORDER BY leave_start ASC"

    const sqlQuery = "select leave_start , GROUP_CONCAT(username) as username, GROUP_CONCAT(leave_type) as leave_type, GROUP_CONCAT(idx) as idx"
                   + " FROM timelineInfo"
                   + " GROUP BY leave_start"
                   + " HAVING leave_start BETWEEN ? AND ?"
                   + " ORDER BY leave_start ASC"
 
    db.query(sqlQuery, [next_monday, next_sunday], (err, result) => {
        if (err) {
            logger.error(err);
        }
        res.send(result);
    })
})

그러면 BETEEN으로 걸러진 해당날짜 내의 데이터만 받아올 수 있는데

현재 휴가 일정 시작날짜로만 계산한 상태이다^^...원래 일정 시작날짜 ~ 끝날짜 등록가능하게끔 만들어서 

계산해야는데 간단히 만들려고보니 끝날자는 복잡할거같아서 일단 시작날짜로만 진행했다ㅜㅜ.

휴가끝날짜는 디자인만 붙여놈 ㅎ