tailwind css Error ..? (슬라이딩 패널 컴포넌트)

이번에 커피챗을 하기전 기업의 제품 일부분을 클론코딩 해보기로 했다. 

 

나는 아직 실력은 부족하지만 나의 열정과 관심을 보여드리기 위한 하나의 방법이었따. 

회사에서 사용하는 기술 스택에 맞춰서 조금 더 사용성이 좋도록 만든는 것이 목표!!

 

해당 사이트에서는 사이드 패널을 잘 사용하고 있는 것 같았다. 

그래서 사이드 패널을 슬라이딩 형태로 보여주면 사용자가 봤을때 부자연스럽지 않고 자연스럽지 않을까 라고 생각했다.

 

당당하게 만들기 쉽지 하고 만들었는데 아래 영상처럼 띡 하고 나타났다.. 

 

원인이 뭘까 하고 css를 열심히 수정해 보았지만 개선되지 않았다. 

 

코드는 아래와 같다. 

import { collapsibleStore } from "@/store/collapsibleStore";
import { BsChevronLeft } from "react-icons/bs";
import cn from "classnames";

interface CollapsibleProps {
  title: string;
  children: React.ReactNode;
  level?: number;
}

export default function Collapsible({
  title,
  children,
  level,
}: CollapsibleProps) {
  const { isOpen, setIsOpen, currentLevel } = collapsibleStore();

  const handleOverlayClick = () => {
    setIsOpen(false);
  };

  const isActive = isOpen && (level ? currentLevel === level : true);

  // 아코디언이 활성화되지 않으면 렌더링하지 않음
  if (!isActive) return null;

  return (
    <>
      {/* 오버레이 */}
      {isOpen && (
        <div
          className="fixed inset-0 bg-black bg-opacity-40 z-40"
          onClick={handleOverlayClick}
        />
      )}

      {/* 아코디언 콘텐츠 */}
      <div
        className={cn(
          "fixed right-0 top-0 h-full bg-white overflow-hidden transition-all duration-500 ease-in-out transform z-50",
          {
            "translate-x-0 w-80": isActive,
            "translate-x-full w-0": !isActive,
          }
        )}
      >
        {level && currentLevel > 1 && (
          <button className="ml-4 mt-4 flex items-center">
            <BsChevronLeft />
            <p className="ml-2">이전</p>
          </button>
        )}
        <p className="ml-4 mt-14 font-semibold">{title}</p>
        <div className="p-4">{children}</div>
      </div>
    </>
  );
}

 

 

이때 가장 기본적인 부분에 대해서 고려하지 못했다. 

 

dom에 그려져야 애니메이션이 그려질 수 있는데 

아주 당당하게 ..^^

  // 아코디언이 활성화되지 않으면 렌더링하지 않음
  if (!isActive) return null;

 

이부분을 제거했더니 아주 잘 그려진다!