+import { apiClient } from "./index";

+

+// 미디어영상 목록 조회

+export const findAllMediaVidosProc = (searchReqDTO) => {

+  return apiClient.get(`/mediaVido/findAllMediaVidos.json`, { params: searchReqDTO });

+}

+

+// 미디어영상 상세 조회

+export const findMediaVidoProc = (mediaVidoId) => {

+  return apiClient.get(`/mediaVido/${mediaVidoId}/findMediaVido.json`);

+}

+

+// 미디어영상 등록

+export const saveMediaVidoProc = (mediaVidoInsertDTO) => {

+  return apiClient.post(`/mediaVido/saveMediaVido.json`, mediaVidoInsertDTO);

+}

+

+// 미디어영상 수정

+export const updateMediaVidoDcry = (mediaVidoUpdateDTO) => {

+  return apiClient.put(`/mediaVido/updateMediaVido.json`, mediaVidoUpdateDTO);

+}

+

+// 미디어영상 삭제

+export const deleteMediaVidoProc = (mediaVidoId) => {

+  return apiClient.put(`/mediaVido/${mediaVidoId}/deleteMediaVido.json`);

+}(파일 끝에 줄바꿈 문자 없음)

+import { apiClient, fileClient } from "./index";

+

+// 보도자료 목록 조회

+export const findAllNesDtasProc = (searchReqDTO) => {

+  return apiClient.get(`/nesDta/findAllNesDtas.json`, { params: searchReqDTO });

+}

+

+// 보도자료 상세 조회

+export const findNesDtaProc = (nesDtaId) => {

+  return apiClient.get(`/nesDta/${nesDtaId}/findNesDta.json`);

+}

+

+// 보도자료 등록

+export const saveNesDtaProc = (formData) => {

+  return fileClient.post(`/nesDta/saveNesDta.file`, formData);

+}

+

+// 보도자료 수정

+export const updateNesDtaProc = (formData) => {

+  return fileClient.put(`/nesDta/updateNesDta.file`, formData);

+}

+

+// 보도자료 삭제

+export const deleteNesDtaProc = (nesDtaId) => {

+  return apiClient.put(`/nesDta/${nesDtaId}/deleteNesDta.json`);

+}(파일 끝에 줄바꿈 문자 없음)

+          <img v-else-if="name === 'M'" :src="getYouTubeThumbnail(item.link)" alt="영상 썸네일">

+          <h5>{{ item.sj }}</h5>

+import { getYouTubeThumbnail } from '../../../resources/js/youtubeUtils';

+

+      default: 'P'

+    // 유투브 썸네일 제작

+    getYouTubeThumbnail,

+<template>

+  <iframe v-if="videoId && !loadError" width="100%" height="843.75px" :src="embedUrl" frameborder="0" referrerpolicy="strict-origin-when-cross-origin" sandbox="allow-scripts allow-same-origin allow-presentation allow-popups allow-popups-to-escape-sandbox" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen @error="handleError"></iframe>

+  <div v-else style="text-align: center;">

+    <img src="client/resources/images/no_media.png" alt="미디어를 표시할 수 없습니다" style="width: auto; height: auto;" />

+  </div>

+</template>

+<script>

