✨ [더보기] 하나가 선택되면 기존에 열린 더보기 사라지게 하기

Around Study 프로젝트에서 애먹던 것을 Effitizer 프로젝트를 하며 해결하게 되었다. (사이드 플젝을 여러 개 하면 생기는 장점) 고민은 많이 했는데 정작 해결은 코드 한 줄로 했다.

문제

한 줄의 더보기 버튼을 클릭해서 리스트가 나온 뒤, 바로 다른 줄의 더보기 버튼을 클릭하면 2번 눌러야 했다.
즉, 첫 클릭에는 이전 리스트가 사라지는 동작만 하고 두 번째 클릭에서야 다른 줄의 새로운 리스트가 나왔다.

수정 후

하나의 리스트가 열린 뒤 바로 다른 더보기 버튼을 눌러도
기존 것이 사라지고 새로운 것이 등장하는 동작을 동시에 한다.

Before에서 클릭을 두 번 하는 것이 영상에서 잘 안 보여서 수정된 동작이 보이는 After만 올렸다.

구현한 코드

  const handleShowMore = (id: number) => {
  	// isOpen 상태를 뒤집기 전에 index가 다르다면 전체를 false로 만들어버린다
    if (id.toString() !== showMore.index) {
      showMore.isOpen = false;
    }

    setShowMore({
      isOpen: !showMore.isOpen,
      index: id.toString(),
    });
  };