Sekkison Frontend UI -13 # 유저 검색

로그인과 회원가입 페이지에서는 필요 없었지만, 이제부터 구현할 페이지들에는 네비게이션의 역할과 편의성을 보장해 줄 헤더와 푸터가 필요하다.

기획 단계에서와 같이, 헤더에는 로고, 친구목록, 쪽지함, 알림, 내정보에 해당하는 버튼을 만들 것이고, 푸터에는 홈, 내 약속, 내 정보, 약속만들기, 캘린더에 해당하는 버튼을 만들 것이다.

유저 검색

유저 찾기를 누르고 검색을 하면 백엔드 서버에서 검색어와 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페이지를 구현해보도록 하겠다.