갤러리 공통 화면 생성
•
기본적인 갤러리의 화면은 다음과 같습니다.
◦
왼쪽에 있는 notification, 북마크, 광고, 오른쪽의 헤드 영역 까지 공통 요소입니다.
◦
오른쪽 헤드 아래부분은 다음과 같은 내용이 들어가야 합니다.
▪
사진 리스트
▪
사진 클릭시 나오는 상세화면(사진 + 게시글)
따라서 다음과 같이 공통 코드를 만들었습니다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="main_layout">
<head>
<title>Gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="../../static/css/gallery/common.css" th:href="@{/css/gallery/common.css}"/>
</head>
<body>
<!-- 대체하고 싶은 요소에 layout:fragment 속성을 부여한다. -->
<div layout:fragment="content">
<div class="container__gallery__contents">
<div class="wrapper__notification">
<div class="wrapper__notification__head">
<div class="txt__notification">Notification</div>
</div>
<!-- 알람 리스트 -->
<div class="wrapper__list"></div>
</div>
<div class="txt__Bookmark">즐겨찾기</div>
<div class="wrapper__bookmark">
<!-- 즐겨 찾기 리스트 -->
</div>
<div class="txt__advertise">광고</div>
<div class="wrapper__advertise">
<div id="Ad1"></div>
<div id="Ad2"></div>
<div id="Ad3"></div>
</div>
</div>
<div class="wrapper__gallery">
<div class="wrapper__gallery__head">
<div class="user__profile__pic"></div>
</div>
<div layout:fragment="gallery__content"></div>
</div>
</div>
</body>
HTML
복사
그리고 layout:fragment 속성을 이용하여 다른 html 파일이 들어갈 수 있게 하였습니다.
•
생성된 파일 리스트는 다음과 같습니다.
📦gallery
┣ 📜common.css
┣ 📜detail.css
┗ 📜list.css
HTML
복사
📦gallery1
┣ 📜add.html
┣ 📜common.html
┣ 📜detail.html
┣ 📜list.html
┗ 📜modify.html
HTML
복사
•
사진 추가 화면과 수정 화면은 팝업으로 대체하였습니다.
(더 깔끔하고 예뻐 보여서 했는데, 수정이 필요하면 말씀해주세영)
•
마지막으로 버튼을 누르면 관련 페이지가 나올수 있도록 코드를 수정하였습니다.
◦
이를 확인하기 위해 TestController 를 꼭 봐주시고 @GetMapping 의 값이 다른 컨트롤러와 겹치지 않는지 꼭 확인하고 테스트 해주세요
◦
기본적인 주소는 localhost:8080/ 으로 해두었습니다.