로그인 리다이렉트 및/또는 그룹 페이지 배너 컴포넌트

커스터마이징 테마 컴포넌트
1

이 컴포넌트는 로그인 후 사용자가 원하는 어디로든 리다이렉트할 수 있게 해 주며, 그룹( /g ) 페이지에 환영 배너를 표시할 수도 있습니다.

이 테마 컴포넌트 설치

두 기능이 독립적으로 작동하도록 구성되어 있어 원하는 곳으로 리다이렉트하거나, 단순히 그룹 페이지에 배너만 표시하는 용도로만 사용할 수 있습니다. 기본 동작은 새 사용자를 그룹 페이지로 리다이렉트하여, 커뮤니티 참여를 돕기 위해 그룹 가입을 독려하는 환영 배너를 보여주는 것입니다.

image
image1132×736 161 KB

이 컴포넌트를 사용하여 특정 신뢰 수준(Trust Level) 이하의 사용자를 로그인 시 특정 페이지로 리다이렉트하거나, 사용자가 선택한 그룹 수 미만으로 가입한 사용자를 대상으로 할 수도 있습니다.

First Login Redirect

그룹 가입 이력이 없는 사용자를 사용자 정의 페이지로 리다이렉트하고 사용자 정의 가능한 환영 배너를 표시하는 Discourse 테마 컴포넌트입니다.

주요 기능

  • 스마트 리다이렉트 - 그룹 가입 이력이 없는 사용자를 로그인 시 사용자 정의 페이지로 리다이렉트
  • 사용자 정의 가능한 배너 - 그룹 페이지에 표시되는 다채로운 환영 배너
  • 완전 사용자 설정 가능 - 리다이렉트와 배너를 독립적으로 활성화/비활성화
  • 그룹 기반 로직 - 사용자가 어떤 그룹이든 가입하면 리다이렉트 중단
  • 신뢰 수준 인식 - 배너 표시 여부를 신뢰 수준별로 제한 가능
  • 무지개 그라데이션 - 시선을 사로잡는 6색 그라데이션 배경 (단색 전환 옵션 포함)
  • 모바일 반응형 - 배너가 모바일 화면에 자동 최적화

설치 방법

  1. Discourse 관리자 콘솔에서 Customize → Themes → Components로 이동하고 Install을 클릭합니다.

  2. From a Git repository를 선택하고 아래 주소를 붙여넣습니다:

    https://github.com/focallocal/first-login-redirect

  3. 설치完成后, 해당 컴포넌트를 활성 테마에 추가합니다.

작동 방식

리다이렉트 로직

  • 사용자가 어떤 그룹의 멤버인지 확인
  • 홈페이지로 이동하는 시점 감지
  • 설정된 URL(기본값: /g)로 리다이렉트
  • 사용자가 어떤 그룹이든 가입하면 리다이렉트 중단
  • 배너와 독립적으로 비활성화 가능

환영 배너

  • 기본적으로 그룹 인덱스 페이지(/g)에 표시
  • 신뢰 수준 설정에 따라 표시 여부 제어
  • 리다이렉트와 독립적으로 비활성화 가능
  • 사용자가 신뢰 수준 1(TL1)에 도달하면 자동으로 숨김
  • before-groups-index 아웃렛을 사용하여 그룹 목록 상단에 배치

사용자 설정

테마 설정 (관리자 패널)

image
image777×760 16.1 KB

모든 사용자 설정은 코드를 수정하지 않고 Discourse 관리자 패널에서 수행할 수 있습니다!

  1. Admin → Customize → Themes로 이동
  2. 이 컴포넌트를 포함하는 테마를 클릭
  3. Settings로 이동하여 “First Login Redirect” 섹션을 찾음

사용 가능한 설정:

