v1.2.17

- [CUSTOMER] 오일픽업히스토리 창 추가.

public_html/assets/css/main.css

@@ -251,6 +251,29 @@ section {
   color: var(--color-white);
 }
 
+.btn-yellow-sub {
+  font-weight: 500;
+  font-size: 20px;
+  letter-spacing: 1px;
+  padding: 10px 10px;
+  border-radius: 5px;
+  transition: 0.5s;
+  background-color: #f39c12;
+  color: #ffffff;           
+  border: 1px solid #f39c12;
+  width: 100%;
+  display: block;
+  text-align: center;
+  cursor: pointer;
+}
+
+.btn-yellow-sub:hover {
+  background-color: #fbc02d; /* 마우스 올렸을 때 살짝 더 밝은 노란색 */
+  color: #ffffff;
+  border: 1px solid #fbc02d;
+}
+
+
 .btn-gray{
   font-weight: 500;
   font-size: 20px;
@@ -2444,3 +2467,90 @@ tr.status-X {
   max-width: 300px;
   white-space: normal;
 }
+
+
+/* --- Customer History Panel Custom Styles --- */
+
+/* 1. 패널 자체 설정: 넘침 방지를 해제해야 옆구리 버튼이 보입니다 */
+#customerInfoCanvas {
+    width: 35%;
+    min-width: 450px;
+    height: 100vh !important;
+    overflow: visible !important; 
+    border-left: none;
+    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
+}
+
+/* --- 마우스 오버 시에만 나타나는 닫기 버튼 --- */
+
+/* 1. 기본 상태: 투명하게 숨기기 */
+.panel-close-tab {
+    position: absolute;
+    left: -40px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 40px;
+    height: 80px;
+    background-color: #2A9B56; 
+    color: white;
+    border: none;
+    border-radius: 10px 0 0 10px;
+    box-shadow: -4px 0 8px rgba(0,0,0,0.2);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+    
+    /* [포인트] 처음에는 투명도를 0으로 설정 */
+    opacity: 0;
+    /* 부드럽게 나타나도록 애니메이션 추가 */
+    transition: all 0.3s ease;
+}
+
+/* 2. 마우스 오버 상태: 캔버스 전체 혹은 버튼에 마우스가 올라가면 나타남 */
+/* #customerInfoCanvas에 마우스가 올라가면(hover), 내부의 .panel-close-tab을 보여줌 */
+#customerInfoCanvas:hover .panel-close-tab {
+    opacity: 1;
+    left: -40px; /* 위치도 살짝 움직이게 하고 싶다면 조절 가능 */
+}
+
+/* 버튼 자체에 마우스가 올라갔을 때 색상 강조 */
+.panel-close-tab:hover {
+    background-color: #1e7a41;
+}
+
+
+/* 화면 오른쪽 중앙에 상시 거치된 탭 버튼 */
+.history-quick-tab {
+    position: fixed;
+    right: 0;         /* 오른쪽 끝에 고정 */
+    top: 50%;
+    transform: translateY(-50%);
+    width: 25px;      /* 평소엔 얇게 */
+    height: 80px;
+    background-color: #fbc02d; /* HISTORY 버튼과 같은 노란색 (혹은 초록색) */
+    color: #212529;
+    border: none;
+    border-radius: 10px 0 0 10px; /* 왼쪽만 둥글게 */
+    box-shadow: -2px 0 5px rgba(0,0,0,0.2);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1040;    /* 패널(1050)보다는 낮게 설정 */
+    transition: all 0.3s ease;
+    opacity: 0.6;     /* 평소엔 살짝 투명하게 */
+}
+
+.history-quick-tab:hover {
+    width: 40px;      /* 마우스 올리면 살짝 튀어나옴 */
+    opacity: 1;
+    background-color: #f9a825;
+}
+
+/* [중요] 패널이 열려 있을 때(show 클래스가 붙었을 때) 탭 버튼을 숨김 */
+body.offcanvas-open .history-quick-tab, 
+#customerInfoCanvas.show ~ .history-quick-tab {
+    display: none;
+}

public_html/doc/customer_detail.php

