📌 Cordova InAppBrowser를 활용한 이미지 확대 보기 기능 구현

📝 개요

하이브리드 앱 개발 과정에서 조직도에서 특정 사용자의 프로필 사진을 클릭하면 해당 사진을 확대하여 볼 수 있도록 InAppBrowser 플러그인을 활용하여 기능을 구현했다.

기존에는 클릭 시 아무런 반응이 없었지만, 이제 클릭 시 새 창에서 이미지를 확대하여 볼 수 있도록 개선했다.

🚀 구현 내용

🔹 사용자 상세 정보 조회 기능

사용자 조직도에서 특정 사용자의 정보를 조회할 수 있도록 하는 기능을 추가했다.

이 과정에서 사용자의 프로필 사진 URL을 동적으로 생성하여 저장하도록 했다.

📌 코드 예시 (사용자 정보 조회 및 프로필 사진 생성)

$("#organization").on("click", ".view_detail", function(e) {
    e.stopPropagation();
    let user = user_map[$(this).attr("user_id")];
    let img_element = $(this).closest('li').find('img');
    let img_src = img_element.attr('src');

    let user_info = {
        "name": user.name,
        "photo_url": (user.photo_path_url !== undefined && user.photo_path_url !== '')
            ? `${settingData.server_host}${settingData.server_port}${user.photo_path_url}`
            : img_src
    };

    console.log("✅ 생성된 이미지 URL:", user_info.photo_url);
    openDetail(user_info, null, null, 'organization');
});

🔹 프로필 사진 클릭 시 InAppBrowser를 통한 확대 보기

프로필 사진 클릭 시 InAppBrowser를 통해 확대하여 볼 수 있도록 개선했다.

✅ 주요 개선 사항

• 이미지 URL 확인 후 유효한 경우에만 InAppBrowser 실행
• 기본 이미지(default_image.jpg) 클릭 시 확대 보기 기능 무시
• InAppBrowser에 닫기 버튼 및 뒤로 가기 버튼 추가

📌 코드 예시 (InAppBrowser 실행 및 이벤트 처리)