비행승인 페이지 검색영역 축소 작업

src/components/flight/NewFlightApprovalsReport.js

@@ -1,5 +1,6 @@
 import { useState, useEffect, useRef } from 'react';
 import Flatpickr from 'react-flatpickr';
+import { Collapse, ConfigProvider } from 'antd';
 import {
   Button,
   Input,
@@ -53,11 +54,34 @@ export default function NewFlightApprovalsReport(props) {
   };
 
   return (
-    <>
-      <div className='layer-content' onDragEnd={props.handleDragEnd} draggable>
+    <ConfigProvider
+      theme={{
+        components: {
+          Collapse: {
+            headerPadding: 0
+          }
+        }
+      }}
+    >
+      <div onDragEnd={props.handleDragEnd} draggable>
+        <Collapse
+          size='middle'
+          bordered={false}
+          expandIconPosition='end'
+          items={[
+            {
+              key: '1',
+              label: (
                 <div className='layer-ti'>
                   <h4>비행승인 신청 검토결과 현황</h4>
                 </div>
+              ),
+              children: (
+                <>
+                  <div className='layer-content'>
+                    {/* <div className='layer-ti'>
+          <h4>비행승인 신청 검토결과 현황</h4>
+        </div> */}
 
                     <div className='input-n'>
                       <div className='list-input'>
@@ -71,11 +95,16 @@ export default function NewFlightApprovalsReport(props) {
                                 id='searchDate'
                                 options={{
                                   mode: 'range',
-                      defaultDate: [searchDate.startDate, searchDate.endDate]
+                                  defaultDate: [
+                                    searchDate.startDate,
+                                    searchDate.endDate
+                                  ]
                                 }}
                                 onChange={date => {
                                   setSearchDate({
-                        startDate: dayjs(date[0]).format('YYYY-MM-DD'),
+                                    startDate: dayjs(date[0]).format(
+                                      'YYYY-MM-DD'
+                                    ),
                                     endDate: dayjs(date[1]).format('YYYY-MM-DD')
                                   });
                                 }}
@@ -90,7 +119,6 @@ export default function NewFlightApprovalsReport(props) {
                       <div className='list-input'>
                         <div className='layer-content'>
                           <FormGroup>
-                <Label for='filterId'>신청번호</Label>
                             <Input
                               type='text'
                               bsSize='sm'
@@ -106,7 +134,6 @@ export default function NewFlightApprovalsReport(props) {
                       <div className='list-input'>
                         <div className='layer-content'>
                           <FormGroup>
-                <Label for='limitZoneNm'>장애물 제한표면</Label>
                             <CustomInput
                               type='select'
                               bsSize='sm'
@@ -121,7 +148,7 @@ export default function NewFlightApprovalsReport(props) {
                               onKeyPress={handleKeyDown}
                               value={props.checkState.limitZoneNm}
                             >
-                  <option value={'전체'}>전체</option>
+                              <option value={'전체'}>장애물 제한표면</option>
                               <option value={'C'}>원추</option>
                               <option value={'H'}>수평</option>
                             </CustomInput>
@@ -131,16 +158,10 @@ export default function NewFlightApprovalsReport(props) {
                     </div>
                   </div>
                   <div className='layer-content'>
-        <div className='layer-ti'>
-          <h4>확인 결과</h4>
-        </div>
                     <div className='input-n'>
                       <div className='list-input'>
                         <div className='layer-content'>
                           <FormGroup>
-                <Label for='searchDate'>
-                  {props.pageName === 'control' ? '관제통신과' : '안전운항과'}
-                </Label>
                             <CustomInput
                               type='select'
                               bsSize='sm'
@@ -184,9 +205,6 @@ export default function NewFlightApprovalsReport(props) {
                         <div className='list-input'>
                           <div className='layer-content'>
                             <FormGroup>
-                  <Label for='searchDate'>
-                    {props.pageName === 'control' ? '안전운항과' : '관제통신과'}
-                  </Label>
                               <CustomInput
                                 type='select'
                                 bsSize='sm'
@@ -231,9 +249,12 @@ export default function NewFlightApprovalsReport(props) {
                       <div className='list-input'>
                         <div className='layer-content'>
                           <FormGroup>
-                <Label for='searchDate'>전송 상태</Label>
-                <CustomInput type='select' bsSize='sm' id='searchDate'>
-                  <option>전체</option>
+                            <CustomInput
+                              type='select'
+                              bsSize='sm'
+                              id='searchDate'
+                            >
+                              <option>전송 상태</option>
                               <option>전송</option>
                               <option>미전송</option>
                             </CustomInput>
@@ -281,13 +302,13 @@ export default function NewFlightApprovalsReport(props) {
                             })
                           }
                         >
-              {DistrictCategories[props.pageName][props.filterArea.ctprvn]?.map(
-                district => (
+                          {DistrictCategories[props.pageName][
+                            props.filterArea.ctprvn
+                          ]?.map(district => (
                             <option key={district} value={district}>
                               {district}
                             </option>
-                )
-              )}
+                          ))}
                         </CustomInput>
                       </div>
                       <div className='list-input'>
@@ -324,5 +345,11 @@ export default function NewFlightApprovalsReport(props) {
                     </div>
                   </div>
                 </>
+              )
+            }
+          ]}
+        />
+      </div>
+    </ConfigProvider>
   );
 }

src/configs/constants.ts

@@ -237,7 +237,7 @@ export type DistrictCategory =
 // 비행 확인 상태
 export const FlightCategory = {
   Control: {
-    전체: '전체',
+    전체: '관제통신과',
     W: '검토대기',
     P: '검토완료'
     // R: '재검토',
@@ -245,7 +245,7 @@ export const FlightCategory = {
     // P: '요청처리'
   },
   Operation: {
-    전체: '전체',
+    전체: '안전운항과',
     P: '검토완료',
     W: '검토대기',
     Q: '검토요청'