From 6bc05f282dfc536e91acca4c65b1bd78ec0bdb70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?junh=5Feee=28=EC=9D=B4=EC=A4=80=ED=9D=AC=29?=
 <junh_eee@naver.com>
Date: Mon, 27 Nov 2023 16:13:49 +0900
Subject: [PATCH] =?UTF-8?q?swiper=20=EC=84=A4=EC=B9=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                             |   2 +-
 src/components/laanc/map/LaancAreaMap.js | 122 +++++++++++++++++++++++
 2 files changed, 123 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index ad4920e..2679d7b 100644
--- a/package.json
+++ b/package.json
@@ -113,7 +113,7 @@
     "styled-components": "5.1.1",
     "sweetalert2": "10.14.0",
     "sweetalert2-react-content": "3.0.1",
-    "swiper": "6.0.4",
+    "swiper": "^6.0.4",
     "three": "0.124.0",
     "threebox-plugin": "2.2.7",
     "typesafe-actions": "^5.1.0",
diff --git a/src/components/laanc/map/LaancAreaMap.js b/src/components/laanc/map/LaancAreaMap.js
index 350046a..e31fae7 100644
--- a/src/components/laanc/map/LaancAreaMap.js
+++ b/src/components/laanc/map/LaancAreaMap.js
@@ -3,6 +3,7 @@ import mapboxgl from 'mapbox-gl';
 import threebox from 'threebox-plugin';
 import MapboxLanguage from '@mapbox/mapbox-gl-language';
 import { MAPBOX_TOKEN } from '../../../configs/constants';
+import { Swiper, SwiperSlide } from 'swiper/react';
 import { useEffect, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Card, CardBody } from 'reactstrap';
@@ -326,6 +327,127 @@ export default function LaancAreaMap({
       <CardBody>
         <div style={{ position: 'relative' }}>
           <LaancMapSearch mapObject={mapObject} />
+          <div className='d-flex coords-wrap'>
+            <Swiper direction='horizontal' loop={false} grabCursor={true}>
+              <SwiperSlide
+              // style={{
+              //   display: 'inline-block',
+              //   verticalAlign: 'top',
+              //   marginRight: '10px'
+              // }}
+              >
+                <div className='coords-box'>
+                  <div>
+                    <h6 className='ti'>비행구역 1</h6>
+                    <div className='coords-box-scroll'>
+                      <div className='coords-box-list'>
+                        <span>
+                          <span>126.6058737, 37.5220027</span>
+                          <span className='etc'>/</span>
+                          <span>126.6058093, 37.5188038</span>
+                        </span>
+                      </div>
+                      <div className='coords-box-list'>
+                        <span>
+                          <span>126.6058737, 37.5220027</span>
+                          <span className='etc'>/</span>
+                          <span>126.6058093, 37.5188038</span>
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </SwiperSlide>
+              <SwiperSlide
+              // style={{
+              //   display: 'inline-block',
+              //   verticalAlign: 'top',
+              //   marginRight: '10px'
+              // }}
+              >
+                <div className='coords-box'>
+                  <div>
+                    <h6 className='ti'>비행구역 1</h6>
+                    <div className='coords-box-scroll'>
+                      <div className='coords-box-list'>
+                        <span>
+                          <span>126.6058737, 37.5220027</span>
+                          <span className='etc'>/</span>
+                          <span>126.6058093, 37.5188038</span>
+                        </span>
+                      </div>
+                      <div className='coords-box-list'>
+                        <span>
+                          <span>126.6058737, 37.5220027</span>
+                          <span className='etc'>/</span>
+                          <span>126.6058093, 37.5188038</span>
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </SwiperSlide>
+              <SwiperSlide
+              // style={{
+              //   display: 'inline-block',
+              //   verticalAlign: 'top',
+              //   marginRight: '10px'
+              // }}
+              >
+                <div className='coords-box'>
+                  <div>
+                    <h6 className='ti'>비행구역 1</h6>
+                    <div className='coords-box-scroll'>
+                      <div className='coords-box-list'>
+                        <span>
+                          <span>126.6058737, 37.5220027</span>
+                          <span className='etc'>/</span>
+                          <span>126.6058093, 37.5188038</span>
+                        </span>
+                      </div>
+                      <div className='coords-box-list'>
+                        <span>
+                          <span>126.6058737, 37.5220027</span>
+                          <span className='etc'>/</span>
+                          <span>126.6058093, 37.5188038</span>
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </SwiperSlide>
+              <SwiperSlide
+              // style={{
+              //   display: 'inline-block',
+              //   verticalAlign: 'top',
+              //   marginRight: '10px'
+              // }}
+              >
+                <div className='coords-box'>
+                  <div>
+                    <h6 className='ti'>비행구역 1</h6>
+                    <div className='coords-box-scroll'>
+                      <div className='coords-box-list'>
+                        <span>
+                          <span>126.6058737, 37.5220027</span>
+                          <span className='etc'>/</span>
+                          <span>126.6058093, 37.5188038</span>
+                        </span>
+                      </div>
+                      <div className='coords-box-list'>
+                        <span>
+                          <span>126.6058737, 37.5220027</span>
+                          <span className='etc'>/</span>
+                          <span>126.6058093, 37.5188038</span>
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </SwiperSlide>
+            </Swiper>
+          </div>
+
           <div className='d-flex coords-wrap'>
             {viewCoordObj?.map((obj, i) => {
               let coord =