Facebook 스타일 주제 모달 - 더 나은가요?

당신의 버전을 테스트해 보고 싶어요 @Don :heart_eyes:

안녕하세요 :waving_hand:

물론이죠, 당연히요! 처음에는 이 기능을 제 자체 테마에 직접 구현했기 때문에, 독립적인 테마 컴포넌트로 분리해내야 했어요.

제 사이트에서는 전용 버튼을 통해 모달을 트리거하는 반면, 이 테마 컴포넌트는 주제(topic)를 클릭하면 바로 트리거됩니다.

Theme Creator에서 직접 테스트해 볼 수 있어요:

https://discourse.theme-creator.io/theme/Don/topic-modal

와, 정말 빠르네요. 정말 마음에 들어요. 오픈소스로 공개해 주시면 정말 좋겠어요. 잘 만들었네요!

수십 년 동안 얼굴의 책을 사용하지 않아서 거기에 대한 언급은 없지만, 어쨌든… 돈, 이건 정말 멋져 보인다. 좋아할 거라고는 예상하지 못했지만, 휴대폰에서라면 정말 멋진 경험이 될 것 같다. 다시 말하지만, 페이스북에 대한 언급은 아니지만, 내게 이건 일반 포럼과 채팅 사이의 중간쯤에 있는 것 같다.

매우 세련되고 멋집니다. 정말 멋지네요 :chefs_kiss:

네트워크 요청이 상당히 많이 발생하는 것 같습니다… 테마 크리에이터에서 테스트해 보니 계속 레이트 리밋에 걸리네요. 주제를 열지 않아도 주제 목록에서 모든 주제 콘텐츠를 가져오는 것 같습니다(그래서 그렇게 빠르다고 느껴지는 거겠죠)?

네, 원래 이 컴포넌트는 제 개인 사이트를 위해 만들었는데, 그 사이트에는 한 화면에 1~2개의 주제만 표시되는 커스텀 카드 레이아웃을 사용하고 있습니다. 그런 환경에서는 뷰포트 프리페칭이 속도 제한에 걸리지 않고 부드럽게 작동합니다. 하지만 표준 디스코스의 테이블 기반 주제 목록에서는 동시에 훨씬 더 많은 주제가 표시되므로, 스크롤링 중에 프리페칭 큐가 훨씬 더 빠르게 차오릅니다.

이것이 사실 제가 아직 이 컴포넌트를 공식적으로 공유하지 않은 주된 이유입니다. 표준 레이아웃에 맞게 이 동작을 먼저 조정해야 한다는 것을 알고 있었거든요.

정확한 지적이십니다: 이를 견고하고 범용적인 컴포넌트로 만들기 위해서는 이 부분을 최적화해야 합니다.

이전에 하드코딩되어 있던 몇 가지 설정을 추가하여 컴포넌트가 다양한 레이아웃에 쉽게 적응할 수 있도록 했습니다. 또한, 연속 스크롤 중 레이트 리밋을 방지하기 위한 추가 안전장치로 max_prefetches_per_minute 설정도 추가했습니다.

소스 오픈할 가능성이 있을까요? 한번 직접 해보고 싶어서요 :slight_smile: 마음에 들어요 :wink:

솔직히 말해서, 이건 표준 주제 목록보다는 당신의 테마에 더 잘 맞을 것 같아.

커스텀 레이아웃에 훨씬 더 유연하게 대응할 수 있도록 두 가지 새로운 설정을 추가했습니다:

  • trigger_style: 전체 토픽 행을 클릭 가능하게 만들지(row) 아니면 작은 확장 아이콘(button)을 추가하여 미리보기를 열되, 일반적인 토픽 링크는 그대로 두는지 선택할 수 있습니다.

  • plugin_outlet: 버튼 스타일을 사용할 경우, 확장 아이콘이 렌더링될 정확한 플러그인 아웃렛을 지정할 수 있습니다(기본값은 topic-list-after-title).

이를 통해 커스텀 테마는 필요에 따라 트리거 버튼을 자체 커스텀 플러그인 아웃렛에 연결할 수 있습니다.

실제로 저는 방금 제 사이트에서 이 독립형 컴포넌트를 활성화했습니다. 테마에서 기존 코드를 완전히 제거하고 <PluginOutlet />를 통해 이 컴포넌트를 실행하도록 교체했습니다.

또한 읽음 추적 기능의 버그도 수정했습니다.

오픈소스화하기 전에 모든 것이 안정적으로 작동하는지 확인하기 위해 잠시 동안 라이브 프로덕션 환경에서 테스트해보고 싶습니다.


참고로, 테스트를 할 수 있도록 테마 크리에이터 미리보기의 트리거 유형을 잠시 button으로 변경해 두었습니다.

이 모달을 제대로 작동하게 만들어 준 @Don 에게 큰 감사를 전하고 싶어요.

오래도록 고생하며 몇 가지 다른 접근법을 시도해 봤지만, Don이 실제로 제대로 작동하는 해결책을 만들어 주셨어요.

시간 내어 만들어 주시고 공유해 주셔서 정말 감사드립니다. 제가 시도했던 바로 그 결과물이었고, 덕분에 고민할 필요가 많이 줄었어요.

다시 한번 감사드립니다, Don. 도움 주셔서 진심으로 감사합니다. :raising_hands: