25 | 
31 |
37 |
38 | );
39 | }
40 |
41 | export default CanvasComponent;
42 |
--------------------------------------------------------------------------------
/src/components/Icon/AddIcon.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export default (): React.ReactElement => {
4 | return (
5 |
14 | );
15 | };
16 |
--------------------------------------------------------------------------------
/src/components/Icon/CloseIcon.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | interface CloseIconProps {
4 | className?: string;
5 | onClick?: (e: React.MouseEvent) => void;
6 | }
7 |
8 | export default ({ className, onClick }: CloseIconProps): React.ReactElement => {
9 | return (
10 |
23 | );
24 | };
25 |
--------------------------------------------------------------------------------
/src/components/Icon/Compare.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export default (): React.ReactElement => {
4 | return (
5 |
23 | );
24 | };
25 |
--------------------------------------------------------------------------------
/src/components/Icon/Copy.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | interface CopyProps {
4 | className?: string;
5 | onClick: (e: React.MouseEvent) => void;
6 | }
7 |
8 | export default ({ className, onClick }: CopyProps): React.ReactElement => {
9 | return (
10 |
21 | );
22 | };
23 |
--------------------------------------------------------------------------------
/src/components/Icon/FullScreen.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export default (): React.ReactElement => {
4 | return (
5 |
13 | );
14 | };
15 |
--------------------------------------------------------------------------------
/src/components/Icon/MoreVertIcon.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | interface MoreVertIconProps {
4 | className?: string;
5 | onClick?: () => void;
6 | }
7 |
8 | export default ({
9 | className,
10 | onClick,
11 | }: MoreVertIconProps): React.ReactElement => {
12 | return (
13 |
24 | );
25 | };
26 |
--------------------------------------------------------------------------------
/src/components/Icon/RedoIcon.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | interface RedoIconProps {
4 | className?: string;
5 | onClick: () => void;
6 | }
7 |
8 | function RedoIcon({ className, onClick }: RedoIconProps): React.ReactElement {
9 | return (
10 |
21 | );
22 | }
23 |
24 | export default RedoIcon;
25 |
--------------------------------------------------------------------------------
/src/components/Icon/RemoveIcon.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export default (): React.ReactElement => {
4 | return (
5 |
14 | );
15 | };
16 |
--------------------------------------------------------------------------------
/src/components/Icon/SmallScreen.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export default (): React.ReactElement => {
4 | return (
5 |
35 | );
36 | };
37 |
--------------------------------------------------------------------------------
/src/components/Icon/UndoIcon.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | interface UndoIconProps {
4 | className?: string;
5 | onClick: () => void;
6 | }
7 |
8 | function UndoIcon({ className, onClick }: UndoIconProps): React.ReactElement {
9 | return (
10 |
21 | );
22 | }
23 |
24 | export default UndoIcon;
25 |
--------------------------------------------------------------------------------
/src/components/Map/ButtonGroup/Button.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactElement, MouseEvent } from 'react';
2 | import styled from '../../../utils/styles/styled';
3 |
4 | interface ButtonPropsInterface {
5 | width?: string;
6 | height?: string;
7 | fontSize?: string;
8 | children?: React.ReactNode;
9 | onClick?: (e: MouseEvent마커 등록
99 |${text}
`)) 98 | .addTo(map); 99 | 100 | addInstanceToMap({ id, text, instance: newMarker }); 101 | 102 | // 새로운 마커 추가 103 | const newMarkerInstance: MarkerInstanceType = { 104 | id, 105 | text, 106 | lng, 107 | lat, 108 | instance: newMarker, 109 | }; 110 | 111 | dispatch(addMarker(newMarkerInstance)); 112 | if (pathname !== URLPathNameType.show) 113 | setNewMarkerToLocalStorage(newMarkerInstance); 114 | }; 115 | 116 | return { 117 | marker, 118 | addInstanceToMap, 119 | registerMarker, 120 | }; 121 | } 122 | 123 | export default useMarkerRegister; 124 | -------------------------------------------------------------------------------- /src/hooks/map/useUpperButtons.ts: -------------------------------------------------------------------------------- 1 | import { useState, useEffect, RefObject } from 'react'; 2 | 3 | export interface useUpperButtonsType { 4 | fullScreenButtonClickHandler?: () => void; 5 | smallScreenButtonClickHandler?: () => void; 6 | isFullscreen: boolean; 7 | } 8 | 9 | interface useUpperButtonsProps { 10 | mapRef: RefObject${marker.text}
`)); 30 | const newMarkerId = marker.id || getRandomId(8); 31 | 32 | acc.push({ ...marker, id: newMarkerId, instance: newMarker }); 33 | return acc; 34 | }, 35 | [] 36 | ); 37 | return newMarkers; 38 | } 39 | 40 | export function getInitialMarkersFromLocalStorage(): MarkerInstanceType[] { 41 | const storedMarkers = getMarkersFromLocalStorage(); 42 | if (!storedMarkers) return initialLocalStorageMarkers; 43 | const newState = initMarkerInstances(storedMarkers); 44 | return newState; 45 | } 46 | 47 | export function setNewMarkerToLocalStorage({ 48 | id, 49 | text, 50 | lng, 51 | lat, 52 | }: MarkerInstanceType): void { 53 | const storedMarker = getMarkersFromLocalStorage(); 54 | const markerArray = storedMarker ?? []; 55 | 56 | markerArray.push({ 57 | id, 58 | text, 59 | lng, 60 | lat, 61 | }); 62 | 63 | setMarkersToLocalStorage(markerArray); 64 | } 65 | 66 | export function updateMarkerOfLocalStorage({ 67 | id, 68 | lng, 69 | lat, 70 | }: MarkerInstanceType): void { 71 | const storedMarkers = getMarkersFromLocalStorage(); 72 | const changedMarkers = storedMarkers.map((marker) => { 73 | const targetMarker = 74 | marker.id === id 75 | ? { ...marker, lng: lng ?? marker.lng, lat: lat ?? marker.lat } 76 | : marker; 77 | return targetMarker; 78 | }); 79 | 80 | setMarkersToLocalStorage(changedMarkers); 81 | } 82 | 83 | export function deleteMarkerOfLocalStorage(id: string): void { 84 | const storedMarkers = getMarkersFromLocalStorage(); 85 | const targetMarker = storedMarkers.find((marker) => marker.id === id); 86 | targetMarker?.instance?.remove(); 87 | const changedMarkers = storedMarkers.filter((marker) => marker.id !== id); 88 | setMarkersToLocalStorage(changedMarkers); 89 | } 90 | -------------------------------------------------------------------------------- /src/utils/validateStyle.ts: -------------------------------------------------------------------------------- 1 | import { 2 | WholeStyleActionPayload, 3 | SubFeatureActionPayload, 4 | StyleActionPayload, 5 | ElementActionPayload, 6 | SubElementActionPayload, 7 | StyleElementPropsType, 8 | FeatureNameType, 9 | ElementNameType, 10 | SubElementNameType, 11 | VisibilityValueType, 12 | StyleKeyType, 13 | } from '../store/common/type'; 14 | import initialLayers from './rendering-data/defaultStyle'; 15 | 16 | /* eslint-disable no-restricted-syntax */ 17 | export default function validateStyle( 18 | inputStyle: WholeStyleActionPayload 19 | ): boolean { 20 | const features = Object.keys(inputStyle); 21 | 22 | for (const feature of features) { 23 | if (!(feature in FeatureNameType)) return false; 24 | 25 | const inputFeatureStyle = inputStyle[ 26 | feature as FeatureNameType 27 | ] as SubFeatureActionPayload; 28 | const subFeatures = Object.keys(inputFeatureStyle); 29 | 30 | for (const subFeature of subFeatures) { 31 | const subFeatureStyle = inputFeatureStyle[subFeature]; 32 | const initialSubFeatureStyle = 33 | initialLayers[feature as FeatureNameType][subFeature]; 34 | 35 | if ( 36 | !initialSubFeatureStyle || 37 | typeof subFeatureStyle !== 'object' || 38 | !checkElement({ 39 | subFeatureStyle, 40 | initialSubFeatureStyle: initialSubFeatureStyle as StyleElementPropsType, 41 | }) 42 | ) { 43 | return false; 44 | } 45 | } 46 | } 47 | return true; 48 | } 49 | 50 | interface checkElementProps { 51 | subFeatureStyle: ElementActionPayload; 52 | initialSubFeatureStyle: StyleElementPropsType; 53 | } 54 | 55 | function checkElement({ 56 | subFeatureStyle, 57 | initialSubFeatureStyle, 58 | }: checkElementProps): boolean { 59 | const elements = Object.keys(subFeatureStyle) as ElementNameType[]; 60 | 61 | for (const element of elements) { 62 | const elementSytle = subFeatureStyle[element]; 63 | if (!initialSubFeatureStyle[element] || typeof elementSytle !== 'object') 64 | return false; 65 | 66 | if ( 67 | element === ElementNameType.labelIcon && 68 | !checkStyle(elementSytle as StyleActionPayload) 69 | ) { 70 | return false; 71 | } 72 | 73 | if ( 74 | (element === ElementNameType.labelText || 75 | element === ElementNameType.section) && 76 | !checkSubElement(elementSytle as SubElementActionPayload) 77 | ) { 78 | return false; 79 | } 80 | } 81 | 82 | return true; 83 | } 84 | 85 | function checkSubElement(input: SubElementActionPayload): boolean { 86 | const subElements = Object.keys(input) as SubElementNameType[]; 87 | 88 | for (const subElement of subElements) { 89 | const subElementSytle = (input as SubElementActionPayload)[subElement]; 90 | 91 | if ( 92 | !(subElement in SubElementNameType) || 93 | typeof subElementSytle !== 'object' || 94 | !checkStyle(subElementSytle as StyleActionPayload) 95 | ) { 96 | return false; 97 | } 98 | } 99 | 100 | return true; 101 | } 102 | 103 | function checkStyle(input: StyleActionPayload): boolean { 104 | const keys = Object.keys(input) as StyleKeyType[]; 105 | for (const key of keys) { 106 | if (!(key in StyleKeyType)) return false; 107 | const style = input[key]; 108 | switch (key) { 109 | case StyleKeyType.color: 110 | if (!checkColor(style)) return false; 111 | break; 112 | case StyleKeyType.weight: 113 | if (!checkRange(style, 0, 8)) return false; 114 | break; 115 | case StyleKeyType.visibility: 116 | if (!((input.visibility as VisibilityValueType) in VisibilityValueType)) 117 | return false; 118 | break; 119 | default: 120 | return false; 121 | } 122 | } 123 | 124 | return true; 125 | } 126 | 127 | function checkColor