From b79f0347a12796cf79d65309b59c864a90b740bf Mon Sep 17 00:00:00 2001 From: Kang Lee Date: Fri, 8 May 2026 13:36:47 -0400 Subject: [PATCH] =?UTF-8?q?v1.2.17=20-=20[CUSTOMER]=20=EC=98=A4=EC=9D=BC?= =?UTF-8?q?=ED=94=BD=EC=97=85=ED=9E=88=EC=8A=A4=ED=86=A0=EB=A6=AC=20?= =?UTF-8?q?=EC=B0=BD=20=EC=B6=94=EA=B0=80.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public_html/assets/css/main.css | 110 +++++++++++++++++++++++++++ public_html/doc/customer_detail.php | 114 ++++++++++++++++++++++++---- 2 files changed, 209 insertions(+), 15 deletions(-) diff --git a/public_html/assets/css/main.css b/public_html/assets/css/main.css index a90411a..d0993a2 100644 --- a/public_html/assets/css/main.css +++ b/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; +} \ No newline at end of file diff --git a/public_html/doc/customer_detail.php b/public_html/doc/customer_detail.php index a4d83ff..0d19a61 100644 --- a/public_html/doc/customer_detail.php +++ b/public_html/doc/customer_detail.php @@ -1267,19 +1267,29 @@ $(document).ready(function()
- - - - - -
- - - - - -
- + + + + + + +
+ + + + + + + + + +
@@ -2170,6 +2180,31 @@ if( $total_count < 1 ) { LIST + +
+ +
+

+ +
+
+
+
+ + + + + + + @@ -2602,9 +2637,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(` +
+ +

Loading History...

+
+ `); + + 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("

Failed to load history.

"); + } + }); + }); + + // 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 끝 +