[Zero-base] 7-4. 회원 검색 기능 구현

회원 검색 화면 구현

 

list.html

• 목록 생성
• 검색을 위한 입력창 및 버튼 생성

 

 

 

localhost:8080/admin/member/list.do

• 추가된 목록 확인
• 검색을 위한 입력창 및 버튼 확인

 

 

 

list.html

• get 방식으로 입력 확인

 

 

---

회원 검색 화면 테스트

 

• 전체로 검색한 경우

 

 

• ID(userId)로 검색한 경우

 

 

• 이름(userName)으로 검색한 경우

 

 

 

list.html

<form method="get">
    <select name="searchType">
        <option value="all">전체</option>
        <option th:selected="${#strings.equals(param.searchType, 'userId')}" value="userId">ID</option>
        <option th:selected="${#strings.equals(param.searchType, 'userName')}" value="userName">이름</option>
        <option th:selected="${#strings.equals(param.searchType, 'phone')}" value="phone">연락처</option>
    </select>

    <input th:value="${param.searchValue}" type="search" name="searchValue" placeholder="검색어 입력"/>
    <button type="submit">검색</button>

 

 

---

회원 검색 기능 구현

 

MemberParam.java

package com.zerobase.fastlms.admin.model;

import lombok.Data;

@Data
public class MemberParam {

    String searchType;
    String searchValue;
}

 

 

 

AdminMemberController.java

public class AdminMemberController {

    private final MemberService memberService;

    @GetMapping("/admin/member/list.do")
    public String list(Model model, MemberParam parameter) {

        List<MemberDto> members = memberService.list(parameter);
        model.addAttribute("list", members);

        return "admin/member/list";
    }
}

 

 

 

MemberService.java

package com.zerobase.fastlms.member.service;

import com.zerobase.fastlms.admin.dto.MemberDto;
import com.zerobase.fastlms.admin.model.MemberParam;
import com.zerobase.fastlms.member.model.MemberInput;
import com.zerobase.fastlms.member.model.ResetPasswordInput;
import org.springframework.security.core.userdetails.UserDetailsService;

import java.util.List;

public interface MemberService extends UserDetailsService {

    boolean register(MemberInput parameter);

    /**
     * uuid에 해당하는 계정을 활성화 함.
     */
    boolean emailAuth(String uuid);

    /**
     * 입력한 이메일로 비밀번호 초기화 정보를 전송
     */
    boolean sendResetPassword(ResetPasswordInput parameter);

    /**
     * 입력받은 uuid에 대해서 password로 초기화 함
     */
    boolean resetPassword(String id, String password);

    /**
     * 입력받은 uuid값이 유효한지 판단
     */
    boolean checkResetPassword(String uuid);

    /**
     * 회원 목록 리턴(관리자에서만 사용 가능)
     */
    List<MemberDto> list(MemberParam parameter);
}

 

 

 

MemberServiceImpl.java

    @Override
    public List<MemberDto> list(MemberParam parameter) {

        List<MemberDto> list = memberMapper.selectList(parameter);

        return list;
    }

 

 

 

MemberMapper.java

package com.zerobase.fastlms.admin.mapper;

import com.zerobase.fastlms.admin.dto.MemberDto;
import com.zerobase.fastlms.admin.model.MemberParam;
import org.apache.ibatis.annotations.Mapper;

import java.util.List;


@Mapper
public interface MemberMapper {

    List<MemberDto> selectList(MemberParam parameter);

}

 

 

 

MemberMapper.xml

 

 

 

Mybatis

 

 

 

MemberMapper.xml

<select id="selectList"
        parameterType="com.zerobase.fastlms.admin.model.MemberParam"
        resultType="com.zerobase.fastlms.admin.dto.MemberDto">

    select *
    from member
    where 1 = 1
        <if test="searchType != null and searchValue != null">
            <choose>
                <when test="searchType == 'uesrId'">
                    and user_id like concat('%', #{searchValue}, '%')
                </when>
                <when test="searchType == 'uesrName'">
                    and user_name like concat('%', #{searchValue}, '%')
                </when>
                <when test="searchType == 'phone'">
                    and phone like concat('%', #{searchValue}, '%')
                </when>
                <otherwise> <!-- 전제인경우 (all) -->
                    and
                    (
                        user_id like concat('%', #{searchValue}, '%')
                        or
                        user_name like concat('%', #{searchValue}, '%')
                        or
                        phone like concat('%', #{searchValue}, '%')
                    )
                </otherwise>
            </choose>
        </if>

    limit 0, 10

</select>

 

 

---

회원 검색 기능 테스트

 

• 전체 검색으로 '11' 검색한 결과

 

 

 

• ID 검색으로 '13' 검색한 결과

 

 

---

회원 검색 기능 세부 구현

 

list.html

<style>
    .search-form {
        padding: 5px 0 10px 0;
        text-align: right;
    }

<div class="list">

 

 

 

• 우측 정렬 및 간결 조절

 

 

 

list.html

<input th:value="${param.searchValue}" type="search" name="searchValue" placeholder="검색어 입력"/>

 

 

 

• '검색어 입력' placeholder 적용

 

 

list.html

<input th:value="${param.searchValue}" type="search" name="searchValue" placeholder="검색어 입력"/>

• input type='search' 변경

 

 

 

• 입력 중 'delete' 아이콘 노출

 

 

---