팝오버 우수사례

Swetha Gopalakrishnan

Saurabh Rajpal

팝오버는 웹 어디에나 있습니다. 이는 메뉴, 전환 팁, 계정 설정, 공개 위젯 및 보고와 같은 기능에 사용되는 제품 카드 미리보기를 확인하세요. 이러한 구성요소가 널리 보급되어 있음에도 불구하고 여전히 의외로 번거롭습니다. 이 문제를 해결하기 위해 팝오버 구축을 위한 선언적 HTML API가 브라우저에 도입됩니다. 바로 Popover API입니다.

팝오버는 새로 사용 가능한 기준의 일부입니다.

팝오버는 일반적으로 대화상자와 혼동됩니다. 하지만 데이터 레이크와 서로 다릅니다. dialog.showModal(으)로 열린 dialog 요소 (모달 대화상자) 형식으로, 명확한 사용자 상호작용이 요구되는 환경입니다. 모달을 닫습니다 popover는 빛 닫기를 지원합니다. 모달 dialog는 그렇지 않습니다. 모달 대화상자는 페이지의 나머지 부분을 비활성 상태로 만듭니다. popover는 그렇지 않습니다. 차이점에 대해 자세히 알아보기

이 도움말은 전자상거래 회사가 어떻게 전자상거래를 지원하는지 설명하는 시리즈의 일부입니다. 새로운 CSS 및 UI 기능을 사용하여 웹사이트를 개선했습니다. 이 도움말에서는 Popover API를 구현하고 활용하는 방법을 알아보세요.

Tokopedia

팝오버 속성을 사용하여 React에서 코드 줄이 최대 70% 줄었습니다. 모달 이벤트 처리를 요구하지 않고 HTML을 통해 기본적으로 제어할 수 있습니다. JavaScript와 React.createPortal를 사용하여 모달 DOM을 document.body입니다. 또한 @starting-style를 사용하여 팝오버를 열고 닫습니다.—앤디 위할림, 선임 소프트웨어 Tokopedia 엔지니어

Tokopedia의 제품 세부정보 페이지 (PDP)에는 각 제품별로 여러 제품 이미지가 포함되어 있습니다. 있습니다. 제품 썸네일을 클릭하면 모달이 열려 확대된 이미지입니다. 이는 전자상거래 웹사이트에서 일반적으로 사용되는 패턴입니다.

코드

Tokopedia는 프런트엔드 개발에 React를 사용합니다. Popover API를 사용할 때는 DOM 모달과 버튼을 사용했습니다. 버튼 모달을 열도록 React 상태를 변경합니다. 팝오버 API를 사용하면 값으로 팝오버를 여는 요소의 popovertarget 속성 팝오버 요소의 ID와 동일한 값입니다.

이 기본 구현에서는 팝오버가 작동하지만 표시되고 사라집니다. 만들 수 있습니다. 시작 및 종료 애니메이션을 만들기 위해 매끄러운 팝오버, :popover-open 및 @starting-style를 사용하고 데이터 세트입니다. 다음 코드 예에서는 transform: 'scale()' 속성이 있습니다.

이 코드 예는 팝오버 API의 시작 및 나가기 애니메이션을 구현하는 방법

<Thumbnail popovertarget="medialightbox" />
<MediaLightbox popover id="medialightbox" />

export const cssModalWrapper = css({
  background: NN0,
  border: 'none',
  borderRadius: '.625rem',
  width: 1024,
  padding: 24,

  '&::backdrop': {
    opacity: 0,
    transitionProperty: 'opacity, display',
    transition: '.25s ease-out',
    transitionBehavior: 'allow-discrete',
  },

  transitionProperty: 'transform, opacity, display',
  transition: '.25s ease-out',
  transitionBehavior: 'allow-discrete',

  '@starting-style': {
    transform: 'scale(1)',
    opacity: 1,
  },
  transform: 'scale(0.8)',
  opacity: 0,

  '&:popover-open': {
    '@starting-style': {
      transform: 'scale(0.8)',
      opacity: 0,
    },
    transform: 'scale(1)',
    opacity: 1,
  },
});

Tokopedia는 팝오버 API를 지원하지 않는 브라우저에 맞추기 위해 popover-polyfill을 생성하고 gzip 압축으로 3.2KB에 불과합니다 사용자는 폴리필에 만족했습니다. 성능 저하를 일으키지 않았기 때문입니다. 전반적으로 팝오버 API로 React의 코드 줄을 최대 70% 줄일 수 있습니다.

Popover API 사용 시 고려사항

Tokopedia는 React를 사용하고 팀은 React를 채택하기 위해 사용하지 않는 페이지에 팝오버 구성요소를 배치한 다음 팝오버 콘텐츠 이를 통해 초기 요청의 크기를 줄였습니다.

팝오버를 CSS 앵커 포지셔닝과 결합해 보세요. (Chrome에서 곧 제공될 예정) 다른 요소를 기준으로 위치를 지정합니다. 이 기능은 메뉴 및 도움말 등에 유용합니다.

리소스

• 팝오버 API 소개
• 팝오버와 대화상자의 차이점
• 버그를 신고하거나 새 기능을 요청하시겠어요? 의견을 들려주세요.

이 시리즈의 다른 기사에서 전자상거래가 어떻게 기업들은 스크롤 기반 전략과 같은 새로운 CSS 및 UI 기능을 사용하여 애니메이션, 팝오버, 컨테이너 쿼리, has() 선택기 등이 포함됩니다.

• 웹 UI 기능이 전자상거래 사이트에 중요한 이유는 무엇인가요?
• 스크롤 기반 애니메이션 우수사례
• 전환 우수사례 보기
• 컨테이너 쿼리 우수사례
• :has() 선택자 우수사례