feature/FE-052 : IconButton disabled 에러 수정

[naro-Kim]

체크 리스트

• 적절한 제목으로 수정했나요?
• 관련된 이슈와 연결 시켰나요?
• Target Branch를 올바르게 설정했나요?
• Label을 알맞게 설정했나요?

작업 내역

• IconButton useEffect 관련으로 disabled가 미적용되는 문제 해결

문제 상황과 해결

• disabled 상태를 캐치해주지 못해 2개의 useEffect로 분리했습니다.

이전 코드

  useEffect(() => {
    if (!error) return;
    setStatus(error ? ICON_STATUS.ERROR : disabled ? ICON_STATUS.DISABLE : ICON_STATUS.DEFAULT);
  }, [error, disabled]);

변경된 코드

  useEffect(() => {
    if (!error) return;
    setStatus(error ? ICON_STATUS.ERROR : ICON_STATUS.DEFAULT);
  }, [error, disabled]);

  useEffect(() => {
  // disabled의 경우, return문이 존재하면 default로 상태 복원이 되지않아 return문을 사용하지 않았습니다.
    setStatus(disabled ? ICON_STATUS.DISABLE : ICON_STATUS.DEFAULT);
  }, [disabled]);

• 다만 '-' 버튼 hover시 svg와 id가 제대로 변경되고 있음에도 hover 아이콘이 렌더링되지 않는것으로 보입니다

2.mov

비고

• notion QA

[sxungchxn]

IconButton 내에서 useEffect 가 많아져서 로직 파악이 어려워지고 있는 것 같아요..!
나중에 기회될때 useEffect 를 없애는 방향으로 리팩토링 진행해보면 좋을 것 같아요~ state와 props에 변화에 대응하기 위해 useEffect를 사용하는 것은 좋지 않은 패턴이라고 하네요,,!

[sxungchxn]

마이너스 아이콘이 호버 효과가 반영 안되는 문제가 있어보이는데 확인해보니 minus-hover.svg 아이콘이 잘못된 것으로 보입니다! 하는 김에 수정해주시고 sprite.svg에도 반영해주시면 감사하겠습니다!

[naro-Kim]

🤔 파일이 잘못되었나 싶어서 re-export한다음 피그마에 띄워 이상이 없는걸 확인해보고 sprite 생성을 했었는데.. 온전히 다 삭제하고 한번 다시 봐보겠습니다~!

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[sxungchxn]

수고하셨습니다!