@pop-ui/core 0.0.36 → 0.0.39

package/dist/types/index.d.ts

@@ -40,6 +40,15 @@ export declare const DatePicker: ({ size, type, withTime, ...props }: IDatePicke
 
 export declare const Dropdown: ({ label, labelPosition, size, required, tooltip, tooltipPosition, errorMsg, description, ...props }: IDropdownProps) => JSX.Element;
 
+export declare const getMarkerHTML: (data: TMarkerData) => string;
+
+export declare interface IBaseMarkerData {
+    id: string;
+    position: ICoord;
+    type: TMarkerType;
+    onClick?: (id: string) => void;
+}
+
 declare interface IButtonProps extends Omit<ButtonProps, 'variant' | 'styles'> {
     onClick?: () => void;
     size?: TButtonSize;
@@ -83,6 +92,11 @@ declare interface ICheckboxProps extends CheckboxProps {
     size?: 'sm' | 'md' | 'lg';
 }
 
+export declare interface IClusterMarkerData extends IBaseMarkerData {
+    type: 'cluster';
+    count: number;
+}
+
 declare interface ICommonTextFieldProps {
     label?: string;
     labelPosition?: 'top' | 'left';
@@ -97,6 +111,11 @@ declare interface ICommonTextFieldProps {
     onClear?: () => void;
 }
 
+export declare interface ICoord {
+    latitude: number;
+    longitude: number;
+}
+
 declare interface IDatePickerProps extends DatePickerInputProps {
     size?: 'sm' | 'md' | 'lg';
     type?: 'default' | 'multiple' | 'range';
@@ -122,13 +141,76 @@ declare interface IImageUploaderProps extends DropzoneProps {
     onClear?: () => void;
 }
 
+export declare interface ILocation {
+    latitude?: number;
+    longitude?: number;
+}
+
 export declare const ImageUploader: ({ width, height, defaultMsg, file, onDrop, showClearButton, onClear, ...props }: IImageUploaderProps) => JSX.Element;
 
+export declare interface IMapInfoProps {
+    /** Shop/store address (required) */
+    address: string;
+    /** Latitude coordinate (required) */
+    latitude: number;
+    /** Longitude coordinate (required) */
+    longitude: number;
+    /** Shop/store name (required) */
+    shopTitle: string;
+    /** Naver Cloud Platform Client ID (required) */
+    naverClientId: string;
+    /** Custom direction URL (optional, defaults to Naver Map search) */
+    directionUrl?: string;
+    /** Custom marker image URL (optional) */
+    markerImageUrl?: string;
+    /** Direction button label (default: '길찾기') */
+    directionLabel?: string;
+    /** Toast message when address is copied (default: '주소 복사 완료') */
+    addressCopiedMessage?: string;
+    /** Callback when map preview is clicked (for expanding to full view) */
+    onExpandRequest?: () => void;
+    /** Total height of the component (default: 200) */
+    height?: number;
+    /** Callback when address bar area is clicked */
+    onClickMap?: () => void;
+}
+
+export declare interface IMapOptions extends Partial<naver.maps.MapOptions> {
+    width?: string | number;
+    height?: string | number;
+}
+
+export declare interface IMapProps {
+    options?: IMapOptions;
+    onLoad?: (mapRef: IMapRef) => void;
+}
+
+export declare interface IMapRef {
+    map: naver.maps.Map | null;
+    addMarker: (data: TMarkerData) => naver.maps.Marker | null;
+    updateMarker: (id: string, updates: Partial<TMarkerData>) => void;
+    clearMarkers: () => void;
+    panTo: (coord: ICoord) => void;
+    fitBounds: (coords: ICoord[]) => void;
+}
+
 declare interface IModalProps extends ModalProps {
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     width?: number;
 }
 
+export declare interface INaverMapContextValue {
+    naver: typeof naver | null;
+    createMap: (containerRef: React.RefObject<HTMLDivElement | null>, options: naver.maps.MapOptions) => naver.maps.Map | null;
+    maps: Record<string, naver.maps.Map | null>;
+}
+
+export declare interface INaverMapProviderProps {
+    clientId: string;
+    language?: 'ko' | 'en';
+    children: React.ReactNode;
+}
+
 declare interface IPaginationProps extends HTMLAttributes<HTMLDivElement> {
     currentPageIdx: number;
     rowsPerPage?: number;
@@ -137,9 +219,34 @@ declare interface IPaginationProps extends HTMLAttributes<HTMLDivElement> {
     onPageChange?: (e: number) => void;
 }
 
+export declare interface IPiMarkerData extends IBaseMarkerData {
+    type: 'pi' | 'pi-expanded';
+    title: string;
+    icon?: string;
+    address?: string;
+}
+
+export declare interface IPinMarkerData extends IBaseMarkerData {
+    type: 'pin';
+    name: string;
+    icon?: string;
+}
+
+export declare interface IPopdealMarkerData extends IBaseMarkerData {
+    type: 'popdeal';
+    title: string;
+    price: number;
+    discountRate?: number;
+    originalPrice?: number;
+    category?: string;
+    active?: boolean;
+}
+
 export declare interface IPopUiProviderProps {
     children: default_2.ReactNode;
     defaultTheme?: TThemeMode;
+    /** Naver Cloud Platform Client ID for Map components */
+    naverClientId?: string;
     /** Notifications 표시 위치 */
     notificationPosition?: NotificationsProps['position'];
     /** 동시에 표시되는 최대 알림 수 */
@@ -210,8 +317,35 @@ declare interface ITooltipProps extends TooltipProps {
     content: string;
 }
 
+export declare interface IUseLocationOptions {
+    isActive: boolean;
+    errorMessage?: string;
+    errorDescription?: string;
+}
+
+/**
+ * Naver Maps Marker Clustering utility
+ * Creates clustered markers when multiple markers are close together
+ *
+ * This is adapted from Naver's official marker clustering library.
+ * Some legacy patterns are preserved for compatibility.
+ */
+export declare function makeMarkerClustering(naver: any): any;
+
+declare const Map_2: {
+    ({ options, onLoad }: IMapProps): JSX.Element;
+    displayName: string;
+};
+export { Map_2 as Map }
+
+export declare const MapInfo: ({ onClickMap: onClickMapArea, address, markerImageUrl, shopTitle, directionUrl, latitude, longitude, naverClientId: naverClientIdProp, onExpandRequest, height, directionLabel, addressCopiedMessage, }: IMapInfoProps) => JSX.Element;
+
+export declare const markerStyles = "\n  /* Common marker styles */\n  [class$=\"marker\"] {\n    user-select: none;\n  }\n\n  /* Pin Marker */\n  .pin-marker {\n    position: relative;\n    z-index: 10;\n    transform: translate(-50%, -100%);\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n  }\n\n  .pin-marker-name {\n    min-width: max-content;\n    color: #1A1A1A;\n    text-align: center;\n    font-weight: 700;\n    font-size: 14px;\n    line-height: 1.4;\n    text-shadow:\n      -2px -2px 0 white,\n      2px -2px 0 white,\n      -2px 2px 0 white,\n      2px 2px 0 white;\n  }\n\n  /* Popdeal Marker */\n  .popdeal-marker {\n    transform: translate(-50%, -100%);\n    padding: 10px 16px;\n    width: fit-content;\n    max-width: 210px;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap: 4px;\n    transition: border-color 0.2s ease-in-out;\n    word-break: keep-all;\n    background: white;\n    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12);\n    border-radius: 12px;\n    color: #3D3D3D;\n  }\n\n  .popdeal-marker:hover {\n    z-index: 10;\n    filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.12));\n  }\n\n  .popdeal-marker::after {\n    content: \"\";\n    display: block;\n    width: 12px;\n    height: 12px;\n    position: absolute;\n    bottom: -7px;\n    left: 50%;\n    right: 50%;\n    background: white;\n    transform: translate(-50%) rotate(45deg);\n  }\n\n  .popdeal-marker[active=\"true\"] {\n    z-index: 10;\n    border: 2px solid #00C4C4;\n  }\n\n  .popdeal-marker[active=\"true\"]::after {\n    border-right: 2px solid #00C4C4;\n    border-bottom: 2px solid #00C4C4;\n  }\n\n  .popdeal-marker[active=\"false\"] {\n    border: 1px solid #F5F5F5;\n  }\n\n  .popdeal-marker[active=\"false\"]::after {\n    border-right: 1px solid #F5F5F5;\n    border-bottom: 1px solid #F5F5F5;\n  }\n\n  .popdeal-marker-section {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap: 0;\n    flex-wrap: nowrap;\n  }\n\n  .popdeal-marker-section-header {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 4px;\n    flex-wrap: nowrap;\n  }\n\n  .popdeal-marker-section-price {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 0 4px;\n    flex-wrap: wrap;\n  }\n\n  .popdeal-marker-title {\n    font-weight: 700;\n    font-size: 14px;\n    text-align: center;\n    width: 100%;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n  }\n\n  .popdeal-marker-discount_rate {\n    color: #00C4C4;\n    font-weight: 600;\n    font-size: 14px;\n  }\n\n  .popdeal-marker-discounted_price {\n    color: #3D3D3D;\n    font-weight: 600;\n    font-size: 14px;\n  }\n\n  .popdeal-marker-original_price {\n    width: 100%;\n    color: #B3B3B3;\n    text-align: center;\n    font-size: 14px;\n    text-decoration: line-through;\n  }\n\n  .popdeal-marker-category {\n    color: #6E6E6E;\n    font-weight: 600;\n    font-size: 12px;\n  }\n\n  .popdeal-marker-category::before {\n    content: \"|\";\n    color: #B3B3B3;\n    margin-right: 4px;\n  }\n\n  /* PI Marker */\n  .pi-marker {\n    transform: translate(-50%, -50%);\n    z-index: 10;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 4px;\n  }\n\n  .pi-marker-icon {\n    width: 32px;\n    height: 32px;\n    object-fit: cover;\n    border-radius: 50%;\n  }\n\n  .pi-marker-text {\n    position: absolute;\n    top: calc(100% + 5px);\n    left: 50%;\n    transform: translateX(-50%);\n    min-width: max-content;\n    padding: 4px 8px;\n    background: white;\n    font-size: 12px;\n    border-radius: 99px;\n    color: #3D3D3D;\n    box-shadow: 0 0.432px 0.864px 0 rgba(0, 0, 0, 0.28);\n  }\n\n  /* PI Expanded Marker */\n  .pi-expanded-marker {\n    transform: translate(-50%, -50%);\n    z-index: 100;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 4px;\n    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.12));\n  }\n\n  .pi-expanded-marker-icon {\n    width: 32px;\n    height: 32px;\n    object-fit: cover;\n    border-radius: 50%;\n  }\n\n  .pi-expanded-marker-content {\n    position: absolute;\n    bottom: calc(100% + 10px);\n    left: 50%;\n    transform: translateX(-50%);\n    width: max-content;\n    max-width: 200px;\n    padding: 16px;\n    word-break: keep-all;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    background: white;\n    border-radius: 8px;\n  }\n\n  .pi-expanded-marker-title {\n    font-weight: 600;\n    font-size: 14px;\n    text-align: center;\n    color: #1A1A1A;\n  }\n\n  .pi-expanded-marker-address {\n    font-size: 14px;\n    color: #6E6E6E;\n    width: 100%;\n    text-align: center;\n  }\n\n  /* Cluster Marker */\n  .cluster-marker {\n    width: fit-content;\n    min-width: 52px;\n    height: 36px;\n    padding: 13px;\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 12px;\n    background: #00C4C4;\n    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12);\n    transform: translate(-50%, -50%);\n  }\n\n  .cluster-marker-text {\n    font-weight: 700;\n    font-size: 15px;\n    color: white;\n  }\n\n  .cluster-marker::after {\n    content: \"\";\n    display: block;\n    width: 12px;\n    height: 12px;\n    position: absolute;\n    bottom: -2px;\n    left: 50%;\n    right: 50%;\n    background: #00C4C4;\n    transform: translate(-50%) rotate(45deg);\n  }\n";
+
 export declare const Modal: ({ size, width, withCloseButton, ...props }: IModalProps) => JSX.Element;
 
+export declare const NaverMapProvider: ({ clientId, language, children, }: INaverMapProviderProps) => JSX.Element;
+
 export declare const Pagination: ({ currentPageIdx, rowsPerPage, totalLength, paginationSize, onPageChange, ...props }: IPaginationProps) => JSX.Element;
 
 export declare const PopUiProvider: default_2.FC<IPopUiProviderProps>;
@@ -234,6 +368,10 @@ export declare const TextField: (allProps: TTextFieldProps) => JSX.Element;
 
 export declare const TimePicker: ({ size, ...props }: ITimePickerProps) => JSX.Element;
 
+export declare type TMarkerData = IClusterMarkerData | IPopdealMarkerData | IPinMarkerData | IPiMarkerData;
+
+export declare type TMarkerType = 'cluster' | 'popdeal' | 'pin' | 'pi' | 'pi-expanded';
+
 /**
  * 토스트 알림을 표시합니다
  * @param input - 문자열 메시지 또는 옵션 객체
@@ -288,6 +426,22 @@ declare type TThemeMode = 'light' | 'dark';
 
 declare type TToastInput = string | IToastOptions;
 
+export declare const useLocation: ({ isActive, errorMessage, errorDescription, }: IUseLocationOptions) => {
+    position: ILocation | null;
+    isLoading: boolean;
+    isError: boolean;
+};
+
+export declare const useMap: (map: naver.maps.Map | null) => {
+    addMarker: (data: TMarkerData) => naver.maps.Marker | null;
+    updateMarker: (id: string, updates: Partial<TMarkerData>) => void;
+    clearMarkers: () => void;
+    panTo: (coord: ICoord) => void;
+    fitBounds: (coords: ICoord[]) => void;
+};
+
+export declare const useNaverMap: () => INaverMapContextValue;
+
 export declare const useTheme: () => IThemeContextValue;
 
 export { }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pop-ui/core",
   "type": "module",
-  "version": "0.0.36",
+  "version": "0.0.39",
   "main": "./dist/core.umd.cjs",
   "module": "./dist/core.js",
   "types": "./dist/types/index.d.ts",
@@ -49,7 +49,7 @@
     "@mantine/dropzone": "^8.3.6",
     "@mantine/hooks": "^8.3.6",
     "@mantine/notifications": "^8.3.6",
-    "@pop-ui/foundation": "0.0.30",
+    "@pop-ui/foundation": "0.0.33",
     "dayjs": "^1.11.18"
   },
   "peerDependencies": {
@@ -97,5 +97,5 @@
     "typescript": "^5.9.3",
     "vite": "^7.1.12"
   },
-  "gitHead": "55fa481ff2884a6a093e0c1f604c5ca5995b0626"
+  "gitHead": "6025da040aea8c1152f2ccf33b0d1a4db25c04f5"
 }