Resolves #8

[GyeongHoKim]

User description

Close #8

---

PR Type

Enhancement, Tests

---

Description

• Implement kakao-map web component

• Add map context for component communication

• Include comprehensive event handling and map controls

• Add extensive component tests

---

Changes walkthrough 📝

	Relevant files
Enhancement	7 files map.ts Implement Kakao Map web component                                                +413/-0  map-context.ts Create map context for sharing map instance                            +4/-0      index.ts Export map context                                                                              +1/-0      latlng.d.ts Define LatLng type interface                                                          +8/-0      point.d.ts Define Point type interface                                                            +8/-0      index.ts Export map component                                                                          +1/-0      index.ts Add map component exports                                                                +1/-0
Tests	1 files map.component.ts Add comprehensive map component tests                                        +291/-0
Configuration changes	1 files component-index.html Update test environment styles                                                      +13/-1
Dependencies	3 files package.json Add dependency and test scripts                                                    +5/-0      package.json Add npm-run-all dev dependency                                                      +1/-0      pnpm-lock.yaml Update lockfile with new dependencies                                        +271/-0

---

Need help?

Type /help how to ... in the comments thread for any questions about PR-Agent usage.

Check out the documentation for more information.

[Copilot]

Pull Request Overview

This PR resolves issue #8 by adding comprehensive Cypress tests for the Kakao map component and updating context and export modules accordingly.

• Added Cypress tests to verify event handling (map-created, click, dragging, zoom, etc.) in the Kakao map component.
• Introduced a map context via lit's createContext.
• Updated package export indices to include the new map components and context.

Reviewed Changes

Copilot reviewed 13 out of 13 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
packages/kakao-map-components/cypress/src/components/map/map.component.ts	Added event-based Cypress tests for the Kakao map component.
packages/kakao-map-components/src/context/map-context.ts	Added a new context for the Kakao map using lit's createContext.
packages/kakao-map-components/src/context/index.ts	Exported the new map context.
packages/kakao-map-components/src/components/map/index.ts	Exported the Kakao map component.
packages/kakao-map-components/src/index.ts	Updated index exports to include the map component.

Comments suppressed due to low confidence (1)

packages/kakao-map-components/cypress/src/components/map/map.component.ts:7

• [nitpick] The test title 'should fires map-created event when map is created' contains a grammatical error. Consider changing it to 'should fire map-created event when map is created'.

 7 +  it('should fires map-created event when map is created', () => {

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

🎫 Ticket compliance analysis ✅ 8 - PR Code Verified Compliant requirements: Implement a kakao-map web component Add functionality for component communication Include event handling for map interactions Include comprehensive component tests Requires further human verification: Add map controls - while the component supports map type controls, it's not clear if all required map controls (zoom, scale, etc.) are implemented

⏱️ Estimated effort to review: 4 🔵🔵🔵🔵⚪

🧪 PR contains tests

🔒 Security concerns Sensitive information exposure: The appkey for the Kakao Maps API appears to be passed directly as a property to the component in tests. While this might be handled securely in the actual API loader component, ensure the appkey isn't exposed in client-side code or logs, and consider using environment variables for testing rather than hardcoding even in test files.

⚡ Recommended focus areas for review Error Handling The map component lacks error handling for API failures or invalid configurations. Consider adding try/catch blocks and proper error events. } connectedCallback() { super.connectedCallback(); this._container = document.createElement('div'); this._container.id = `${SIGNATURE}_Map_Container`; this._container.style.width = '100%'; this._container.style.height = '100%'; this.appendChild(this._container); if (window.kakao && window.kakao.maps) { this._initializeMap(); } else { const apiLoader = this.closest('kakao-api-loader'); if (apiLoader) { apiLoader.addEventListener('kakao-api-loaded', () => { if (window.kakao && window.kakao.maps) { this._initializeMap(); } }, { once: true }); } else { throw new Error('Kakao Maps API is not loaded'); } } } Memory Leaks Event listeners are added but may not be properly cleaned up in all scenarios, particularly if the component is disconnected before the API is loaded. private _addEventListeners(type: string, handler: Function) { if (!this._map) return; kakao.maps.event.addListener(this._map, type, handler as any); this._eventListeners.set(type, handler as any); } private _removeEventListeners() { if (!this._map) return; this._eventListeners.forEach((handler, type) => { kakao.maps.event.removeListener(this._map!, type, handler); }); this._eventListeners.clear(); } Type Safety Several places use type assertions (!) or non-null assertions without proper validation, which could lead to runtime errors. if (!this.center) return null; if ('lat' in this.center) { return new kakao.maps.LatLng(this.center.lat, this.center.lng); } else if ('x' in this.center) { return new kakao.maps.Coords(this.center.x, this.center.y).toLatLng(); } return null; }

[github-actions]

PR Code Suggestions ✨

[GyeongHoKim]

1. Misspelling on Test nickname

will be fixed

2. Error Handling

will be fixed

3. Memory Leak

It won't be fixed.
kakao-map should be rendered as child component of kakao-api-loader, or rendered after the kakao-api-loaded event.

4. Type safety

will be fixed

[Copilot]

Pull Request Overview

This PR resolves #8 by implementing a Kakao Map web component along with a shared map context and comprehensive tests for event handling and map controls.

• Introduces the KakaoMap web component with map controls and events.
• Adds a map context for component communication.
• Provides extensive component tests to verify proper event handling.

Reviewed Changes

Copilot reviewed 15 out of 15 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/kakao-map-components/cypress/src/components/map/map.component.ts	Adds comprehensive tests covering various map events and properties.
packages/kakao-map-components/src/context/map-context.ts	Sets up a shared map context using Lit's createContext.
packages/kakao-map-components/src/types/errors.ts	Defines custom error types for handling KakaoMap errors.
packages/kakao-map-components/src/types/guards.ts	Implements type guards for LatLng and Point interfaces.
packages/kakao-map-components/src/context/index.ts	Exports map context for ease of use.
packages/kakao-map-components/src/components/map/index.ts	Exports the KakaoMap component.
packages/kakao-map-components/src/index.ts	Updates index exports to include the map component.

[Copilot]

[nitpick] Change 'should fires' to 'should fire' in the test description for grammatical correctness.

Suggested change

	it('should fires proper events when moving location', () => {
	it('should fire proper events when moving location', () => {

[Copilot]

[nitpick] Change 'should fires' to 'should fire' in the test description for grammatical correctness.

Suggested change

	it('should fires proper events when zooming map', () => {
	it('should fire proper events when zooming map', () => {

[Copilot]

[nitpick] Change 'should fires' to 'should fire' in the test description for grammatical correctness.

Suggested change

	it('should fires proper events when clicking map', () => {
	it('should fire proper events when clicking map', () => {