/about 페이지에 그룹 추가하기

awesomerobot · 11월 4, 2024, 9:24오후


	요약	Discourse의 /about 페이지에 더 많은 그룹을 추가합니다
	미리보기	Theme Creator
	저장소	https://github.com/discourse/discourse-add-groups-to-about-component/
	설치 가이드	테마 또는 테마 컴포넌트 설치 방법
	Discourse 테마를 처음 사용하시나요?	Discourse 테마 사용 입문가 가이드

이 테마 컴포넌트 설치

이 컴포넌트를 사용하면 새로운 /about 페이지에 손쉽게 더 많은 그룹을 추가할 수 있습니다. 해당 리디자인에 대한 자세한 내용은 여기서 확인하세요: New and improved About page at /about is live

이 컴포넌트에는 다음과 같은 설정이 포함되어 있습니다:

about groups: about 페이지에 표시할 그룹입니다. 멤버가 0인 그룹은 자동으로 숨겨집니다.
show initial members: 각 그룹에서 초기 로드 시 표시할 멤버 수입니다. 나머지 멤버는 “더 보기” 버튼 뒤에 숨겨집니다.
capitalize names: about 페이지에서 그룹 이름의 첫 글자를 대문자로 표시합니다.
order additional groups: 가나다순(기본값), 생성 순서, 또는 about groups 설정 순서로 정렬합니다 — 기존 관리자 및 모더레이터 그룹의 순서에는 영향을 미치지 않습니다.
show group description: 그룹 제목 아래에 그룹 설명을 표시합니다 (그룹 설정에서 가져옴).

Don · 11월 5, 2024, 8:12오전

정말 훌륭해요, 정말 감사합니다!

그룹 전체 이름을 사용할 수 있는 새 설정을 추가할 수 있을까요? 유니코드 문자를 표시할 수 있으면 좋겠지만, unicode_usernames 사이트 설정은 활성화하고 싶지 않아요.

Richie · 11월 5, 2024, 8:26오전

정말 좋습니다, 감사합니다 @awesomerobot

이 제안에 동조합니다.

저는 Challenges Committee라는 전체 이름을 가진 group-challenges-cmt라는 그룹이 있는데, /about 페이지에서는 group-challenges-cmt로 표시되어서 별로 좋지 않아 보입니다

참고로, Capitalize the names of the groups on the about page 옵션을 체크하면 group-challenges-cmt가 Group-Challenges-Cmt로 변경된다는 것이 맞나요? 아니면 그 체크박스는 그룹 이름의 첫 글자만 대문자로 변경해야 하는 건가요?

이상하게도, about 페이지에 trust_level_4 그룹을 추가하면 프론트엔드에는 Trust Level 4로 표시됩니다

그래도 정말 좋습니다, Kirs @awesomerobot님께 정말 감사합니다. 몇 년 전에 작성했던 JS 코드를 이제 제거할 수 있게 되었습니다

Richie · 11월 5, 2024, 8:32오전

참고로 몇 가지 화면을 첨부합니다.

관리자 페이지에서 그룹 이름이 어떻게 보이는지 확인해 보세요:

그리고 프론트엔드에서 그룹 이름이 어떻게 보이는지 확인해 보세요:

@awesomerobot 님, 이 테마에 대해 어느 정도까지 진행하시길 원하시나요? 기능 요청도 받아들이고 계신 건가요?

그룹을 정렬할 수 있는 방법이 있으면 좋겠습니다. 데이터베이스 ID 순서일 수도 있겠다는 생각에 다른 순서로 추가해 보았지만 아무런 변화가 없어서 알파벳 순서로 정렬하는 것으로 추정합니다.

그룹 멤버의 정렬도 수정할 수 있을까요?

페이지 상단의 관리자(Admins)는 3열 너비로 표시되는데, 추가된 그룹들은 모두 2열 너비로 표시됩니다.

그리고 다시 한 번 말씀드리지만:

tobiaseigen · 11월 5, 2024, 5:50오후

