hover할 때 등장하는 버튼의 찌그러짐 문제 (feat.flex-shrink 로직)

flex-shrink의 동작 순서 이해하기

목차

1. 문제 상황: div 내에서 hover 시 보이는 컴포넌트가 찌그러짐

2. 해결1: 고정 너비를 지우고 IconButton에 shrink-0 주기

3. 해결2: IconButton에 block 대신에 flex 주기

---

1. 문제 상황: div내에서 hover 시 보이는 컴포넌트가 찌그러짐

썸네일에서는 잘보이라고 IconButton을 일부러 검정색으로 뒀는데, 실제 디자인은 왼쪽 그림과 같이 배경과 비슷한 파란색이다.

 

티가 잘 안난다고 생각해서 찌그러진 상태로 두고 일단 다른 더 급한 작업들을 진행하다가

피드백 방에도 올라오고, 더 중요한 기능들이 좀 완성이 돼서 드디어 고치기 시작..

 

간단한 부분이지만 은근 헤멨었어서 블로그를 작성해본다.

 

해당 부분은 아래와 같은 형태로 구현되어 있었다.

return (
  <>
    <div
      className="group bg-btn-tertiary-subtle-onpanel flex h-9 w-48.5 cursor-pointer items-center justify-between rounded-full pr-3 pl-3 transition-colors hover:pr-1"
      ...
    >
      <span className="font-label-md text-gray500 group-hover:text-gray700 truncate group-hover:w-46">
        {label}
      </span>
      <Popover>
        <PopoverTrigger popoverKey="chat_more">
          <IconButton
            ...
            className="hidden pl-1 group-hover:block"
          />
        </PopoverTrigger>
        <PopoverContent popoverKey="chat_more">
          ...
        </PopoverContent>
      </Popover>
    </div>
  </>
);

 

<div> 태그 안에 Label, IconButton이 들어가 있는 형태이다.

처음에 저렇게 막 넣었더니 IconButton이 찌그러짐 + 스크롤에 아이템이 잘림으로 인해 w-48.5, w-46, pl-1 이런 것들이 들어가있다.

 

flex 레이아웃에서 공간이 부족할 때 flex-shrink가 동작하며 IconButton이 압축된 문제였다.

IconButton에 아래와 같은 스타일링이 적용되어 있다.

className="hidden group-hover:block"

이는 화면에 존재하지 않던 IconButton이 hover로 새로 레이아웃에 참여하며 공간 재분배가 발생한다.

 

이 새로 추가되는 IconButton을 위해서 전체 div에는 hover:pr-1이 적용된다. 기본값인 pr-3은 IconButton이 들어왔을 때 너무 넓어보이기 때문이다.

 

label에는 hover:w-46, div는 w-48.5로 고정된 너비를 가져서 패딩값으로 width를 차지하는 IconButton이 찌그러진 것이다.

 

---

2. 해결1: 고정 너비를 지우고 IconButton에 shrink-0 주기

우선 고정 너비가 있는 모양이 이상해서 고정너비를 지워봤는데 스크롤바에 의해 잘리거나 하지 않았다.

과거의 내가 왜 그렇게 했는지 모르겠는.. 

 

하지만 IconButton은 여전히 찌그러져있었다. 왜일까?

 

flex item은 아래와 같은 기본값을 가진다.

min-width: auto;  /* min-content size를 따름 */
flex-shrink: 1;   /* 공간이 부족하면 해당 요소를 줄이겠다 */

flex item의 기본값인 min-width: auto는 <span>에 들어가는 글자 수만큼 최소 너비를 확보하려고 한다.

IconButton이 가진 px는 저런 최소 너비 계산에 들어가지 않기 때문에 IconButton이 찌그러지는 것이다.

 

 

그렇다면 span에 min-w-0을 주면 이 문제가 해결이 될까? 그것도 아니다.

현재 span, IconButton은 둘다 기본값으로 flex-shrink: 1을 가진다.

 

flex-shrink의 배분 방식에 대해 알아보자.

요컨대, flex-shrink가 0이면 알고리즘의 a단계에서 공간 배분 계산 자체에서 제외된 채 공간을 유지하지만,

기본값인 1을 가지면 비율에 따라서 줄어들 몫을 나눠받고 줄어들게 되는 것이다.

 

min-w-0을 주면 '0까지 줄어들 수 있다'를 나타내는 것이지, 안줄어들겠다는 게 아니라는 것.

 

따라서 IconButton이 아예 줄어들지 않도록 하려면 shrink-0을 주어야 하는 것이다.

 

 

그럼 IconButton에 shrink-0만 주면 문제가 해결되는 걸까?

안타깝지만 아니다!

IconButton 자체가 찌그러지지는 않았는데, 정중앙에 있어야할 아이콘의 위치가 이상해졌다.

 

---

3. 해결2: IconButton에 block 대신 flex 주기

사실 IconButton 내부에서 Icon의 위치가 이상해지는 이유는 명확하다.

<IconButton
  contextStyle="onPanel"
  size="sm"
  icon="IC_MoreVert"
  ariaLabel="채팅방 메뉴 더보기 버튼"
  className="hidden shrink-0 group-hover:block"
  onClick={handleButtonClick}
/>

flex의 속성을 미처 생각하지 못하고 '안보이다가 hover하면 보이도록할 땐 보통 hidden, block을 사용했지!' 이 경험/생각에 꽂혀서

IconButton에 className으로 block을 덮어써버렸기 때문이다.

Icon이 정중앙에 있을 수 있는 이유는 flex와 함께 사용하는 items-center, justify-center 덕분이다.

 

따라서 위에서 block 대신 flex를 주면 찌그러지는 문제가 완전히 해결된다.

 

 

 

 

 

크게 별 게 있었던 건 아니지만 flex-shrink가 동작하는 과정에 대해 좀 더 자세히 알게된 것 같아서 정리해봤다.

w3.org를 평소에 정독하면서 공부할 수는 없겠지만 이런 식으로 문제 생겼을 때 한번씩 읽어보면 좋은 것 같다.

특히 flex에 대해서는 사실 포지셔닝 키워드와 동작 자체만 알고 있으면 충분하다 생각했었는데

문제는 그 동작이 어떻게 진행되는지 모르는 데에서도 발생할 수 있다는 것을 알았다.

 

단점.. 가독성 꽤 떨어지고 한국어가 많이 부실해서 영어로 읽어야함

 

 

 

 

참고

https://www.w3.org/TR/css-flexbox-1/#resolve-flexible-lengths

CSS Flexible Box Layout Module Level 1