리다이렉트 설정:

  • Enable Redirect: 리다이렉트 기능 켜기/끄기 (기본값: true)
  • Min Groups Required: 리다이렉트가 중단되기 전에 사용자가 가입해야 하는 사용자 생성 그룹 수 (기본값: 1)
    • 자동 그룹(예: trust_level_0, everyone)은 계산에 포함되지 않음
  • Redirect URL: 그룹 미가입 사용자를 보낼 위치 (기본값: /g)
    • 예: /g (그룹), /categories, /about, /latest

배너 설정:

  • Show Banner: 배너 켜기/끄기 (기본값: true)
  • Min Trust Level: 배너를 볼 수 있는 최소 신뢰 수준 (0-4, 기본값: 0)
  • Max Trust Level: 배너를 볼 수 있는 최대 신뢰 수준 (0-4, 기본값: 4)
  • Banner Heading: 주요 큰 텍스트
  • Banner Subheading: 설명용 작은 텍스트

타이포그래피:

  • Heading Font Size: 제목 글자 크기 (기본값: 2.5em)
  • Subheading Font Size: 부제목 글자 크기 (기본값: 1.25em)
  • Text Shadow Enabled: 가독성을 위한 텍스트 그림자 켜기/끄기
  • Text Glow Enabled: 외부 글로우 효과 켜기/끄기

색상:

  • Use Gradient: 그라데이션 활성화/비활성화 (비활성화 시 단색 사용)
  • Gradient Color 1-6: 그라데이션의 각 색상 사용자 정의
    • 기본값: 분홍 → 주황 → 노랑 → 초록 → 청록
    • 단색 사용하려면 “Use Gradient”를 OFF로 설정하고 Color 1 사용

레이아웃:

  • Banner Padding: 배너 내부 여백 (기본값: 3rem 2rem)
  • Border Radius: 모서리 둥글기 (기본값: 12px, 사각형이면 0 사용)

image
image727×532 9.53 KB

image
image684×562 11.1 KB

사용 예시

TL0(신규 사용자)에만 표시:
Min Trust Level = 0, Max Trust Level = 0으로 설정

관리자를 제외한 모든 사람에게 표시:
Min Trust Level = 0, Max Trust Level = 3으로 설정

단색 배너:
“Use Gradient”를 OFF로 전환하고 Color 1을 원하는 색상(예: 주황색의 경우 #FF5722)으로 설정

2색 그라데이션:
“Use Gradient”를 ON으로 전환하고 색상 1-3을 하나의 색상, 색상 4-6을 다른 색상으로 설정

더 큰 텍스트:
제목은 3em, 부제목은 1.5em으로 설정

효과 없음:
평탄한 텍스트를 위해 “Text Shadow”와 “Text Glow”를 모두 비활성화

리다이렉트 비활성화 (배너만 사용)

다음 파일을 삭제하거나 주석 처리하세요:
javascripts/discourse/api-initializers/first-login-redirect.js

신뢰 수준 요구 사항 변경

두 초기화 파일(initializer)에서 다음을 변경하세요:

currentUser.trust_level === 0

아래로 변경:

currentUser.trust_level <= 1  // TL0 및 TL1

기술적 세부 사항

  • API 버전: 1.8.0 (최신 Discourse API)
  • 컴포넌트 유형: 템플릿 태그가 있는 Glimmer 컴포넌트
  • 플러그인 아웃렛: before-groups-index
  • 호환성: Discourse 2.8.0 이상

문제 해결

Q: 리다이렉트가 작동하지 않습니다
A: 브라우저의 sessionStorage를 지우고 신뢰 수준 0(TL0) 계정으로 새로 테스트해 보세요

Q: 테스트 중 배너가 표시되지 않습니다
A: /g 루트에 있는지, TL0 사용자 또는 관리자에서 설정한 값으로 로그인되어 있는지 확인하고, 브라우저 콘솔에서 오류를 확인하세요.

Q: 리다이렉트 루프가 발생합니다
A: sessionStorage 체크가 이를 방지해야 합니다. 발생 시 브라우저 캐시와 sessionStorage를 지워주세요.

라이선스

MIT — Public Happiness Movement

1개의 좋아요
Redirect to topic on first login?
How to redirect when login