“F-NAV for Mobile” 포크 버전 업데이트 안내: 백 버튼, 커스텀 서브메뉴, 가시성 제어 기능 추가. 3.6beta1과 가장 호환성이 좋습니다.
왜 이 포크인가?
- 토픽 페이지에서 일반적인 모바일 앱 UX를 따르는 헤더 “백” 버튼 제공
- 설정 가능한 서브메뉴를 여는 “customMenu” 탭 유형 제공 (여러 목적지로 링크하기에 이상적이며, 우리는 이를 사용하여 미리 채워진 “새 토픽” 링크를 추가하는 데 사용함)
- 탭과 메뉴 항목에 그룹 기반 가시성 추가를 통해 특정 항목을 직원만 볼 수 있게 설정할 수 있음
- 일부 비추천(deprecation) 처리 및 스타일/접근성 개선과 관련된 소규모 수정
여기서 새로 추가된 기능 요약
- 헤더 백 아이콘 (선택 사항)
- 토픽 페이지에서 헤더 홈 로고를 백 화살표로 대체
- 동작: 히스토리가 있으면 뒤로 가기, 없으면 “/”로 라우팅
- 설정으로 토글:
header_back_icon_enabled
- 커스텀 서브메뉴 탭 유형
- 새로운 f_nav_tabs 함수: customMenu
- 새로운 설정: f_nav_submenu_items
- 라벨과 URL(선택적 아이콘)로 메뉴 항목 구성
- 단일 탭에서 여러 페이지에 빠르게 접근하는 데 유용
- 그룹 기반 가시성 제어
- 탭, 서브메뉴 항목, profile_extra_items를 선택된 그룹으로 제한 가능
- 동작:
- 그룹이 비어 있으면 모두에게 표시
- 그룹이 설정되어 있으면 선택된 그룹 중 하나 이상의 회원만 볼 수 있음
- 익명 사용자는 제한된 항목을 볼 수 없음
- 선택 사항: 토픽 페이지에서 내비게이션 바 숨기기
- 설정으로 토글: hide_nav_in_topic
- 압축된 “build” 아티팩트 및 테스트 문서
- builds/ 아래 편의용 빌드 아티팩트 (v1–v5)
- 수동 검증을 문서화한 TESTING_GUIDE.md 및 TEST_RESULTS.md
기존 기능 개선
- F-NAV 항목 및 탭
- 그룹 가시성을 존중하도록 visibleTabs getter 추가
- 새로운 CustomSubmenu 컴포넌트를 FNavItem 흐름에 통합
- 헤더 아바타/프로필 메뉴
- 모바일 뷰 감지를 컴포넌트로 이동하여 동작을 개선하고 경고 해결
- 프로필 추가 항목이 이제 그룹 기반 가시성을 지원
- 스타일링 및 접근성
- 커스텀 서브메뉴와 백 아이콘을 위한 새로운 SCSS
- 일관된 hover/active/focus-visible 상태
- 코어 변수와 일관된 border-radius; 패딩/여백 정제 (예: 백 버튼 패딩을 0으로 설정)
버그 수정 및 유지보수
- 초기화자(initializers)에서 컴포넌트 렌더링으로 체크를 이동하여 site.mobileView 비추천 경고 해결
- 함수를 블록 밖으로 이동하여 렌더링 엣지 케이스 수정
- Discourse 헤더 동작(호버/활성 상태, 불투명도 전환)과 일치시키기 위한 세부 마무리
- 작은 CSS 정리 (예: 백 버튼 패딩이 0인지 확인, 의도치 않은 크기 변경 방지)
고수준 비교 (원본 vs 포크)
- 원본 (main): F-NAV 모바일 탭 + 채팅 선택적 가져오기; 백 버튼이나 커스텀 서브메뉴 없음
- 포크 (feat/home-logo-arrow-back):
- 라우팅 폴백을 갖춘 헤더 백 아이콘 기능 추가
- 설정 가능한 서브메뉴 항목을 가진 “customMenu” 탭 함수 도입
- 탭, 서브메뉴 항목, 프로필 항목에 그룹 제한 가시성 추가
- 선택적으로 토픽 페이지에서 F-NAV 숨김
- a11y 및 인터랙션 상태의 일관성 개선
- 테스트 문서 및 패키지화된 빌드 제공
참고:
- 이 컴포넌트는 Discourse 플러그인 API 레벨 1.14+를 지원하는 최신 Discourse 버전을 대상으로 합니다 (초기화자에 명시됨)
- 그룹 기반 가시성에 의존하는 경우, 먼저 그룹과 멤버십이 구성되었는지 확인하십시오
경고: 저는 코더가 아니며 TC가 완전히 AI로 생성되고 테스트되었으므로 신중하게 테스트해 주세요.
이 훌륭한 컴포넌트를 만들어 주신 Don에게 감사드립니다. Discourse UX/UI에 훌륭한 추가 요소입니다! 