거리측정 반경 입력값 적용

src/components/ui/input/index.tsx

@@ -25,6 +25,8 @@ interface Props {
   disabled?: boolean;
   onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
   onKeyPress?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
   style?: any;
 }
 
@@ -70,7 +72,9 @@ const CustomInput = forwardRef<HTMLInputElement, Props>(
       placeholder,
       disabled = false,
       onKeyPress,
-      onBlur
+      onBlur,
+      onFocus,
+      onKeyDown
     },
     ref
   ) => {
@@ -94,6 +98,8 @@ const CustomInput = forwardRef<HTMLInputElement, Props>(
         disabled={disabled}
         onBlur={onBlur}
         onKeyPress={onKeyPress}
+        onFocus={onFocus}
+        onKeyDown={onKeyDown}
       >
         {children}
       </Input>

src/containers/flight/ControlApprovalsContainer.js

@@ -33,6 +33,7 @@ import { Card, ButtonGroup, Button, Input } from '@component/ui';
 import { FiRotateCw, FiCornerUpLeft } from 'react-icons/fi';
 import { X } from 'react-feather';
 import mapboxgl from 'mapbox-gl';
+import * as turf from '@turf/turf';
 
 let distanceMarkers = [];
 
@@ -86,6 +87,7 @@ export default function ControlApprovalsContainer({ mode }) {
   const totalAreaRef = useRef(null);
   const mouseCursorRef = useRef(null);
   const distanceBoxRef = useRef(null);
+  const [metersRadius, setMetersRadius] = useState('0m');
 
   //   비행구역 (관제과) 레이어
   const controlLayer = {
@@ -310,6 +312,8 @@ export default function ControlApprovalsContainer({ mode }) {
     dispatch(clientSaveAreaCoordinateList([area]));
 
     handlerMapInit();
+    setMetersRadius('0m');
+    handlerDistanceClose();
   };
 
   const handlerMapInit = () => {
@@ -711,11 +715,75 @@ export default function ControlApprovalsContainer({ mode }) {
                       </span>
                     </p>
                     <p>
-                      <Input 
-                      type='text'
-                      bsSize='sm'
-                      placeholder='반경을 입력해주세요'
-                      />
+                      {selected && drawObj.getMode() === 'simple_select' && (
+                        <Input
+                          type='text'
+                          bsSize='sm'
+                          placeholder='반경을 입력해주세요'
+                          value={metersRadius}
+                          onKeyDown={e => {
+                            const input = e.target;
+                            const { value } = input;
+                            if (e.key === 'Backspace') {
+                              if (input.length > 2) {
+                                input.setSelectionRange(
+                                  value.length - 2,
+                                  value.length - 2
+                                );
+                              } else {
+                                input.setSelectionRange(
+                                  value.length - 1,
+                                  value.length - 1
+                                );
+                              }
+                            } else if (e.key === 'Enter') {
+                              let val = value.replace(/[^\d.]/g, '');
+                              if (!val) return;
+                              const sources = drawObj.getAll();
+
+                              const option = {
+                                steps: 0,
+                                units: 'meters'
+                              };
+                              const rad = turf.circle(
+                                sources.features[0].geometry.coordinates[0],
+                                parseInt(val),
+                                option
+                              );
+
+                              drawObj.set({
+                                type: 'FeatureCollection',
+                                features: [
+                                  { ...sources.features[0] },
+                                  {
+                                    type: 'Feature',
+                                    properties: {},
+                                    id: 'pal_Polygon_string',
+                                    geometry: { ...rad.geometry }
+                                  }
+                                ]
+                              });
+                            }
+                          }}
+                          onChange={e => {
+                            const target = e.target;
+                            const { value, selectionStart } = target;
+                            // const numericValue = value.replace(/[^\d.]/g, '');
+
+                            setMetersRadius(
+                              value
+                                .replace(/^0+/, '') // 맨 앞의 0 제거
+                                .replace(/[^\d.]/g, '') // 숫자가 아닌 문자 제거
+                                .replace(/\B(?=(\d{3})+(?!\d))/g, ',') + 'm'
+                            );
+                          }}
+                          onBlur={() => {
+                            if (metersRadius === 'm') {
+                              setMetersRadius('0m');
+                            }
+                          }}
+                        />
+                      )}
                     </p>
                   </div>
                 </div>

src/containers/flight/OperationApprovalsContainer.js

@@ -29,7 +29,7 @@ import { setLogout } from '@src/redux/features/account/auth/authThunk';
 import logo from '../../assets/images/logo/kac_logo_ icon.svg';
 import { AiOutlinePoweroff } from 'react-icons/ai';
 import WebsocketClient from '../../components/websocket/WebsocketClient';
-import { Card, ButtonGroup, Button } from '@component/ui';
+import { Card, ButtonGroup, Button, Input } from '@component/ui';
 import { FiRotateCw, FiCornerUpLeft } from 'react-icons/fi';
 import { X } from 'react-feather';
 
@@ -91,6 +91,7 @@ export default function OperationApprovalsContainer({ mode }) {
   const totalAreaRef = useRef(null);
   const mouseCursorRef = useRef(null);
   const distanceBoxRef = useRef(null);
+  const [metersRadius, setMetersRadius] = useState('0m');
 
   // 비행구역 (운항과) 레이어
   const operationLayer = {
@@ -359,6 +360,8 @@ export default function OperationApprovalsContainer({ mode }) {
         setSelected([area[0].planAreaSno]);
       }
       setSelectedPlanSno(area[0].planSno);
+      setMetersRadius('0m');
+      handlerDistanceClose();
     } else {
       setSelected([]);
       setSelectedPlanSno([]);
@@ -857,6 +860,79 @@ export default function OperationApprovalsContainer({ mode }) {
                         총 거리 : 1050.24m
                       </span>
                     </p>
+
+                    <p>
+                      {selectedPlanSno &&
+                        drawObj.getMode() === 'simple_select' && (
+                          <Input
+                            type='text'
+                            bsSize='sm'
+                            placeholder='반경을 입력해주세요'
+                            value={metersRadius}
+                            onKeyDown={e => {
+                              const input = e.target;
+                              const { value } = input;
+                              if (e.key === 'Backspace') {
+                                if (input.length > 2) {
+                                  input.setSelectionRange(
+                                    value.length - 2,
+                                    value.length - 2
+                                  );
+                                } else {
+                                  input.setSelectionRange(
+                                    value.length - 1,
+                                    value.length - 1
+                                  );
+                                }
+                              } else if (e.key === 'Enter') {
+                                let val = value.replace(/[^\d.]/g, '');
+                                if (!val) return;
+                                const sources = drawObj.getAll();
+
+                                const option = {
+                                  steps: 0,
+                                  units: 'meters'
+                                };
+                                const rad = turf.circle(
+                                  sources.features[0].geometry.coordinates[0],
+                                  parseInt(val),
+                                  option
+                                );
+
+                                drawObj.set({
+                                  type: 'FeatureCollection',
+                                  features: [
+                                    { ...sources.features[0] },
+                                    {
+                                      type: 'Feature',
+                                      properties: {},
+                                      id: 'pal_Polygon_string',
+                                      geometry: { ...rad.geometry }
+                                    }
+                                  ]
+                                });
+                              }
+                            }}
+                            onChange={e => {
+                              const target = e.target;
+                              const { value, selectionStart } = target;
+                              // const numericValue = value.replace(/[^\d.]/g, '');
+
+                              setMetersRadius(
+                                value
+                                  .replace(/^0+/, '') // 맨 앞의 0 제거
+                                  .replace(/[^\d.]/g, '') // 숫자가 아닌 문자 제거
+                                  .replace(/\B(?=(\d{3})+(?!\d))/g, ',') + 'm'
+                              );
+                            }}
+                            onBlur={() => {
+                              if (metersRadius === 'm') {
+                                setMetersRadius('0m');
+                              }
+                            }}
+                          />
+                        )}
+                    </p>
                   </div>
                 </div>
               </div>