Calender 수정 중

client/src/components/Calender/DatePicker.js

+import { useState, useEffect } from "react";
+import moment from "moment";
+import styles from "./calender.module.scss";
+
+const DatePicker = ({ selectDate, setSelectDate, month }) => {
+    const [week, setWeek] = useState([])
+
+    useEffect(() => {
+        generate()
+    }, [month])
+
+    function generate() {
+        const weekly = []
+        const startWeek = moment(month.cur).startOf('month').week()
+        const endWeek = moment(month.cur).endOf('month').week() === 1 ? 53 : moment(month.cur).endOf('month').week()
+        for (let week = startWeek; week <= endWeek; week++) {
+            weekly.push(<tr key={week}>{
+                Array(7).fill(0).map((n, i) => {
+                    let current = moment(month.cur).clone().week(week).startOf('week').add(n + i, 'day')
+                    let isSelected = moment(selectDate).format('YYYYMMDD') === current.format('YYYYMMDD') ? `${styles.selectDate}` : ''
+                    let isColor = current.format('MM') !== moment(month.cur).format('MM') ? 'text-secondary ' : ((i === 0) ? "text-danger" : (i === 6) ? "text-primary" : "")
+
+                    return <td className={`text-center p-1 ${styles.cursor}`} key={i} data-bs-dismiss="modal" onClick={() => setSelectDate(current.format('YYYY-MM-DD'))}>
+                        <span className={`d-block ${isColor} ${isSelected}`}>{current.format('D')}</span>
+                    </td>
+                })}</tr>)
+        }
+        setWeek(weekly)
+    }
+
+    return (
+        <tbody>{week.length !== 0 ? week.map(row => row) : ''}</tbody>
+    )
+}
+
+export default DatePicker
\ No newline at end of file

client/src/components/Calender/HorizontalCalender.js

 import { useState, useEffect } from "react";
 import moment from "moment";
+import DatePicker from "./DatePicker.js";
 import styles from "./calender.module.scss";
 
 const Calender = ({ selectDate, setSelectDate }) => {
     const [dateList, setDateList] = useState([])
     const [week, setWeek] = useState(["일", "월", "화", "수", "목", "금", "토"])
+    const [month, setMonth] = useState({ pre: moment(selectDate).subtract(1, 'months').format('YYYY-MM'), cur: moment(selectDate).format('YYYY-MM'), next: moment(selectDate).add(1, 'months').format('YYYY-MM') })
 
     useEffect(() => {
+        setMonth({ ...month, pre: moment(selectDate).subtract(1, 'months').format('YYYY-MM'), cur: moment(selectDate).format('YYYY-MM'), next: moment(selectDate).add(1, 'months').format('YYYY-MM') })
         getDate(selectDate)
-    }, [])
+    }, [selectDate])
 
     function getDate(oneDay) {
         let dateArr = []
@@ -20,7 +23,7 @@ const Calender = ({ selectDate, setSelectDate }) => {
         }
         const resultArr = dateArr.map(el => <div className="col-2 align-self-end text-center" onClick={() => setSelectDate(el.date)}>
             {moment(el.date).isSame(oneDay) || el.date.split('-')[2] === "01" ? <strong className={styles.yearmonth}>{moment(el.date).format('YYYY.MM')}</strong> : ""}
-            <div className={"d-flex flex-column " + ((Number(el.day) === 0 || Number(el.day) === 6) ? ((Number(el.day) === 0) ? "text-danger" : "text-primary") : "")}>
+            <div className={`d-flex flex-column ${styles.cursor} ` + ((Number(el.day) === 0 || Number(el.day) === 6) ? ((Number(el.day) === 0) ? "text-danger" : "text-primary") : "")}>
                 <strong className={moment(el.date).isSame(oneDay) ? styles.selectDate : ""}>{moment(el.date).format('DD')}</strong>
                 <strong>{moment(el.date).isSame(oneDay) ? "오늘" : week[el.day]}</strong>
             </div>
@@ -29,13 +32,37 @@ const Calender = ({ selectDate, setSelectDate }) => {
     }
 
     return (
-        <>  
+        <>
             {console.log("date==", selectDate)}
             <div className="d-flex position-relative border-bottom border-dark border-2 p-3">
-                <i className={`bi bi-calendar2 position-absolute top-0 ${styles.calender}`}></i>
-                <i className="col-1 bi bi-chevron-left align-self-center text-center"></i>
+                <i className={`bi bi-calendar2 position-absolute top-0 ${styles.calender} ${styles.cursor}`} data-bs-toggle="modal" data-bs-target="#calenderModal"></i>
+                <div className="modal" id="calenderModal" tabindex="-1" aria-labelledby="calenderModal" aria-hidden="true">
+                    <div className={`modal-dialog position-absolute bg-white ${styles.datepicker}`}>
+                        <div className="modal-content">
+                            <div className="modal-body px-1 pt-1 pb-0">
+                                <div className="d-flex justify-content-between bg-dark rounded py-1">
+                                    <i className={`bi bi-chevron-left align-self-center text-center text-white ${styles.cursor}`} onClick={() => setMonth({ ...month, pre: moment(month.pre).subtract(1, 'months').format('YYYY-MM'), cur: month.pre, next: month.cur })}></i>
+                                    <div className="text-white">{moment(month.cur).format('YYYY년 MM월')}</div>
+                                    <i className={`bi bi-chevron-right align-self-center text-center text-white ${styles.cursor}`} onClick={() => setMonth({ ...month, pre: month.cur, cur: month.next, next: moment(month.next).add(1, 'months').format('YYYY-MM') })}></i>
+                                </div>
+                                <table className="table mb-0">
+                                    <thead>
+                                        <tr>{week.map(day => <th>{day}</th>)}</tr>
+                                    </thead>
+                                    <DatePicker selectDate={selectDate} setSelectDate={setSelectDate} month={month} />
+                                    <tfoot>
+                                        <tr>
+                                            <td colSpan="7" align="center"><button type="button" className={`btn btn-dark btn-sm shadow-none ${styles.customBtn}`} data-bs-dismiss="modal" onClick={() => setSelectDate(moment().format('YYYY-MM-DD'))}>오늘</button></td>
+                                        </tr>
+                                    </tfoot>
+                                </table>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <i className={`col-1 bi bi-chevron-left align-self-center text-center ${styles.cursor}`}></i>
                 <div className={`d-flex col-10 ${styles.box}`}>{dateList.map(el => el)}</div>
-                <i className="col-1 bi bi-chevron-right align-self-center text-center"></i>
+                <i className={`col-1 bi bi-chevron-right align-self-center text-center ${styles.cursor}`}></i>
             </div>
         </>
     )

client/src/components/Calender/calender.module.scss

@@ -7,15 +7,32 @@
         width: 100%;
         font-size: 10px;
     }
-
-    & .selectDate {
-        background-color: #000;
-        color: #fff;
-        border-radius: 50%;
-    }
 }
 
 .calender {
     right: 13px;
     font-size: 1.5em;
+}
+
+.datepicker {
+    top: 92px;
+    right: 12px;
+    
+    & .customBtn {
+        &:hover {
+            border-color: #FEDC00;
+            background-color: #FEDC00;
+            color: #000;
+        }
+    }
+}
+
+.cursor {
+    cursor: pointer;
+}
+
+.selectDate {
+    background-color: #000;
+    color: #fff;
+    border-radius: 50%;
 }
\ No newline at end of file