laanc 상세맵 경고 수정

src/views/laanc/LaancAreaMap.js

@@ -347,8 +347,66 @@ export default function LaancAreaMap({ centeredModal, mapContainer }) {
             id='detail'
             ref={mapContainer}
             style={{ width: '100%', height: '70vh' }}
-          >
-            {isMapLoad && mapObject ? (
+          ></div>
+          {/* 지도 검색 */}
+          <div className='d-flex search-comp absolute'>
+            <div className=''>
+              <InputGroup className='search-feather'>
+                <InputGroupAddon addonType='prepend'>
+                  <InputGroupText>
+                    <Search size={14} onClick={handlerSearchRes} />
+                  </InputGroupText>
+                </InputGroupAddon>
+                <Input
+                  type='text'
+                  id='searchInput'
+                  name='searchInput'
+                  size='sm'
+                  autoComplete='off'
+                  placeholder='검색명을 입력하세요.'
+                  onChange={handlerSearchChange}
+                  onKeyPress={handlerSearchEnter}
+                />
+              </InputGroup>
+              <div className='search-result-comp'>
+                <ul>
+                  {searchRes?.length !== 0 && isSearch ? (
+                    searchRes?.map(search => {
+                      const title = search.title
+                        .replaceAll('<b>', '')
+                        .replaceAll('</b>', '');
+
+                      return (
+                        <li
+                          key={search.mapx + search.mapy}
+                          onClick={() =>
+                            handlerSearchCoord(search.mapx, search.mapy)
+                          }
+                        >
+                          <a>
+                            <div className='search-result'>
+                              <div className='title'>
+                                <span>
+                                  <strong>{title}</strong>
+                                </span>
+                              </div>
+                              <div className='address'>
+                                <span>{search.roadAddress}</span>
+                              </div>
+                            </div>
+                          </a>
+                        </li>
+                      );
+                    })
+                  ) : (
+                    <></>
+                  )}
+                </ul>
+              </div>
+            </div>
+          </div>
+          {isMapLoad && mapObject ? (
+            <>
               <LanncDraw
                 mapObject={mapObject}
                 mapboxgl={mapboxgl}
@@ -362,67 +420,8 @@ export default function LaancAreaMap({ centeredModal, mapContainer }) {
                 geojson={detailGeo}
                 detailLayer={detailLayer}
               />
-            ) : null}
-
-            <div className='d-flex search-comp absolute'>
-              <div className=''>
-                <InputGroup className='search-feather'>
-                  <InputGroupAddon addonType='prepend'>
-                    <InputGroupText>
-                      <Search size={14} onClick={handlerSearchRes} />
-                    </InputGroupText>
-                  </InputGroupAddon>
-                  <Input
-                    type='text'
-                    id='searchInput'
-                    name='searchInput'
-                    size='sm'
-                    autoComplete='off'
-                    placeholder='검색명을 입력하세요.'
-                    onChange={handlerSearchChange}
-                    onKeyPress={handlerSearchEnter}
-                  />
-                </InputGroup>
-                <div className='search-result-comp'>
-                  <ul>
-                    {searchRes?.length !== 0 && isSearch ? (
-                      searchRes?.map(search => {
-                        const title = search.title
-                          .replaceAll('<b>', '')
-                          .replaceAll('</b>', '');
-
-                        return (
-                          <li
-                            key={search.mapx + search.mapy}
-                            onClick={() =>
-                              handlerSearchCoord(search.mapx, search.mapy)
-                            }
-                          >
-                            <a>
-                              <div className='search-result'>
-                                <div className='title'>
-                                  <span>
-                                    <strong>{title}</strong>
-                                  </span>
-                                </div>
-                                <div className='address'>
-                                  <span>{search.roadAddress}</span>
-                                </div>
-                              </div>
-                            </a>
-                          </li>
-                        );
-                      })
-                    ) : (
-                      <></>
-                    )}
-                  </ul>
-                </div>
-              </div>
-            </div>
-          </div>
-          {isMapLoad && mapObject ? (
-            <FeatureAirZone map={mapObject} mapboxgl={mapboxgl} />
+              <FeatureAirZone map={mapObject} mapboxgl={mapboxgl} />
+            </>
           ) : null}
         </div>
       </CardBody>