Feature/fe-061 Dropdown 수정사항 반영

[sxungchxn]

체크 리스트

• 적절한 제목으로 수정했나요?
• 관련된 이슈와 연결 시켰나요?
• Target Branch를 올바르게 설정했나요?
• Label을 알맞게 설정했나요?

작업 내역

• Dropdown.Button 작은 사이즈 대응

• Dropdown.BottomSheet 생성

  

• Dropdown.Modal 생성 (이 모달은 무조건 화면 정가운데 위치 하도록 되어 있습니다)

  

• BottomSheet, Modal 일부 수정

문제 상황과 해결

BottomSheet 수정 사항

• 디자인 시안에 따라 최소 높이를 추가 적용

• BottomSheetView 라는 컴포넌트로 UI로직과 다른 로직들을 분리

  • 이는 Dropdown.BottomSheet 에서 useModalControl 훅을 사용할 필요없이 UI만 필요하기 때문에 수정작업이 필요했습니다.

Modal 수정 사항

• position:fixed 추가

• BottomSheet 위에 Modal 이 들어가는 경우가 존재하여 배경 흐림효과를 선택적으로 적용할 수 있도록 인자를 추가했습니다.

해결되지 않는 문제

  <Dropdown>
          <Dropdown.Button placeholder="버튼입니다"></Dropdown.Button>
          <Dropdown.BottomSheet>
            <Dropdown>
              <Dropdown.Button placeholder="버튼입니다2"></Dropdown.Button>
              <Dropdown.Modal>
                <Dropdown.Item itemKey="1">1</Dropdown.Item>
                <Dropdown.Item itemKey="2">2</Dropdown.Item>
                <Dropdown.Item itemKey="3">3</Dropdown.Item>
                <Dropdown.Item itemKey="4">4</Dropdown.Item>
                <Dropdown.Item itemKey="5">5</Dropdown.Item>
                <Dropdown.Item itemKey="6">6</Dropdown.Item>
                <Dropdown.Item itemKey="7">7</Dropdown.Item>
                <Dropdown.Item itemKey="8">8</Dropdown.Item>
                <Dropdown.Item itemKey="9">9</Dropdown.Item>
                <Dropdown.Item itemKey="10">10</Dropdown.Item>
              </Dropdown.Modal>
            </Dropdown>
          </Dropdown.BottomSheet>
  </Dropdown>

위와 같은 코드에서 화면 정가운데에 위치해야할 Modal 이 BottomSheet 를 기준으로 가운데 위치하도록 되고 있는데 그 원인을 모르겠습니다.. 처음에는 부모(BottomSheet) 와 자식(Modal)이 position:fixed 여서 생기는 문제인줄 알았는데 여기에서는 부모 자식 모두 position:fixed 속성을 가져도 자식 요소는 그냥 화면 기준으로 가운데 정렬되는 것을 보고.. 더 머리아파졌습니다 😢

(2023.07.10 이슈 대응 완료)

Dropdown.BottomSheet 내부에 Dropdown.Modal이 있는 경우 가운데 정렬이 안되는 이슈

문제상황

• position:fixed 는 원칙적으로는 자신의 위치를 결정할 때 viewport 를 기준으로 하게 되어있다
• 그런데 현재 BottomSheet는 애니메이션 효과를 위해 transform 을 적용 해놓은 상태이다.

<Dropdown>
     <Dropdown.Button placeholder="버튼입니다"></Dropdown.Button>
     <Dropdown.BottomSheet> {/* position:fixed,  transform 속성이 적용되어 있는 상태 */}
         <Dropdown>
           <Dropdown.Button placeholder="버튼입니다2"></Dropdown.Button>
              <Dropdown.Modal> {/* position:fixed 속성이 적용되어 있는 상태 */}
                <Dropdown.Item itemKey="1">1</Dropdown.Item>
                <Dropdown.Item itemKey="2">2</Dropdown.Item>
                <Dropdown.Item itemKey="3">3</Dropdown.Item>
                <Dropdown.Item itemKey="4">4</Dropdown.Item>
                <Dropdown.Item itemKey="5">5</Dropdown.Item>
                <Dropdown.Item itemKey="6">6</Dropdown.Item>
                <Dropdown.Item itemKey="7">7</Dropdown.Item>
                <Dropdown.Item itemKey="8">8</Dropdown.Item>
                <Dropdown.Item itemKey="9">9</Dropdown.Item>
                <Dropdown.Item itemKey="10">10</Dropdown.Item>
            </Dropdown.Modal>
        </Dropdown>
    </Dropdown.BottomSheet>
  </Dropdown>