정말 훌륭해요! Kris, 감사합니다. 사이트 구조를 사람들이 쉽게 파악할 수 있도록 도와주는 정말 좋은 방법이라고 생각해요. 사이트의 그룹 페이지에 있는 많은 그룹은 큰 의미가 없고 다소 혼란스러운 반면, 소개 페이지는 더 세심하게 큐레이션된 공간이 될 수 있거든요.

이 기능을 언젠가 코어에 통합할지 고민이 됩니다. 피드백을 몇 가지 수집해 보았습니다:

테마 구성 요소로서 이 기능에는 다음과 같은 한계가 있습니다:

설정 UI가 /admin/config/about에 있는 것이 아니라 테마 구성 요소 안에 있습니다.
소개 페이지에 표시되면 안 되는 그룹을 제외하기 위한 about page hidden groups 설정을 따르지 않습니다. (참조)
포함된 그룹의 스타일링(예: 열 개수)이 관리자 및 모더레이터 목록과 다르며, 소개 페이지 스타일링을 변경할 때마다 업데이트해야 합니다.

이미 공유된 피드백이 있습니다:

슬러그 대신 그룹 이름을 표시해야 합니다.
일부 경우 자동 대문자 변환이 적절해 보이지 않습니다.
그룹을 정렬할 수 있는 기능을 추가해야 합니다.

여기에 그룹 메타데이터의 더 많은 스냅샷을 제공하는 것이 도움이 될 것 같다고 생각합니다. 그룹 이름 옆에 정보 버튼을 숨겨서 제공할 수도 있겠네요?

설명
그룹 소유자
그룹 권한
그룹의 멤버 수
그룹 페이지 링크

Richie · 11월 6, 2024, 2:10오후

그렇게 하거나, 그룹 제목을 그룹 자체로 연결되는 클릭 가능한 링크로 만드는 것도 방법입니다.

awesomerobot · 11월 7, 2024, 1:30오후

업데이트 소식입니다!

요청하신 내용이 예상보다 훨씬 빠르게 처리되었습니다 하지만 사실 그럴 줄은 알았어야 했죠.

처음에 이 기능을 구현하지 않은 이유는 추가 요청(request)을 피하고 싶었기 때문이었지만… 어쩔 수 없는 것 같습니다.

이 테마 컴포넌트의 작동 방식은 테마 설정의 그룹 ID를 사이트 서비스(this.site.groups)의 해당 그룹 ID와 매칭시키는 것입니다 — 여기에는 ID와 이름(name)은 포함되어 있지만 전체 이름(full name)은 없습니다…

그 후 이름이 /g/${name}/members 엔드포인트에 전달되는데… 여기에는 그룹 멤버가 포함되어 있지만 전체 이름은 역시 없습니다…

따라서 전체 이름을 가져오려면 /g/${name}으로 또 다른 요청을 보내야 합니다.

해당 체크박스는 각 단어의 첫 글자를 대문자로 만드는 간단한 CSS인 text-transform: capitalize를 활성화합니다.

다만 ::first-letter를 완전히 잊고 있었는데, 이걸 대신 사용할 수 있겠더라고요. 그래서 그쪽으로 변경했습니다… 이제 기본 대문자 규칙과 더 일관성이 있을 것입니다.

혹시 궁금해하시는 분이 계실까 봐 설명을 드리자면, 이 대문자 처리 부분을 포함시킨 이유는 Trust Level 그룹과 같은 자동 그룹에는 full_name 필드가 없고 항상 소문자로 표시되기 때문입니다. 우리가 얼마나 엉켜버렸는지요

컴포넌트에서 언더스코어(_)는 제거했지만 대시(-)는 제거하지 않았습니다… 이번 업데이트에서는 둘 다 처리할 것입니다 (단, name에만 적용되며 full_name에는 적용되지 않습니다).

다음 옵션을 가진 설정을 추가했습니다:

알파벳 순서
생성 순서
테마 설정 순서

참고로 이는 추가된 그룹의 순서에 관한 것이며, 관리자/모더레이터에는 영향을 주지 않습니다 — 이들은 항상 가장 먼저 표시됩니다.

아 네, Discourse에는 모더레이터와 관리자 그룹에만 적용되는 CSS가 있어 수정을 추가했습니다.

