[Photogram] 검색 기능 구현

• 헤더 부분에 입력창을 배치하여 검색 기능을 추가해보았습니다.
• 추가로, 검색된 리스트에서 특정 사용자 이름을 클릭할 경우 해당 사용자의 프로필 페이지로 이동하도록 구현하였습니다.
• 사용자 이름을 기준으로 검색을 진행하여 해당되는 사용자 리스트를 보여줄 수 있도록 구현해보았으며, 이후 게시글의 태그 기능을 추가하여 태그를 기준으로 게시글 또한 검색할 수 있도록 구현해볼 예정입니다.

---

📝 Controller

• 먼저 컨트롤러에는 클라이언트의 요청을 전달받을 수 있도록 함수를 구현해주었습니다.
• 해당 함수는 사용자가 <input> 태그에 입력한 값을 전달받아 사용합니다.

/* 검색 */
@GetMapping("/user/search")
public String search(String search, Model model) {
    List<User> userEntityList = userService.search(search);
    model.addAttribute("users", userEntityList);

    return "user/search";
}

---

📝 Service

• 서비스 로직은 아래와 같이 간단하게 구현하였습니다.

/* 검색 */
public List<User> search(String name) {
    return userRepository.findByNameContaining(name);
}

---

📝 Repositoty

• findByNameContaining() 메소드는 검색할 문구를 매개변수로 전달받아, 해당 문구를 포함하는 모든 사용자를 조회하여 리스트로 반환하는 역할을 수행합니다.

public interface UserRepository extends JpaRepository<User, Long>{

    List<User> findByNameContaining(String name);
}

---

📝 View

• View 페이지에서는 엔터키를 통해 검색을 수행할 수 있도록 <form> 태그와 <input> 태그를 사용하여 검색창을 구현해주었습니다.

<form action="/user/search" method="get">
    <input type="text" id="search" name="search" placeholder="검색">
</form>

• 결과창은 아래와 같이 구현되어 있으며, Model 객체를 통해 전달받은 데이터를 <c:forEach> 태그를 통해 반복문을 수행하며 출력하고 있습니다.

<div class="search-summary">
    <div class="search-title" align="center">사람</div>
    <div class="search-count" align="center">${users.size()}명</div>
</div>

<c:forEach var="user" items="${users}">
    <div class="flex">
        <img class="search-profile-img" src="/upload/${user.profile_image_url}" onerror="this.src='/images/person.jpeg'" />
        <div class="search-profile">
            <div class="search-profile-item">
                <h5 class="pointer" onclick="location.href='/user/${user.id}'">${user.name}</h5>
                <div class="search-profile-content">${user.bio}</div>
            </div>
        </div>
    </div>
    <br>
</c:forEach>

---

GitHub - Daegwon-Kim/SpringBoot-Photogram