layer-content 수정

2 months ago · 9b69448a54
3 changed files with 111 additions and 108 deletions
--- a/src/components/flight/NewFlightApprovalsReport.js
+++ b/src/components/flight/NewFlightApprovalsReport.js
@ -37,125 +37,128 @@ export default function NewFlightApprovalsReport(props) {
  };

  return (
-    <div className='layer-content' onDragEnd={props.handleDragEnd} draggable>
-      <div className='layer-ti'>
-        <h4>비행승인 신청 검토결과 현황</h4>
-      </div>
-      <div className='layer-ti-sub'>
-        검색일자 또는 신청번호/검토결과를 입력해주세요.
-      </div>
-      <div className='layer-search layer-search-form'>
-        <div className='input-n'>
-          <div className='list-input'>
-            <div className='calendar-flat'>
-              <Flatpickr
-                placeholder='날짜를 선택해주세요'
-                id='searchDate'
-                options={{
-                  mode: 'range',
-                  defaultDate: [searchDate.startDate, searchDate.endDate]
-                }}
-                onChange={date => {
-                  setSearchDate({
-                    startDate: dayjs(date[0]).format('YYYY-MM-DD'),
-                    endDate: dayjs(date[1]).format('YYYY-MM-DD')
-                  });
-                }}
-                className='form-control flat-picker bg-transparent border-0 shadow-none'
-              />
-              <Calendar size={14} />
-            </div>
-          </div>
-          <div className='list-input'>
-            <Input
-              type='text'
-              bsSize='sm'
-              placeholder='신청번호 또는 검토결과를 입력해주세요.'
-              value={props.filterId}
-              onChange={e => props.setFilterId(e.target.value)}
-              onKeyPress={handleKeyDown}
-            />
-          </div>
+    <>
+      <div className='layer-content'>
+        <div className='layer-ti'>
+          <h4>비행승인 신청 검토결과 현황</h4>
        </div>
-        <div className='layer-content'>
-          <div className='layer-ti'>
-            <h4>지역</h4>
-          </div>
+        <div className='layer-ti-sub'>
+          검색일자 또는 신청번호/검토결과를 입력해주세요.
+        </div>
+        <div className='layer-search layer-search-form'>
          <div className='input-n'>
            <div className='list-input'>
-              <CustomInput
-                type='select'
-                id='filterArea'
-                bsSize='sm'
-                value={props.filterArea.ctprvn}
-                onChange={e =>
-                  props.setFilterArea({
-                    ...props.filterArea,
-                    ctprvn: e.target.value,
-                    sig: '전체'
-                  })
-                }
-              >
-                {Object.values(CityCategories).map(city => (
-                  <option key={city} value={city}>
-                    {city}
-                  </option>
-                ))}
-              </CustomInput>
-            </div>
-            <div className='list-input'>
-              <CustomInput
-                type='select'
-                id='district'
-                bsSize='sm'
-                value={props.filterArea.sig}
-                onChange={e =>
-                  props.setFilterArea({
-                    ...props.filterArea,
-                    sig: e.target.value
-                  })
-                }
-              >
-                {DistrictCategories[props.filterArea.ctprvn]?.map(district => (
-                  <option key={district} value={district}>
-                    {district}
-                  </option>
-                ))}
-              </CustomInput>
+              <div className='calendar-flat'>
+                <Flatpickr
+                  placeholder='날짜를 선택해주세요'
+                  id='searchDate'
+                  options={{
+                    mode: 'range',
+                    defaultDate: [searchDate.startDate, searchDate.endDate]
+                  }}
+                  onChange={date => {
+                    setSearchDate({
+                      startDate: dayjs(date[0]).format('YYYY-MM-DD'),
+                      endDate: dayjs(date[1]).format('YYYY-MM-DD')
+                    });
+                  }}
+                  className='form-control flat-picker bg-transparent border-0 shadow-none'
+                />
+                <Calendar size={14} />
+              </div>
            </div>
            <div className='list-input'>
              <Input
                type='text'
                bsSize='sm'
-                placeholder='주소를 입력해주세요.'
-                value={props.filterArea.address}
-                onChange={e =>
-                  props.setFilterArea({
-                    ...props.filterArea,
-                    address: e.target.value
-                  })
-                }
+                placeholder='신청번호 또는 검토결과를 입력해주세요.'
+                value={props.filterId}
+                onChange={e => props.setFilterId(e.target.value)}
                onKeyPress={handleKeyDown}
              />
            </div>
-            <div className='list-input list-input-btn'>
-              <Button
-                color='primary'
-                onClick={() =>
-                  props.handlerSearch(
-                    props.filterId,
-                    searchDate,
-                    props.filterArea
-                  )
-                }
-                size='sm'
-              >
-                검색
-              </Button>
-            </div>
          </div>
        </div>
      </div>
-    </div>
+
+      <div className='layer-content'>
+        <div className='layer-ti'>
+          <h4>지역</h4>
+        </div>
+        <div className='input-n'>
+          <div className='list-input'>
+            <CustomInput
+              type='select'
+              id='filterArea'
+              bsSize='sm'
+              value={props.filterArea.ctprvn}
+              onChange={e =>
+                props.setFilterArea({
+                  ...props.filterArea,
+                  ctprvn: e.target.value,
+                  sig: '전체'
+                })
+              }
+            >
+              {Object.values(CityCategories).map(city => (
+                <option key={city} value={city}>
+                  {city}
+                </option>
+              ))}
+            </CustomInput>
+          </div>
+          <div className='list-input'>
+            <CustomInput
+              type='select'
+              id='district'
+              bsSize='sm'
+              value={props.filterArea.sig}
+              onChange={e =>
+                props.setFilterArea({
+                  ...props.filterArea,
+                  sig: e.target.value
+                })
+              }
+            >
+              {DistrictCategories[props.filterArea.ctprvn]?.map(district => (
+                <option key={district} value={district}>
+                  {district}
+                </option>
+              ))}
+            </CustomInput>
+          </div>
+          <div className='list-input'>
+            <Input
+              type='text'
+              bsSize='sm'
+              placeholder='주소를 입력해주세요.'
+              value={props.filterArea.address}
+              onChange={e =>
+                props.setFilterArea({
+                  ...props.filterArea,
+                  address: e.target.value
+                })
+              }
+              onKeyPress={handleKeyDown}
+            />
+          </div>
+          <div className='list-input list-input-btn'>
+            <Button
+              color='primary'
+              onClick={() =>
+                props.handlerSearch(
+                  props.filterId,
+                  searchDate,
+                  props.filterArea
+                )
+              }
+              size='sm'
+            >
+              검색
+            </Button>
+          </div>
+        </div>
+      </div>
+    </>
  );
 }
--- a/src/containers/flight/ControlApprovalsContainer.js
+++ b/src/containers/flight/ControlApprovalsContainer.js
@ -688,7 +688,7 @@ export default function ControlApprovalsContainer({ mode }) {
            className='right-layer active flight-approval-layer'
            ref={rightMenuRef}
          >
-            <div className='layer-content'>
+            <div className='' onDragEnd={handleDragEnd} draggable>
              <NewFlightApprovalsReport
                handlerSearch={handlerSearch}
                handleDragEnd={handleDragEnd}
--- a/src/containers/flight/OperationApprovalsContainer.js
+++ b/src/containers/flight/OperationApprovalsContainer.js
@ -779,7 +779,7 @@ export default function OperationApprovalsContainer({ mode }) {
            className='right-layer active flight-approval-layer'
            ref={rightMenuRef}
          >
-            <div className='layer-content'>
+            <div className='' onDragEnd={handleDragEnd} draggable>
              <NewFlightApprovalsReport
                handlerSearch={handlerSearch}
                handleDragEnd={handleDragEnd}