+export default {

+  name: 'YoutubePlayer',

+

+  props: {

+    link: {

+      type: String,

+      default: ''

+    }

+  },

+

+  data() {

+    return {

+      loadError: false

+    }

+  },

+

+  computed: {

+    videoId() {

+      if (!this.link) {

+        this.loadError = true;

+        return null;

+      }

+

+      try {

+        let id = null;

+

+        // 일반 YouTube URL (youtube.com/watch?v=VIDEO_ID)

+        if (this.link.includes('youtube.com/watch')) {

+          const url = new URL(this.link);

+          id = url.searchParams.get('v');

+        }

+

+        // 단축 URL (youtu.be/VIDEO_ID)

+        else if (this.link.includes('youtu.be/')) {

+          const parts = this.link.split('youtu.be/');

+          if (parts.length > 1) {

+            id = parts[1].split('?')[0].split('&')[0];

+          }

+        }

+

+        // 임베드 URL (youtube.com/embed/VIDEO_ID)

+        else if (this.link.includes('youtube.com/embed/')) {

+          const parts = this.link.split('youtube.com/embed/');

+          if (parts.length > 1) {

+            id = parts[1].split('?')[0].split('&')[0];

+          }

+        }

+

+        if (!id) {

+          this.loadError = true;

+          return null;

+        }

+

+        return id;

+      } catch (e) {

+        console.error('YouTube URL 파싱 오류:', e);

+        this.loadError = true;

+        return null;

+      }

+    },

+

+    embedUrl() {

+      if (!this.videoId) return '';

+      return `https://www.youtube-nocookie.com/embed/${this.videoId}?rel=0&modestbranding=1&origin=${encodeURIComponent(window.location.origin)}`;

+    }

+  },

+

+  methods: {

+    handleError() {

+      console.error('YouTube 비디오 로드 실패');

+      this.loadError = true;

+    }

+  },

+

+  mounted() {

+    if (this.videoId) {

+      const checkIframeLoaded = setTimeout(() => {

+        const iframe = this.$el.querySelector('iframe');

+        if (iframe) {

+          const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

+          if (!iframeDoc) {

+            this.loadError = true;

+          }

+        }

+        clearTimeout(checkIframeLoaded);

+      }, 5000); // 5초 타임아웃

+    }

+  },

+

+  watch: {

+    link() {

+      this.loadError = false;

+    }

+  }

+}

+</script>(파일 끝에 줄바꿈 문자 없음)

+  <div class="content">

+    <div class="sub-title-area mb-30">

+      <h2>미디어 영상</h2>

+      <div class="breadcrumb-list">

+        <ul>

+          <li><img :src="homeicon" alt="Home Icon">

+            <p>언론에서 바라본 구미시</p>

+          </li>

+          <li><img :src="righticon" alt=""></li>

+          <li>미디어 영상</li>

+        </ul>

+      </div>

+    <div class="gallery-form mb-40">

+      <dl class="mb-20">

+        <dd>

+          <p>{{ mediaVido.sj }} </p>

+          <div class="date flex align-center">

+            <img :src="calendaricon" alt="">

+            <span>{{ $dotFormatDate(mediaVido.rgsde) }}</span>

+          </div>

+        </dd>

+      </dl>

+      <div class="gallery video">

+        <Youtube-component :link="mediaVido.link" />

+      </div>

+    </div>

+    <h3>내용</h3>

+    <div class="info-form mb-50">

+      <dl>

+        <dd>

+          <Viewer-component :content="mediaVido.cn" />

+        </dd>

+      </dl>

+    </div>

+    <h3>기본정보</h3>

+    <div class="info-form mb-50">

+      <dl>

+        <dd class="mb-20">

+          <img :src="addressicon" alt="">

+          <span>원본주소</span>

+          <p>{{ mediaVido.link }}</p>

+        </dd>

+        <dd class="mb-20">

+          <img :src="yearicon" alt="">

+          <span>생산연도</span>

+          <p>{{ $dotFormatDate(mediaVido.prdctnYear) }}</p>

+        </dd>

+        <dd>

+          <img :src="categoryicon" alt="">

+          <span>카테고리</span>

+          <ul class="category">

+            <li v-for="(item, idx) of mediaVido.ctgrys" :key="idx" class="category">{{ item.ctgryNm }}</li>

+          </ul>

+        </dd>

+      </dl>

+    </div>

+    <div class="btn-group flex-center">

+      <button class="red-line " type="button" @click="fnDelete">삭제</button>

+      <button class="blue-line " type="button" @click="fnMoveTo('MediaVideoInsert', pageId)">수정</button>

+      <button class="gray-line-bg " type="button" @click="fnMoveTo('MediaVideoSearch')">목록</button>

+    </div>

+  </div>

+// COMPONENT

+import YoutubeComponent from '../../component/player/YoutubeComponent.vue';

+import ViewerComponent from '../../component/editor/ViewerComponent.vue';

+// API

+import { findMediaVidoProc, deleteMediaVidoProc } from '@/resources/api/mediaVido';

+import { fileDownloadProc } from '@/resources/api/file';

+  components: {

+    YoutubeComponent,

+    ViewerComponent,

+  },

