프로젝트 리스트 상태 탭 추가

React

filter
tap

2023-04-30 19:18

프로젝트 리스트 상단에 진행 상태 탭을 만든다.

탭 아이템으로는 all, not start, progress, done 이 있다.

default 값으로 all을 두고 사용자가 클릭했을 때 클릭한 상태에 해당하는 프로젝트를 보여준다!

우선, status 객체를 생성해준다.

components/ProjectListHeader.jsx

const status = [
    {
      text: "all",
      order: 1,
    },
    {
      text: "not start",
      order: 2,
    },
    {
      text: "progress",
      order: 3,
    },
    {
      text: "done",
      order: 4,
    },
  ];

javascript

스타일을 주기 위한 active state 정의

const [active, setActive] = useState(1);

javascript

StatusItem 렌더링

const handleStatus = (e, i) => {
    setActive(i + 1);
    dispatch(changeStatus(e.target.innetText));
  };

...
<StatusWrapper id="container" active={active}>
  {status.map((v, i) => {
    return (
      <StatusItem key={i} onClick={(e) => handleStatus(e, i)}>
        {v.text}
      </StatusItem>
    );
  })}
</StatusWrapper>

javascript

코드를 살펴보면 StatusItem을 클릭하면 setActive(i+1)이 실행되고

Wrapper에 active props로 active 값을 넣어준다.

emotion 스타일 컴포넌트에 active props 값을 가져와서 스타일을 준다 !

const StatusWrapper = styled.div`
  display: flex;
  gap: 1rem;

  ${({ active }) =>
    active
      ? css`
          div:nth-of-type(${active}) {
            background-color: var(--primary-color);
            color: #fff;
          }
        `
      : css``}
`;

javascript

이제 상태값에 따라 상태에 맞는 데이터를 가져와보자.

slices/ProjectSlice.js

우선, 상태변수를 전역으로 관리하기 위해 slice를 생성했다.

const { createSlice } = require("@reduxjs/toolkit");


const initialProjectSlice = {
  displayStatus: 'all'
}

const ProjectSlice = createSlice({
  name: 'ProjectSlice',
  initialState: initialProjectSlice,
  reducers: {
    changeStatus: (state, action) => {
      const statusValue = action.payload;

      return {
        displayStatus: statusValue
      }
    }
  }
})

export const { changeStatus } = ProjectSlice.actions;
export default ProjectSlice.reducer;

javascript

components/ProjectListHeader.jsx

슬라이스에서 정의한 displayStatus 값을 가져오고

ispatch 함수를 미리 정의한 handleStatus에 넣어서 값을 변경하자.

import { changeStatus } from "@/slices/ProjectSlice";

const { displayStatus } = useSelector((state) => state.ProjectSlice);
const dispatch = useDispatch();


const handleStatus = (e, i) => {
    setActive(i + 1);
    dispatch(changeStatus(e.target.innetText));
  };

javascript

클릭할 때마다 active 값이 변경되어서 활성화된 탭에 스타일을 줄 것이고 displayStatus 값도 변경될 것이다.

이제 프로젝트 리스트 컴포넌트에서 data 를 displayStatus 값으로 필터링하면 된다.