외부 JS 제작(SweetAlert , chart)

이번 팀프로젝트를 하면서 SweetAlet과 chart 를 사용하려했는데

HTML 코드내에 내부 JS 로 넣으려 하니 코드가 길어지고

여러곳에 사용하기 힘들다는 점을 보고 외부 JS 파일로 빼서 사용했다.

 

SweetAlert_modal.js

sweetAlert을 기본으로 사용하기 위해서는 아래 cdn을 추가해주어야한다.

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.10/dist/sweetalert2.min.css">
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.10/dist/sweetalert2.min.js"></script>

 

SweetAlet 기본틀

    Swal.fire({
        title : title,
        text : msg,
        icon : 'success',
    });

 

사용하다보니 저걸 다 쓰면서 하나씩 넣기에는 음... 너무 많다

그래서 아래 외부 JS 파일로 메서드(제목, 내용)으로 한줄만 추가하면 사용가능하게 해두었다.

function sweetAlert_success(title, msg) {
    console.log('sweetAlert_modal.js success start log');
    Swal.fire({
        title : title,
        text : msg,
        icon : 'success',
    });
    console.log('sweetAlert_modal.js success end log');
}

function sweetAlert_error(title, msg) {
    console.log('sweetAlert_modal.js error start log');
    Swal.fire({
        title : title,
        text : msg,
        icon : 'error',
    });
    console.log('sweetAlert_modal.js error end log');
}

function sweetAlert_warning(title, msg) {
    console.log('sweetAlert_modal.js warning start log');
    Swal.fire({
        title : title,
        text : msg,
        icon : 'warning',
    });
    console.log('sweetAlert_modal.js warning end log');
}

function sweetAlert_info(title, msg) {
    console.log('sweetAlert_modal.js info start log');
    Swal.fire({
        title : title,
        text : msg,
        icon : 'info',
    });
    console.log('sweetAlert_modal.js info end log');
}

function sweetAlert_question(title, msg) {
    console.log('sweetAlert_modal.js question start log');
    Swal.fire({
        title : title,
        text : msg,
        icon : 'question',
    });
    console.log('sweetAlert_modal.js question end log');
}

function sweetAlert_confirm_error(title, msg, confirm_btn, cancel_btn) {
    console.log('sweetAlert_modal.js sweetAlert_confirm_error start log');
    return  Swal.fire({
        title: title,
        text: msg,
        icon: 'error',

        showCancelButton: true, // cancel 버튼 생성 / 기본은 원래 없음
        confirmButtonColor: '#3085d6', // confirm 버튼 색깔 지정
        cancelButtonColor: '#d33', // cancel 버튼 색깔 지정
        confirmButtonText: confirm_btn, // confirm 버튼 텍스트 지정
        cancelButtonText: cancel_btn, // cancel 버튼 텍스트 지정

        reverseButtons: true, // 버튼 순서 반전

    }).then(function (result){
        console.log('sweetAlert_modal.js return log : ['+result.isConfirmed+']' );
        console.log('sweetAlert_modal.js sweetAlert_confirm_error end log');
        //True False 를 반환
        return result.isConfirmed;
    });
}

 

이제 모든 페이지에서 아래 스크립트를 불러오고 메서드 명을 불러오면 그냥 사용이 가능하다.

<script src="js/sweetAlert_modal.js"></script>
  
sweetAlert_confirm_error('Test error','정말 삭제하시겠습니까?','삭제','취소').then(function(flag){
	console.log(flag);
	if (flag) {
		console.log('사용자 삭제 진행');
	$('#delete-member-form').submit();
}
});

 

---

chart에 경우도 관리자페이지를 만들다보니

다른 곳에서도 사용할 것 같은데? 라는 생각이 들어서 만들었습니다.

 

chart.js

import {gym_config, member_config, reservation_config} from 'chartConfig';

$(document).ready(function () {
//chart 형식 적용
const member_chart = {
    type: 'line',
    data: member_config,
};
const reservation_chart = {
    type: 'bar',
    data: reservation_config,
};
const gym_chart = {
    type: 'doughnut',
    data: gym_config,
};


//chart 생성
    new Chart($('#member_chart'), member_chart);
    new Chart($('#reservation_chart'), reservation_chart);
    new Chart($('#gym_chart'), gym_chart);
})

 

chartConfig.js

//member chart 생성 정보
    export const member_config = {
        labels: Member_Chart_Data_title,
        datasets: [{
            label: '사용자',
            data: Member_Chart_Data_text,
            fill: false,
            borderColor: 'rgb(244,16,16)',
            tension: 0.1,
            maintainAspectRatio: true,
            responsive: false,
        }]
    };

    export const reservation_config = {
        labels: Member_Chart_Data_title,
        datasets: [{
            label: '예약자',
            data: Member_Chart_Data_text,
            backgroundColor: [
                'rgb(255, 99, 132)'
            ],
            maintainAspectRatio: true,
            responsive: false,
        }]
    };
    export const gym_config = {
        labels: Member_Chart_Data_title,
        datasets: [{
            label: '암벽장',
            data: Member_Chart_Data_text,
            backgroundColor: [
                'rgb(255, 99, 132)',
                'rgb(54, 162, 235)',
                'rgb(35,71,198)',
                'rgb(101,170,33)'
            ],
            cutout : '50%',
            maintainAspectRatio: true,
            responsive: false,

        }]
    };