🔥 제 테마 컴포넌트 비판해 주세요: 고급 주제 카드

[jrgong]

여러분 안녕하세요

면책 조항: 이 테마 컴포넌트를 만드는 과정에서 AI는 전혀 피해를 입지 않았습니다

네, 저는 Topic Cards 테마 컴포넌트의 모방 버전을 부끄러움 없이 비브 코딩(vibe-coding)으로 만든 것에 대해 고백합니다. 따라서 훌륭한 작업을 해 주신 원작자들과 기여자들에게 큰 감사를 드립니다!

처음에는 포크(Fork)로 시작했지만, 코드의 80% 이상과 구조가 완전히 재작성되었습니다. 수많은 새로운 기능을 추가했고, 첫인상으로는 다양한 설정들이 다소 복잡하게 느껴질 수 있습니다.

Advanced Topic Cards - 예비 릴리스

우리의 재작성을 통해 다음을 얻으실 수 있습니다:

• 토픽 카드가 표시되는 위치에 대한 더 세밀한 제어
• 두 가지 다른 토픽 카드 레이아웃
• 최신(Latest) 페이지 상단의 추천 카드 캐러셀

자세한 전체 목록은 아래를 스크롤하여 확인해 주세요

이 스레드에서 자유롭게 테스트하고, 실행하고, 복사하고, 비판해 주세요! 결과물에 대한 피드백을 받는 것이 정말 기대됩니다:

GitHub - jrgong420/advanced-topic-cards

알려진 문제들:

• 중복된 TC 설정: 섬네일과 카드 높이에 관한 일부 기능은 더 이상 중복되거나 가치가 없습니다.
• 데스크톱 뷰에서 터치패드/마우스 휠을 이용한 가로 스크롤이 없습니다 (Embla에는 이를 위한 플러그인이 있지만, 우리는 아직…
• 액션 버튼들이 충분히 "정교"하지 않으며, 더 나은 시각적 재설계가 필요합니다.

개선 사항 및 기능 요약:

• 카테고리별, 디바이스별 레이아웃
  데스크톱과 모바일의 카드를 리스트(이미지 왼쪽, 콘텐츠 오른쪽) 또는 그리드(이미지 위, 콘텐츠 아래)로 별도로 구성할 수 있습니다. 각 플랫폼에서 정확히 어떤 카테고리가 어떤 레이아웃을 사용할지 선택할 수 있습니다.

  • 그리드 레이아웃 예시: Samen-Verzeichnis - Forum | Cannabisanbauen.net
  • 카드 레이아웃 예시: Growreports - Forum | Cannabisanbauen.net

• 하위 카테고리 레이아웃 상속
  모든 하위 카테고리를 수동으로 구성하지 않도록, 상위 카테고리에서 카드 레이아웃을 선택적으로 상속받을 수 있습니다.

• 홈페이지 추천 토픽 캐러셀 (Embla)
  Embla Carousel을 기반으로 한 추천 토픽 캐러셀을 발견(Discovery) 경로(홈/최신/인기/카테고리)에 배치할 수 있으며, 뷰당 슬라이드 수, 루핑, 정렬, 드래그 동작 등을 설정할 수 있습니다.

  • 예시: forum.cannabisanbauen.net (홈페이지)

• 카테고리 페이지의 하위 카테고리 캐러셀
  카테고리 페이지의 하위 카테고리 목록을 가로 캐러셀로 전환할 수 있으며, 표시되기 전에 필요한 상위 카테고리 및 자식 카테고리 수를 제어할 수 있습니다.

  • 예시: Growreports - Forum | Cannabisanbauen.net

• 시각적 커스터마이징 옵션

  • 토픽에 이미지가 없을 때의 섬네일 플레이스홀더 (Font Awesome 아이콘)

  • 카드 테두리 둥글기 프리셋

  • 카드 제목 글꼴 크기 선택 (Discourse의 폰트 토큰 사용)

  • 선택적인 고정 카드/그리드 높이 및 섬네일 크기 제어

• 풍부한 카드 컴포넌트
  새로운 카드 구조:

  • 바이라인 (OP 아바타 + 사용자 이름 + 선택적 게시 날짜)

  • 액션 버튼 (상세 정보 + 추천 링크 CTA)

  • 인라인 태그 (카드 본문 내 카테고리 배지 + 태그)

• 다른 테마 컴포넌트/플러그인과 호환:

  • Calendar + Event 플러그인: 제목 뒤에 이벤트 날짜 표시
  • User Portfolio 테마 컴포넌트: 표시

• 계획된 기능:

  • 추천 캐러셀에 대한 더 세밀한 제어: 추가 플러그인 아웃렛, 페이지 경로 등
  • 추천 토픽 카드 캐러셀 확장/축소 (+ 새/읽지 않은 토픽 기반 자동 확장)

[denvergeeks]

공유해 주셔서 정말 감사합니다. 정말 훌륭합니다!

[RGJ (Richard - Communiteq)]

정말 멋져요!! 훌륭한 작업입니다

의견:

• 카테고리 없이 /latest나 태그 선택과 같은 비(非)카테고리 탐색 경로에서는 작동하지 않습니다.

• 이미지들이 항상 잘 정렬되지 않습니다

이미지가 없는 경우에도 마찬가지입니다

• 캐러셀은 정말 훌륭하지만, 별도 컴포넌트로 분리하는 것이 좋지 않을까요?

• 이미지가 없는 주제(topic)는 캐러셀에서 제외할 수 있으면 좋겠습니다.

[jrgong]

피드백 감사합니다!

@RGJ

• 이미지 정렬이 항상 잘 안 맞아요

사실 이미지들이 좀 엉망으로 보였고, 주제 요약 텍스트가 잘리는 문제도 마찬가지입니다.

UX/UI 관점에서 리스트 레이아웃의 이미지 주위에 패딩을 추가하는 것이 더 나을까요?

@RGJ

• 캐러셀은 정말 멋지지만, 별도 컴포넌트로 분리하는 게 맞지 않나요?

좋은 지적입니다. 다만 캐러셀과 일반 주제 카드에 동일한 CSS 스타일을 공유하려는 의도였거든요.

@RGJ

• 이미지가 없는 주제는 캐러셀에서 제외할 수 있으면 좋겠습니다.

[gilles]

안녕하세요, 코드를 조금 업데이트해야 할 것 같습니다