https://maps.openers.ai/require/Kmaps/jsNeed/categoryHandler.js?ver=20240725_02

1//광고창 전체 활성화 함수
2function activateCategoryView() {
3  // ë·°
4  $(".cateView").css("display", "block");
5}
6
7//광고창 전체 비활성화 함수
8function deactivateCategoryView() {
9  // 아웃
10  $(".cateView").css("display", "none");
11}
12
13var isOnOffActi = false;
14var isFirstServerCall = false;
15$(document).ready(function () {
16  $(".cateBase").mouseenter(function () {
17    isOnOffActi = true;
18    activateCategoryView();
19    $(".cateBase").removeClass("hovered"); // 다른 버튼들의 .hovered 클래스 제거
20    $(this).addClass("hovered"); // 현재 버튼에 .hovered 클래스 추가
21
22    // 각 버튼에 대한 컨텐츠 표시
23    var buttonId = $(this).attr("id");
24    showContent(buttonId);
25
26    // 만약 좌측서포트창이 열려 있으면 중첩문제로 일단 접어두자!
27    if (isMenuCvFold === false) {
28      cvWrapFold();
29    }
30
31    // 카테고리광고 정보가져오기
32    if (!isFirstServerCall) {
33      categoryADListAPIWorker("apiKey"); //웹워커로 함수호출
34      isFirstServerCall = true;
35    }
36  });
37
38  function showContent(buttonId) {
39    // 각 버튼에 대한 컨텐츠 표시 여부 결정
40    $(".cVContents").hide(); // 모든 컨텐츠 숨김
41    // 각 버튼에 대한 컨텐츠 표시
42    switch (buttonId) {
43      case "cateBase1":
44        $("#cVContent1").show();
45        break;
46      case "cateBase2":
47        $("#cVContent2").show();
48        break;
49      case "cateBase3":
50        $("#cVContent3").show();
51        break;
52      case "cateBase4":
53        $("#cVContent4").show();
54        break;
55      case "cateBase5":
56        $("#cVContent5").show();
57        break;
58      case "cateBase6":
59        $("#cVContent6").show();
60        break;
61      default:
62        break;
63    }
64  }
65  /*------------------------------------------*/
66  //2뎁스메뉴 롤오보시 해당컨텐츠 노출해보자!
67  $("#cVCmenu1 ul li").mouseenter(function () {
68    // 해당 중분류의 인덱스를 가져오기
69    var index = $(this).index() + 0; // 인덱스는 0부터 시작하므로 1을 더합니다
70
71    // 해당 중분류에 대한 컨텐츠 노출
72    $(".cVCmenu1_common").hide(); // 모든 중분류 컨텐츠 숨김
73    $("#cVCmenu1_view" + index).show(); // 해당 중분류 컨텐츠 표시
74  });
75  $("#cateBase1").mouseenter(function () {
76    $(".cVCmenu1_common").hide();
77    $("#cVCmenu1_view0").show(); // 기본컨텐츠 노출
78  });
79  /*--------*/
80
81  $("#cVCmenu2 ul li").mouseenter(function () {
82    // 해당 중분류의 인덱스를 가져오기
83    var index = $(this).index() + 7; // 인덱스는 0부터 시작하므로 1을 더합니다
84
85    // 해당 중분류에 대한 컨텐츠 노출
86    $(".cVCmenu1_common").hide(); // 모든 중분류 컨텐츠 숨김
87    $("#cVCmenu1_view" + index).show(); // 해당 중분류 컨텐츠 표시
88  });
89  $("#cateBase2").mouseenter(function () {
90    $(".cVCmenu1_common").hide();
91    $("#cVCmenu1_view7").show(); // 기본컨텐츠 노출
92  });
93  /*--------*/
94
95  $("#cVCmenu3 ul li").mouseenter(function () {
96    // 해당 중분류의 인덱스를 가져오기
97    var index = $(this).index() + 12; // 인덱스는 0부터 시작하므로 1을 더합니다
98
99    // 해당 중분류에 대한 컨텐츠 노출
100    $(".cVCmenu1_common").hide(); // 모든 중분류 컨텐츠 숨김
101    $("#cVCmenu1_view" + index).show(); // 해당 중분류 컨텐츠 표시
102  });
103  $("#cateBase3").mouseenter(function () {
104    $(".cVCmenu1_common").hide();
105    $("#cVCmenu1_view12").show(); // 기본컨텐츠 노출
106  });
107  /*--------*/
108
109  $("#cVCmenu4 ul li").mouseenter(function () {
110    // 해당 중분류의 인덱스를 가져오기
111    var index = $(this).index() + 16; // 인덱스는 0부터 시작하므로 1을 더합니다
112
113    // 해당 중분류에 대한 컨텐츠 노출
114    $(".cVCmenu1_common").hide(); // 모든 중분류 컨텐츠 숨김
115    $("#cVCmenu1_view" + index).show(); // 해당 중분류 컨텐츠 표시
116  });
117  $("#cateBase4").mouseenter(function () {
118    $(".cVCmenu1_common").hide();
119    $("#cVCmenu1_view16").show(); // 기본컨텐츠 노출
120  });
121  /*--------*/
122
123  $("#cVCmenu5 ul li").mouseenter(function () {

124    // 해당 중분류의 인덱스를 가져오기
125    var index = $(this).index() + 21; // 인덱스는 0부터 시작하므로 1을 더합니다
126
127    // 해당 중분류에 대한 컨텐츠 노출
128    $(".cVCmenu1_common").hide(); // 모든 중분류 컨텐츠 숨김
129    $("#cVCmenu1_view" + index).show(); // 해당 중분류 컨텐츠 표시
130  });
131  $("#cateBase5").mouseenter(function () {
132    $(".cVCmenu1_common").hide();
133    $("#cVCmenu1_view21").show(); // 기본컨텐츠 노출
134  });
135  /*--------*/
136
137  $("#cVCmenu6 ul li").mouseenter(function () {
138    // 해당 중분류의 인덱스를 가져오기
139    var index = $(this).index() + 26; // 인덱스는 0부터 시작하므로 1을 더합니다
140
141    // 해당 중분류에 대한 컨텐츠 노출
142    $(".cVCmenu1_common").hide(); // 모든 중분류 컨텐츠 숨김
143    $("#cVCmenu1_view" + index).show(); // 해당 중분류 컨텐츠 표시
144  });
145  $("#cateBase6").mouseenter(function () {
146    $(".cVCmenu1_common").hide();
147    $("#cVCmenu1_view26").show(); // 기본컨텐츠 노출
148  });
149  /*------------------------------------------*/
150  $(".cateBase").mouseleave(function () {
151    if (!$(this).hasClass("hovered")) {
152      isOnOffActi = false;
153      deactivateCategoryView();
154    }
155  });
156
157  $(".cateView").mouseenter(function () {
158    isOnOffActi = true;
159    activateCategoryView();
160  });
161
162  $(".cateView").mouseleave(function () {
163    isOnOffActi = false;
164    deactivateCategoryView();
165    $(".cateBase.hovered").removeClass("hovered"); // 모든 버튼의 .hovered 클래스 제거
166  });
167});
168
169/* ---------------------------------------------------------------- */
170// php API를 통해 카테고리 정보(카운트를 받아오기.
171function categoryCountAPI() {
172  var phpApi = "https://maps.openers.ai/require/Kmaps/phpAdd/brandCategoryCountAPI.php";
173  var datas = {
174    apiKey: "categoryCountAPI"
175  };
176
177  // AJAX 요청
178  $.ajax({
179    type: "POST", // 또는 GET
180    url: phpApi,
181    data: datas,
182    dataType: "json", // 서버로부터 받아올 데이터의 형식을 명시
183    success: function (response) {
184      // 응답을 처리할 함수 호출
185      categoryCountViewPoint(response);
186      //console.log("카테고리정보: ", response);
187    },
188    error: function (xhr, status, error) {
189      console.log("AJAX Error:", xhr);
190      console.log("Status:", status);
191      console.log("Error:", error);
192    },
193  });
194}
195function categoryCountViewPoint(response) {
196  $("#cateCount1").text(response[0].count.toLocaleString()); //한식 + 천자리수마다 꼼마추가
197  $("#cateCount2").text(response[1].count.toLocaleString()); //중식
198  $("#cateCount3").text(response[2].count.toLocaleString()); //일식
199  $("#cateCount4").text(response[3].count.toLocaleString()); //양식
200  $("#cateCount5").text(response[4].count.toLocaleString()); //별식/퓨전요리
201  $("#cateCount6").text(response[5].count.toLocaleString()); //주점
202  let totalCategory1 = 0;
203  for (let i = 0; i <= 5; i++) {
204    totalCategory1 += response[i].count;
205  }
206  $("#cateCount27").text(totalCategory1.toLocaleString()); //대분류 > 음식점/주점
207
208  $("#cateCount7").text(response[6].count.toLocaleString()); //치킨
209  $("#cateCount8").text(response[7].count.toLocaleString()); //피자
210  $("#cateCount9").text(response[8].count.toLocaleString()); //패스트푸드
211  $("#cateCount10").text(response[9].count.toLocaleString()); //분식
212  let totalCategory2 = 0;
213  for (let i = 6; i <= 9; i++) {
214    totalCategory2 += response[i].count;
215  }
216  $("#cateCount28").text(totalCategory2.toLocaleString()); //대분류 > 치킨/패스트푸드
217
218  $("#cateCount11").text(response[10].count.toLocaleString()); //커피
219  $("#cateCount12").text(response[11].count.toLocaleString()); //디저트
220  $("#cateCount13").text(response[12].count.toLocaleString()); //제과제빵
221  let totalCategory3 = 0;
222  for (let i = 10; i <= 12; i++) {
223    totalCategory3 += response[i].count;
224  }
225  $("#cateCount29").text(totalCategory3.toLocaleString()); //대분류 > 카페/디저트
226

227  $("#cateCount14").text(response[13].count.toLocaleString()); //편의점
228  $("#cateCount15").text(response[14].count.toLocaleString()); //뷰티/패션
229  $("#cateCount16").text(response[15].count.toLocaleString()); //농수산물/건강
230  $("#cateCount17").text(response[16].count.toLocaleString()); //기타 도소매업
231  let totalCategory4 = 0;
232  for (let i = 13; i <= 16; i++) {
233    totalCategory4 += response[i].count;
234  }
235  $("#cateCount30").text(totalCategory4.toLocaleString()); //대분류 > 도소매/판매업
236
237  $("#cateCount18").text(response[17].count.toLocaleString()); //외국어
238  $("#cateCount19").text(response[18].count.toLocaleString()); //초중고
239  $("#cateCount20").text(response[19].count.toLocaleString()); //유아
240  $("#cateCount21").text(response[20].count.toLocaleString()); //기타 교육업
241  let totalCategory5 = 0;
242  for (let i = 17; i <= 20; i++) {
243    totalCategory5 += response[i].count;
244  }
245  $("#cateCount31").text(totalCategory5.toLocaleString()); //대분류 > 교육/육아
246
247  $("#cateCount22").text(response[21].count.toLocaleString()); //이미용
248  $("#cateCount23").text(response[22].count.toLocaleString()); //세탁
249  $("#cateCount24").text(response[23].count.toLocaleString()); //골프/스포츠
250  $("#cateCount25").text(response[24].count.toLocaleString()); //PC방/오락
251  $("#cateCount26").text(response[25].count.toLocaleString()); //기타 서비스업
252  let totalCategory6 = 0;
253  for (let i = 21; i <= 25; i++) {
254    totalCategory6 += response[i].count;
255  }
256  $("#cateCount32").text(totalCategory6.toLocaleString()); //대분류 > 생활서비스
257}
258// 페이지로드시 카테고리 카운터 함수 호출로 정보가져ì˜

