influence/pages/view/common/settle/mediaAdd.vue

<template>
  <div>
    <div class="inner--headers">
      <h2>{{ pageId }}</h2>
      <div class="bread--crumbs--wrap">
        <span>홈</span>
        <span>미디어 관리</span>
        <span>{{ pageId }}</span>
      </div>
    </div>

    <div class="view-wrap mt--45">
      <div class="view-box">
        <div class="view-box-top">
          <h3 v-if="pageType == 'I'">MEDIA LIBRARY 등록</h3>
          <h3 v-else>MEDIA LIBRARY 수정</h3>
        </div>
        <div class="view-box-btm">
          <div class="form-style1">
            <v-form ref="addForm">
              <table>
                <colgroup>
                  <col style="width: 12.5rem" />
                  <col />
                </colgroup>
                <tbody>
                  <tr>
                    <th>언어<span class="bul">*</span></th>
                    <td>
                      <v-radio-group
                        v-model="form.formValue0"
                        inline
                        hide-details
                        class="radio--group"
                      >
                        <v-radio label="Korean" value="KR"></v-radio>
                        <v-radio label="English" value="EN"></v-radio>
                        <v-radio label="Chinese" value="CN"></v-radio>
                        <v-radio label="Japanese" value="JP"></v-radio>
                      </v-radio-group>
                    </td>
                  </tr>
                  <tr>
                    <th>제목<span class="bul">*</span></th>
                    <td>
                      <v-text-field
                        v-model="form.formValue1"
                        class="custom-input mini"
                        placeholder="제목을 입력해주세요."
                        :rules="[useValid.required('제목')]"
                      ></v-text-field>
                    </td>
                  </tr>
                  <tr>
                    <th>해시태그<span class="bul">*</span></th>
                    <td>
                      <v-text-field
                        v-model="form.formValue5"
                        class="custom-input mini"
                        placeholder="해시태그를 입력해주세요. 예) 태그, 태그 형태로 여러개 입력시  ,를 이용하여 입력해주세요."
                        :rules="[useValid.required('해시태그')]"
                      ></v-text-field>
                    </td>
                  </tr>
                  <tr>
                    <th>노출여부<span class="bul">*</span></th>
                    <td>
                      <v-radio-group
                        class="radio--group"
                        v-model="form.formValue2"
                        inline
                        hide-details
                      >
                        <v-radio label="노출" value="Y"></v-radio>
                        <v-radio label="비노출" value="N"></v-radio>
                      </v-radio-group>
                    </td>
                  </tr>
                  <tr>
                    <th>날짜</th>
                    <td>
                      <v-text-field
                        v-model="form.formValue7"
                        style="max-width: 400px"
                        class="custom-input mini"
                        placeholder="날짜를 입력해주세요. 예) 2024-12-25"
                      ></v-text-field>
                    </td>
                  </tr>
                  <tr>
                    <th>사진<span class="bul">*</span></th>
                    <td class="media--editor">
                      <span class="caution"
                        >* 사진 첨부만 가능합니다. 입력하신 텍스트는 저장되지
                        않습니다.</span
                      >
                      <SunEditorWrapper
                        ref="sunEditorWrapper"
                        :initialContent="editorContentReq"
                      />
                    </td>
                  </tr>
                </tbody>
              </table>
            </v-form>
          </div>
        </div>
      </div>

      <div class="view-btm-btn">
        <div class="btn-l">
          <v-btn class="custom-btn btn-list" @click="listLocated"
            ><i class="ico"></i>목록</v-btn
          >
          <v-btn v-if="pageType == 'U'" class="custom-btn btn-del" @click="fnDelEvt"
            ><i class="ico"></i>삭제</v-btn
          >
        </div>

        <div class="btn-r">
          <v-btn v-if="pageType == 'I'" class="custom-btn btn-blue2" @click="fnRegCheck"
            ><i class="ico"></i>저장</v-btn
          >
          <v-btn v-else class="custom-btn btn-blue2" @click="fnRegCheck"
            ><i class="ico"></i>수정</v-btn
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import SunEditorWrapper from "@/components/sunEdt.vue";
import useAxios from "@/composables/useAxios";

/************************************************************************
|    레이아웃
************************************************************************/
definePageMeta({
  layout: "default",
});

/************************************************************************
|    스토어
 ************************************************************************/
const useDtStore = useDetailStore();

/************************************************************************
|    전역
 ************************************************************************/
const { $toast, $log, $dayjs, $eventBus } = useNuxtApp();
const router = useRouter();
const pageId = ref("MEDIA LIBRARY");

