위치 선택 플러그인

카테고리

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

서브카테고리

웹 개발

대상자

• Storyblok CMS를 사용하는 개발자 및 콘텐츠 편집자
• 중간 난이도 (Storyblok 플러그인 설정, React 기술 필요)

핵심 요약

• Google Maps Geocoding API를 활용해 주소 입력 → 지도 표시 → 좌표 자동 저장 기능을 제공
• Storyblok 커스텀 필드로 통합, 복잡한 워크플로우 없이 사용 가능
• React + Vite 기반의 Frontend Plugin과 Firebase Functions을 활용한 기술 스택

섹션별 세부 요약

1. 개요

• 문제 해결
• 기존 방식에서 좌표 복사/붙여넣기 없이 직접 주소 입력 가능
• 연락처 페이지, 매장 위치 찾기, 이벤트 목록 등의 콘텐츠에 활용 가능
• 설계 원칙
• 사용자 친화적 (검색 → 핀 설정 → 저장)
• Storyblok 편집 경험과 통합 (기본 필드처럼 사용)

2. 구현 방법

• 설치 및 배포
• git clone 후 npm run deploy 명령어로 배포
• Storyblok Personal Access Token 생성 및 권한 부여 필요
• 커스텀 필드 추가
• Storyblok 스페이스 → 컴포넌트 → 커스텀 필드 생성 (플러그인 선택)
• 프론트엔드 코드
• CSS 스타일링: .address-map-iframe, .address-map-text 등의 클래스 사용
• React 컴포넌트: AddressMap 함수로 iframe 표시 및 에러 처리 구현

3. 기술 스택

• Frontend: React + Vite (iframe 기반 Storyblok 플러그인 SDK)
• 백엔드: Firebase Functions (주소 → 좌표 변환)
• 지도 API: Google Maps Geocoding API (Firebase Function을 통해 호출)
• UX 설계: Debounced search, 로딩 인디케이터 포함

4. 주요 기능

• 지도 미리보기: 선택된 위치의 Google Maps iframe 표시
• 상태 관리: React useState로 폼 및 결과 상태 관리
• UI 통합: SbTextField, SbButton 스타일과 일치하는 입력/버튼 구성 요소

결론

• Storyblok 편집 환경에 원활히 통합되도록 설계된 가볍고 효율적인 플러그인
• Firebase Functions과 Google Maps API를 활용해 실시간 좌표 변환 가능
• CSS 스타일링 코드를 적용해 사용자 친화적 UI 구현 권장