• 위와 같은 구조에서 Dropdown.Modal 은 부모 요소인 BottomSheet 의 transform 속성에 의해서 transform 속성 만큼한 것을 기준으로 viewport가 설정된다고 한다.

'transform3d' not working with position: fixed children

• 이로인해 position:fixed; top: 50%; left: 50% 는 가운데의 기준을 viewport가 아닌 BottomSheet로 잡아버리게 되었던 것…

해결

• createPortal 을 통해서 Dropdown.Modal 을 overlay-container 로 이동시켜서 가운데 정렬이 가능하게 했다.
• 즉 위에 처럼 더 이상 부모 요소에서 Dropdown.BottomSheet 가 존재하지 않도록 했다.

{isOpen &&
          createPortal(
            <Modal onClose={closeDropdown} className={cx(modal, className)} withBackground={false} {...rest}>
              <Modal.Content size="small" className={modalContent}>
                {children}
              </Modal.Content>
            </Modal>,
            document.getElementById('overlay-container') as HTMLElement,
 )}

그냥 BottomSheet 내부에서 Dropdown.Modal이 있는 경우

문제 상황

const [openBottom, closeBottom] = useOverlay();

<Button
        onClick={() =>
          openBottom(
            <BottomSheet onClose={closeBottom}>
              <Dropdown>
                <Dropdown.Button placeholder="버튼입니다2"></Dropdown.Button>
                <Dropdown.Modal>
                  <Dropdown.Item itemKey="1">1</Dropdown.Item>
                  <Dropdown.Item itemKey="2">2</Dropdown.Item>
                  <Dropdown.Item itemKey="3">3</Dropdown.Item>
                  <Dropdown.Item itemKey="4">4</Dropdown.Item>
                  <Dropdown.Item itemKey="5">5</Dropdown.Item>
                  <Dropdown.Item itemKey="6">6</Dropdown.Item>
                  <Dropdown.Item itemKey="7">7</Dropdown.Item>
                  <Dropdown.Item itemKey="8">8</Dropdown.Item>
                  <Dropdown.Item itemKey="9">9</Dropdown.Item>
                  <Dropdown.Item itemKey="10">10</Dropdown.Item>
                </Dropdown.Modal>
              </Dropdown>
            </BottomSheet>,
          )
        }
      >
        신청하기
</Button>

• BottomSheet 컴포넌트는 내부적으로 useClickOutside 를 사용하고 잇다.
• 그런데 이 상황에서 Modal 내 아이템 요소를 누르면 BottomSheet 는 click outside로 인지해 버려서 같이 BottomSheet도 같이 닫혀버린다 lol

해결책

• BottomSheet 내부에는 onClickOutside 를 제거하고 배경이 눌렸을때 close 되도록 로직을 수정했다
  • 정확히는 useModalControl 내부에 있던 useClickOutside 로직을 제거해서 해결했다

const BottomSheetView = forwardRef<HTMLDivElement, Props>(
  ({ title, isOpen, children, onClose, className, ...rest }, ref) => {
    useLockScroll();

    return (
      <>
        <div className={cx(background({ open: isOpen }))} data-testid="outside" onClick={onClose}></div>
        <div className={cx(wrap({ open: isOpen }), className)} {...rest} ref={ref}>
          <div className={titleWrapper}>
            <div>{title}</div>
            <IconButton iconType="close" width={36} height={36} onClick={onClose}></IconButton>
          </div>
          {children}
        </div>
      </>
    );
  },
);

비고

[naro-Kim]

BottomSheet와 Dropdown 업데이트 내역 확인했습니다. 고생하셨습니다 감사합니다!

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[naro-Kim]

✅