메세지 화면 생성
•
메세지 화면은 다음과 같이 구성되어 있습니다.
◦
왼쪽은 친구 목록을 보여주며, 검색기능을 제공합니다.
◦
오른쪽은 왼쪽 박스 안에서 어떤 요소를 클릭 하느냐에 따라 달라집니다.
•
왼쪽부분은 공통부분이기에 다음과 같이 코드를 작성하였습니다.
<!-- 친구 목록 부분 -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="main_layout">
<head>
<title>friends</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="../../static/css/friends.css" th:href="@{/css/friends.css}"/>
</head>
<body>
<div layout:fragment="content">
<div class="container__friends">
<!-- 상단부분 -->
<div class="wrapper__friends__head">
<div class="txt__friends">Friends</div>
<div class="wrapper__search__friends">
<div class="search__friends">
<img src="/img/img_magnify.png" style="width: 15px; height: 15px; margin: 10px">
<input id="search" type="text">
</div>
<input type="submit" class="btn__search" value="Search">
</div>
</div>
<!-- 친구 설정 메뉴 -->
<div class="wrapper__setting__friends">
<div class="wrapper__setting__btn">
<!-- 경로는 나중에 알맞게 수정 해주세요 -->
<div th:onclick="|location.href='@{/add/friends}'|">
<input type="button" class="btn__add__friends" value="친구 추가">
</div>
<span class="divider"></span>
<div th:onclick="|location.href='@{/delete/friends}'|">
<input type="button" class="btn__setting__friends" value="친구 편집">
</div>
</div>
</div>
<!-- 친구 목록 추가 -->
<!-- 대략 작성 해주시면 제가 나중에 수정 하겠습니다 -->
<div class="wrapper__friends__list">
</div>
</div>
<!-- 결과물 출력 부분 -->
<div class="container__friends__contents">
<div layout:fragment="container__friends__contents"></div>
</div>
</div>
</body>
HTML
복사
◦
결과물 출력 부분을 다른 기능을 가진 html 에 끌어다가 썼습니다.
•
메세지 입력 부분은 고정되어 있습니다.
•
친구 목록과 메세지 부분은 길어지면 자동적으로 스크롤이 생기도록 구현하였습니다. (이는 나중에 데이터를 넣어서 테스트한 영상을 올리겠습니다.)
페이지 연동
•
버튼을 누르면 각 페이지에 맞게 이동하도록 url 설정을 해주었습니다.
•
결과물