1. Bridge 컴포넌트 통합
Hotwire Native 앱에 네이티브 버튼을 추가하기 위해 bridge_components.dev의 컴포넌트를 활용합니다.
* Swift 파일 추가: ButtonComponent.swift를 Xcode 프로젝트에 복사합니다.
* 컴포넌트 등록: hotwire.registerBridgeComponents(ButtonComponent.self)로 앱에 등록합니다.
2. Stimulus 컨트롤러 설정
네이티브 버튼 동작을 웹 뷰와 연결하기 위해 Stimulus 컨트롤러를 생성하고 설정합니다.
* 컨트롤러 생성: bin/rails g stimulus bridge/button 명령어로 bridge_button 컨트롤러를 생성합니다.
* JavaScript 코드: bridge_components.dev의 button_controller.js를 복사하여 붙여넣습니다. 이 코드는 네이티브 버튼의 이미지 및 동작을 처리합니다.
3. 웹 페이지에 네이티브 버튼 적용
기존 HTML에 Stimulus 컨트롤러와 SF Symbols를 연동하여 네이티브 버튼을 활성화합니다.
* HTML 수정: “게시물 추가” 링크에 data-controller="bridge-button" 및 data-bridge-ios-image="plus" 속성을 추가합니다.
* SF Symbols 활용: SF Symbols 라이브러리에서 원하는 아이콘(예: plus) 이름을 복사하여 data-bridge-ios-image 값으로 사용합니다.
4. 웹 버튼 숨기기
네이티브 버튼 활성화 시 중복되는 웹 기반 버튼을 숨겨 사용자 경험을 개선합니다.
* CSS 추가: application.css에 Hotwire Native 앱 환경에서만 웹 버튼이 보이지 않도록 CSS 규칙을 추가합니다. 이는 네이티브 컴포넌트 로드 시 웹 버튼을 자동으로 숨깁니다.