[TIL] 방 검색 230106

export const searchRoom = createAsyncThunk(
  'room/searchRoom',
  async (keyword, thunkAPI) => {
    console.log('keyword', keyword);
    try {
      const response = await instance.get(`/rooms/search?keyword=${keyword}`);
      console.log('search room', response);
      return thunkAPI.fulfillWithValue(response.data);
    } catch (error) {
      console.log('search room error', error);
      return thunkAPI.rejectWithValue(error);
    }
  },
);

export const roomSlice = createSlice({
  name: 'rooms',
  initialState,
  reducers: {},
  extraReducers: {
	...
    [searchRoom.fulfilled]: (state, action) => {
      console.log('action payload searchRoom', action.payload);
      state.rooms = action.payload;
    },
    [searchRoom.rejected]: (state, action) => {
      state.error = action.payload;
    },
  },
});

// 외부 모듈
import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import styled from 'styled-components';

// 내부 모듈
import { searchRoom } from '../../../../redux/modules/roomSlice';
import search from '../../../../assets/img/search.png';

function SearchRoom() {
  const dispatch = useDispatch();
  const roomList = useSelector((state) => state.rooms.rooms);
  const roomName = roomList.map((room) => room.roomName);
  const [keyword, setKeyword] = useState('');

  function onClickSearchRoom() {
    if (roomName.find((x) => x.includes(keyword))) {
      alert('찾았닭');
      dispatch(searchRoom(keyword));
    } else {
      alert('찾는 방이 없닭');
    }
    setKeyword('');
  }

  return (
    <StSearchRoom>
      <SearchInput
        placeholder="방 제목을 검색하닭"
        value={keyword}
        onChange={(e) => setKeyword(e.target.value)}
      />
      {/* eslint-disable-next-line react/jsx-no-bind */}
      <SearchBtn disabled={!keyword} onClick={onClickSearchRoom}>
        <img src={search} alt="search icon" />
      </SearchBtn>
    </StSearchRoom>
  );
}

const StSearchRoom = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30%;
`;

const SearchInput = styled.input`
  width: 100%;
  height: 30px;
`;

const SearchBtn = styled.button`
  margin-left: 10px;
  border: 0;
  background: none;
  cursor: pointer;

  img {
    width: 30px;
    height: 30px;
  }
`;

export default SearchRoom;