Calender 가로 수정..

client/src/components/Calender/HorizontalCalender.js

@@ -37,50 +37,28 @@ const Calender = ({ selectDate, setSelectDate }) => {
 
     function getDate(oneDay) {
         let dateArr = []
-        let lastWeek = moment(oneDay).subtract(7, 'days')
-        const nextWeek = moment(oneDay).add(7, 'days')
+        let lastWeek = moment(oneDay).clone().subtract(6, 'days')
+        const nextWeek = moment(oneDay).clone().add(12, 'days')
         while (lastWeek.isBefore(nextWeek)) {
             dateArr.push({ date: lastWeek.format('YYYY-MM-DD'), day: lastWeek.format('d') })
             lastWeek.add(1, 'days')
         }
-        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> : ""}
+        const resultArr = dateArr.map(el => <div className="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> : <p style={{ padding: "4px" }}></p>}
             <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) ? (/admin/g.test(history.location.pathname) ? styles.selectDate : styles.selectatHome) : ""}>{moment(el.date).format('DD')}</strong>
-                <strong>{moment(el.date).isSame(moment().format('YYYY-MM-DD')) ? "오늘" : week[el.day]}</strong>
+                <strong>{(moment(el.date).isSame(moment().format('YYYY-MM-DD')) && moment(el.date).isSame(selectDate)) ? "오늘" : week[el.day]}</strong>
             </div>
         </div>)
         setDateList(resultArr)
     }
 
-    function preWeek() {
-        const preDate = moment(date).week()
-        console.log("week==",preDate)
-        // let dateArr = []
-        // dateArr = Array(7).fill(0).map((n, i) => {
-        //     let current = moment(oneDay).add((n + i), 'days')
-        //     return <div className="col-auto align-self-end text-center" onClick={() => setSelectDate(current)}>
-        //         {current.isSame(oneDay) || current.format("DD") === "01" ? <strong className={styles.yearmonth}>{current.format('YYYY.MM')}</strong> : ""}
-        //         <div className={`d-flex flex-column ${styles.cursor} ` + ((current.format("d") === "0" || current.format("d") === "6") ? ((current.format("d") === "0") ? "text-danger" : "text-primary") : "")}>
-        //             <strong className={current.isSame(oneDay) ? styles.selectDate : ""}>{current.format('DD')}</strong>
-        //             <strong>{current.isSame(oneDay) ? "오늘" : week[Number(current.format("d"))]}</strong>
-        //         </div>
-        //     </div>
-        // })
-        // console.log("Dadsa--===", dateArr)
-        // setWeekly(dateArr)
-    }
-
-    function nextWeek() {
-
-    }
-
     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} ${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" 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">
@@ -104,9 +82,23 @@ const Calender = ({ selectDate, setSelectDate }) => {
                         </div>
                     </div>
                 </div>
-                <i className={`col-1 bi bi-chevron-left align-self-center text-center ${styles.cursor}`} onClick={preWeek}></i>
-                <div className={`d-flex justify-content-between col-10 ${styles.box}`}>{dateList.map(el => el)}</div>
-                <i className={`col-1 bi bi-chevron-right align-self-center text-center ${styles.cursor}`} onClick={nextWeek}></i>
+                <i className={`bi bi-chevron-left carousel-control-prev align-self-center text-center ${styles.cursor} ${/admin/g.test(history.location.pathname) ? " text-dark" : " text-white"}`} data-bs-target="#carouselWeek" data-bs-slide="prev"></i>
+                <div className="w-100">
+                    <div id="carouselWeek" className="carousel slide" data-bs-ride="carousel" data-bs-interval="false">
+                        <div className="carousel-inner">
+                            <div className="carousel-item">
+                                <div className="d-flex justify-content-evenly">{dateList[0]}{dateList[1]}{dateList[2]}{dateList[3]}{dateList[4]}{dateList[5]}</div>
+                            </div>
+                            <div className="carousel-item active">
+                                <div className="d-flex justify-content-evenly">{dateList[6]}{dateList[7]}{dateList[8]}{dateList[9]}{dateList[10]}{dateList[11]}</div>
+                            </div>
+                            <div className="carousel-item">
+                                <div className="d-flex justify-content-evenly">{dateList[12]}{dateList[13]}{dateList[14]}{dateList[15]}{dateList[16]}{dateList[17]}</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <i className={`bi bi-chevron-right carousel-control-next align-self-center text-center ${styles.cursor} ${/admin/g.test(history.location.pathname) ? " text-dark" : " text-white"}`} data-bs-target="#carouselWeek" data-bs-slide="next"></i>
             </div>
         </>
     )

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

-.box {
-    overflow: hidden;
-    transform: translate3d(-420px, 0px, 0px);
-    transition: all 0.6s ease 0s;
-
-    & .yearmonth {
-        position: relative;
-        top: 0;
-        width: 100%;
-        font-size: 10px;
-    }
+.yearmonth {
+    position: relative;
+    top: 0;
+    width: 100%;
+    font-size: 10px;
 }
 
 .calender {