지역 select contants 선언 및 추가

src/components/flight/NewFlightApprovalsReport.js

@@ -3,6 +3,7 @@ import Flatpickr from 'react-flatpickr';
 import { Button, Input, CustomInput, Col, Row } from '@component/ui';
 import { Search, Calendar } from 'react-feather';
 import dayjs from 'dayjs';
+import { CityCategories, DistrictCategories } from '@configs/constants';
 
 export default function NewFlightApprovalsReport(props) {
   // 달력
@@ -95,20 +96,26 @@ export default function NewFlightApprovalsReport(props) {
                 value={props.filterArea}
                 onChange={e => props.setFilterArea(e.target.value)}
               >
-                <option value=''>전체</option>
+                {Object.values(CityCategories).map(city => (
-                <option value='gimpo'>김포공항 관제권</option>
+                  <option key={city} value={city}>
+                    {city}
+                  </option>
+                ))}
               </CustomInput>
             </div>
             <div className='list-input'>
               <CustomInput
                 type='select'
-                id='filterArea'
+                // id='filterArea'
                 bsSize='sm'
-                value={props.filterArea}
+                // value={props.filterArea}
                 onChange={e => props.setFilterArea(e.target.value)}
               >
-                <option value=''>전체</option>
+                {DistrictCategories[props.filterArea]?.map(district => (
-                <option value='gimpo'>김포공항 관제권</option>
+                  <option key={district} value={district}>
+                    {district}
+                  </option>
+                ))}
               </CustomInput>
             </div>
             <div className='list-input list-input-btn'>

src/configs/constants.ts

@@ -135,3 +135,29 @@ export const QS_OPTION: IQsOptionType = {
   addQueryPrefix: true,
   arrayFormat: 'repeat'
 };
+
+// 시도 검색 카테고리
+// 시도 검색 카테고리
+export const CityCategories = {
+  서울: '서울',
+  인천: '인천',
+  경기: '경기'
+} as const;
+
+export type CityCategory = keyof typeof CityCategories;
+
+// 시군구 검색 카테고리
+export const DistrictCategories = {
+  서울: ['은평구', '영등포구', '양천구', '구로구', '강서구', '마포구'],
+  인천: ['부평구', '계양구', '서구'],
+  경기: [
+    '김포시',
+    '고양시 덕양구',
+    '고양시 일산동구',
+    '부천시 소사구',
+    '부천시 원미구',
+    '부천시 오정구'
+  ]
+} as const;
+
+export type DistrictCategory = typeof DistrictCategories[CityCategory][number];

src/containers/flight/NewFlightApprovalsContainer.js

@@ -45,7 +45,7 @@ export default function NewFlightApprovalsContainer({ mode }) {
   const [filterId, setFilterId] = useState('');
 
   // 지역
-  const [filterArea, setFilterArea] = useState('');
+  const [filterArea, setFilterArea] = useState('경기');
 
   // 미니맵 레이어
   const [previewLayer, setPreviewLayer] = useState();
@@ -334,22 +334,16 @@ export default function NewFlightApprovalsContainer({ mode }) {
   return (
     <>
       <div className='map' style={{ width: '100%' }}>
-        <div className="main-data">
+        <div className='main-data'>
           <div className='data-box-btn'>
             <Card>
               <div className='data-box-btn-list'>
                 <h4>지도유형</h4>
                 <div className='map-btn'>
                   <ButtonGroup>
-                    <Button primary>
+                    <Button primary>지형지도</Button>
-                      지형지도
+                    <Button primary>일반지도</Button>
-                    </Button>
+                    <Button primary>2D</Button>
-                    <Button primary>
-                      일반지도
-                    </Button>
-                    <Button primary>
-                      2D
-                    </Button>
                   </ButtonGroup>
                 </div>
               </div>
@@ -357,12 +351,8 @@ export default function NewFlightApprovalsContainer({ mode }) {
                 <h4>거리측정</h4>
                 <div className='map-btn'>
                   <ButtonGroup>
-                    <Button primary>
+                    <Button primary>직선</Button>
-                      직선
+                    <Button primary>다각형</Button>
-                    </Button>
-                    <Button primary>
-                      다각형
-                    </Button>
                   </ButtonGroup>
                 </div>
               </div>