const sunEditorWrapper = ref(null); //에디터용 전역
const updatedContent = ref(null); //에디터용 전역
const editorContentReq = ref(""); //에디터용 전역

const addForm = ref(null);
const index = ref(null);
const imageIndex = ref(0);
const items = ref([]);
const quillEditor = ref(null);
const customToolbar = ref([["image"]]); // 에디터에서 이미지 첨부만 가능하게끔
const imgTemp = ref(null);
const rowId = ref();
const form = ref({
  formValue0: "KR",
  formValue1: "",
  formValue2: "Y",
  // formValue3: "",
  formValue4: "",
  formValue5: "",
  // formValue6: [],
  // fileResponse: null,
  formValue7: "",
});

const uploadFiles = ref([
  {
    file_name: "",
    ogn_name: "",
  },
]);

const pageType = ref("");
const apiUrl = ref("");
apiUrl.value = import.meta.env.VITE_APP_API_URL;

/************************************************************************
|    함수(METHODS)
************************************************************************/

const listLocated = () => {
  router.push({
    path: "/view/media/mediaList",
  });
};

/*======================================================================
|    작성 시퀀스
| 1. 작성 컨펌
| 2. 버튼 체크
| 3. 등록시 -> 등록 API 호출
======================================================================*/
const fnRegCheck = () => {
  nextTick(() => {
    if (addForm.value && typeof addForm.value.validate === "function") {
      addForm.value
        .validate()
        .then((isValid) => {
          if (isValid.valid) {
            if (pageType.value == "I") {
              fnRegEvt();
            } else {
              fnUpdEvt();
            }
          } else {
            let param = {
              id: pageId,
              title: "미디어 라이브러리",
              content: "필수항목을 입력해주세요.",
              yes: {
                text: "확인",
                isProc: false,
              },
              no: {
                text: "취소",
                isProc: false,
              },
            };
            $eventBus.emit("OPEN_CONFIRM_POP_UP", param);
          }
        })
        .catch((err) => {
          console.error("벨리데이션 에러", err);
        });
    } else {
      console.error("항목 누락체크[fnRegCheck]]");
    }
  });
};

const fnRegEvt = () => {
  // 공고날짜 체크
  const datePattern = /^\d{4}\-\d{2}\-\d{2}$/;
  if (form.value.formValue7 && !datePattern.test(form.value.formValue7)) {
    let param = {
      id: pageId,
      title: "공고사항",
      content: "날짜를 올바른 형식(YYYY-MM-DD)으로 입력해주세요",
      yes: {
        text: "확인",
        isProc: false,
      },
      no: {
        text: "취소",
        isProc: false,
      },
    };
    $eventBus.emit("OPEN_CONFIRM_POP_UP", param);
    return false;
  } else {
    let param = {
      id: pageId,
      title: "미디어 라이브러리",
      content: "등록하시겠습니까?",
      yes: {
        text: "등록",
        isProc: true,
        event: "FN_INSERT",
        param: "",
      },
      no: {
        text: "취소",
        isProc: false,
      },
    };
    $eventBus.emit("OPEN_CONFIRM_POP_UP", param);
  }
};

const fnInsert = async () => {
  //BASE64에서 실제 파일서버에 파일 전성후 내용 컨텐츠 REAL주소로 변경
  await editorContent();

  let frm = new FormData();
  let wterGet = localStorage.getItem("tempAccess");
  let params = JSON.stringify({
    wter: wterGet,
    brd_cd: "BR01",
    brd_lang: form.value.formValue0,
    title: form.value.formValue1,
    show_yn: form.value.formValue2,
    content: updatedContent.value
      .replace(/<\/?div[^>]*>/g, "")
      .replace(/<p>.*?<\/p>/gs, "")
      .trim(),
    hash_tag: form.value.formValue5,
    cmd_date: form.value.formValue7,
  });

  const hasImgTag = /<img\s+[^>]*>/i.test(updatedContent.value);
  if (!hasImgTag) {
    let param = {
      id: pageId,
      title: "미디어 라이브러리",
      content: "사진 첨부는 필수입니다.",
      yes: {
        text: "확인",
        isProc: false,
      },
      no: {
        text: "취소",
        isProc: false,
      },
    };
    $eventBus.emit("OPEN_CONFIRM_POP_UP", param);
    return false;
  }

  frm.append("params", params);

  useAxios()
    .post("/brd/ins", frm, { headers: { "Content-Type": "multipart/form-data" } })
    .then((res) => {
      router.push("/view/media/mediaList");
    })
    .catch((error) => {
      //$log.debug("[equipMgmtReg][fnGetTenantList][error]");
      //useErrorHandler().fnSetCommErrorHandle(error, fnGetTenantList);
    })
    .finally(() => {
      //$log.debug("[equipMgmtReg][fnGetTenantList][finished]");
      //objSlt.value.tenantNameList = _cloneDeep(temp);
    });
};

