From 89875c083b7cd3bbb8a67b9bb9524097225bfd24 Mon Sep 17 00:00:00 2001 From: soo01234 Date: Wed, 15 May 2024 16:28:13 +0900 Subject: [PATCH 1/2] =?UTF-8?q?[feat]=20=EC=95=8C=EB=9E=8C=EC=B0=BD=20UI?= =?UTF-8?q?=20=EC=88=98=EC=A0=95=20#66?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main/resources/static/css/inc/alarm.css | 46 +++++++++++++-------- src/main/resources/static/js/calendar.js | 3 +- src/main/resources/static/js/inc/alarm.js | 29 +++++++++---- 3 files changed, 50 insertions(+), 28 deletions(-) diff --git a/src/main/resources/static/css/inc/alarm.css b/src/main/resources/static/css/inc/alarm.css index d5f0597..d3fdc11 100644 --- a/src/main/resources/static/css/inc/alarm.css +++ b/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: 230px; } @@ -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; } diff --git a/src/main/resources/static/js/calendar.js b/src/main/resources/static/js/calendar.js index 2a2276e..97b3952 100644 --- a/src/main/resources/static/js/calendar.js +++ b/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 = $('
  • ').addClass('event-item'); diff --git a/src/main/resources/static/js/inc/alarm.js b/src/main/resources/static/js/inc/alarm.js index 7857141..2e7206b 100644 --- a/src/main/resources/static/js/inc/alarm.js +++ b/src/main/resources/static/js/inc/alarm.js @@ -115,9 +115,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 + "
    " + message2); + } + // 데이터 추가 - $cardName.append(card.message); + // $cardName.append(card.message); $cardMain1.append("

    " + card.name + "

    "); //$cardMain2.append('

    ' + startDate + '

    '); $cardMain3.append('

    ' + startDate + '

    '); @@ -133,18 +144,18 @@ function showNotifications() { $cardMain.append($cardMain3); $(".msg-overlay-bubble-list").append($cardOuter); - if (card.placeName === null) { - $cardMain2.append('

    ' + '투표중' + '

    ') - } else { - $cardMain2.append('

    ' + card.placeName + '

    ') - } + // if (card.placeName === null) { + // $cardMain2.append('

    ' + '투표중' + '

    ') + // } else { + // $cardMain2.append('

    ' + card.placeName + '

    ') + // } if (card.voteDeadline === null) { // 투표 마감일 X = 개인 일정 $cardMain2.append(""); } else if (card.voteDeadline < today) { // 투표 마감일 지남 //$cardMain3.append("

    " + "투표 마감

    "); - $cardMain2.append(""); - } else { // 투표 마감일 전 + $cardMain2.append(card.placeName); + } else { // 투표 마감일 전 (투표중) let deadline = card.voteDeadline; let deadlineArray = deadline.split(" "); let deadlineDate = deadlineArray[0]; @@ -160,7 +171,7 @@ function showNotifications() { // console.log(deadlineDateArray[1]) // 05 // console.log('day') // console.log(deadlineDateArray[2]) // 17 - $cardMain3.append("

    " + deadlineMonth + "/" + deadlineDay + "
    투표 마감

    "); + $cardMain2.append("

    " + deadlineMonth + "/" + deadlineDay + " 투표 마감

    "); } $cardMain2.append( From 67ae3c5c91d3e156ac6bb9e489cd6648f3191554 Mon Sep 17 00:00:00 2001 From: soo01234 Date: Wed, 15 May 2024 17:40:13 +0900 Subject: [PATCH 2/2] =?UTF-8?q?[feat]=20=EC=95=8C=EB=9E=8C=20=EB=8B=AB?= =?UTF-8?q?=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C?= =?UTF-8?q?=20=EB=B0=94=EB=A1=9C=20=EC=82=AD=EC=A0=9C=20#66?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main/resources/static/css/inc/alarm.css | 2 +- src/main/resources/static/js/inc/alarm.js | 45 ++++++++++--------- .../WEB-INF/views/calendar/calendar.jsp | 4 +- 3 files changed, 27 insertions(+), 24 deletions(-) diff --git a/src/main/resources/static/css/inc/alarm.css b/src/main/resources/static/css/inc/alarm.css index d3fdc11..9df2223 100644 --- a/src/main/resources/static/css/inc/alarm.css +++ b/src/main/resources/static/css/inc/alarm.css @@ -69,7 +69,7 @@ /* 오버레이를 표시합니다. */ .overlay-container.show-overlay { display: block; - width: 230px; + width: 235px; } diff --git a/src/main/resources/static/js/inc/alarm.js b/src/main/resources/static/js/inc/alarm.js index 2e7206b..d4eae56 100644 --- a/src/main/resources/static/js/inc/alarm.js +++ b/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; } }); diff --git a/src/main/webapp/WEB-INF/views/calendar/calendar.jsp b/src/main/webapp/WEB-INF/views/calendar/calendar.jsp index 41d127f..df99851 100644 --- a/src/main/webapp/WEB-INF/views/calendar/calendar.jsp +++ b/src/main/webapp/WEB-INF/views/calendar/calendar.jsp @@ -65,9 +65,7 @@ pageEncoding="UTF-8"%> - - - +