@@ -1269,6 +1269,17 @@ $(document).ready(function()
         <div class="wrap-border">
         <table class="col-float-right">
           <tr>
+            <td>
+              <? if ($mode == "update") { ?>
+              <button type="button" 
+                      id="btn-history-open" 
+                      class="btn-yellow-sub btn-width-200" 
+                      data-id="<?=$c_uid?>" 
+                      data-name="<?=htmlspecialchars($c_nameSTR, ENT_QUOTES)?>">
+                &nbsp;OIL HISTORY&nbsp;
+              </button>
+              <? } ?>
+            </td>
             <td>
               <? if ($setTag == "ENABLED") { ?>                   
               <button type="button" id="request-button-id" class="btn-blue-sub btn-width-200" data-bs-toggle="modal" data-bs-target="#request-modal" data-request-type="standard-access">&nbsp;REQUEST&nbsp;</button>
@@ -1279,7 +1290,6 @@ $(document).ready(function()
             </td>
           </tr>
         </table>
-
         </div><!--wrap-border-->
 <? } ?>
 
@@ -2171,6 +2181,31 @@ if( $total_count < 1 ) {
       </div>
     </div>
     
+  <div class="offcanvas offcanvas-end" tabindex="-1" id="customerInfoCanvas" data-bs-backdrop="false" data-bs-scroll="true">
+    <button type="button" class="panel-close-tab" data-bs-dismiss="offcanvas">
+    <i class="bi bi-chevron-right"></i>
+    </button>
+    <div class="offcanvas-header" style="background: #2A9B56;">
+    <h4 class="offcanvas-title" id="customerCanvasTitle" style="color: #FFFFFF;"></h4>
+    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"></button>
+    </div>
+    <div class="offcanvas-body" id="customerInfoBody">
+    </div>
+  </div>
+  
+  <button type="button" class="history-quick-tab" id="btn-history-quick" title="Quick Open History">
+    <i class="bi bi-chevron-left"></i>
+  </button>
+
+
+<style>
+/* 패널 너비 및 선택 효과 커스텀 */
+#customerInfoCanvas { width: 35%; min-width: 450px; height: 100vh !important; }
+.selected-row { outline: 2px solid #2A9B56 !important; outline-offset: -2px; }
+</style>
+
+
+
   </main><!-- End #main -->
 
 <!-- Image Popup Modal -->
@@ -2603,9 +2638,58 @@ $(document).ready(function(){
         
   });
 
+  // 2. [추가 코드] 오프캔버스 객체 생성 및 버튼 이벤트
+    var canvasEl = document.getElementById("customerInfoCanvas");
+    // 부트스트랩 인스턴스가 이미 있는지 확인 후 생성
+    var customerCanvas = canvasEl ? new bootstrap.Offcanvas(canvasEl) : null;
+
+    $("#btn-history-open").on("click", function() {
+        if(!customerCanvas) return;
+
+        const cid = $(this).data("id");
+        const cname = $(this).data("name");
+
+        // 패널 제목 및 로딩 메시지 설정
+        $("#customerCanvasTitle").text(cname + " - PICKUP HISTORY");
+        $("#customerInfoBody").html(`
+            <div class='text-center p-5'>
+                <div class='spinner-border text-success' role='status'></div>
+                <p class='mt-3'>Loading History...</p>
+            </div>
+        `);
+
+        customerCanvas.show();
+
+        // AJAX 데이터 호출
+        $.ajax({
+            url: "lib/shortInfo_right_lib.php",
+            type: "post",
+            data: { c_uid: cid },
+            success: function(res) {
+                $("#customerInfoBody").html(res);
+            },
+            error: function() {
+                $("#customerInfoBody").html("<p class='text-center p-5 text-danger'>Failed to load history.</p>");
+            }
         });
+    });
+    
+  // 4. [이벤트] 메인 노란색 HISTORY 버튼 클릭 시
+    $("#btn-history-open").on("click", function() {
+        loadHistoryData(this);
+    });
+
+    // 5. [이벤트 추가] 오른쪽 끝 퀵 탭 버튼 클릭 시
+    // (메인 버튼과 똑같은 데이터-ID와 이름을 가져와야 하므로 trigger를 쓰거나 함수를 호출합니다)
+    $("#btn-history-quick").on("click", function() {
+        // 상단에 이미 있는 #btn-history-open 버튼을 대신 눌러주는 효과를 줍니다.
+        $("#btn-history-open").trigger("click");
+    });        
+
+}); // document.ready 끝
 </script>
   
+
 <div class="container">
   <!-- Modal Input Pickup Form -->
   <div id="input-pickup-modal" class="modal fade customer-info">