로그인과 회원가입 페이지에서는 필요 없었지만, 이제부터 구현할 페이지들에는 네비게이션의 역할과 편의성을 보장해 줄 헤더와 푸터가 필요하다.
기획 단계에서와 같이, 헤더에는 로고, 친구목록, 쪽지함, 알림, 내정보에 해당하는 버튼을 만들 것이고, 푸터에는 홈, 내 약속, 내 정보, 약속만들기, 캘린더에 해당하는 버튼을 만들 것이다.
유저 찾기를 누르고 검색을 하면 백엔드 서버에서 검색어와 localStorage에 저장되어 있는 userId를 통해 나를 제외한 검색결과를 보여준다. 이 때, 해당 유저와 내가 친구인지 아닌지 판단하여 User객체에 각자 담아 보내게 되는데 이 값은 @Transient 값에 담겨 온다.
그 값을 통해 친구추가버튼을 표시할 것인지, 대기중을 표시할 것인지, 쪽지보내기 버튼을 표시할 것인지 분류하게 된다.
// 검색결과 세팅하기
function setSearch(result) {
const out = [];
result.forEach(data => {
const row = `
<div>
<a href="./otherinfo.html?userId=${data.id}">
<img src="${path}/userFiles/${data.id}">
${data.name}
</a>
${setSearchFriendBtn(data)}
</div>`;
out.push(row);
});
$("#friendSearch").html(out.join("\n"));
}
//버튼 세팅하기
function setSearchFriendBtn(data) {
if (data.memo == "X") {
return `
<buttontoken interpolation">${data.id}, this)">
<i class='fa fa-user-plus'></i>
</button>`
} else if (data.memo == "O") {
return `
<buttontoken interpolation">${data.id})">
<i class="fa fa-envelope-o"></i>
</button>`;
} else {
return `<span>대기중</span>`
}
}
추가로, 친구초대 버튼을 누르면 reload를 통해 목록을 다시 받아 버튼을 대기중인 상태로 바꾼다.
다음 게시글에서는 home페이지를 구현해보도록 하겠다.