+  data() {

+    return {

+      // ICON

+      calendaricon: 'client/resources/images/icon/calendaricon.png',

+      homeicon: 'client/resources/images/icon/home.png',

+      erroricon: 'client/resources/images/icon/error.png',

+      righticon: 'client/resources/images/icon/right.png',

+      addressicon: 'client/resources/images/icon/addressicon.png',

+      yearicon: 'client/resources/images/icon/yearicon.png',

+      categoryicon: 'client/resources/images/icon/categoryicon.png',

+      pageId: null,

+      mediaVido: {},

+      selectedFiles: [],

+    };

+  },

+  created() {

+    this.pageId = this.$route.query.id;

+    if (this.pageId === null) {

+      alert("게시물 존재하지 않습니다.");

+      this.fnMoveTo('MediaVideoSearch');

+    }

+  },

+

+  mounted() {

+    this.fnFindDcry(); // 상세 조회

+  },

+

+  methods: {

+    // 상세 조회

+    async fnFindDcry() {

+      try {

+        const response = await findMediaVidoProc(this.pageId);

+        this.mediaVido = response.data.data.mediaVido;

+      } catch (error) {

+        alert('조회중 오류가 발생했습니다.');

+        this.fnMoveTo('MediaVideoSearch');

+

+        if (error.response) {

+          alert(error.response.data.message);

+        }

+        console.error(error.message);

+      }

+

+    // 파일 다운로드

+    async fnDownload(type) {

+      // 유효성 검사

+      if (type === 'selected' && this.selectedFiles.length === 0) {

+        alert("파일을 1개 이상 선택하거나 전체 다운로드를 클릭해주세요.");

+        return;

+      }

+

+      let url = null;

+      let link = null;

+

+      try {

+        let fileIds = this.selectedFiles[0];

+        const response = await fileDownloadProc(fileIds);

+

+        // 파일명 조회

+        let filename = 'downloadFile.bin';

+        const filenameRegex = /file[Nn]ame[^;=\n]*=((['"]).*?\2|[^;\n]*)/;

+        const matches = filenameRegex.exec(response.headers['content-disposition']);

+        if (matches != null && matches[1]) {

+          filename = matches[1].replace(/['"]/g, '');

+        }

+

+        // 파일 다운로드 생성

+        url = window.URL.createObjectURL(new Blob([response.data]));

+        link = document.createElement('a');

+        link.href = url;

+        link.setAttribute('download', filename);

+        document.body.appendChild(link);

+        link.click();

+      } catch (error) {

+        alert('파일 다운로드 중 오류가 발생했습니다.');

+      } finally {

+        // 리소스 정리

+        setTimeout(() => {

+          if (url) {

+            window.URL.revokeObjectURL(url);

+          }

+          if (link && link.parentNode) {

+            document.body.removeChild(link);

+          }

+        }, 100);

+      }

+

+    // 삭제

+    async fnDelete() {

+      let isCheck = confirm("해당 페이지를 삭제하시겠습니까?");

+      if (!isCheck) {

+        return;

+      }

+

+      try {

+        const response = await deleteMediaVidoProc(this.pageId);

+        alert('해당 페이지를 삭제했습니다.');

+

+        this.fnMoveTo('MediaVideoSearch');

+      } catch (error) {

+        if (error.response) {

+          alert(error.response.data.message);

+        }

+        console.error(error.message);

+      }

+

+    // 페이지 이동

+    fnMoveTo(page, id) {

+      if (this.$isEmpty(id)) {

+        this.$router.push({ name: page });

+      } else {

+        this.$router.push({ name: page, query: { id: id } });

+      }

+    },

+  },

+    <form class="insert-form mb-50">

+          <label for="sj" class="require">제목</label>

+          <div class="wfull"><input type="text" id="sj" placeholder="제목을 입력하세요." v-model="requestDTO.sj"></div>

+          <label for="prdctnYear">생산연도</label>

+          <input type="text" id="prdctnYear" placeholder="생산연도를 입력하세요" v-model="requestDTO.prdctnYear">

+          <label for="link">주소</label>

+          <div class="wfull"><input type="text" id="link" placeholder="URL 주소를 입력하세요" v-model="requestDTO.link"></div>

+            <EditorComponent v-model:contents="requestDTO.cn" />

+            <p>카테고리</p><button type="button" class="category-add" @click="fnToggleModal">추가하기</button>

+            <li v-for="(item, idx) of selectedCtgries" :key="idx">{{ item.ctgryNm }} <button type="button" class="cancel" @click="fnDelCtgry(item.ctgryId)"><b>✕</b></button></li>

+      <button type="button" class="cancel" @click="fnMoveTo('MediaVideoSearch')">취소</button>

+      <button type="button" class="register" @click="submitForm">

+        <span v-if="$isEmpty(pageId)">등록</span>

+        <span v-else>수정</span>

+      </button>

+  <CategorySelectModal v-if="isModalOpen" :selectedCtgries="selectedCtgries" @toggleModal="fnToggleModal" @addCtgries="fnAddCtgries" />

+// API

+import { findMediaVidoProc, saveMediaVidoProc, updateMediaVidoDcry } from '@/resources/api/mediaVido';

+    EditorComponent,

+    CategorySelectModal,

+      // 아이콘 경로

+      pageId: null,

+      isModalOpen: false,

+      isDragging: false,

+

+      // 등록/수정 요청 객체

+      requestDTO: {

+        mediaVidoId: null, // 미디어영상 아이디

+        sj: null, // 제목

+        cn: null, // 내용

+        link: null, // 주소

+        ctgryIds: [], // 카테고리 정보

+

+  created() {

+    this.pageId = this.$route.query.id;

+    if (!this.$isEmpty(this.pageId)) {

+      this.fnFindMediaVido(); // 상세 조회

+

+    // 상세 조회

+    async fnFindMediaVido() {

+      try {

+        const response = await findMediaVidoProc(this.pageId);

+        this.copyToMediaVidoReqDTO(response.data.data.mediaVido);

+      } catch (error) {

+        alert('조회중 오류가 발생했습니다.');

+        this.fnMoveTo('MediaVideoSearch'); // 목록으로 이동

+

+        if (error.response) {

+          alert(error.response.data.message);

+        }

+        console.error(error.message);

+

+    // mediaVido > requestDTO

+    copyToMediaVidoReqDTO(mediaVido) {

+      const copyFields = Object.keys(this.requestDTO);

+      copyFields.forEach(field => {

+        this.requestDTO[field] = this.$isEmpty(mediaVido[field]) ? null : mediaVido[field];

+      });

+      this.selectedCtgries = mediaVido.ctgrys.length > 0 ? mediaVido.ctgrys : [];

+    // 카테고리 모달 열기/닫기

+    fnToggleModal() {

+      this.isModalOpen = !this.isModalOpen;

+    },

+    // 카테고리 등록

+    fnAddCtgries(selectedCtgries) {

+      this.selectedCtgries = [...this.selectedCtgries, ...selectedCtgries];

+      this.fnToggleModal(); // 카테고리 모달 닫기

+    },

+

+    // 카테고리 삭제

+    fnDelCtgry(id) {

+      this.selectedCtgries = this.selectedCtgries.filter(item => item.ctgryId !== id);

+    },

+

+    // 등록

+    async submitForm() {

+      // 유효성 검사

+      if (!this.requestDTO.sj) {

+        alert("제목을 입력해 주세요.");

+        return;

+      }

+

+      try {

+        if (this.$isEmpty(this.pageId)) {

+          delete this.requestDTO.mediaVidoId;

+        // requestDTO에 카테고리 Id 추가

+        this.requestDTO.ctgryIds = this.selectedCtgries.map(ctgry => ctgry.ctgryId);

+

+        // API 통신

+        const response = this.$isEmpty(this.pageId) ? await saveMediaVidoProc(this.requestDTO) : await updateMediaVidoDcry(this.requestDTO);

+        alert(this.$isEmpty(this.pageId) ? "등록되었습니다." : "수정되었습니다.");

+

+        this.fnMoveTo('MediaVideoDetail', response.data.data.mediaVidoId); // 상세 페이지로 이동

+      } catch (error) {

+        if (error.response) {

+          alert(error.response.data.message);