BO 미리보기 페이지와 운영페이지의 중복 제거

Issue

• BO 미리보기 페이지와 운영 중인 페이지를 보여주는 컴포넌트가 각각 다르고, 거의 대부분이 중복된 코드로 되어있습니다.
• api 데이터가 정상적으로 받아졌는지 확인 후, 컴포넌트에 데이터를 삽입하는 로직이 모든 컴포넌트에 중복됩니다.

const itemList = ref([]);

const getQuickMenuList = () => dispatch('api/getQuickMenuList');

const getData = async () => {
    const res = await getQuickMenuList();

    if (res.status === 200) {
        itemList.value = res.data;
    }
    await nextTick();
    !!swiperCase.value && new Swiper('.ern-hom-quick .swiper-container', swiperCase.value);
};

getData();

Trouble Shooting

const itemList = ref([]);
const getQuickMenuList = () => dispatch('api/getQuickMenuList');

const getData = async () => {
    const res = await getQuickMenuList();
    if (res.status === 200) {
        itemList.value = res.data;
    }
    await nextTick();
    !!swiperCase.value && new Swiper('.swiper-container', swiperCase.value);
};
getData();

const getQuickMenuList = () => dispatch('api/getQuickMenuList');

const { itemList, getData } = useData(getQuickMenuList, () => {
    !!swiperCase.value && new Swiper('.swiper-container', swiperCase.value);
});

• 라우트의 query를 통해 bo 미리보기 페이지 여부를 확인합니다.
• 중복되는 로직을 커스텀 훅에 구현합니다.
• 데이터 수신 및 렌더링 이후 실행할 로직은 커스텀 훅에 콜백함수로 삽입할 수 있도록 구현합니다.

const getQuickMenuList = () => dispatch('api/getQuickMenuList');

const { itemList, getData } = useData(getQuickMenuList, () => {
    !!swiperCase.value && new Swiper('.ern-hom-quick .swiper-container', swiperCase.value);
});

import { nextTick, ref } from 'vue';
import { useRoute } from 'vue-router';

const useData = (getApiData: () => Promise<any>, callback: () => void) => {
    const { is_preview } = useRoute().query;

    const itemList = ref([]);

    const getData = async () => {
        // bo 미리보기
        if (is_preview === 'Y') {
            window.addEventListener('message', async (e) => {
                itemList.value = e.data;
                await nextTick();
                callback();
            });
            return;
        }
        // 운영 데이터
        const res = await getApiData();

        if (res.status === 200) {
            itemList.value = res.data;
        }
        await nextTick();
        callback();
    };

    return { itemList, getData };
};

export default useData;