Merge pull request #83 from hyosung-second-team1/jsp-calendar

[feat] 알람창 알람 삭제

Author: soo01234

src/main/resources/static/css/inc/alarm.css

@@ -36,7 +36,8 @@
     z-index: 50; /* 다른 요소 위에 표시하기 위해 z-index를 설정합니다. */
     border-radius: 10px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 가로, 세로, 흐림 정도, 색상 */;
-    padding: 10px;
+    /*padding: 10px;*/
+    padding: 10px 0;
     /* border-radius: .3rem; */
      background-color: #ffffff;
     /* border-color: #4FD1C5; */
@@ -52,7 +53,8 @@
     display: flex;
     flex-direction: column;
     height: 100vh;
-    width: 86%;
+    width: 100%;
+    align-items: center;
     /*box-shadow: left only;*/
 }
 
@@ -67,7 +69,7 @@
 /* 오버레이를 표시합니다. */
 .overlay-container.show-overlay {
     display: block;
-    width: 310px;
+    width: 235px;
 }
 
 
@@ -77,38 +79,40 @@
     flex-direction: column;
     align-items: center;
     height: 90%;
+    width: 100%;
     background-color: #ffffff;
     overflow-y: scroll; /* 세로 스크롤 사용 */
 }
 
 /* 스크롤바 전체 영역 */
 ::-webkit-scrollbar {
-    width: 10px;  /* 세로축 스크롤바 폭 너비 */
+    width: 1px;  /* 세로축 스크롤바 폭 너비 */
     height: 20px;  /* 가로축 스크롤바 폭 너비 */
 }
 
-/* 스크롤바 막대 */
-::-webkit-scrollbar-thumb {
-    background: rgba(83, 166, 249, 0.75);
-    border-radius: 2em;
-    height: 5px;
-}
+/*!* 스크롤바 막대 *!*/
+/*::-webkit-scrollbar-thumb {*/
+/*    background: rgba(83, 166, 249, 0.75);*/
+/*    border-radius: 2em;*/
+/*    height: 5px;*/
+/*}*/
 
-::-webkit-scrollbar-thumb:hover {
-    background-color:#eeeef1;
-}
+/*::-webkit-scrollbar-thumb:hover {*/
+/*    background-color:#eeeef1;*/
+/*}*/
 
-/* 스크롤이 움직이는 뒷 배경 */
-::-webkit-scrollbar-track {
-    background: rgba(220, 20, 60, .1);  /*스크롤바 뒷 배경 색상*/
-}
+/*!* 스크롤이 움직이는 뒷 배경 *!*/
+/*::-webkit-scrollbar-track {*/
+/*    background: rgba(220, 20, 60, .1);  !*스크롤바 뒷 배경 색상*!*/
+/*}*/
 
 /*일정상세카드*/
 .card-outer {
     display: flex;
     flex-direction: column;
     align-items: center;
-    width: 220px;
+    /*width: 220px;*/
+    width: 200px;
     /*height: 200px;*/
     font-size: small;
     margin-bottom: 5px;
@@ -147,6 +151,12 @@
     border-radius: 5px;
     margin-bottom: 10px;
     box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.05), 0px 5px 10px rgba(0, 0, 0, 0.1);
+    /*box-shadow: 0 1px 2px rgba(0,0,0,0.03),*/
+    /*            0 2px 4px rgba(0,0,0,0.03),*/
+    /*            0 4px 8px rgba(0,0,0,0.03),*/
+    /*            0 8px 16px rgba(0,0,0,0.03),*/
+    /*            0 16px 32px rgba(0,0,0,0.03),*/
+    /*            0 32px 64px rgba(0,0,0,0.01);*/
     font-weight: bold;
     padding: 10px 10px;
 }

src/main/resources/static/js/calendar.js

