.

src/assets/css/custom.css

@@ -76,14 +76,14 @@ button{border:0;background:transparent;}
 /*레이아웃*/
 .pal-container{background:#ddd;height:100vh;position:relative;}
 .map{width:calc(100% - 80px);position:absolute;right:0;}
-.left-layer{width:350px;height:100vh;background:#fff;position:absolute;left:80px;color:#fff;z-index: 999;padding:14px;overflow: auto;}
-.right-layer{width:350px;height:100vh;background:#fff;position:absolute;right:-350px;color:#fff;z-index: 999;padding:14px;transition: 0.5s ease;-webkit-transition: 0.5s ease;overflow:auto;}
+.left-layer{width:350px;height:100%;background:#fff;position:absolute;left:80px;color:#fff;z-index: 999;padding:14px;overflow: auto;}
+.right-layer{width:350px;height:100%;background:#fff;position:absolute;right:-350px;color:#fff;z-index: 999;padding:14px;transition: 0.5s ease;-webkit-transition: 0.5s ease;overflow:auto;}
 .right-layer.active{right:0px;transition: 0.5s ease;-webkit-transition: 0.5s ease;}
 .right-layer-btn{width:40px;height:40px;position:absolute;right:0px;top:50%;transform: translateY(-50%);border:0;background:#8a1c05;border-top-left-radius:5px;border-bottom-left-radius:5px;transition: 0.5s ease;-webkit-transition: 0.5s ease;}
 .right-layer-btn svg{color:#fff;}
 .right-menu.active .right-layer-btn{right:350px;transition: 0.5s ease;-webkit-transition: 0.5s ease;}
 .layer-content + .layer-content{margin-top:14px;}
-.right-menu{position: absolute;right:0;top:0;height: 100vh;}
+.right-menu{position: absolute;right:0;top:0;height: 100%;}
 .dark-layout .left-layer{background:#10163A;}
 .dark-layout .right-layer{background:#10163A;}
 .dark-layout .right-layer-btn{background:#7367f0}
@@ -1189,19 +1189,21 @@ caption {overflow: hidden; line-height: 0;text-indent: -2000px;}
 .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;}
+.uam-layer{background:#fff;top:0;left:0;position:absolute;z-index:999;overflow:auto;padding:14px;max-width:350px;height:100%;}
 .fato{display:flex;align-items:center;justify-content:center;width:120px;height:120px;border-radius:100%;background:#ddd}
 .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;}
 
 .gate-map .gate-box:last-child .map-line::after{display:none}
 .vertiport-table *{font-size:0.825rem}
-.vertiport-table .table-st tbody tr td{text-align:center;}
+.vertiport-table .table-st tbody tr td{text-align:center;position: relative;}
 .vertiport-tab{margin-top:0.5rem}
 .vertiport-hanger{margin-top:2rem}
-.hanger-ti{width:200px}
+.hanger-ti{min-width:100px}
 .vertiport-hanger .vertiport-table{overflow-x:scroll;}
-
+.time-bar{position: absolute;display:block;height:20px;}
+.time-bar .num{position: absolute;background:rgba(250, 212, 61, 0.5);display:block;height:20px;line-height:20px;width:70px;font-weight:500;}
+.time-bar .bar-bg{position: absolute;left:70px;background:rgba(0, 0, 0, 0.3);display:block;height:20px;}
 
 .ti-h3{font-size: 1.1875rem;font-weight: 500;margin-bottom:14px;}
 .bg-line{border-left:1px solid #ddd;}

src/views/vertiport/VertiportView.js

@@ -215,7 +215,12 @@ export default function VertiportView() {
                 <tr>
                   <td>HG1</td>
                   <td></td>
-                  <td></td>
+                  <td>
+                    <span className='time-bar'>
+                      <span className='num'>PAL001</span>
+                      <span className='bar-bg' style={{ width:'200px'}}></span>
+                    </span>
+                  </td>
                   <td></td>
                   <td></td>
                   <td></td>
@@ -266,8 +271,12 @@ export default function VertiportView() {
                   <td></td>
                   <td></td>
                   <td></td>
-                  <td></td>
-                  <td></td>
+                  <td>
+                    <span className='time-bar'>
+                      <span className='num'>PAL002</span>
+                      <span className='bar-bg' style={{ width:'280px'}}></span>
+                    </span>
+                  </td>
                   <td></td>
                   <td></td>
                   <td></td>