const fnUpdEvt = () => {
  // 공고날짜 체크
  const datePattern = /^\d{4}\-\d{2}\-\d{2}$/;
  if (form.value.formValue7 && !datePattern.test(form.value.formValue7)) {
    let param = {
      id: pageId,
      title: "공고사항",
      content: "날짜를 올바른 형식(YYYY-MM-DD)으로 입력해주세요",
      yes: {
        text: "확인",
        isProc: false,
      },
      no: {
        text: "취소",
        isProc: false,
      },
    };
    $eventBus.emit("OPEN_CONFIRM_POP_UP", param);
    return false;
  } else {
    let param = {
      id: pageId,
      title: "미디어 라이브러리",
      content: "수정하시겠습니까?",
      yes: {
        text: "확인",
        isProc: true,
        event: "FN_UPDATE",
        param: "",
      },
      no: {
        text: "취소",
        isProc: false,
      },
    };
    $eventBus.emit("OPEN_CONFIRM_POP_UP", param);
  }
};

const fnUpdate = async () => {
  //BASE64에서 실제 파일서버에 파일 전성후 내용 컨텐츠 REAL주소로 변경
  await editorContent();

  let frm = new FormData();
  let wterGet = localStorage.getItem("tempAccess");
  let params = JSON.stringify({
    seq: useDtStore.boardInfo.seq,
    wter: wterGet,
    brd_cd: "BR01",
    brd_lang: form.value.formValue0,
    title: form.value.formValue1,
    show_yn: form.value.formValue2,
    content: updatedContent.value
      .replace(/<\/?div[^>]*>/g, "")
      .replace(/<p>.*?<\/p>/gs, "")
      .trim(),
    hash_tag: form.value.formValue5,
    cmd_date: form.value.formValue7,
  });

  const hasImgTag = /<img\s+[^>]*>/i.test(updatedContent.value);
  if (!hasImgTag) {
    let param = {
      id: pageId,
      title: "미디어 라이브러리",
      content: "사진 첨부는 필수입니다.",
      yes: {
        text: "확인",
        isProc: false,
      },
      no: {
        text: "취소",
        isProc: false,
      },
    };
    $eventBus.emit("OPEN_CONFIRM_POP_UP", param);
    return false;
  }

  frm.append("params", params);

  useAxios()
    .post("/brd/upd", frm, { headers: { "Content-Type": "multipart/form-data" } })
    .then((res) => {
      router.push("/view/media/mediaList");
    })
    .catch((error) => {
      $log.debug("[equipMgmtReg][fnGetTenantList][error]");
      //useErrorHandler().fnSetCommErrorHandle(error, fnGetTenantList);
    })
    .finally(() => {
      //$log.debug("[equipMgmtReg][fnGetTenantList][finished]");
      //objSlt.value.tenantNameList = _cloneDeep(temp);
    });
};

const fnDelEvt = () => {
  let param = {
    id: pageId,
    title: "미디어 라이브러리",
    content: "삭제하시겠습니까?",
    yes: {
      text: "확인",
      isProc: true,
      event: "FN_DELETE",
      param: "",
    },
    no: {
      text: "취소",
      isProc: false,
    },
  };
  $eventBus.emit("OPEN_CONFIRM_POP_UP", param);
};

const fnDelete = () => {
  let wterGet = localStorage.getItem("tempAccess");
  let req = {
    brd_cd: "BR01",
    seq: useDtStore.boardInfo.seq,
    wter: wterGet,
  };

  useAxios()
    .post("/brd/del", req)
    .then((res) => {
      router.push("/view/media/mediaList");
    })
    .catch((error) => {
      //$log.debug("[equipMgmtReg][fnGetTenantList][error]");
      //useErrorHandler().fnSetCommErrorHandle(error, fnGetTenantList);
    })
    .finally(() => {
      //$log.debug("[equipMgmtReg][fnGetTenantList][finished]");
      //objSlt.value.tenantNameList = _cloneDeep(temp);
    });
};