@@ -165,7 +165,7 @@ $(document).ready(function() {
 
             // 가져온 일정 데이터를 시작 시간을 기준으로 정렬
             events.sort((a, b) => {
-                return new Date(a.start) - new Date(b.start);
+                return new Date(a.startDate) - new Date(b.startDate);
             });
 
             // 가져온 일정 데이터를 리스트 형식으로 추가
@@ -174,6 +174,7 @@ $(document).ready(function() {
                 'flex-direction': 'column'
             });
 
+            console.log(events)
 
             events.forEach(event => {
                 let li = $('<li>').addClass('event-item');

src/main/resources/static/js/inc/alarm.js

@@ -10,7 +10,7 @@ $("#alarmIcon").click(function () {
     overlay.toggleClass("show-overlay");
 });
 
-$(document).ready(function() {
+$(".msg-overlay-bubble-list").ready(function() {
     // 페이지가 완전히 로드된 후에 알림을 띄우는 함수 실행
     showNotifications();
     // x 버튼 클릭 시 ...
@@ -23,10 +23,16 @@ $(document).ready(function() {
         console.log("notifyID")
         console.log(notifyID)
         console.log(isRead)
-        if (isRead) {
-            // 해당 일정의 부모 요소를 숨깁니다.
-            $(this).closest('.card-outer').remove();
-        } else {
+        // if (isRead) {
+        //     // 해당 일정의 부모 요소를 숨깁니다.
+        //     $(this).closest('.card-outer').remove();
+        // } else {
+        //     isRead = true;  // isRead 의 값이 false 인 경우, x 버튼을 누르면 true 로 바꾸기
+        //     console.log("false -> true")
+        //     console.log(isRead)
+        // }
+
+        if (isRead != true) {
             isRead = true;  // isRead 의 값이 false 인 경우, x 버튼을 누르면 true 로 바꾸기
             console.log("false -> true")
             console.log(isRead)
@@ -41,20 +47,19 @@ $(document).ready(function() {
             },
             success: function (response) {
                 console.log('데이터 전송 성공:', response);
-                // if (isRead === true) {
-                //     // 해당 일정의 부모 요소를 숨깁니다.
-                //     $(this).closest('.card-outer').hide();
-                // }
+
+                // let $this = $(this);
+                // $this.closest('.card-outer').remove();
+
+                //$(this).closest('.card-outer').remove();
+
+                let $cardToRemove = $(document).find('[data-notify-id="' + notifyID + '"]').closest('.card-outer');
+                $cardToRemove.remove();
             },
             error: function (xhr, status, error) {
                 console.error('데이터 전송 실패:', error);
             }
         })
-
-        // if (isRead === true) {
-        //     // 해당 일정의 부모 요소를 숨깁니다.
-        //     $(this).closest('.card-outer').hide();
-        // }
     })
 
     $(document).on('click', '.card-outer', function() {
@@ -66,14 +71,14 @@ $(document).ready(function() {
         console.log(scheduleId)
         console.log(notifyCategoryId)
 
-        if (notifyCategoryId === 1) {
-            window.location.href = '/schedule/vote?scheduleId=' + scheduleId;
-        } else if (notifyCategoryId === 2) {
+        if (notifyCategoryId === 1) {  // 모임 일정 초대
+            location.href = '/schedule/vote?scheduleId=' + scheduleId;
+        } else if (notifyCategoryId === 2) {  // 모임 일정 장소 확정
             // 카드 상세 페이지로 이동
-            window.location.href = '/schedule/datail?scheduleId=' + scheduleId;
-        } else if (notifyCategoryId === 3) {
+            location.href = '/schedule/detail?scheduleId=' + scheduleId;
+        } else if (notifyCategoryId === 3) {  // 일정 예고
             // 카드 상세 페이지로 이동
-            window.location.href = '/schedule/detail?scheduleId=' + scheduleId;
+            location.href = '/schedule/detail?scheduleId=' + scheduleId;
         }
 
     });
@@ -115,9 +120,20 @@ function showNotifications() {
                 let startTimeArray = startTime.split(":");
                 let startTimewithoutSec = startTimeArray[0] + ":" + startTimeArray[1];
 
+                // 메세지 가공
+                let fullMessage = card.message;
+                let fullMessageArray = fullMessage.split(".");
+                let message1 = fullMessageArray[0];
+                let message2 = fullMessageArray[1];
+                if(message2 === null) {
+                    $cardName.append(fullMessage);
+                } else {
+                    $cardName.append(message1 + "<br>" + message2);
+                }
+
 
                 // 데이터 추가
-                $cardName.append(card.message);
+               // $cardName.append(card.message);
                 $cardMain1.append("<h3 style='font-weight: bold; font-size: 15px;'>" + card.name + "</h3>");
                 //$cardMain2.append('<p><i class="bi bi-calendar-check"> </i>' + startDate + '</p>');
                 $cardMain3.append('<p style="font-size: 12px;"><i class="bi bi-calendar-check" style="margin-top: 16px;"> </i>' + startDate + '</p>');
@@ -133,18 +149,18 @@ function showNotifications() {
                 $cardMain.append($cardMain3);
                 $(".msg-overlay-bubble-list").append($cardOuter);
 
-                if (card.placeName === null) {
-                    $cardMain2.append('<p style="font-size: 12px;"><i class="bi bi-geo-alt" style="margin-top: 16px;"> </i>' + '투표중' + '</p>')
-                } else {
-                    $cardMain2.append('<p style="font-size: 12px;"><i class="bi bi-geo-alt" style="margin-top: 16px;"> </i>' + card.placeName + '</p>')
-                }
+                // if (card.placeName === null) {
+                //     $cardMain2.append('<p style="font-size: 12px;"><i class="bi bi-geo-alt" style="margin-top: 16px;"> </i>' + '투표중' + '</p>')
+                // } else {
+                //     $cardMain2.append('<p style="font-size: 12px;"><i class="bi bi-geo-alt" style="margin-top: 16px;"> </i>' + card.placeName + '</p>')
+                // }
 
                 if (card.voteDeadline === null) {  // 투표 마감일 X = 개인 일정
                     $cardMain2.append("");
                 } else if (card.voteDeadline < today) {  // 투표 마감일 지남
                     //$cardMain3.append("<p style='margin-top: 16px;'>" + "투표 마감</p>");
-                    $cardMain2.append("");
-                } else { // 투표 마감일 전
+                    $cardMain2.append(card.placeName);
+                } else { // 투표 마감일 전 (투표중)
                     let deadline = card.voteDeadline;
                     let deadlineArray = deadline.split(" ");
                     let deadlineDate = deadlineArray[0];
@@ -160,7 +176,7 @@ function showNotifications() {
                     // console.log(deadlineDateArray[1])  // 05
                     // console.log('day')
                     // console.log(deadlineDateArray[2]) // 17
-                    $cardMain3.append("<p style='font-size: 12px;'>" + deadlineMonth + "/" + deadlineDay + " <br>투표 마감</p>");
+                    $cardMain2.append("<p style='font-size: 12px;'><i class=\"bi bi-geo-alt\" style=\"margin-top: 16px;\"> </i>" + deadlineMonth + "/" + deadlineDay + " 투표 마감</p>");
                 }
 
                 $cardMain2.append(

src/main/webapp/WEB-INF/views/calendar/calendar.jsp

@@ -65,9 +65,7 @@ pageEncoding="UTF-8"%>
     </jsp:include>
 
     <!-- 알람 include -->
-    <jsp:include page="/WEB-INF/views/inc/alarm.jsp">
-      <jsp:param value="calendar" name="scheduleName" />
-    </jsp:include>
+    <jsp:include page="/WEB-INF/views/inc/alarm.jsp"></jsp:include>
 
     <div class="full-contentbox">
       <!--메인부분-->