FKB Pro - 소셜 테마

또한 다음 주소에서 도움을 요청할 수 있습니다:

https://ask.discourse.com

오른쪽 사이드바를 모든 페이지에 표시하려면 어떻게 해야 하나요? 홈페이지와 카테고리뿐 아니라 다른 페이지에도 표시되도록 설정하고 싶습니다.

“토픽 추가” 버튼에서는 작동하지 않습니다

1개의 좋아요

음… Theme Creator에서 미리 볼 때 제 환경에서는 정상적으로 작동합니다.

‘새 주제’ 버튼을 특정해서 적용하고 싶다면, 다음을 시도해 보세요:

button#create-topic {
  // 여기에 추가할 내용...
}

이 업데이트 이후로 이 부분의 CSS에 문제가 있는 것 같습니다.

다음 조건을 만족할 때

  • 개인 메시지
  • 태그가 있는
  • 사이드바 없이 보기

너비가 매우 작아집니다

원인:

.navigation-topics,
.categories-list,
body[class*="tag-"]:not(.archetype-regular):not(.archetype-banner),
body[class*="category-"]:not(.archetype-regular):not(.archetype-banner):not(.archetype-banner):not(.archetype-private_message) {

이 코드가 fkb-d-topic-list.scss에서 적용되고 있는데, 적용되면 안 됩니다.

:not(.archetype-private_message)가 필요하다고 의심합니다.
그런데 왜 이 아키타입들을 이렇게 구체적으로 타겟팅하는지 궁금합니다. 단순히 토픽 목록인지(토픽 뷰와 대비하여) 확인하려는 것일까요?

2개의 좋아요

이 테마가 정말 마음에 드는데, 버그를 만난 건지 아니면 제가 무언가를 망친 건지 모르겠어요.

어떤 이유인지 모르겠지만, 토픽 위에 패딩(padding)이 전혀 없는 것 같아서 둥근 모서리가 거의 사라지고, 각 토픽 사이에 눈에 띄는 구분선도 없어요.

새로운 모던 파운데이션 실험적 변경 사항으로 인해 이런 현상이 발생하는 것 같습니다. 이 기능을 끄면 패딩이 정상으로 돌아오는 것 같습니다.

제목:
[Bug] Discourse 2026.4.0-latest에서 테마 충돌 — 'ember-this-fallback/js-component' 모듈을 찾을 수 없음

설명:

Discourse를 v2026.4.0-latest(커밋 19374472fd)로 업데이트한 후, FKB Pro 테마가 치명적인 프론트엔드 충돌을 일으켜 포럼이 부분적으로 사용 불가능한 상태가 되었습니다. Discourse에서 다음과 같은 오렌지색 배너가 표시됩니다:

“由于主题/组件有错误,您的站点可能无法正常运行。由 ‘FKB Pro theme’ 引起。”
(번역: “테마/컴포넌트에 오류가 있어 사이트가 정상적으로 작동하지 않을 수 있습니다. 'FKB Pro theme’로 인해 발생함.”)

근본 원인:

해당 테마(또는 그 컴포넌트 중 하나)는 최근 버전에서 Discourse 코어에서 제거된 ember-this-fallback/js-component 모듈을 여전히 참조하고 있습니다. 이 모듈은 비권장된 Ember this-property-fallback 패턴을 위한 호환성 shim으로, 템플릿에서 {{this.foo}} 대신 {{foo}}를 사용할 수 있게 해 주었습니다. Discourse는 이 shim의 제거를 공식적으로 발표했으며, 모든 테마/플러그인이 명시적인 this. 바인딩으로 마이그레이션하도록 요구했습니다.


브라우저 콘솔 오류:

Failed to load theme 4 from https://www.sitetalk.net/...
Error: Could not find module 'ember-this-fallback/js-component' imported from (require)

[THEME 4 'FKB Pro theme'] Error: Could not find module 'ember-this-fallback/js-component' imported from (require)
  at vendor.js
  at requireModule (vendor.js)
  at Object.lookup (chunk.js)
  ...
  at reportThemeError (chunk.js)

(콘솔에 표시된 Discourse 버전: v2026.4.0-latest, Ember v6.10.1)


환경:

항목 값
Discourse 버전 v2026.4.0-latest (커밋 19374472fd)
Ember 버전 v6.10.1
테마 FKB Pro (해당 저장소에서 기본 설치)
재현 가능성 Discourse 업그레이드 후 100% 재현 가능

개발자들이 이 문제를 수정해 주기를 바랍니다. 감사합니다!!!

4개의 좋아요

안녕하세요, Discourse를 v2026.4.0-latest — Ember v6.10.1로 업데이트하는 과정에서 오류가 발생하여 포럼을 사용할 수 없는 상태입니다.
client-error-handler.js:109 [THEME 28 ‘FKB Pro theme’] Error: Could not find module ember-this-fallback/this-fallback-helper imported from (require)
at loader.js:247:1
at a (loader.js:258:1)
at requireModule (loader.js:24:1)
at Object.lookup (app.js:36:12)
수정 부탁드립니다.

4개의 좋아요

이 문제 수정에 대해 아직 소식이 있나요?

이 문제가 해결될 예정에 대해 어떤 소식이 있나요?

https://github.com/literatecomputing/fkb-pro-theme이 정상적으로 작동한다는 보고를 받았습니다. 풀 리퀘스트를 생성했습니다.

4개의 좋아요

Hi Don,

우선, 정말 멋진 테마네요! 최근 제 지역 교육 커뮤니티인 **Jiwa.now**에 FKB Pro를 배포했는데, 카드 기반 UI가 아름답고 매우 전문적인 인상을 줍니다.

모바일에서 테스트하던 중 토픽 카드의 클릭 영역과 관련된 UX 문제를 발견했습니다. 현재 클릭 가능한 영역이 일관성이 없습니다. 예를 들어, 카드의 가장자리에서는 토픽으로 진입할 수 있지만, 다른 빈 영역(아바타 행 오른쪽이나 푸터 중앙 등)을 클릭하면 아무 반응이 없습니다.

이러한 “때로는 되고 때로는 안 되는” 인터랙션은 사용자를 혼란스럽게 만들며, 피드를 스와이프하거나 스크롤하려는 중에 의도치 않은 클릭이 발생하는 경우가 많습니다.

:light_bulb: 향후 업데이트를 위한 제안: 테마가 기본적으로 이를 개선하여 *핵심 콘텐츠(제목, 이미지, 발췌문)*만 클릭 시 토픽으로 진입하도록 하고, 스와이프 시 오클릭을 방지하기 위해 카드 배경의 클릭을 비활성화하면 UX 측면에서 개선이 될 것입니다.

그동안, 제 사용자들이 모바일 터치 경험을 100% 신뢰할 수 있도록 pointer-events “화이트리스트” 방식을 활용한 CSS 스니펫을 작성했습니다. 이를 통해 배경 클릭을 완전히 무효화하고, 실제 인터랙티브 요소에만 클릭을 선택적으로 재활성화합니다.

터치 타겟을 개선하고자 하는 분들을 위해 여기에 공유하고, 개발자분들께도 유용한 참고 자료가 될 수 있기를 바랍니다:

/* Fix for mobile card click/touch conflicts (Smart Whitelist Approach) */

/* 1. Neutralize the entire card background to prevent swipe-clicks */
.topic-list-item {
    pointer-events: none !important;
}

/* 2. Re-enable all native links and buttons (Avatars, Tags, Titles) */
.topic-list-item a,
.topic-list-item button {
    pointer-events: auto !important;
}

/* 3. Re-enable image clicks */
.topic-list-item .topic-image,
.topic-list-item .topic-thumbnail,
.topic-list-item img {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* 4. Re-enable the entire footer stats area */
.topic-list-item .topic-item-stats,
.topic-list-item .topic-footer,
.topic-list-item .post-activity,
.topic-list-item .activity,
.topic-list-item .num,
.topic-list-item .topic-meta-data {
    pointer-events: auto !important;
}

/* 5. Kill any overlapping stretched-link pseudo-elements */
.topic-list-item .main-link::before,
.topic-list-item .main-link::after {
    pointer-events: none !important;
    display: none !important;
}
```\n
감사합니다!

Leo
2개의 좋아요

@Don 테마가 정말 훌륭해요. 이렇게 멋진 테마를 공유해 주셔서 감사합니다 :high_five: . 커뮤니티를 위해 이 테마를 만들기까지 많은 시간을 투자하셨을 텐데, 그 노고를 인정하는 것이 중요하다고 생각해서 감사의 마음을 전하고 싶었어요!!

3개의 좋아요

안녕하세요 @gilles :waving_hand: 좋은 말씀 감사합니다! :hugs:
제 프로필에 작은 지원 섹션이 있어요. 제 작업을 응원하고 싶으시다면 언제든 이용해 주세요: > ./support --coffee

1개의 좋아요

FKB Pro v2 - 무엇이 새로워졌나요?

공지가 조금 늦었습니다. v2는 약 두 주 전에 출시되었거든요. 하지만 늦어도 나아서 나쁘진 않죠. :slightly_smiling_face:

FKB Pro v2는 내부적으로 상당히 큰 업데이트입니다. 전반적인 외관과 느낌은 익숙한 그대로이지만, 테마의 상당한 부분이 재설계되고 최적화되며 정리되었습니다.

:desktop_computer: 개선된 데스크톱 레이아웃

데스크톱 주제 목록은 이제 Discourse 사이드바와 FKB Pro 자체 패널과 훨씬 더 잘 어울리는 유연한 레이아웃을 사용합니다.

이 레이아웃은 사용 가능한 공간이 변함에 따라 자동으로 조정되며, 작은 화면과 모바일 기기를 위한 전용 브레이크포인트를 제공합니다.

:triangular_ruler: 더 나은 반응형 동작

좁은 레이아웃과 넘치는 콘텐츠 처리에 많은 공을 들였습니다.

긴 주제 제목, 사용자 이름, 태그 및 기타 콘텐츠는 이제 레이아웃이 사용 가능한 너비를 초과하도록 밀어내는 것을 방지하고 훨씬 더 안정적으로 처리됩니다.

모바일 레이아웃도 뷰포트 기반 크기를 의존하는 대신 실제 컨테이너 너비로 작동하도록 조정되었습니다.

:high_voltage: 주제 목록 성능

주제 목록에도 일부 성능 최적화가 적용되었습니다.

화면 밖의 주제 카드는 적절한 경우 브라우저가 이를 건너뛸 수 있으며, 주제 이미지와 그 컨테이너는 더 나은 포함(containment) 규칙을 사용합니다.

이것은 특히 긴 주제 목록에서 유용할 것입니다.

:locked_with_key: 개선된 FKB 패널 캐싱

FKB 패널은 이제 사용자별 버전화된 캐시 키를 사용합니다.

일반적인 캐시 항목을 공유하는 대신 사용자 데이터가 현재 Discourse 사용자와 연결되어 저장되므로, 같은 브라우저에서 사용자를 전환할 때 캐시된 정보가 계정 간에 누출되는 것을 방지합니다.

캐시는 또한 만료와 잘못된 항목을 더 안정적으로 처리합니다.

:high_voltage: 더 빠른 패널 로딩

사용자 요약 및 카드 데이터는 이제 다음 요청을 시작하기 전에 하나의 요청이 완료되기를 기다리는 대신 병렬로 요청됩니다.

활성 사용자가 변경된 후 오래된 요청이 데이터를 덮어쓰는 것을 방지하는 추가적인 보호 장치도 있습니다.

:control_knobs: 새로운 패널 상태 관리

FKB 패널의 표시/숨김 상태는 전용 상태 서비스로 이동되었습니다.

이것은 동작을 더 예측 가능하고 유지보수하기 쉽게 만들 뿐만 아니라, 패널 토글 자체도 다음과 같이 개선되었습니다:

  • 적절한 aria-expanded 상태
  • 설명적인 라벨
  • 동적 아이콘
  • 영구적인 표시/숨김 상태

:wheelchair_symbol: 접근성 개선

여러 인터랙티브 요소가 더 나은 접근성 지원을 받았으며, 특히 FKB 패널 컨트롤 주위에 그러합니다.

패널 토글은 이제 보조 기술에 상태를 올바르게 노출하고 더 유용한 라벨과 제목을 제공합니다.

:mobile_phone: 모바일 개선

주제 목록, 카테고리, 개인 메시지, 사용자 페이지, 그룹 및 주제를 포함한 다양한 모바일 레이아웃이 정리되고 더 견고해졌습니다.

그 목표는 FKB Pro가 Discourse의 반응형 레이아웃과 싸우는 대신 그 안에서 더 자연스럽게 작동하도록 만드는 것이었습니다.

:puzzle_piece: 더 모듈화된 코드

업데이트의 큰 부분은 또한 코드베이스를 유지보수하기 쉽게 만드는 것이었습니다.

FKB 패널은 사용자 정보, 통계, 배지, 방문자 등을 위한 더 작은 컴포넌트로 분리되었습니다.

주제 목록 카드도 개별 헤더, 본문, 메타, 목록 섹션 컴포넌트로 재구성되었습니다.

이것은 사용자가 보는 것을 반드시 바꾸지는 않지만, 향후 개발을 훨씬 더 쉽게 만듭니다.

요약

FKB Pro v2는 단순한 시각적 업데이트가 아닙니다. 더 나은 반응형 동작, 성능, 캐싱, 접근성 및 유지보수성에 초점을 맞춘 테마의 여러 부분에 대한 상당히 중요한 재작성입니다.

FKB Pro를 사용하고 문제를 보고하거나 개선을 제안해 주신 모든 분들께 감사드립니다. :heart:

> ./support --coffee :heart:

2개의 좋아요

설명으로 인해 모바일에서 레이아웃이 깨지는 문제가 있습니다. 해결 방법을 찾아보았지만 방법을 모르겠습니다. 저만 이런 문제를 겪고 있는 건지 모르겠습니다.

1개의 좋아요

모바일용 scss 수정을 성공적으로 했습니다

/* 설명 텍스트가 줄바꿈되도록 강제 */
.category-heading__content p,
.category-heading__content span,
.category-heading__content div {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
}

그리고 더 좋은 방법이 있을 수도 있겠죠 :rofl:

이것은 핵심 문제처럼 보입니다. :thinking: 기본 테마에서도 저에게도 동일한 문제가 발생합니다.

다만, 이 섹션은 grid로 처리하는 것이 더 적합할 것 같습니다. 다음과 같은 방식입니다:

.category-heading {
  &.--has-logo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-4);
  }

  &__content {
    min-width: 0;

    .badge-category__wrapper {
      max-width: 100%;
    }
  }
}

특히 카테고리 이름이 긴 경우를 제외하고는 가용 공간을 더 안정적으로 처리하는 것 같습니다.

1개의 좋아요