토픽 미리보기 모달

커스터마이징 테마 컴포넌트
4

Reddit 스타일 테마를 사용하시는 분들을 위해 작동하는 수정 방법을 공유합니다.

Reddit 스타일 테마 호환성

Reddit 스타일 테마를 사용하시는 분들을 위한 참고 사항입니다: 모달 버튼 자체는 작동하지만, 기본 행(row) 트리거는 작동하지 않습니다.

이유는 Reddit 스타일 테마가 표준 토픽 목록 행(row) 동작을 대체하고, 클릭을 토픽 카드 전체에 대해 처리하기 때문입니다. 이로 인해 모달의 일반 행 클릭 처리가 의도한 대로 작동하지 않습니다.

토픽 미리보기 모달(Topic Preview Modal) 설정을 다음과 같이 변경하면:

Trigger style: button
Plugin outlet: topic-list-after-title

정상적으로 작동합니다. 이는 Reddit 스타일 테마가 이미 topic-list-after-title 아웃렛을 포함하고 있기 때문입니다.

카드 전체 클릭 동작을 유지하기 위해, 저는 토픽 미리보기 모달을 버튼 모드로 유지하면서 Reddit 스타일의 기존 openTopic() 액션을 수정하여 모달의 작동하는 버튼을 트리거하도록 변경했습니다.

기존 Reddit 스타일 액션은 다음과 같습니다:

@action
openTopic(event) {
  if (
    (event.target.nodeName === "A" && !event.target.closest(".raw-link")) ||
    event.target.closest(".badge-wrapper")
  ) {
    return;
  }

  const { navigateToTopic, topic } = this.args.outletArgs;

  if (wantsNewWindow(event)) {
    window.open(topic.lastUnreadUrl, "_blank");
  } else {
    navigateToTopic(topic, topic.lastUnreadUrl);
  }
}

다음과 같이 변경했습니다:

@action
openTopic(event) {
  if (
    (event.target.nodeName === "A" && !event.target.closest(".raw-link")) ||
    event.target.closest(".badge-wrapper") ||
    event.target.closest(".topic-preview-modal__trigger-wrapper")
  ) {
    return;
  }

  const { navigateToTopic, topic } = this.args.outletArgs;

  if (wantsNewWindow(event)) {
    window.open(topic.lastUnreadUrl, "_blank");
    return;
  }

  const previewButton = event.currentTarget.querySelector(
    ".topic-preview-modal__trigger-wrapper--button"
  );

  if (previewButton) {
    event.preventDefault();
    event.stopPropagation();
    previewButton.click();
    return;
  }

  navigateToTopic(topic, topic.lastUnreadUrl);
}

모달의 버튼 트리거는 다음과 같이 렌더링됩니다:

<div class="topic-preview-modal__trigger-wrapper">
  <span
    role="button"
    class="topic-preview-modal__trigger-wrapper--button"
  >

따라서 이는 모달 로직을 재현하는 것이 아닙니다. 단순히 Reddit 스타일 카드 클릭이 기존에 작동하는 미리보기 버튼을 트리거하도록 하는 것입니다.

그 결과는 다음과 같습니다:

  • 토픽 카드 클릭 시 미리보기 모달이 열립니다.

  • 토픽 제목 클릭 시 미리보기 모달이 열립니다.

  • 미리보기 버튼은 여전히 작동합니다.

  • Cmd/Ctrl 클릭 시 여전히 새 탭에서 일반 토픽이 열립니다.

  • 카테고리 및 기타 일반 링크는 정상적으로 작동합니다.

  • 미리보기 버튼이 존재하지 않으면, Reddit 스타일은 일반 토픽 내비게이션으로 폴백됩니다.

즉, 근본적인 모달은 Reddit 스타일 테마와 잘 작동하며, 비호환성은 구체적으로 기본 행 트리거에 있습니다.

또한 버튼을 다음과 같이 숨겼습니다:

.topic-preview-modal__trigger-wrapper {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
3개의 좋아요