skills.rest
eco2-team
eco2-teamOFFICIAL
Explore all skills by this author →
GitHub

map-feature

Implement a Kakao Maps-based store locator page with search, filters, and detail views.

2|1|Updated Oct 27, 2025
Search Tags:#frontend#autocomplete#map#maps#kakao#location-search
One-click install
npx skills add https://github.com/eco2-team/frontend --skill map-feature
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: map-feature
Source: https://github.com/eco2-team/frontend/tree/main/.claude/skills/map-feature
Command: npx skills add https://github.com/eco2-team/frontend --skill map-feature

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Map feature guide provides a structured blueprint for implementing a map-based UI with Kakao Maps integration, location search, and store category filtering, helping teams align on components and data flows.

Core Features & Use Cases

  • File structure and component layout for a map page, including Map.tsx, MapView, search bar, bottom sheets, and detail sheets.
  • Data flow and API types mapping between location search, suggestions, and location details.
  • Use Case: Build an interactive map page with markers, bottom sheet details, and category filters to help users locate nearby stores.

Quick Start

Start by wiring Map.tsx with Kakao Maps, connect the search bar and bottom sheet components, and implement basic markers.

Frequently Asked Questions about map-feature

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement a Kakao Maps location search feature in a frontend project?▼

Implement a Kakao Maps location search feature by wiring Map.tsx with the Kakao Maps API, connecting a search bar for suggestions, and rendering interactive map markers based on location data.

What is the best way to structure frontend components for an interactive map page?▼

Structure an interactive map page using defined components like MapView, search bar, bottom sheets for details, and detail sheets to align data flow and UI layout across store locations.

Can I use this map feature guide to build store category filters and detail views?▼

Yes, you can use this map feature guide to build store category filters and detail views, as it defines the data flow and API types mapping between location search and location details.

How do I map data flow and API types for a map-based store locator?▼

Map data flow and API types for a store locator by defining integration patterns between location search, autocomplete suggestions, and location details to ensure consistent component communication.

Do I need specific environment setup to integrate Kakao Maps into my web application?▼

You need specific environment setup to integrate Kakao Maps, as the guide defines environment configuration and integration patterns required to properly render map components and services.

What are the limitations when using Kakao Maps for frontend store location features?▼

Limitations when using Kakao Maps for store location features include dependency on Kakao's API for location search and rendering, requiring defined API types and structured data flow to manage markers and filters.

Related Skills

Explore More Software Engineering Skills→
djankiesdjankies

VALIDATION-runtime-checks

Define Zod schemas and validate runtime data with TypeScript types.

Community
Intermediate
StaysrStaysr

store-data-structures

Separate Zustand list arrays and detail maps with reducer-driven updates.

Community
Advanced
Vantoan252003Vantoan252003

map

Provides GPS place search, reverse geocoding and route polyline generation for Flutter map interfaces.

Community
Advanced
marjan-ahmedmarjan-ahmed

react-google-maps

Integrate the Google Maps JavaScript API into React/Next.js apps with @vis.gl/react-google-maps.

Community
Advanced