로그인한 사용자만 볼 수 있는 카테고리와 특정 그룹만 볼 수 있는 카테고리를 구분하는 방법이 있을까요?
현재는 로그인한 사용자만 볼 수 있는 모든 카테고리 앞의 잠금 아이콘을 CSS로 숨기고 있습니다. 이제 그룹으로 제한된 카테고리 앞에는 그룹 아이콘을 표시하고 싶습니다.
로그인한 사용자만 볼 수 있는 카테고리와 특정 그룹만 볼 수 있는 카테고리를 구분하는 방법이 있을까요?
현재는 로그인한 사용자만 볼 수 있는 모든 카테고리 앞의 잠금 아이콘을 CSS로 숨기고 있습니다. 이제 그룹으로 제한된 카테고리 앞에는 그룹 아이콘을 표시하고 싶습니다.
질문은 이해하지만, 사용 사례에 대해 고민하고 있습니다. 특히 카테고리 볼 수 있는 권한이 있는 사용자들은 그룹이나 로그인 상태와 관계없이 카테고리를 볼 수 있기 때문입니다. 그렇다면 차별화가 어떻게 도움이 될까요? 그런 방법이 없다고 생각하지만, 제 생각이 틀릴 수도 있습니다.
이 사용 사례는 잠금 아이콘의 그것과 동일한 것으로, 내 생각에는 사용자에게 다음과 같은 사실을 상기시키기 위한 것입니다: 여기에 게시하거나 여기서 링크를 공유하면 모든 사람이 접근할 수 없게 된다는 점입니다.
로그인 전용 카테고리에 대해서는 그 같은 상기 기능이 필요 없다고 느낍니다. 제 사이트에서 익명 사용자에게 표시되는 카테고리가 매우 적기 때문입니다. (대신, 공개적으로 표시되는 카테고리에는
아이콘을 붙여, 해당 카테고리가 공개된 인터넷상에 있다는 사실을 사용자에게 상기시킵니다.)
"로그인 필수"보다 더 많은 제한이 있는 카테고리의 경우, 해당 카테고리가 사실상 소수의 독점적 그룹만을 위한 것임을 덜 분명하게 알 수 있습니다. 새로운 사용자는 계정을 처음 만들 때 특정 그룹에 대한 접근 권한을 부여받은 상태일 수 있습니다. 따라서 첫날부터 다른 일부 사용자와는 다른 카테고리 집합을 보게 되지만, 카테고리 이름이나 설명(읽는다면)에 단서가 포함되어 있지 않는 한, 해당 카테고리가 일부 사용자만 볼 수 있는 것인지 알 수 없습니다. 오래된 사용자는 한때 접근 권한을 부여받았던 특정 카테고리가 사실은 모든 사람이 접근할 수 있는 것이 아님을 잊어버릴 수도 있습니다.
요약하자면, 제한된 카테고리에 대해 잠금 아이콘과 같은 간단한 시각적 상기 기능을 적용하는 것이, 거의 모든 카테고리가 로그인 전용인 사이트에서 거의 모든 카테고리에 해당 기능을 적용하는 것보다 나에게 더 합리적으로 느껴집니다.
최근 신뢰 수준이 더 높은 사용자에게만 접근을 허용하는 카테고리를 만들었는데, 이제 사람들이 해당 주제들이 닫힌 것으로 오해하고 있습니다. 닫힌 상태와 접근 제한은 다른 개념인데, 동일한 아이콘을 사용하다 보니 혼란을 주고 있습니다. 잠금 아이콘은 일반적으로 다른 사람에게 숨겨져 있다는 의미보다는, 현재 보고 있는 사용자가 전체 접근 권한이 없음을 나타내는 것으로 이해됩니다.
그동안 각 카테고리 앞에 접근 권한 수준을 표시하기로 결정했습니다. 공개(익명 접근) 카테고리는 지구본 아이콘, 로그인한 사용자가 접근할 수 있는 카테고리는 “그룹” 아이콘, 기타 제한된 카테고리는 “친구” 아이콘을 사용하고 있습니다.
이것을 어떻게 구현하고 계신가요? 정말 좋은 아이디어라고 생각하는데, 저희 사이트가 공개 카테고리 몇 개를 갖추기 위해 조금씩 나아가고 있는 만큼, 그 카테고리에도 비슷한 기능을 적용해 보고 싶습니다. 지구본 아이콘이 정말 마음에 드네요!
아래와 같은 효과를 얻고 싶습니다:
everyone으로 설정된 카테고리에는 trust_level_0 접근이 허용된 카테고리에는 아이콘 미설정이 TC가 처리할 수 있을 거야, 네이선.
네, 저도 그렇게 쓰고 있습니다. svg-icons 필드에 users, user-friends를 입력하고, 공개 접근에 사용할 심볼을 추가하세요(지구본의 경우 Freepik의 아이콘을 사용하고 있으며, 테마 컴포넌트에 업로드한 스프라이트를 통해 Discourse에 추가했습니다).
테마 컴포넌트에 다음 CSS를 추가하여 자물쇠 아이콘을 숨깁니다:
// no lock icon for private categories
.category .badge-category.clear-badge.restricted .d-icon-lock,
.badge-category.clear-badge.restricted .d-icon-lock,
.category-list .category-text-title .d-icon-lock,
.category-box-heading .d-icon-lock {
display:none;
}
여러분의 아이디어를 변형하여, TL_0에게 접근이 가능한 카테고리(수동으로 선택)에만 잠금 아이콘을 선택적으로 숨길 수 있는 방법을 생각해냈습니다.
이를 위한 편리한 CSS 클래스가 없으므로, 대신 hover(title)와 링크(href) 속성을 대상으로 해야 하며, 잠금 아이콘을 숨기고자 하는 각 카테고리에 대해 이 작업을 수행해야 합니다:
// ux 카테고리의 잠금 아이콘을 숨깁니다
[title = "ux"], [href = "/c/ux/9"] {
.d-icon {
display: none;
}
}
물론 이는 Category Icons Component의 아이콘과 충돌할 수 있지만, 해당 카테고리에 대해 .d-icon 대신 .d-icon-lock(또는 사용 중인 아이콘)을 대상으로 지정하면 이를 완화할 수 있습니다.
일부 아이콘을 누락하고 있다는 것을 발견한 후 해당 CSS를 수정했습니다. 이제 훨씬 잘 작동하지만, 카테고리 구조를 변경하면 쉽게 깨질 수 있습니다.
사이드바와 함께 사용할 수 있도록 이 부분을 약간 수정했습니다:
// hides lock icons for ux category
.sidebar-section-link-ux .prefix-badge {
display: none;
}
.category-ux .list-controls, [href = "/c/ux/9"] {
.d-icon-lock, {
display: none;
}
}
카테고리 선택 드롭다운 메뉴에 대해 하나의 추가 타겟을 추가했습니다:
.category-ux .list-controls, [href = "/c/ux/9"], [data-value = "9"] {
.d-icon-lock, {
display: none;
}
}
또한, 채팅 채널에 대해서는 [href *= "chat/channel/9/"]를 제안합니다.