트러블슈팅 ) transition 적용

 

✅ 오류상황

search 아이콘 클릭시 부드럽게  close아이콘 + input 으로 변경이 안됨. 

즉, transition 적용 안됨.

      {/* 🔽 input 토글 영역 */}
      {showInput && (
        <input
          ref={inputRef}
          type="text"
          placeholder="검색어를 입력하세요"
          className={clsx(
            "bg-peach-pink hover:bg-[#ffe3dc] outline-none",
       		"h-10 border-b rounded-md border-gray-300 px-4 text-base",
            "transition-all duration-300 ease-in-out", // 기본 트랜지션
            showInput ? "opacity-100 w-[240px]" : "opacity-0 w-0"
          )}
          autoFocus={showInput}
        />
      )}

 

✅ 문제 원인: w-0 → w-[240px] 애니메이션은 display 상태와 관련 있음

{showInput && <input />}처럼 조건부 렌더링으로 input 자체를 DOM에 아예 추가/제거하면,
transition이 작동하기 전에 width가 없어져 버리기 때문에 애니메이션이 실행되지 않음.

 

✅ 해결 방법: input을 항상 렌더링하고, className으로만 숨기기

 

<input
  ref={inputRef}
  type="text"
  placeholder="검색어를 입력하세요"
  className={clsx(
    "bg-peach-pink hover:bg-[#ffe3dc]",
    "h-10 border-b rounded-md border-gray-300 px-4 text-base",
    "transition-all duration-300 ease-in-out",
    showInput ? "opacity-100 w-[240px]" : "opacity-0 w-0 pointer-events-none"
  )}
  autoFocus={showInput}
/>

🔧 추가 포인트

• pointer-events-none: input이 w-0일 때 클릭 방지