본문 바로가기
💻 뚝딱뚝딱/북북클럽

[개발일지#019] 타임라인의 최신수정일 컬럼 수정하기

by 뚜루리 2024. 3. 4.
728x90
320x100
[참고]
김영한님 스프링 강의를 바탕으로 진행되는 토이프로젝트의 과정을 기록하는 글입니다. 
둥근 피드백은 언제나 환영입니다.

 

[오늘의 개발내용]
1. 타임라인 최초수정일 데이터타입 수정
2. 타임라의 최신수정일을 사용자가 입력하는 것이 아니라 등록/수정시에 현재 날짜시간 저장

 

 

1. 타임라인 최초수정일 데이터타입 수정 (Timeline)

타임라인 최초수정일 컬럼의 데이터타입을 String 에서 LocalDateTime으로 수정

 
package toyproject.bookbookclub.domain.Timeline;

import lombok.Getter;
import lombok.Setter;

import java.time.LocalDateTime;

@Getter @Setter
public class Timeline {

    private String timelineId;
    private String bookId;
    private String bookImg;
    private String memberId;
    private String content;
    private LocalDateTime lastUpdateDate; //String -> LocalDateTime로 변경

    public Timeline(String timelineId, String bookId, String bookImg, String memberId, String content, LocalDateTime lastUpdateDate) {
        this.timelineId = timelineId;
        this.bookId = bookId;
        this.bookImg = bookImg;
        this.memberId = memberId;
        this.content = content;
        this.lastUpdateDate = lastUpdateDate;
    }
}

 

 

2. 타임라인 등록일을 사용자가 입력하는 것이 아니라 등록시 현재 시간이 저장되도록 수정 (TimelineRepository)

    public void update(String timelineId, Timeline updateParam){
        Timeline timeline = findByTimelineId(timelineId);
        timeline.setContent(updateParam.getContent());
        timeline.setLastUpdateDate(LocalDateTime.now()); //현재 날짜시간 삽입
    }
    public Timeline save(Timeline timeline){
        timeline.setLastUpdateDate(LocalDateTime.now()); //현재 날짜시간 삽입
        store.put(timeline.getTimelineId(), timeline);
        return timeline;
    }

타임라인 등록/수정시 사용자의 입력이 아니라 자동으로 현재날짜시간을 넣어줌.

 

 

(+) 타임라인 등록 폼에서 사용자 시간 입력하는 input 삭제 (addForm.html)

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <link href="../css/bootstrap.min.css"
          th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <style>
        .container {
            max-width: 560px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="py-5 text-center"> <h2>타임라인 등록</h2>
    </div>
    <h4 class="mb-3">타임라인 등록</h4>
    <form action="timeline.html" th:action method="post">
        <div>
            <label for="timelineId">타임라인 ID</label>
            <input type="text" id="timelineId" name="timelineId" class="form-control" placeholder="타임라인 아이디를 입력하세요">
        </div>
        <div>
            <label for="memberId">회원 ID</label>
            <input type="text" id="memberId" name="memberId" class="form-control" placeholder="회원아이디 입력하세요">
        </div>
        <div>
            <label for="bookId">책ID</label>
            <input type="text" id="bookId" name="bookId" class="form-control" placeholder="책아이디를 입력하세요">
        </div>
        <div>
            <label for="bookImg">책이미지</label>
            <input type="text" id="bookImg" name="bookImg" class="form-control" placeholder="이미지를 입력하세요">
        </div>
        <div>
            <label for="content">내용</label>
            <input type="text" id="content" name="content" class="form-control" placeholder="내용을 입력하세요">
        </div>

        <hr class="my-4">
        <div class="row">
            <div class="col">
                <button class="w-100 btn btn-primary btn-lg" type="submit">타임라인 등록</button>
            </div>
            <div class="col">
                <button class="w-100 btn btn-secondary btn-lg"
                        onclick="location.href='allTimeline.html'"
                        th:onclick="|location.href='@{/timeline/allTimeline}'|" type="button">취소</button>
            </div>
        </div>
    </form>
</div> <!-- /container -->
</body>
</html>

 

(+) 전체 타임라인 화면에서 데이터에 입력된 시간을 타임리프 유틸리티 객체인 날짜 포맷을 이용해서 출력 allTimeline.html

<!-- 마지막 수정날짜 -->
<div style="float: left;">
    <span th:text="${#temporals.format(timeline.lastUpdateDate, 'yyyy-MM-dd HH:mm')}">등록일</span>
</div>

 

memberTimeline.html

<div>
    <label for="lastUpdateDate">작성일</label>
    <input type="text" id="lastUpdateDate" name="lastUpdateDate" class="form-control"
               th:value="${#temporals.format(timeline.lastUpdateDate, 'yyyy-MM-dd HH:mm')}" readonly>
</div>

 

 

[헤맨 포인트]

처음에 날짜 엔티티를 String으로 만들고 그 String 날짜 데이터를 타임리프 temporals.format을 이용하여 원하는 날짜포맷으로 변경하려 했으나 계속 실패. 알고보니 temporals.format은 LocalDate, LocalDatatime 타입만 변환이 가능한 것임.  그래서 날짜 엔티티를 LocalDatetime 타입으로 변경하여 해결.

그런데 날짜 엔티티의 데이터타입을 String으로 유지하고싶다면 방법이 있음. temporals.format이 아닌 temporals.createDate을 사용하면 됨. 

<span th:text="${#temporals.createDate(timeline.lastUpdateDate, 'yyyy-MM-dd HH:mm')}">등록일</span>

방법이 있는데도 내가 날짜컬럼을 LocalDatetime으로 바꾼 이유는 repository에서 날짜 처리할 때 날짜 컬럼이 LocalDatetime타입인게 훨씬 깔끔해서!

 

 

[구현화면]

타임라인을 등록 (현재시간입력 하지 않음) -> 타임라인 상세 (현재시간 타임리프 포맷형태로 보임) -> 전체 타임라인 (현재시간 타임리프 포맷형태로 보임)

타임라인을 등록 (현재시간입력 하지 않음) -> 타임라인 상세 (현재시간 타임리프 포맷형태로 보임) 

 

전체 타임라인 (현재시간 타임리프 포맷형태로 보임)

728x90
320x100
저작자표시 비영리 변경금지

'💻 뚝딱뚝딱 > 북북클럽' 카테고리의 다른 글

[개발일지#021] 타임리프 th:object, th:field 적용하기  (0) 2024.03.06
[개발일지#020] 타임리프 템플릿 레이아웃 이용하여 페이지마다 title 변경되도록 수정  (0) 2024.03.05
[개발일지#018] 타임리프 레이아웃 적용하기(Thymeleaf Layout)  (0) 2024.02.02
[개발일지#017] 하단 footer bar 만들기  (0) 2024.02.01
[개발일지#016] 전체타임라인 화면에 부트스트랩 템플릿 커스텀 및 적용하기  (0) 2024.01.31

관련글

티스토리툴바