transition-all css / select custom / details div로 끝내기

<div
      class="border border-gray-200 rounded-md shadow-sm flex items-center gap-2 pl-3 pr-3 py-2 cursor-pointer relative"
      (click)="isOpen = !isOpen"
    >
      <div>카테고리 선택</div>
      <app-icon
        class="text-black w-5 h-5 rotate-180 transition-all"
        [ngClass]="{'rotate-180': isOpen}"
        name="material-symbols:keyboard-arrow-up"
      ></app-icon>
      <div
        class="category bg-white border border-gray-200 rounded-md z-30 flex flex-col gap-2"
        *ngIf="isOpen"
      >
        <div
          class="bg-gray-50 category-item min-w-max hover:bg-primary hover:text-white cursor-pointer rounded-lg text-center pr-8 pl-8 py-2.5"
          *ngFor="let category of categories"
        >
          {{category}}
        </div>
      </div>
    </div>
  </div>

.category {
  position: absolute;
  top: 3.1rem;
  left: 4rem;
  padding: 8px;
}
.category-item {
  padding-right: 12px;
  padding-left: 12px;
}