.

src/assets/css/custom.css

@@ -1184,9 +1184,18 @@ caption {overflow: hidden; line-height: 0;text-indent: -2000px;}
 .fsm-ti .btn-wrap button + button{margin-left:0.5rem}
 .fsm-box .list-input label{font-size:0.875rem}
 
+.vertiport-map{display:flex;}
 .vertiport-tab *{color:#333}
 .vertiport-tab .tab-content{display:block;}
 .uam-layer{background:#fff;top:0;left:0;position:absolute;z-index:999;overflow:auto;padding:14px;max-width:350px;height:100vh;}
+.fato{display:flex;align-items:center;justify-content:center;width:120px;height:120px;border-radius:100%;background:#ddd}
+.gate-wrap{display:flex;}
+.gate-box{width:280px;display:flex;align-items:center;justify-content:center;position: relative;}
+.gate{display:flex;align-items:center;justify-content:center;width:100px;height:100px;border-radius:100%;background:pink;position:absolute;top:-50px}
+.vertiport-map-line{display:flex;}
+.map-line{display:block;width:200px;height:200px;border-radius:12px;background:#fff;border:1px solid #ccc}
+.map-line::after{content:'';display:block;width:82px;height:1px;background:#ccc;;position: absolute;top:50%;right:-40px;transform: translateY(-50%);}
+.gate-map .gate-box:last-child .map-line::after{display:none}
 
 /*dark-layout*/
 .dark-layout .main-menu .navbar-header .navbar-brand .brand-text{color:#fff}

src/views/vertiport/VertiportView.js

@@ -20,7 +20,6 @@ export default function VertiportView() {
   return (
     <>
       <CustomMainLayout title={titleName}>
-        test
         <Button
           onClick={() => setOpenReportList(true)}
           type='button'
@@ -28,6 +27,50 @@ export default function VertiportView() {
         >
           왼쪽 모달 제어
         </Button>
+        <div className='vertiport-map'>
+          <div>
+            <div><span className='fato'>F1</span></div>
+            <div><span className='fato'>F2</span></div>
+          </div>
+          <div className='gate-map'>
+            <div className='gate-wrap'>
+              <div className='gate-box'>
+                <span className='gate'>G1</span>
+                <span className='map-line'></span>
+              </div>
+              <div className='gate-box'>
+                <span className='gate'>G2</span>
+                <span className='map-line'></span>
+              </div>
+              <div className='gate-box'>
+                <span className='gate'>G3</span>
+                <span className='map-line'></span>
+              </div>
+              <div className='gate-box'>
+                <span className='gate'>G4</span>
+                <span className='map-line'></span>
+              </div>
+              <div className='gate-box'>
+                <span className='gate'>G5</span>
+                <span className='map-line'></span>
+              </div>
+            </div>
+             <div className='gate-wrap'>
+              <div className='gate-box'><span className='gate'>G6</span></div>
+              <div className='gate-box'><span className='gate'>G7</span></div>
+              <div className='gate-box'><span className='gate'>G8</span></div>
+              <div className='gate-box'><span className='gate'>G9</span></div>
+              <div className='gate-box'><span className='gate'>G10</span></div>
+            </div> 
+          </div>
+           <div className='vertiport-map-line'>
+            <div><span className='map-line'></span></div>
+            <div><span className='map-line'></span></div>
+            <div><span className='map-line'></span></div>
+            <div><span className='map-line'></span></div>
+            <div><span className='map-line'></span></div>
+          </div> 
+        </div>
       </CustomMainLayout>
       {oepnReportList && (
         <>