설명과 그룹 페이지 링크를 추가하는 것은 간단한 변경 사항이므로, 그 부분을 추가했습니다 (설명은 기본적으로 비활성화되어 있지만 설정에서 사용할 수 있습니다).

그룹 소유자는 표시할 수 있지만, 현재는 코어 컴포넌트인 AboutPageUsers를 재사용하고 있습니다 — 그리고 사용자 아바타에 소유자 플레어(owner flair)를 표시하려면 이 컴포넌트를 수정해야 합니다 (플레어가 표시되는 가장 좋은 위치라고 생각합니다).

이 컴포넌트는 복잡성이 빠르게 증가하고 있으므로, 누군가 특정 필요에 의해 요청하기 전까지는 다른 요청은 보류할 예정입니다.

tobiaseigen · 11월 7, 2024, 3:42오후

정말 멋지네요! 테마 컴포넌트로 얼마나 많은 것을 이룰 수 있는지 놀랍습니다.

사람들이 왜 이런 그룹을 포함하는지 모르겠네요.. 아마 대소문자를 무시하고 소문자로 허용하도록 하면 될 것 같습니다.

과거에 이러한 그룹에 대한 전체 이름(full name)을 요청한 적이 있었는지 궁금하네요 - 왜 이미 그런 기능이 없는지 모르겠습니다.

Richie · 11월 7, 2024, 4:03오후

정말 미쳤어요

며칠 전의 단순한 질문이 어떻게 모든 면에서 완벽한 풀 블로운 테마로 발전한 거예요?!??

놀라워요, 정말로 놀라워요

Kris @awesomerobot 님, 감사합니다

awesomerobot · 11월 7, 2024, 5:17오후

가장 흔한 경우는 4단계 신뢰 등급(Trust Level 4)을 표시하는 것인데, 이를 통해 일부 관리자 권한을 얻기 때문입니다.

tobiaseigen · 11월 7, 2024, 5:30오후

네, 그 점은 알 수 있습니다. 다만 신뢰 수준 이름과 설명은 수정할 수 없으므로, 해당 사용자들에게 새로운 그룹을 만들고 tl4 사용자를 포함하되, 커뮤니티에 맞는 이름, flair(배지) 및 설명을 부여하도록 제안하는 것이 좋습니다.

또한 about 페이지의 신뢰 수준 그룹에서 이상한 점을 하나 발견했습니다. 항상 그런 것은 아니었지만, 그룹 소속이 올바르게 표시되지 않는 경우가 있었습니다. 저는 관리자이므로 실제로는 tl2에 속해 있음에도 불구하고 가끔 tl0에 표시되기도 합니다. 또한 저는 관리자이므로 신뢰 수준이 무의미한데도 불구하고 아예 거기에 표시되는 것도 다소 이상합니다. 하지만 이는 Discourse의 신뢰 수준 시스템과 그 작동 방식에 따른 특이점입니다.

Don · 11월 7, 2024, 5:47오후

저는 TL3를 위해 이 작업을 설정했습니다. 새로운 그룹을 생성하고 Discourse Automation을 사용하여 Regular 배지를 New TL3 그룹과 동기화했습니다.

네, 저도 그걸 알아차렸습니다. 처음에는 CSS로 관리자를 숨겼지만 레이아웃이 약간 깨져서 ~~대신 자동화로 동기화되도록 Regular 배지를 제거했습니다. 나중에 자동으로 다시 추가될지 모르겠습니다. Hopefully not.~~ 네, 자동으로 다시 추가되었기 때문에 이제 CSS가 작동합니다.

또한 JSON에서 그룹 멤버가 내림차순으로 정렬되는 것도 발견했습니다. 무작위로 섞거나 활동 순으로 설정할 수 있으면 좋겠습니다. 예를 들어 ?order=last_posted_at 또는 ?order=last_seen_at 같은 방식으로요.

Richie · 11월 7, 2024, 6:54오후

저희 커뮤니티에서 그렇게 하는 이유도 바로 그 때문입니다.

동의합니다.

/about 페이지에 표시되는 신뢰 등급 4 멤버 목록에서 관리자 팀 멤버를 숨기기 위해 CSS를 조금 적용했습니다.

