카테고리나 리스트 등 같은 영역에서 사용자의 집중도를 위해 다수 중 하나만 선택되어 영역이 보이거나 선택된 ui가 보여야 할 때가 있다.

리스트 선택 시 관련 정보 하나만 보이기

import { cls } from "libs/utils";
import { useState } from "react";

export default function Test() {
  const userDatas: any = [];
  for (var i = 1; i < 6; i++) {
    var newObj = {
      id: i,
      name: `user${i}`,
      content: `content-${i}`,
    };
    userDatas.push(newObj);
  }

  const [countIndex, setCountIndex] = useState(-1);
  const onClickShowFaq = (id, index) => {
    if (countIndex === index) {
      setCountIndex(-1);
    } else {
      setCountIndex(index);
    }
  };

  return (
    <>
      <ul className="w-[800px] mx-auto">
        {userDatas.map((data, index) => (
          <li
            key={data.id}
            className="list-none flex_line border-b border-[#dbdbdb]"
          >
            <div className="flex-1">
              <div
                onClick={() => onClickShowFaq(data.id, index)}
                className="justify-between cursor-pointer flex items-center justify-between"
              >
                <div>
                  <p className="flex-1 text-left py-8 leading-10 font-semibold text-[32px] overflow-hidden text-ellipsis whitespace-nowrap">
                    {data.name}
                  </p>
                </div>
                <div
                  className={cls(
                    "w-[40px] h-[40px] relative transition duration-300 ease-in-out;",
                    countIndex === index ? "transform rotate-45" : ""
                  )}
                >
                  <div className="transform rotate-90 absolute top-1/2 -translate-y-1/2 w-full h-[3px] bg-[#1c1c1b]"></div>
                  <div className="absolute top-1/2 -translate-y-1/2 w-full h-[3px] bg-[#1c1c1b]"></div>
                </div>
              </div>
              <div
                className={cls(
                  "overflow-hidden transition-all duration-200 ease",
                  countIndex === index
                    ? "pt-[20px] pb-[40px] visible max-h-[300px]"
                    : "invisible max-h-0"
                )}
              >
                <p className="text-[20px] text-left leading-8 font-medium">
                  {data.content}
                </p>
              </div>
            </div>
          </li>
        ))}
      </ul>
    </>
  );
}

결과