[react+spring boot] 검색결과 리스트 출력하기

씩씩한 조약돌·2023년 4월 26일
0

코드 기록🤓

목록 보기
9/31

1. spring boot

1. cotroller

//전체 회원 검색
	@GetMapping("/admin/user/userlistsearch/{currentPage}")
	public Map<String, Object> selectAllUser(@RequestParam String table, @RequestParam String searchKey, @RequestParam String searchWord, PageDTO pv, @PathVariable("currentPage") int currentPage) {
		Map<String, Object> map = new  HashMap<>();
		System.out.println("table : "+table);  //1전체회원 2탈퇴회원
		System.out.println("searchKey : "+searchKey);
		System.out.println("searchWord : "+searchWord);
		
		int totalRecord = userService.searchUserCountProcess(table, searchKey, searchWord);
		System.out.println("totalRecord : "+totalRecord);

		if(totalRecord>=1) {
			if(pv.getCurrentPage()==0)
				this.currentPage=currentPage;
			else
				this.currentPage = pv.getCurrentPage();

			this.pdto = new PageDTO(this.currentPage, totalRecord, table, searchKey, searchWord);
			System.out.println("currentPage Check : "+currentPage);
			map.put("userList", userService.searchListProcess(this.pdto));
			map.put("pv", this.pdto);
		}

		return map; 
	}//selectAllUser

2. service /serviceImp

service

	public int searchUserCountProcess(String table, String searchKey, String searchWord); //회원 검색(count)
	public List<UserDTO> searchListProcess(PageDTO pv); //회원 검색 리스트

seviceImp

	//회원 검색(count)
	@Override
	public int searchUserCountProcess(String table, String searchKey, String searchWord) {
		Map<String, String> search = new HashMap<String, String>();
		search.put("table", table);
		search.put("searchKey", searchKey);
		search.put("searchWord", searchWord);
		return userDao.searchUserCount(search);
	}
	
	//회원 검색 리스트
	@Override
	public List<UserDTO> searchListProcess(PageDTO pv) {
		return userDao.searchList(pv);
	}

3. Dao

	public int searchUserCount(Map<String, String> search); //회원검색
	public List<UserDTO> searchList(PageDTO pv); //전체 회원 검색

4. mapper

	<!-- 회원 검색(count) -->
	<select id="searchUserCount" parameterType="map" resultType="int">
		SELECT count(*)
		FROM(SELECT rownum as rm, b.*    
		    FROM(SELECT a.*  
				FROM(SELECT *
				<choose>
		          <when test = "table eq '1'">
		             FROM userInfo
		          </when>
		          <otherwise>
		             FROM userDrop
		          </otherwise>
		       </choose>
			        ORDER BY userKeynum desc
		            )a
		       <if test="searchWord != null">
		         <if test="searchKey eq 'userID'">
		            WHERE a.userID like '%'||#{searchWord}||'%'
		         </if>
		         <if test="searchKey eq 'userName'">
		            WHERE a.userName LIKE '%'||#{searchWord}||'%'
		         </if>
		         <if test="searchKey eq 'userNick'">
		            WHERE a.userNick LIKE '%'||#{searchWord}||'%'
		         </if>
		      </if>
		      		AND a.userID IS NOT NULL
		    )b
		)c
	</select>

	<!-- 회원 검색 리스트 -->	
	<select id="searchList" parameterType="com.admin.campingcheol.common.page.PageDTO" resultType="UserDTO">
		SELECT c.*
		FROM(SELECT rownum as rm, b.*    
		    FROM(SELECT a.*  
				FROM(SELECT *
			     <choose>
		          <when test = "table eq '1'">
		             FROM userInfo
		          </when>
		          <otherwise>
		             FROM userDrop
		          </otherwise>
		       	</choose>
			        ORDER BY userKeynum desc
		            )a
		       <if test="searchWord != null">
		         <if test="searchKey eq 'userID'">
		            WHERE a.userID like '%'||#{searchWord}||'%'
		         </if>
		         <if test="searchKey eq 'userName'">
		            WHERE a.userName LIKE '%'||#{searchWord}||'%'
		         </if>
		         <if test="searchKey eq 'userNick'">
		            WHERE a.userNick LIKE '%'||#{searchWord}||'%'
		         </if>
		      </if>
		      AND a.userID IS NOT NULL
		    )b
		)c
      WHERE c.rm BETWEEN #{startRow} AND #{endRow}
	</select>	

2. react

1. userManagement.js

변수

const [selectedSearchKey, setSelectedSearchKey] = useState('userID');
const [selectedSearchWord, setSelectedSearchWord] = useState('');

const userList = useSelector((state) => state.user.userList);
const pv = useSelector((state) =>
    state.user.pv ? state.user.pv : { currentPage: 1 }
  );

const SearchUserList = (currentPage, params) => {
    dispatch(userActions.searchUserList(currentPage, params, config));
  };

함수

 //////////////////////검색

  //select 회원조회
  const handleChageSelectUser = (e) => {
    setSelected(e.target.value);
    console.log('selected : ' + selected);
    if (e.target.value === '1') {
      console.log('전체회원 ' + e.target.value);
      getUserList(1);
    } else if (e.target.value === '2') {
      console.log('탈퇴회원 ' + e.target.value);
      getUserDropList(1);
    }
  };

  //select searchKey
  const handleChageSelectSearch = (e) => {
    setSelectedSearchKey(e.target.value);
    console.log('selectedSearchKey : ' + e.target.value);
  };

  //searchword
  const handleSearchWordChange = (e) => {
    setSelectedSearchWord(e.target.value);
  };

  //searchButton
  const handleSearchUser = (e) => {
    e.preventDefault();

    const params = {
      table: selected,
      searchKey: selectedSearchKey,
      searchWord: selectedSearchWord,
    };
    console.log(params);

    SearchUserList(1, params);
  };

리턴

				 <tr>
                    <td>검색어</td>
                    <td>
                      <select
                        className={style.searchCategory}
                        onChange={handleChageSelectSearch}
                        value={selectedSearchKey}
                      >
                        <option name='searchKey' value='userID'>
                          ID
                        </option>
                        <option name='searchKey' value='userName'>
                          이름
                        </option>
                        <option name='searchKey' value='userNick'>
                          닉네임
                        </option>
                      </select>
                    </td>
                    <td>
                      <input
                        type='text'
                        className={style.searchWord}
                        placeholder='검색어를 입력하세요'
                        onChange={handleSearchWordChange}
                      />
                      <button
                        type='button'
                        className='btn btn-primary'
                        onClick={handleSearchUser}
                      >
                        검색
                      </button>
                    </td>
                  </tr>
profile
씩씩하게 공부중 (22.11~)

0개의 댓글