258¤ê¸°
259categoryCountAPI();
260
261/*-----------------------------------------------------------------------------*/
262// 카테고리광고 정보가져오기
263//categoryADListAPIWorker("apiKey"); //웹워커로 함수호출
264
265/*-----------------------------------------------------------------------------*/
266// 월평균매출 등 : 금액정리
267function calculateLevySum(totalCost) {
268    let levySum = '';
269    
270    // 1억원 이상인 경우
271    if (totalCost >= 100000) {
272        const 억 = Math.floor(totalCost / 100000); // 소수점 버리고 정수반환
273        const 만 = Math.floor(totalCost % 100000 / 10).toLocaleString(); // 10만단위로 나누고 난 나머지를 만단위로 변경후 숫자포멧팅
274        levySum = `${억}억 ${만}만원`;
275    } else {
276        // 1억원 미만인 경우
277        const 만 = Math.floor(totalCost / 10).toLocaleString(); // 천단위를 만단위로 변경하고 숫자포멧팅
278        levySum = `${만}만원`;
279    }
280    
281    return levySum;
282}
283function cleanBrandName(name) {
284  // 괄호와 괄호 내 문자를 제거
285  let cleanedName = name.replace(/\([^)]+\)\s*/g, "");
286  // 공백 제거
287  cleanedName = cleanedName.replace(/\s/g, "");
288  // &를 &로 대체
289  cleanedName = cleanedName.replace(/&/g, "&");
290  // '를(따옴표) 제거
291  cleanedName = cleanedName.replace(/'/g, "");
292  // ; 제거
293  cleanedName = cleanedName.replace(/;/g, "");
294  // 작은따옴표(') 제거
295  cleanedName = cleanedName.replace(/'/g, "");
296  // 슬래시 제거
297  cleanedName = cleanedName.replace(/\//g, "&");
298  // 물음표 제거
299  cleanedName = cleanedName.replace(/\?/g, "");
300  // 대괄호 시작 제거
301  cleanedName = cleanedName.replace(/\[/g, "");
302  // 대괄호 종료 제거
303  cleanedName = cleanedName.replace(/\]/g, "");
304  return cleanedName;
305}
306
307
308function categoryADListViewPoint(datas) {
309  //console.log("카테광고(웹워커):", datas);
310
311  function cateAdhandleImageError(ci, src, oriBrName, inum) {
312    console.log("카테광고이미지 로드실패: " + ci, src, oriBrName, inum);
313    // 기본 이미지 URL
314    var defaultImageUrl = "https://maps.openers.ai/require/Kmaps/img/OPENERS_OKi_character_2023-05-12.png";
315    $("#categoryADimgs" + ci).css("background-image", "url(" + defaultImageUrl + ")");
316
317    //에러발생이미지 DB에서 바로 제거하자!
318    errorImages_DBDeleter("cateAdhandleImageError", src, oriBrName, inum);
319  }
320  /*----------------------------------------------------------------*/
321  for (let j = 0; j < 32; j++) {
322    for (let i = 0; i < 3; i++) {
323      var ci = j * 3 + i; // $i를 $j에 의존적으로 만듭니다.
324
325      //$("#categoryADName" + ci).text(cleanBrandName(datas.cateAll[j][i].sign)); // 브랜드네임
326      var maxLength = 14; // 최대 길이
327      var oriBrName = datas.cateAll[j][i].sign;
328      var inum = datas.cateAll[j][i].inum;
329      var originalText = cleanBrandName(oriBrName); // 클린화된 브랜드네임
330      var truncatedText =
331        originalText.length > maxLength
332          ? originalText.substring(0, maxLength) + "..."
333          : originalText;
334      $("#categoryADName" + ci).text(truncatedText); // 브랜드네임
335      $("#categoryADHQ" + ci).text(datas.cateAll[j][i].sangho); // 가맹본부(히든정보 - 상담신청시 필요)
336
337      $("#categoryADCate" + ci).text(datas.cateAll[j][i].openers_depth_2); // 2뎁스카테고리
338      $("#categoryADStore" + ci).text(
339        `전국 ${Number(
340          datas.cateAll[j][i].iall.split("|")[0]
341        ).toLocaleString()}ê³³`
342      ); // 전국매장수
343      $("#categoryADUnitArea" + ci).text(
344        `${Math.round(0.3025 * datas.cateAll[j][i].basearea)}평`
345      ); // 기준면적
346
347      $("#categoryADUnitAreaSales" + ci).text(
348        `월평균 ${Number(
349          Math.round(datas.cateAll[j][i].iall.split("|")[4] / 12 / 10)
350        ).toLocaleString()}만원`
351      ); // 평당매출력
352
353      //창업비용 정리
354      var membershipfee = datas.cateAll[j][i].membershipfee;
355      var educationfee = datas.cateAll[j][i].educationfee;
356      var deposit = datas.cateAll[j][i].deposit;
357      var costs = datas.cateAll[j][i].costs;
358      var interiorcost = datas.cateAll[j][i].interiorcost;
359
360      //var totalCost = calculateLevySum(parseInt(membershipfee + educationfee + deposit + costs + interiorcost, 10));
361      var totalCost = calculateLevySum(
362        parseInt(membershipfee, 10) +
363          parseInt(educationfee, 10) +
364          parseInt(deposit, 10) +
365          parseInt(costs, 10) +
366          parseInt(interiorcost, 10)
367      );
368
369      $("#categoryADCost" + ci).text(totalCost);

369 //창업비용
370      //$("#categoryADCost" + ci).text(calculateLevySum(parseInt(datas.cateAll[j][i].membershsum, 10) + parseInt(datas.cateAll[j][i].interiorcost, 10))); // 창업비용
371
372      $("#categoryADMatchCategoty" + j).text(
373        "#" + datas.cateAll[j][i].openers_depth_2
374      ); // 2뎁스 광고매치카테고리
375
376      /*-----------------------------------------------------------------*/
377      //광고이미지 삽입
378      //$("#categoryADimgs" + ci).css("background-image", "url(" + datas.cateAll[j][i].br_imgsURL + ")");
379
380      var img = new Image(); //이미지 요소 생성
381      img.src = datas.cateAll[j][i].br_imgsURL; //이미지의 URL 설정
382
383      // 일단 이미지 모두를 삽입(로딩) 시도
384      $("#categoryADimgs" + ci).css(
385        "background-image",
386        "url('" + img.src + "')"
387      );
388
389      // 이미지 로딩실패시
390      img.onerror = (function (currentCi, imgSrc, brandName, inum) {
391        return function () {
392          cateAdhandleImageError(currentCi, imgSrc, brandName, inum);
393        };
394      })(ci, img.src, oriBrName, inum);
395
396      /*-----------------------------------------------------------------*/
397      var buttonsContent;
398      if (datas.cateAll[j][i].adType === "yes") {
399        buttonsContent = $("<div>")
400          .addClass("adYes")
401          .append(
402            $("<span>")
403              .attr("id", "cateConsultingApplication" + ci)
404              .text("상담신청")
405              .append($("<i>!</i>"))
406          )
407          .append(
408            $("<span>")
409              .attr("id", "cateDetailBrand" + ci)
410              .text("자세히보기")
411          );
412      } else if (datas.cateAll[j][i].adType === "no") {
413        buttonsContent = $("<div>")
414          .addClass("adNo")
415          .append(
416            $("<span>")
417              .attr("id", "cateFoundedInquiry" + ci)
418              .text("창업문의")
419              .append($("<i>!</i>"))
420          )
421          .append(
422            $("<span>")
423              .attr("id", "cateDetailBrand" + ci)
424              .text("자세히보기")
425          );
426      } else {
427        buttonsContent = $("<div>")
428          .addClass("adDefault")
429          .append(
430            $("<span>")
431              .attr("id", "cateDetailBrand" + ci)
432              .text("브랜드창업 자세히보기")
433              .append($("<i>!</i>"))
434          );
435      }
436
437      $("#categoryADButtons" + ci).html(buttonsContent);
438
439      //각 버튼의 클릭이벤트 등록
440      (function (index) {
441        //"상담신청"시
442        $("#cateConsultingApplication" + index).click(function () {
443          var ob = datas.cateAll[j][i].sign;
444          var inum = datas.cateAll[j][i].inum;
445          var hq = $("#categoryADHQ" + index).text();
446          //console.log(index, ob, hq);
447          openModalWindow("cateConsultingApplication" + index, ob, hq, inum);
448        });
449        //"창업문의"시
450        $("#cateFoundedInquiry" + index).click(function () {
451          var ob = datas.cateAll[j][i].sign;
452          var inum = datas.cateAll[j][i].inum;
453          var hq = $("#categoryADHQ" + index).text();
454          //console.log(index, ob, hq);
455          openModalWindow("cateFoundedInquiry" + index, ob, hq, inum);
456        });
457        //"브랜드창업 자세히보기" 좌측서포트창 여닫기
458        $("#cateDetailBrand" + index).click(function () {
459          var ob = datas.cateAll[j][i].sign;
460          //console.log(index, ob);
461          cvWrapOnOff("brandType", "cateDetailBrand" + index, ob);
462        });
463      })(ci);
464
465      /* 각 브랜드 관심(좋아요) 기능부여 ------------------------------------*/
466      var liked_sign = datas.cateAll[j][i].sign;
467      var liked_inum = datas.cateAll[j][i].inum;
468      var like_count = datas.cateAll[j][i].like_count;
469      //삽입하기
470      $("#categoryADLiked" + ci).attr("data-brand-sign", liked_sign);
471      $("#categoryADLiked" + ci).attr("data-brand-inum", liked_inum);
472
473      var $brand_key = $('[data-brand-sign="' + liked_sign + '"]');
474      $brand_key.find("span").text(" +" + like_count);
475      //console.log($brand_key[0]);
476
477      //브랜드 관심(좋아요) 실시간 반영
478      var brandInfo = new BrandInfo(liked_sign, liked_inum);
479      updateDisplayedBrandLikes(brandInfo, "", "categoryAD", $brand_key);
480
481      //브래드 관심(좋아요) 클릭이벤트
482      (function (index) {
483        $("#categoryADLiked" + index).click(function () {
484          //리얼타임 업데이트
485          var e = "clicked";
486          var r = "categoryADLiked" + index;
487          var brand_sign = $("#categoryADLiked" + index).attr("data-brand-sign");
488          var brand_inum = $("#categoryADLiked" + index).attr("data-brand-inum");
489          var $brand_key = $('[data-brand-sign="' + brand_sign + '"]');
490          liked_live_update(e, r, brand_sign, brand_inum, $brand_key);
491        });
492      })(ci);
493      /*-------------------------------------------------------------------*/
494    }
495  }
496
497  $("#categoryADMatchCategoty" + 0).text("#" + cleanBrandName(datas.

497cateAll[0][0].openers_depth_1)); // 1뎁스 광고매치카테고리
498  $("#categoryADMatchCategoty" + 7).text("#" + cleanBrandName(datas.cateAll[7][0].openers_depth_1)); // 1뎁스 광고매치카테고리
499  $("#categoryADMatchCategoty" + 12).text("#" + cleanBrandName(datas.cateAll[12][0].openers_depth_1)); // 1뎁스 광고매치카테고리
500  $("#categoryADMatchCategoty" + 16).text("#" + cleanBrandName(datas.cateAll[16][0].openers_depth_1)); // 1뎁스 광고매치카테고리
501  $("#categoryADMatchCategoty" + 21).text("#" + cleanBrandName(datas.cateAll[21][0].openers_depth_1)); // 1뎁스 광고매치카테고리
502  $("#categoryADMatchCategoty" + 26).text("#" + cleanBrandName(datas.cateAll[26][0].openers_depth_1)); // 1뎁스 광고매치카테고리
503  /*----------------------------------------------------------------*/
504
505  // datas에서 sign 정보만 추출하여 배열에 저장
506  const signArray = [];
507  datas.cateAll.forEach((category, depth1Index) => {
508    category.forEach((item, depth2Index) => {
509      signArray.push({
510        sign: item.sign,
511        inum: item.inum,
512        position: `1-${depth1Index + 1}-${depth2Index + 1}`,
513      });
514    });
515  });
516  // datas.depth2.forEach((category, depth1Index) => {
517  //   category.forEach((item, depth2Index) => {
518  //     signArray.push({
519  //       sign: item.sign,
520  //       inum: item.inum,
521  //       position: `2-${depth1Index + 1}-${depth2Index + 1}`,
522  //     });
523  //   });
524  // });
525
526  //광고이미지 함수호출(웹워커에서 진행)
527  //categoryADImgAPIWorker(signArray);
528  //console.log("브랜드네임추출: ", signArray);
529}
530
531function categoryADImgViewPoint(imgs) {
532  console.log("카테광고이미지(웹워커):", imgs);
533  for (let i = 0; i < 96; i++) {
534    $("#categoryADimgs" + i).css("background-image", "url(" + imgs.imgURLs[i].urls[0].br_imgsURL + ")");
535  }
536}