const fnDetail = async () => {
  //BASE64에서 실제 파일서버에 파일 전성후 내용 컨텐츠 REAL주소로 변경
  await editorContent();

  let req = {
    seq: useDtStore.boardInfo.seq,
  };
  useAxios()
    .post("/brd/detail", req)
    .then((res) => {
      //console.log(res);
      form.value.formValue0 = res.data.brd_lang;
      form.value.formValue1 = res.data.title;
      form.value.formValue2 = res.data.show_yn;
      form.value.formValue4 = res.data.content
        .replace(/<\/?div[^>]*>/g, "")
        .replace(/<p>.*?<\/p>/gs, "")
        .trim();
      form.value.formValue5 = res.data.hash_tag;
      //if(result.files) this.uploadFiles = result.files
      //에디터에 컨텐츠 전달
      editorContentReq.value = res.data.content;

      uploadFiles.value[0].file_name = res.data.file_title;
      uploadFiles.value[0].ogn_name = res.data.ogn_f_title;
      form.value.formValue7 = res.data.cmd_date;
    })
    .catch((error) => {
      //$log.debug("[equipMgmtReg][fnGetTenantList][error]");
      //useErrorHandler().fnSetCommErrorHandle(error, fnGetTenantList);
    })
    .finally(() => {
      //$log.debug("[equipMgmtReg][fnGetTenantList][finished]");
      //objSlt.value.tenantNameList = _cloneDeep(temp);
    });
};

/*=======================================================================
| 최종 에디터 이미지 url치환 : S
/*=======================================================================*/

const editorContent = async () => {
  const content = sunEditorWrapper.value.getEditorContent();
  updatedContent.value = await processEditorContent(content);
  console.log("Updated content:", updatedContent.value);
};

// Base64 데이터를 Blob으로 변환
const base64ToBlob = (base64, mimeType) => {
  const byteString = atob(base64.split(",")[1]);
  const arrayBuffer = new ArrayBuffer(byteString.length);
  const uint8Array = new Uint8Array(arrayBuffer);

  for (let i = 0; i < byteString.length; i++) {
    uint8Array[i] = byteString.charCodeAt(i);
  }

  return new Blob([uint8Array], { type: mimeType });
};

// Base64 데이터를 File 객체로 변환
const base64ToFile = (base64, mimeType, fileName) => {
  const blob = base64ToBlob(base64, mimeType);
  return new File([blob], fileName, { type: mimeType });
};

// 이미지 업로드 처리 (useAxios)
const uploadImage = async (file) => {
  const formDataEdt = new FormData();
  formDataEdt.append("picObj", file);

  return useAxios()
    .post("/pic/upload", formDataEdt, {
      headers: { "Content-Type": "multipart/form-data" },
    })
    .then((res) => {
      const filePath = res.data.ogn_name.path.replace(/.*\/files\//, "");
      const fileName = res.data.ogn_name.file_name;
      return `${apiUrl.value}/images/${filePath}/${fileName}`; // 최종 URL 반환
    })
    .catch((error) => {
      console.error("Image upload failed:", error);
      return null;
    });
};

// 에디터 내용 처리 및 이미지 업로드
const processEditorContent = async (content) => {
  const parser = new DOMParser();
  const doc = parser.parseFromString(content, "text/html");
  const images = doc.querySelectorAll("img");

  for (let i = 0; i < images.length; i++) {
    const img = images[i];
    const src = img.src;

    if (src.startsWith("data:image")) {
      // MIME 타입과 파일 이름 추출
      const mimeType = src.split(";")[0].split(":")[1];
      const extension = mimeType.split("/")[1];
      const fileName = `image-${i + 1}.${extension}`;

      // Base64 데이터를 File 객체로 변환
      const file = base64ToFile(src, mimeType, fileName);

      // 이미지 업로드 및 URL 반환
      const finalUrl = await uploadImage(file);
      if (finalUrl) {
        img.src = finalUrl; // 이미지 src 업데이트
      }
    }
  }

  return doc.body.innerHTML; // 최종 수정된 HTML 반환
};

/*=======================================================================
| 최종 에디터 이미지 url치환 : E
/*=======================================================================*/

/************************************************************************
|    팝업 이벤트버스 정의
************************************************************************/
$eventBus.off("FN_INSERT");
$eventBus.on("FN_INSERT", () => {
  fnInsert();
});

$eventBus.off("FN_DELETE");
$eventBus.on("FN_DELETE", () => {
  fnDelete();
});

$eventBus.off("FN_UPDATE");
$eventBus.on("FN_UPDATE", () => {
  fnUpdate();
});

$eventBus.off("FN_CONFIRM");
$eventBus.on("FN_CONFIRM");

/************************************************************************
|    라이프사이클
************************************************************************/
onMounted(() => {
  pageType.value = useDtStore.boardInfo.pageType;

  //상세 등록 아니 리스트 클릭시 상세 정보로 접근
  if (pageType.value == "U") {
    fnDetail();
  }
});

/************************************************************************
|    WATCH
************************************************************************/
</script>