RubyUI를 사용한 SectionHeader 컴포넌트 개발 가이드

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

Ruby on Rails 및 RubyUI 프레임워크를 사용하는 웹 개발자, 컴포넌트 기반 UI 개발에 관심 있는 중급 이상 개발자

핵심 요약

• RubyUI의 Phlex::HTML 기반으로 Ruby로만 구성된 SectionHeader 컴포넌트 개발
• TailwindCSS를 활용한 스타일링과 dark/light 모드 지원
• @title, @href, @label 파라미터를 통해 텍스트 및 버튼 동적 구성 가능

섹션별 세부 요약

1. 초기 설정과 컴포넌트 구조

• section_header.rb 파일 생성, Base 클래스 상속
• Phlex::HTML 기반의 렌더링 패턴 적용
• module RubyUI 범위 내 SectionHeader 클래스 정의

2. 제목 파라미터 추가 및 Typography 활용

• initialize(title:) 메서드로 제목 전달
• Heading(level: 2) 컴포넌트 사용, Typography 그룹에서 생성
• 예시: SectionHeader.new(title: "\"Usuários\")"

3. TailwindCSS 스타일링 적용

• div(class: "border-b border-gray-200 pb-5 mb-5")로 테두리 및 간격 추가
• dark/light 모드 자동 지원 (이미지 결과 참조)

4. 액션 버튼 추가 및 Link/Button 컴포넌트 활용

• href 및 label 파라미터 추가
• Link(href: @href, variant: :primary, size: :lg) 사용 (또는 Button 대체 가능)
• 예시: SectionHeader.new(title: "\"Usuários\", href: new_admin_user_path, label: "Criar Usuário")

5. 확장성 및 개선 방향

• I18n 키를 통해 국제화 지원 가능
• 다른 헤더 유형에 활용 가능 (내부 컴포넌트만 수정)

결론

• RubyUI와 TailwindCSS의 조합으로 pure Ruby 기반의 재사용 가능한 UI 컴포넌트 개발 가능
• Phlex::HTML의 렌더링 패턴과 TailwindCSS 클래스 적용이 핵심
• 국제화 및 확장성을 고려한 파라미터 설계는 실무 적용 시 필수적인 요소
• RubyUI 공식 문서 참조: 추가 예제 및 패턴 확인 권장