localhost-front/src/common/common.js

/*
    작성자 : 공현지
    작성일 : 2025-01-17
    수정자 : 박성용
    수정일 : 2025-03-11
    설명   : 공통 스크립트
*/
import Quill from 'quill';

/*
    *템플릿 사용법 : $common.변수
    *setup() 사용법 :
        const { appContext } = getCurrentInstance();
        const $common = appContext.config.globalProperties.$common;
        or 
        import { inject } from 'vue';         
        const $common = inject('common');
*/
const common = {
    // JSON 문자열로 Delta 타입을 변환
    contentToHtml(content) {
        try {
            if (content.startsWith('{') || content.startsWith('[')) {
                // Delta 형식으로 변환
                const delta = JSON.parse(content);
                const quill = new Quill(document.createElement('div'));
                quill.setContents(delta);
                return quill.root.innerHTML; // HTML 반환
            }
            return content; // 이미 HTML일 경우 그대로 반환
        } catch (error) {
            console.error('콘텐츠 변환 오류:', error);
            return content; // 오류 발생 시 원본 반환
        }
    },
    // Delta 타입을 JSON 문자열로 변환
    deltaAsJson(content) {
        if (content && content.ops) {
            return JSON.stringify(content.ops); // Delta 객체에서 ops 속성만 JSON 문자열로 변환
        }
        console.error('잘못된 Delta 객체:', content);
        return null; // Delta 객체가 아니거나 ops가 없을 경우 null 반환
    },

    /**
     * Date 타입 문자열 포멧팅
     *
     * @param {string} dateStr
     * @return
     * 1. Date type 인 경우 예시 '2025-02-24 12:02'
     * 2. Date type 이 아닌 경우 입력값 리턴
     *
     */
    dateFormatter(dateStr, type = null) {
        const date = new Date(dateStr);
        const dateCheck = date.getTime();

        if (isNaN(dateCheck)) {
            return dateStr;
        } else {
            const { year, month, day, hours, minutes } = this.formatDateTime(date);
            let callback = '';

            if (type == 'YMD') {
                callback = `${year}-${month}-${day}`;
            } else if (type == 'MD') {
                callback = `${month}-${day}`;
            } else {
                callback = `${year}-${month}-${day} ${hours}:${minutes}`;
            }

            return callback;
        }
    },

    formatDateTime(dateObj) {
        const date = new Date(dateObj);
        const dateCheck = date.getTime();
        if (isNaN(dateCheck)) return dateObj;

        const zeroFormat = num => (num < 10 ? `0${num}` : num);
        return {
            year: date.getFullYear(),
            month: zeroFormat(date.getMonth() + 1),
            day: zeroFormat(date.getDate()),
            hours: zeroFormat(date.getHours()),
            minutes: zeroFormat(date.getMinutes()),
            seconds: zeroFormat(date.getSeconds()),
        };
    },

    // 오늘 날짜시간 조회
    getToday() {
        const date = new Date();
        return {
            year: date.getFullYear(),
            month: date.getMonth() + 1,
            day: date.getDate(),
            hours: date.getHours(),
            minutes: date.getMinutes(),
            seconds: date.getSeconds(),
        };
    },

    // 해당 월, 일에 맞는 목록 필터링
    filterTargetByDate(target, key, month, day) {
        if (!Array.isArray(target) || target.length === 0) return [];

        return [...target].filter(item => {
            if (!item[key]) return false;

            const date = new Date(item[key]);
            const MatchingMonth = date.getMonth() + 1 === parseInt(month, 10);
            const MatchingDay = date.getDate() === parseInt(day, 10);

            return MatchingMonth && MatchingDay;
        });
    },

    /**
     * 빈값 확인
     *
     * @param {} obj
     * @returns
     */
    isNotEmpty(obj) {
        if (obj === null || obj === undefined) {
            return false;
        }

        if (typeof obj === 'string' && obj.trim() === '') {
            return false;
        }

        if ((Array.isArray(obj) || obj === Object(obj)) && Object.keys(obj).length === 0) {
            return false;
        }

        return true;
    },

    /**
     * 에디터에 내용이 있는지 확인
     *
     * @param { Quill } content
     * @returns true: 값 없음, false: 값 있음
     */
    isNotValidContent(content) {
        if (!content.value?.ops?.length) return true;

        // 이미지 포함 여부 확인
        const hasImage = content.value.ops.some(op => op.insert && typeof op.insert === 'object' && op.insert.image);
        // 텍스트 포함 여부 확인
        const hasText = content.value.ops.some(op => typeof op.insert === 'string' && op.insert.trim().length > 0);

        // 텍스트 또는 이미지가 하나라도 있으면 유효한 내용
        return !(hasText || hasImage);
    },

    /**
     * 빈 값 확인
     *
     * @param { ref } text ex) inNotValidInput(data.value);
     * @returns
     */
    isNotValidInput(text) {
        return text.trim().length === 0;
    },

    /**
     * 프로필 이미지 반환
     *
     * @param { String } profileImg
     * @returns
     */
    getProfileImage(profileImg, isAnonymous = false) {
        const defaultProfileImg = '/img/icons/icon.png'; // 기본 프로필 이미지 경로
        const anonymousImg = '/img/avatars/default-Profile.jpg'; // 익명 이미지
        let profileImgUrl = isAnonymous ? anonymousImg : defaultProfileImg;
        const UserProfile = `${import.meta.env.VITE_SERVER}upload/img/profile/${profileImg}`;

        return !profileImg || profileImg === '' ? profileImgUrl : UserProfile;
    },

    setDefaultImage(event, deafultImg = '/img/icons/icon.png') {
        return (event.target.src = deafultImg);
    },
    showImage(event) {
        return (event.target.style.visibility = 'visible');
    },

    addHyphenToPhoneNumber(phoneNum) {
        const phoneNumber = phoneNum;
        const length = phoneNumber.length;

        if (length >= 9) {
            return phoneNumber.replace(/[^0-9]/g, '').replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`);
        } else {
            return phoneNum;
        }
    },
};

export default {
    install(app) {
        app.config.globalProperties.$common = common;
        app.provide('common', common);
    },
};