이렇게 하면 정말 그 TL4 멤버들에게만 조명이 비추게 되는데, 그들은 커뮤니티에 대한 기여로 감사와 축하를 받아 마땅한 사람들이기 때문입니다:

또한 설정에서 체크했을 때 trust level 4가 Trust level 4로 표시되는 것도 발견했습니다.

제 OCD가 이걸 좋아하지 않았습니다. 다른 모든 그룹은 각 단어의 첫 글자가 대문자였거든요. 그래서 Trust level 4를 Trust Level 4로 변경하는 CSS 줄을 하나 더 추가했습니다.

이제 모든 것이 완벽할 수 있는 만큼 완벽해졌습니다.

다시 한번 @awesomerobot님께 감사드립니다 - 정말 좋습니다.

Richie · 11월 7, 2024, 6:55오후

참고로, 여기서는 모든 멤버가 어떤 기준으로 정렬되고 있나요?

데이터베이스의 user_id 순서인가요?

awesomerobot · 11월 12, 2024, 2:13오후

좋은 질문이네요. 실제로는 사용자 이름의 역순 알파벳순으로 정렬되어 있는 것 같은데… 그렇게 하면 큰 의미가 없으니, 전체 그룹 페이지의 멤버 목록과 동일한 알파벳순으로 변경하는 작은 업데이트를 추가할 예정입니다.

Richie · 11월 12, 2024, 2:51오후

관리자 순서를 다시 정하는 것은 여기서는 범위를 벗어난 것 같습니다

Kris님 감사합니다. 이 업데이트는 Trust Level 4 사용자 그룹의 순서를 다시 정한 것 같지만, 그 아래 그룹은 그렇지 않은 것 같네요?

Don · 11월 12, 2024, 4:59오후

원래 소개 페이지에서는 관리자, 모더레이터와 같은 그룹이 마지막으로 확인된 시간(last seen at) 기준으로 정렬됩니다.

저는 여기서 제안했습니다.

원래 그룹과 사용자 정의 그룹의 순서가 일관되도록 유지하기 위해 이와 유사한 방식을 사용하는 것이 좋을 것 같습니다.

Richie · 11월 12, 2024, 7:18오후

그런데 순서가 계속 바뀌면 일관성이 없지 않나요?

Heliosurge · 1월 1, 2025, 7:05오후

정말 훌륭한 컴포넌트입니다. 그룹 페이지의 일부 개선에도 활용할 수 있을 것 같아요. 접을 수 있는 헤더를 추가하여 그룹을 카테고리별로 정리하는 방식이죠.

Richie · 2월 24, 2025, 7:31오후

현재 Discourse 3.5.0.beta1-dev(e26a1175d7)을 실행 중이며, 이 테마의 최신 버전이 설치되어 있습니다.

정상 작동 여부 및 버그 체크를 해 주실 수 있을까요?

제 설정은 다음과 같습니다:

소개 페이지에 두 개의 그룹이 추가된 것을 확인하실 수 있습니다:

trust_level_4
group-challenges-cmt

이 그룹들의 가시성에 예상치 못한 동작이 나타나고 있습니다.

관리자는 소개 페이지에서 두 그룹 모두를 볼 수 있습니다:

비관리자는 소개 페이지에서 trust_level_4 그룹만 볼 수 있습니다:

로그아웃된 사용자는 소개 페이지에서 어떤 그룹도 볼 수 없습니다.

이 문제를 다른 원인이 유발하고 있는지 확인하기 위해 불필요한 방향으로 깊이 파고들기 전에(많은 양의 사용자 정의 CSS가 적용되어 있습니다), 제발 누가 제발 정상 작동 여부를 확인해 주셔서 제 환경에서는 정상적으로 작동하는지 확인해 주실 수 있을까요?

글		댓글	조회수
Improving the Groups page for 1.7 Feature feedback	70	11320	1월 11, 2017
Adding more groups to the `/about` page Development about-page	1	186	11월 4, 2024
Additional groups not visible on /about page Bug about-page	19	624	6월 16, 2025
Re-order the groups list UX groups	17	417	8월 27, 2026
Give /groups and /tags some love! UX	16	1936	5월 30, 2021

/about 페이지에 그룹 추가하기

Related topics