Merge pull request #84 from hyosung-second-team1/53-jsp-table

[Feat] 테이블 ui 및 기능 구현 완료

src/main/java/today/meevote/domain/statistics/dao/StatsDao.java

@@ -1,14 +1,16 @@
 package today.meevote.domain.statistics.dao;
 
 import org.apache.ibatis.annotations.Mapper;
+import org.apache.ibatis.annotations.Param;
+
 import today.meevote.domain.statistics.dto.response.GetMyCategoryStatsDto;
 import today.meevote.domain.statistics.dto.response.GetMyScheduleStatsDto;
 
 import java.util.List;
 
 @Mapper
 public interface StatsDao {
-    public List<GetMyCategoryStatsDto> getMyCategoryStats(String email, Boolean isGroup, String year, String month);
+    public List<GetMyCategoryStatsDto> getMyCategoryStats(@Param("email") String email, @Param("isGroup") Boolean isGroup, @Param("year") String year, @Param("month") String month);
 
-    public List<GetMyScheduleStatsDto> getMyScheduleStats(String email, Boolean isGroup, Long categoryId, String year);
+    public List<GetMyScheduleStatsDto> getMyScheduleStats(@Param("email") String email, @Param("isGroup") Boolean isGroup, @Param("categoryId") Long categoryId, @Param("year") String year);
 }

src/main/resources/static/css/schedule/detail.css

@@ -33,7 +33,7 @@ body {
   gap: 10px;
   width: 300px;
   padding: 20px;
-  background-color: rgb(255, 255, 255, 0.5);
+  background-color: rgb(255, 255, 255, 0.7);
   border: 3px solid #4fd1c5;
   border-radius: 20px;
 }
@@ -64,7 +64,7 @@ body {
 .distance-info {
   width: 300px;
   padding: 10px 20px;
-  background-color: rgb(255, 255, 255, 0.5);
+  background-color: rgb(255, 255, 255, 0.7);
   border: 3px solid #4fd1c5;
   border-radius: 20px;
   display: flex;

src/main/resources/static/css/table/table.css

@@ -13,6 +13,15 @@ body {
   padding: 30px;
 }
 
+.foot-container {
+  display: flex;
+  flex-direction: column;
+
+  gap: 10px;
+  width: 100%;
+  padding: 10px 20px;
+}
+
 .root-container {
   display: flex;
   flex-direction: column;
@@ -24,6 +33,12 @@ body {
   font-size: 22px;
 }
 
+
+/* 공통 부분 End */
+
+
+
+/* 캐러셀  */
 .carousel-container {
   display: flex;
   align-items: center;
@@ -39,12 +54,9 @@ body {
 .carousel-container > i:hover {
   color: #4FD1C5;
 }
-/* 공통 부분 End */
-
-
 
 .carousel_main {
-  width: 330px; 
+  width: 280px; 
   position: relative;
   overflow: hidden;
   margin: 0 auto;
@@ -56,10 +68,8 @@ body {
   transition: transform 1s;
 }
 
-
-/* 캐러셀  */
 .carousel {
-  width: 330px;
+  width: 280px;
   border: 3px solid ;
   border-radius: 10px;
   padding: 10px 0px;
@@ -71,7 +81,7 @@ body {
 }
 
 .carousel > div {
-  width: 330px ;
+  width: 280px ;
   padding: 0px 20px;
   display: flex;
   justify-content: space-between;
@@ -82,6 +92,10 @@ body {
   font-size: 16px;
 }
 
+.carousel-content > .i{
+  width: 50px;
+}
+
 .carousel-content > .category{
   font-size: 12px;
   color: white;
@@ -92,4 +106,124 @@ body {
 .carousel-footer > .place{
   font-size: 14px;
 }
-/* 캐러셀 End */
+/* 캐러셀 End */
+
+
+
+
+
+/* 필터링 컨테이너 */
+.filter-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+/* ---- 키워드 검색창 ---- */
+.name-serach {
+  width: 300px;
+  padding: 5px 10px;
+  border: 1px solid #4FD1C5;
+  border-radius: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.name-serach > input{
+  width: 90%;
+  border: none;
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.name-serach > i{
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.name-serach > i:hover{
+  color: #4fd1c5;
+}
+/* ---- 키워드 검색창 End ---- */
+
+/* ---- 카테고리 선택 ---- */
+.category-container {
+  display: flex;
+  border: 1px solid;
+  border-color: #4FD1C5;
+  padding: 5px 10px;
+  border-radius: 20px;
+}
+
+.category-container > select{
+  border: none;
+  width: 100%;
+  padding: 5px;
+  font-size: 14px;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.category-container option{
+  border: none;
+  width: 100%;
+  padding: 10px;
+  font-size: 16px;
+  font-weight: bold;
+  border: #BBBBBB 1px solid;
+}
+/* ---- 카테고리 선택 End ---- */
+
+
+
+
+
+/* 데이터 테이블 */
+td{
+  vertical-align: middle;
+  cursor: pointer;
+}
+
+td > i{
+  font-size : 22px
+}
+
+td > p{
+  display: inline;
+  margin: 0;
+  vertical-align: middle;
+  color: white;
+  padding: 5px 10px;
+  border-radius: 10px;
+}
+
+/* 데이터 테이블 End*/
+
+
+
+
+
+/* 페이지네이션 */
+.down-btn {
+  font-size: 36px;
+  color: #4FD1C5;
+  justify-self: center;
+  margin: 0 auto;
+  transform: translateY(-10px);
+  cursor: pointer;
+}
+/* 페이지네이션 End */
+
+
+
+
+
+
+
+/* 미디어 쿼리 */
+@media (max-width:1100px) {
+  .head-container {
+    flex-direction: column;
+  }
+}

src/main/resources/static/js/module/ajax.js

@@ -236,5 +236,37 @@ export async function endVote(scheduleID) {
     // 실패 시 예외 처리
   }
 
+  return response;
+}
+
+
+// 카테고리 불러오기
+export async function getCategories() {
+  const response = await $.ajax({
+    type: "GET",
+    dataType : 'json',
+    contentType: 'application/json',
+    url: "/api/schedule/category",
+  });
+  if (!response.isSuccess) {
+    // 실패 시 예외 처리
+  }
+
+  return response;
+}
+
+
+// 카테고리 불러오기
+export async function getScheduleHistory(catogoryId, keyword, page, size) {
+  const response = await $.ajax({
+    type: "GET",
+    dataType : 'json',
+    contentType: 'application/json',
+    url: `/api/schedule/past/list?categoryId=${catogoryId}&keyword=${keyword}&page=${page}&size=${size}`,
+  });
+  if (!response.isSuccess) {
+    // 실패 시 예외 처리
+  }
+
   return response;
 }

src/main/resources/static/js/schedule/detail.js

@@ -2,7 +2,6 @@ import {displayMap, createMarker, locFromAddress, addrFromLoc, createPolyline} f
 import * as aj from '/js/module/ajax.js'
 import {getRoute} from '/js/module/mobility.js'
 
-
 // ---- 스케쥴 관련 정보
 const urlSearch = new URLSearchParams(location.search);
 let scheduleId = await urlSearch.get('scheduleId');