update 2024-02-13

pom.xml

@@ -207,11 +207,11 @@
             <version>1.18.0</version>
         </dependency>
 
-        <!-- WebSecurity: WebSecurityConfigurerAdapter -->
-<!--        <dependency>-->
-<!--            <groupId>org.springframework.boot</groupId>-->
-<!--            <artifactId>spring-boot-starter-security</artifactId>-->
-<!--        </dependency>-->
+<!--         WebSecurity: WebSecurityConfigurerAdapter -->
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-security</artifactId>
+        </dependency>
 
         <dependency>
             <groupId>javax.servlet</groupId>

src/main/java/com/its/web/controller/view/ViewController.java

@@ -8,6 +8,7 @@ import io.swagger.annotations.Api;
 import io.swagger.annotations.ApiOperation;
 import lombok.RequiredArgsConstructor;
 import lombok.extern.slf4j.Slf4j;
+import org.apache.ibatis.annotations.Param;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.GetMapping;
@@ -31,9 +32,10 @@ public class ViewController {
 
     @ApiOperation(value = "01.메인화면")
     @GetMapping("/")
-    public String Main(Model model) {
+    public String main(Model model) {
         model.addAttribute("selected", "");
-        model.addAttribute("notice", this.trafficService.findMainIncident());
+        model.addAttribute("incident", this.trafficService.findMainIncident());
+        model.addAttribute("notice", this.noticeService.findMainNotice());
         return "main/main";
     }
 
@@ -126,13 +128,20 @@ public class ViewController {
         return "center/way";
     }
 
-    @ApiOperation(value = "05.공지사항")
-    @GetMapping(value = {"/notice/notice/{page}/{searchType}/{searchText}", "/notice/notice"})
-    public String notice(Model model, @Nullable @PathVariable("page") String page,
-                         @Nullable @PathVariable("page")String searchType,
-                         @Nullable @PathVariable("page")String searchText) {
+    @ApiOperation(value = "05.공지사항 - 01.공지사항 목록")
+    @GetMapping("/notice/list")
+    public String noticeList(Model model, @Nullable @Param("page") String page,
+                         @Nullable @Param("searchType") String searchType,
+                         @Nullable @Param("searchText")String searchText) {
 
         model.addAttribute("list", this.noticeService.findAllList(page, searchType, searchText));
-        return "notice/notice";
+        return "notice/list";
+    }
+
+    @ApiOperation(value = "05.공지사항 - 02.공지사항 상세보기")
+    @GetMapping("/notice/view/{boardNo}" )
+    public String noticeView(Model model, @PathVariable("boardNo")String boardNo) {
+        model.addAttribute("notice", this.noticeService.findNotice(boardNo));
+        return "notice/view";
     }
 }

src/main/java/com/its/web/interceptor/AdminInterceptor.java

@@ -0,0 +1,15 @@
+package com.its.web.interceptor;
+
+import org.springframework.context.annotation.Configuration;
+import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
+
+@Configuration
+@EnableWebSecurity
+public class AdminInterceptor {
+
+//    @Bean
+//    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
+//        http.authorizeRequests((requests) -> requests.regexMatchers("/", "/api/**/*", "/"))
+//    }
+
+}

src/main/java/com/its/web/mapper/its/notice/NoticeMapper.java

@@ -14,4 +14,6 @@ public interface NoticeMapper {
     int getNoticeTotalCount();
 
     List<NoticeDto> findAllNotice(Pagination page);
+
+    List<NoticeDto> findMainNotice();
 }

src/main/java/com/its/web/service/notice/NoticeService.java

@@ -17,9 +17,22 @@ public class NoticeService {
 
     public Pagination findAllList(String page, String searchType, String searchText) {
         Pagination pagination = new Pagination(page, this.mapper.getNoticeTotalCount(), searchType, searchText);
-        log.info("{}", pagination);
         List<NoticeDto> list = this.mapper.findAllNotice(pagination);
         pagination.setList(list);
         return pagination;
     }
+
+    public NoticeDto findNotice(String boardNo) {
+        try {
+            return this.mapper.findNoticeById(Long.parseLong(boardNo));
+        }
+        catch (NumberFormatException e){
+            log.error("Cause NumberFormatException, Please Check The Board No -> {}", boardNo);
+            return null;
+        }
+    }
+
+    public List<NoticeDto> findMainNotice() {
+        return this.mapper.findMainNotice();
+    }
 }

src/main/java/com/its/web/service/statistics/StatisticsService.java

@@ -48,6 +48,7 @@ public class StatisticsService {
     }
 
     public List<TrafficStatisticsDto> findStatisticsCommSpeed(TrafficStatisticsDto.TrafficStatisticsDtoReq paramInfo, String searchType) {
+        log.error("paramInfo : {}, searchType : {}", paramInfo, searchType);
         Map<String, String> paramMap = new HashMap<>();
         String fromDt   = paramInfo.getFromDt();
         String toDt     = paramInfo.getToDt();

src/main/resources/mybatis/mapper/its/notice/NoticeMapper.xml

@@ -90,7 +90,7 @@
                 #{attachFile},
                 #{ATTACHFILEID},
                 #{bNotice},
-                '관리자',
+                '운영자',
                 1,
                 '0')
     </insert>
@@ -112,4 +112,23 @@
 		 WHERE BOARDNO = #{boardNo}
            AND BOARDID = 1
     </delete>
+
+    <select id="findMainNotice" resultType="com.its.web.dto.notice.NoticeDto">
+        SELECT
+            B.boardno         as board_no,
+            B.regdate         as reg_date,
+            B.bsubject        as b_subject
+        FROM (select
+                  A.*,
+                  ROWNUM
+              from (select
+                        boardno,
+                        DECODE(regdate, NULL, '-', TO_CHAR(TO_DATE(regdate, 'YYYY-MM-DD'), 'YYYY-MM-DD')) regdate,
+                        bsubject
+                    from TB_WWW_BOARD
+                    order by regdate desc) A
+             ) B
+        where ROWNUM BETWEEN 1 AND 3
+    </select>
+
 </mapper>

src/main/resources/static/css/center.css

@@ -273,7 +273,11 @@
 
     .centerWrap {
         height: calc(100% - 228.19px);
-        padding: 5px 0;
+        padding: 5px 0 75px 0;
+    }
+
+    .centerWrap .content2 {
+        padding: 10px 10px 80px 10px;
     }
 
     .centerWrap .header {

src/main/resources/static/css/common.css

@@ -639,6 +639,11 @@ footer .mobile-footer {
     /* 푸터 */
     footer {
         flex-direction: row;
+        position: fixed;
+        bottom: 0px;
+        width: 100%;
+        display: flex;
+        z-index: 100;
     }
 
     footer .footer-gray,

src/main/resources/static/css/notice.css

@@ -70,7 +70,6 @@
     display: flex;
     justify-content: center;
     overflow: auto;
-    min-height: 500px;
 }
 
 .noticeWrap .container {
@@ -79,6 +78,7 @@
     position: relative;
     display: flex;
     flex-direction: column;
+    min-height: 700px;
 }
 
 .noticeWrap .header {
@@ -91,10 +91,18 @@
 }
 
 .noticeWrap .content {
-    padding: 0px;
+    margin: 24px 0px;
+    padding: 30px 60px;
+    transition: all 0.3s ease 0s;
+    box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 6px;
+    height: calc(100% - 101px);
+}
+
+.noticeWrap .content.list {
     margin: 0px;
-    height: calc(100% - 151px);
-    overflow: auto;
+    padding: 0px;
+    transition: none;
+    box-shadow: none;
 }
 .noticeWrap .pagination {
     width: 100%;
@@ -120,19 +128,119 @@
 }
 .noticeWrap .pagination img.active {
     cursor: pointer;
-    display: block;
 }
 .noticeWrap .pagination .pages a.active{
     color: rgb(51, 102, 171);
     text-decoration: underline;
     font-weight: bold;
 }
+.noticeWrap .pagination .pages a:hover {
+    cursor: pointer;
+    color: rgb(51, 102, 171);
+    text-decoration: underline;
+    font-weight: bold;
+}
 .noticeWrap .pagination img {
     width: 20px;
     height: 20px;
-    display: none;
+}
+.noticeWrap .content a{
+    display: flex;
+    -webkit-box-pack: justify;
+    justify-content: space-between;
+    padding: 0.9rem 10px;
+    border-bottom: 2px solid lightgrey;
+    gap: 15px;
+}
+.noticeWrap .content a:hover {
+    color: rgb(51, 102, 171);
+    cursor: pointer;
+    font-weight: bold;
+}
+
+.noticeWrap .content .view-box > div{
+    display: flex;
+    flex-direction: column;
+    margin: 16px 0px;
+}
+.noticeWrap .content .view-box .b_content {
+    resize: none;
+    margin: 10px 0px;
+    padding: 8px 16px;
+    border: 1px solid rgb(204, 234, 234);
+    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px;
+    background: 0px 0px no-repeat rgb(255, 255, 255);
+    /*font-size: 16px;*/
+    font-size: inherit;
+    line-height: inherit;
+    outline: none!important;
+}
+.noticeWrap .content .view-box .title {
+    height: 40px;
+    padding: 8px 16px;
+    border: 1px solid rgb(204, 234, 234);
+    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px;
+    background: 0px 0px no-repeat rgb(255, 255, 255);
+    font-size: 16px;
+    outline: none!important;
+}
+.noticeWrap .content .view-box .attach-box .attach{
+    height: 40px;
+    padding: 8px 16px;
+    border: 1px solid rgb(204, 234, 234);
+    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px;
+    background: 0px 0px no-repeat rgb(255, 255, 255);
+    display: flex;
+    width: calc(100% - 80px);
 }
 
+.noticeWrap .content .view-box .list-btn {
+    background: rgb(51, 102, 171);
+    box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 6px;
+    border: none;
+    padding: 12px;
+    color: rgb(255, 255, 255);
+}
+
+.noticeWrap .content .view-box .list-btn:hover {
+    cursor: pointer;
+    filter: brightness(1.1);
+}
+.noticeWrap .content .view-box .attach-box{
+    -webkit-box-pack: justify;
+    justify-content: space-between;
+    gap: 5px;
+    display: flex;
+}
+.noticeWrap .content .view-box {
+    display: flex;
+    flex-direction: column;
+    margin: 16px 0px;
+}
+.item-right {
+    width: 250px;
+    display: flex;
+    -webkit-box-pack: justify;
+    justify-content: space-between;
+}
+
+.attach-file:hover {
+    color: rgb(51, 102, 171);
+    cursor: pointer;
+    font-weight: bold;
+}
+
+.attach-file:before {
+    content: "";
+    background-image: url("/images/icon/clip-board.png");
+    display: inline-block;
+    background-size: 15px 15px;
+    width: 15px;
+    height: 15px;
+    margin-right: 5px;
+    background-repeat: no-repeat;
+    background-position: center;
+}
 @media (max-width: 920px) {
     .noticeWrap {
         height: calc(100% - 200.19px);
@@ -142,7 +250,7 @@
 
 @media (max-height: 765px) {
     .noticeWrap {
-        height: calc(100% - 197.19px);
+        height: calc(100% - 200.19px);
     }
 }
 
@@ -170,16 +278,48 @@
     }
 
     .noticeWrap {
-        height: calc(100% - 228.19px);
+        height: calc(100% - 149.19px);
         padding: 5px 0;
     }
 
     .noticeWrap .header {
-        font-size: 1.5rem;
+        font-size: 1.2rem;
+        padding: 1rem 0;
+    }
+
+    .noticeWrap .container {
+        min-height: 0;
+    }
+    .noticeWrap .container.view {
+        min-height: 450px;
     }
 
     .noticeWrap h2 {
         font-size: 14px;
     }
+    .noticeWrap .content a {
+        padding: 10px;
+        font-size: 13px;
+    }
+
+    .noticeWrap .content a > div:nth-child(1) {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        width: calc(100% - 135px);
+    }
+    .item-right{
+        width : 122px;
+        font-size: 12px;
+    }
+    .item-right > div:nth-child(2) {
+        display: none;
+    }
+    /*textarea {*/
+    /*    row*/
+    /*}*/
 
+    .noticeWrap .content.view {
+        padding: 0px 20px;
+    }
 }

src/main/resources/static/css/statistics.css

@@ -334,7 +334,7 @@
 
     .statisticWrap {
         height: calc(100% - 228.19px);
-        padding: 5px 0;
+        padding: 5px 0 75px 0;
     }
     .table-box table td,
     .table-box table th {

src/main/resources/static/css/traffic.css

@@ -539,10 +539,9 @@ ul, li {
 
 
 @media (max-width: 900px) {
-
     .cctv-info-window {
-        width: 260px;
-        height: 210px;
+        width: 240px;
+        height: 195px;
     }
 
     .vms-info-window .title, .cctv-info-window .title{
@@ -551,7 +550,7 @@ ul, li {
         font-weight: bold;
     }
     .cctv-info-window .content{
-        height: 155px;
+        height: 130px;
     }
     .cctv-info-window .content > div:nth-child(1),
     .cctv-info-window .content video {
@@ -644,8 +643,8 @@ ul, li {
     }
 
     .cctv-info-window {
-        width: 250px;
-        height: 210px;
+        width: 240px;
+        height: 195px;
     }
 
     .vms-info-window .title, .cctv-info-window .title{
@@ -655,7 +654,7 @@ ul, li {
         padding: 0;
     }
     .cctv-info-window .content{
-        height: 155px;
+        height: 130px;
     }
     .cctv-info-window .content > div:nth-child(1),
     .cctv-info-window .content video {
@@ -772,8 +771,8 @@ ul, li {
 @media (max-height: 900px) {
 
     .cctv-info-window {
-        width: 260px;
-        height: 220px;
+        width: 240px;
+        height: 195px;
     }
 
     .vms-info-window .title, .cctv-info-window .title{
@@ -782,7 +781,7 @@ ul, li {
         font-weight: bold;
     }
     .cctv-info-window .content{
-        height: 155px;
+        height: 130px;
     }
     .cctv-info-window .content > div:nth-child(1),
     .cctv-info-window .content video {

src/main/resources/static/js/statistics/statistics.js

@@ -379,6 +379,7 @@ function getSearchDateValue(year, month, date) {
         return;
     }
 
+    year = year.toString();
     month = (month < 10 ? ('0'+ month) : month);
     date = (date < 10 ? ('0'+ date) : date);
     return  year + month + date;

src/main/resources/static/js/traffic/traffic.js

@@ -1292,7 +1292,7 @@ class IntersectionCameraObj {
                     </div>
                     <div class="content">
                         <div>
-                            <video id="video-${this.ID}" class="video-js"></video>
+                            <video id="video-${this.ID}" class="video-js" style="width: 100%; height: 100%;"></video>
                         </div>
                         <div>
                             <div>※ CCTV영상은 30초간 제공됩니다.</div>

src/main/resources/templates/include/header.html

@@ -83,7 +83,7 @@
                         <div class="sub-number">
                             <h1>04</h1>
                         </div>
-                        <p onclick="movePath('/notice/notice')">
+                        <p onclick="movePath('/notice/list')">
                             공지사항
                         </p>
                     </div>
@@ -132,6 +132,7 @@
                 $('header #menu-modal').css('display', 'flex');
             }
         }
+
     });
 
     function closeModal(target) {

src/main/resources/templates/main/main.html

@@ -38,12 +38,12 @@
                     <div>
                         <img src="/images/icon/alarm.png" alt="">
                         <span>공지사항</span>
-                        <a href="/notice/notice">+</a>
+                        <a href="/notice/list">+</a>
                     </div>
                     <div class="content">
-                        <div>
-                            <div title="긴급차량 우선신호시스템 확대운영 안내">긴급차량 우선신호시스템 확대운영 안내</div>
-                            <span>2023-12-11</span>
+                        <div th:each="item, i:${notice}">
+                            <div th:onclick="movePath([['/notice/view/'+ ${item.getBoardNo()}]])" th:title="${item.getBSubject()}" th:text="${item.getBSubject()}"></div>
+                            <span th:text="${item.getRegDate()}"></span>
                         </div>
                     </div>
                 </div>
@@ -54,11 +54,11 @@
                         <a href="/trafficMap/incidents">+</a>
                     </div>
                     <div class="incd-content">
-                        <div th:each="item, i:${notice}">
+                        <div th:each="item, i:${incident}">
                             <div th:onclick="movePath([['/trafficMap/incidents/'+ ${item.getIncdOcrrId()}]])" th:title="${item.getIncdTitl()}" th:text="${item.getIncdTitl()}">-</div>
                             <span th:text="${item.getAgoMinutes()}+'분 전'"></span>
                         </div>
-                        <div class="incd-content" th:if="${notice == null} or ${notice.size() == 0}">데이터가 없습니다.</div>
+                        <div class="incd-content" th:if="${incident == null} or ${incident.size() == 0}">데이터가 없습니다.</div>
                     </div>
                 </div>
                 <div class="center" onclick="movePath('/center/center')">

src/main/resources/templates/notice/list.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th=http://www.thymeleaf.org>
+<head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width,initial-scale=1"/>
+    <meta name="theme-color" content="#000000"/>
+    <meta name="description" content="포항시 교통정보센터입니다"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+    <title>포항시 교통정보센터</title>
+    <th:block th:include="/include/head.html"></th:block>
+    <link rel="stylesheet" th:href="@{/css/notice.css}">
+</head>
+<body id="body">
+<th:block th:include="/include/header.html"></th:block>
+<div class="noticeWrap">
+    <div class="container">
+        <h2 class="header">공지사항</h2>
+        <div class="content list">
+            <a th:each="item : ${list.getList()}" th:href="@{'/notice/view/'+${item.getBoardNo()}}" style="display: flex;">
+                <div th:text="${item.getBSubject()}"></div>
+                <div class="item-right">
+                    <div th:text="${item.getRegDate()}"></div>
+                    <div th:text="${item.getReadCount() + '회'}"></div>
+                </div>
+            </a>
+        </div>
+        <div class="pagination">
+            <div class="previous">
+                <img th:if="${list.getPrevPage() == 0}" src="/images/icon/previous.png" alt="이전">
+                <img th:if="${list.getPrevPage() > 0}" class="active" src="/images/icon/previous_active.png" alt="이전">
+            </div>
+            <div class="pages">
+               <a th:class="${m == list.getCurrentPage() ? 'active' : ''}"
+                  th:each="m : ${#numbers.sequence(list.getStartPage(), list.getEndPage())}"
+                  th:onclick="moveNoticePage([[${m}]])"
+                  th:text="${m}"></a>
+            </div>
+            <div class="next">
+                <img th:if="${list.getNextPage() == 0}" src="/images/icon/next.png">
+                <img th:if="${list.getNextPage() > 0}" class="active" src="/images/icon/next_active.png" alt="다음">
+            </div>
+        </div>
+    </div>
+</div>
+<th:block th:include="/include/footer.html"></th:block>
+</body>
+</html>
+
+<script>
+    function moveNoticePage(page) {
+        const activePage = $(".pages > a.active");
+        if (activePage[0] && activePage.text() == page ) {
+            return;
+        }
+        let searchText = '';
+        let searchType = '';
+        window.location.href = '/notice/list?page=' + page + '&searchText='+searchText+'&searchType=' + searchType;
+    }
+</script>

src/main/resources/templates/notice/notice.html

@@ -1,40 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns:th=http://www.thymeleaf.org>
-<head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width,initial-scale=1"/>
-    <meta name="theme-color" content="#000000"/>
-    <meta name="description" content="포항시 교통정보센터입니다"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
-    <title>포항시 교통정보센터</title>
-    <th:block th:include="/include/head.html"></th:block>
-    <link rel="stylesheet" th:href="@{/css/notice.css}">
-</head>
-<body id="body">
-<th:block th:include="/include/header.html"></th:block>
-<div class="noticeWrap">
-    <div class="container">
-        <h2 class="header">공지사항</h2>
-        <div class="content">
-            <a th:each="item : ${list.getList()}" style="display: flex;">
-                <div th:text="${item.getBSubject()}"></div>
-                <div th:text="${item.getRegDate()}"></div>
-                <div th:text="${item.getReadCount() + '회'}"></div>
-            </a>
-        </div>
-        <div class="pagination">
-            <div class="previous">
-                <img th:class="${list.getPrevPage() == 0 ? '' : 'active'}" src="/images/icon/previous.png" alt="이전">
-            </div>
-            <div class="pages">
-               <a th:class="${m == list.getCurrentPage() ? 'active' : ''}" th:each="m : ${#numbers.sequence(list.getStartPage(), list.getEndPage())}" th:text="${m}"></a>
-            </div>
-            <div class="next">
-                <img th:class="${list.getNextPage() == 0 ? '' : 'active'}" src="/images/icon/next.png" alt="다음">
-            </div>
-        </div>
-    </div>
-</div>
-<th:block th:include="/include/footer.html"></th:block>
-</body>
-</html>

src/main/resources/templates/notice/view.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th=http://www.thymeleaf.org>
+<head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width,initial-scale=1"/>
+    <meta name="theme-color" content="#000000"/>
+    <meta name="description" content="포항시 교통정보센터입니다"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+    <title>포항시 교통정보센터</title>
+    <th:block th:include="/include/head.html"></th:block>
+    <link rel="stylesheet" th:href="@{/css/notice.css}">
+</head>
+<body id="body">
+<th:block th:include="/include/header.html"></th:block>
+<div class="noticeWrap">
+    <div class="container view">
+        <h2 class="header">공지사항</h2>
+        <div class="content view">
+            <div class="view-box">
+                <div>
+                    <input class="title" th:value="${notice.getBSubject()}" readonly>
+                    <textarea class="b_content" rows="19" th:text="${notice.getBContent()}" readonly></textarea>
+                    <div class="attach-box">
+                        <div class="attach">
+                            <div th:if="${notice.getAttachFile() == '||' or #strings.isEmpty(notice.getAttachFile())}">첨부파일 없음</div>
+                            <div class="attach-file" th:if="${notice.getAttachFile() != '||' and not #strings.isEmpty(notice.getAttachFile())}"
+                                 th:each="item : ${#strings.arraySplit(notice.getAttachFile(), '|')}"
+                                 th:text="${item}" th:title="${item + ' 다운로드'}"></div>
+                        </div>
+                        <div class="list-btn" onclick="movePath('/notice/list')">목록</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<th:block th:include="/include/footer.html"></th:block>
+</body>
+</html>
+<script th:inline="javascript">
+    let isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+
+    if (isMobile) {
+        $('.b_content').attr('rows', 10);
+    }
+</script>