작업 진행 전
작업 결과
1.
이벤트의 시작과 종료 시간 앞에는 부트스트랩의 아이콘을 사용하여 시각적인 표현을 강화했습니다.
시작 시간에는 '재생 아이콘', 종료 시간에는 '정지 아이콘'을 추가하여 시각적으로 구분이 쉽도록 디자인했습니다.
2.
각 시간 값은 배경색이 적용된 박스 내에 표시하여 가독성을 향상시켰습니다.
이렇게 스타일링된 요소들은 Thymeleaf 템플릿 엔진을 사용해 서버 사이드에서 처리된 날짜와 시간 데이터를 동적으로 표시하게 됩니다.
이러한 스타일링을 적용하기 위해서는 부트스트랩 아이콘 스타일시트를 HTML 문서의 <head> 부분에 포함시켜야 합니다.
th:text 속성을 이용해 서버 사이드에서 전달된 날짜와 시간 데이터를 HTML 요소에 삽입하며 Thymeleaf의 날짜 포맷 기능을 사용하여 날짜와 시간을 'YYYY년 MM월 DD일 HH시 MM분' 형태로 보여줄 수 있습니다.
작업 코드
<div style="margin-bottom: 2rem;">
<h1 style="font-size: 2.5em; color: #007BFF; margin-bottom: 0.5em;">
<i class="bi bi-play-circle-fill" style="margin-right: 10px;"></i>
이벤트 시작 시간
</h1>
<h2 style="font-size: 2em; color: #212529;">
<span th:text="${#temporals.format(bookDonationEvent.createdAt, 'yyyy년 MM월 dd일 HH시 mm분')}" style="background-color: #e9ecef; padding: 10px; border-radius: 5px;"></span>
</h2>
</div>
<div>
<h1 style="font-size: 2.5em; color: #DC3545; margin-bottom: 0.5em;">
<i class="bi bi-stop-circle-fill" style="margin-right: 10px;"></i>
이벤트 종료 시간
</h1>
<h2 style="font-size: 2em; color: #212529;">
<span th:text="${#temporals.format(bookDonationEvent.closedAt, 'yyyy년 MM월 dd일 HH시 mm분')}" style="background-color: #e9ecef; padding: 10px; border-radius: 5px;"></span>
</h2>
</div>
Java
복사