상태에 따라 페이지, 버튼, 모달 형태 변경하기와 상태에 따라 모달 비활성화 하기

const { isAuthor, isVoted, isClosed, bestItem } = useSelector(
    (state: any) => state.currentVote,
  );

현재 전역 상태에 따라 다르게 보여야하는 것은

• isVoted

  1. 투표를 했다면 투표한 버튼의 배경이 파란색으로 변경되어야 한다
  2. 모달에는 '투표를 변경하시겠습니까?', '투표를 취소하시겠습니까?'라는 텍스트가 보여야 한다.

• isAuther

  1. 본인이 투표자라면 투표 버튼에 변화가 없다.
  2. 모달은 비활성화 되어야 한다.

• isClosed

  1. 종료된 투표라면 버튼에는 최종 투표율이 보이면서 가장 높은 투표율을 기록한 버튼의 배경이 파란색이 되어야 한다.
     -> 가장 높은 투표율을 가지는 투표항목의 아이디를 전역상태로 만들어야 할지가 문제다!
     -> 한번 종료된 투표의 상태는 변하지 않으니까 전역 상태로 만들었을 때 액션에 따라 여러번 리렌더링이 되는 상황은 발생하지 않을 것이다
     -> 따라서 전역 상태로 만들기로 결정하였다

  2. 모달은 비활성화 되어야 한다.

• bestItem

  1. 버튼에 최종 투표율이 표현되어야 한다.
  2. 1위를 한 버튼과 다른 버튼의 스타일이 달라야 한다.

• 발생한 문제
  1. 처음엔 투표가 종료됐으면서 최고 득표를 했거나, 투표가 종료되지 않았으면서 선택된 아이템이라면 동일하게 투표 아이템 버튼의 스타일을 동일하게 바꿔주려고 했다

  useEffect(() => {
   if (bestItem === id || isTopicVoteItemVoted === true) {
     setIsSelected(true);
   }
  }, []);

2. 텍스트 투표 아이템의 경우 문제가 없었지만 이미지 투표 아이템의 경우 투표가 종료되었을 때 스타일이 투표 중일때의 스타일과 반대였다
   boolean 타입은 2가지 상태밖에 없어서 조건문을 isClosed === true 와 isClosed === false 로 분리해서 만들기로 결정하였다.

//완성된 커스텀 훅
  import React, { useEffect, useState } from 'react';

export const useChangeImageItems = (
  id: number,
  isClosed: boolean,
  bestItem: number,
  isTopicVoteItemVoted: boolean,
) => {
  const [isChangedComponent, setIsChangedComponent] = useState(false);
  useEffect(() => {
    if (isClosed === true) {
      if (bestItem === id) {
        setIsChangedComponent(false);
      } else {
        setIsChangedComponent(true);
      }
    } else if (isClosed === false) {
      if (isTopicVoteItemVoted === true) {
        setIsChangedComponent(true);
      } else {
        setIsChangedComponent(false);
      }
    }
  }, []);
  return isChangedComponent;
};

export const useChangeTextItems = (
  id: number,
  isClosed: boolean,
  bestItem: number,
  isTopicVoteItemVoted: boolean,
) => {
  const [isChangedComponent, setIsChangedComponent] = useState(false);
  useEffect(() => {
    if (isClosed === true) {
      if (bestItem === id) {
        setIsChangedComponent(true);
      } else {
        setIsChangedComponent(false);
      }
    } else if (isClosed === false) {
      if (isTopicVoteItemVoted === true) {
        setIsChangedComponent(true);
      } else {
        setIsChangedComponent(false);
      }
    }
  }, []);
  return isChangedComponent;
};

• 텍스트 투표 아이템
  

• 이미지 투표 아이템(수정 전)
  

• 이미지 투표 아이템(수정 후)