+import DefaultPagination from '@/views/component/listLayout/DefaultPagination.vue';

+import TotalSearch from "./main/TotalSearch.vue";

+import Login from "./login/Login.vue";

+import MemberManagement from "./member/MemberManagement.vue";

+// 기록물 - 사진

+import PicHistorySearch from "./bbsDcry/photo/PicHistorySearch.vue";

+import PicHistoryInsert from "./bbsDcry/photo/PicHistoryInsert.vue";

+import PicHistoryDetail from "./bbsDcry/photo/PicHistoryDetail.vue";

+// 기록물 - 영상

+import VideoHistoryInsert from "./bbsDcry/video/VideoHistoryInsert.vue";

+import VideoHistoryDetail from "./bbsDcry/video/VideoHistoryDetail.vue";

+import VideoHistorySearch from "./bbsDcry/video/VideoHistorySearch.vue";

+import MediaVideoInsert from "./bbsMediaVido/MediaVideoInsert.vue";

+import MediaVideoDetail from "./bbsMediaVido/MediaVideoDetail.vue";

+import MediaVideoSearch from "./bbsMediaVido/MediaVideoSearch.vue";

+import NewsReleaseDetail from "./bbsNesDta/NewsReleaseDetail.vue";

+import NewsReleaseInsert from "./bbsNesDta/NewsReleaseInsert.vue";

+import NewsReleaseSearch from "./bbsNesDta/NewsReleaseSearch.vue";

+// 카테고리 관리

+import CategoryManagement from "./ctgry/CategoryManagement.vue";

+  // 공통

+  { path: "/TotalSearch.page", name: "TotalSearch", component: TotalSearch },

+  // 회원관리

+  { path: "/MemberManagement.page", name: "MemberManagement", component: MemberManagement },

+  // 기록물 - 사진

+  // 기록물 - 영상

+  // 보도자료

+  { path: "/NewsReleaseSearch.page", name: "NewsReleaseSearch", component: NewsReleaseSearch },

+  // 카테고리 관리

+    next('/');

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

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

+import CategorySelectModal from '../../../component/modal/CategorySelectModal.vue';

+import DefaultPagination from '@/views/component/listLayout/DefaultPagination.vue';

+import { updateUsers, logOutProc, updatePassword } from "../../../../resources/api/user"

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

+import CategorySelectModal from '../../../component/modal/CategorySelectModal.vue';

+import DefaultPagination from '@/views/component/listLayout/DefaultPagination.vue';

+import DefaultPagination from '@/views/component/listLayout/DefaultPagination.vue';

+    // 검색범위 전체 선택 여부 변경

+    // 검색범위 선택 여부 변경

+<template>

+  <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>

+    <form class="gallery-form mb-40" @submit.prevent>

+      <dl class="mb-60">

+        <dd>

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

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

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

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

+          </div>

+        </dd>

+      </dl>

+      <div class="flex-sp-bw mb-50">

+        <div class="img-box">

+          <img v-if="findResult.hasOwnProperty('files') && findResult.files.length > 0" :src="findResult.files[0].filePath" :alt="썸네일" style="max-width: 100%" />

+          <img v-else :src="noimg" :alt="썸네일" />

+        </div>

+        <form class="info-form wfull" @submit.prevent>

+          <div class="info-box">

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

+            <dl>

+              <dd class="mb-20">

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

+                <span>링크</span>

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

+              </dd>

+              <dd class="mb-20">

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

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

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

+              </dd>

+              <dd>

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

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

+                <ul class="category">

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

+                </ul>

+              </dd>

+            </dl>

+          </div>

+        </form>

+      </div>

+    </form>

+    <h3>내용</h3>

+    <form class="info-form mb-50" @submit.prevent>

+      <dl>

+        <dd>

+          <ViewerComponent :content="findResult.cn" />

+        </dd>

+      </dl>

+    </form>

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

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

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

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

+    </div>

+  </div>

+</template>

+<script>

+// COMPONENT

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

+// API

+import { findNesDtaProc, deleteNesDtaProc } from '@/resources/api/nesDta';

+

+export default {

+  components: {

+    ViewerComponent,

+  },

+

+  data() {

+    return {

+      // ICON

+      noimg: "client/resources/images/no_img.png",

+      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,

+      findResult: {},

+      selectedFiles: [],

+    };

+  },

+

+  created() {

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

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

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

+      this.fnMoveTo('list');

+    }

+  },

+

+  mounted() {

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

+  },

+

+  methods: {

+    // 상세 조회

+    async fnFindNesDta() {

+      try {

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

+        this.findResult = response.data.data.nesDta;

+      } catch (error) {

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

+

+        if (error.response) {

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

+        }

+        console.error(error.message);

+

+        this.fnMoveTo('list');

+      }

+    },

+

+    // 삭제

+    async fnDelete() {

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

+      if (!isCheck) {

+        return;

+      }

+

+      try {

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

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

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

+      } catch (error) {

+        if (error.response) {

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

+        }

+        console.error(error.message);

+      }

+    },

+

+    // 페이지 이동

+    fnMoveTo(type, id) {

+      const routes = {

+        'list': { name: 'NewsReleaseSearch' },

+        'view': { name: 'NewsReleaseDetail', query: { id } },

+        'edit': { name: 'NewsReleaseInsert', query: this.$isEmpty(id) ? {} : { id } },

+      };

+

+      if (routes[type]) {

+        this.$router.push(routes[type]);

+      } else {

+        alert("올바르지 않은 경로를 요청하여 목록으로 이동합니다.");

+        this.$router.push(routes['list']);

+      }

+    },

+  },

+};

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

+<template>

+  <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>

+    <form class="insert-form mb-50" @submit.prevent>

+      <dl>

+        <dd>

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

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

+        </dd>

+        <div class="hr"></div>

+        <dd>

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

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

+        </dd>

+        <div class="hr"></div>

+        <dd>

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

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

+        </dd>

+        <div class="hr"></div>

+        <dd>

+          <label for="text">내용</label>

+          <div class="wfull">

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

+          </div>

+        </dd>

+        <div class="hr"></div>

+        <dd>

+          <label for="category" class="flex align-center">

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

+          </label>

+          <ul class="category">

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

+          </ul>

+        </dd>

+        <div class="hr"></div>

+        <dd>

+          <label for="file">썸네일</label>

+          <ul class="wfull">

+            <li class="flex align-center">

+              <p>파일첨부</p>

+              <div class="invalid-feedback"><img :src="erroricon" alt=""><span>첨부파일은 건당 최대 10GB를 초과할 수 없습니다.</span></div>

+            </li>

+            <li class="file-insert">

+              <input type="file" id="fileInput" class="file-input" accept="image/jpeg,image/png,image/gif,image/jpg" @change="handleFileSelect">

+              <label for="fileInput" class="file-label mb-20" @dragover.prevent="handleDragOver" @dragleave.prevent="handleDragLeave" @drop.prevent="handleDrop" :class="{ 'drag-over': isDragging }">

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

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

+                  <p>파일첨부하기</p>

+                </div>

+                <p>파일을 첨부하시려면 이 영역으로 파일을 끌고 오거나 클릭해주세요</p>

+              </label>

+              <p class="mb-10">파일목록</p>

+              <div id="fileNames" class="file-names">

+                <div v-if="requestDTO.files.length === 0 && multipartFiles.length === 0">선택된 파일이 없습니다.</div>

+                <!-- 새로 추가된 파일 목록 -->

+                <div v-for="(file, idx) of multipartFiles" :key="idx" class="flex-sp-bw mb-5 file-wrap">

+                  <div class="file-name">

+                    <img src="/client/resources/images/icon/imgicon.png" alt="fileicon">

+                    <p>{{ file.name }}</p>

+                  </div>

+                  <button type="button" class="cancel" @click="fnDelFile('new', idx)"><b>✕</b></button>

+                </div>

+                <!-- 기존 등록된 파일 목록 -->

+                <div v-for="(file, idx) of requestDTO.files" :key="idx" class="flex-sp-bw mb-5 file-wrap">

+                  <div class="file-name">

+                    <img src="/client/resources/images/icon/imgicon.png" alt="fileicon">

+                    <p>{{ file.fileNm }}</p>

+                  </div>

+                  <button type="button" class="cancel" @click="fnDelFile('old', file.fileId)"><b>✕</b></button>

+                </div>

+              </div>

+            </li>

+          </ul>

+        </dd>

+      </dl>

+    </form>

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

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

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

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

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

+      </button>

+    </div>

+  </div>

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

+</template>

+<script>

+import { DoubleLeftOutlined, LeftOutlined, RightOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';

+// COMPONENT

+import EditorComponent from '@/views/component/editor/EditorComponent.vue';

+import CategorySelectModal from '@/views/component/modal/CategorySelectModal.vue';

+// API

+import { findNesDtaProc, saveNesDtaProc, updateNesDtaProc } from '@/resources/api/nesDta';

+

+export default {

+  components: {

+    DoubleLeftOutlined,

+    LeftOutlined,

+    RightOutlined,

+    DoubleRightOutlined,

+    EditorComponent,

+    CategorySelectModal,

+  },

+

+  data() {

+    return {

+      // 아이콘 경로

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

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

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

+      fileicon: 'client/resources/images/icon/file.png',

+      searchicon: 'client/resources/images/icon/search.png',

+

+      pageId: null,

+

+      isModalOpen: false,

+      isDragging: false,

+

+      fileNames: [],

+

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

+      requestDTO: {

+        nesDtaId: null,

+        sj: null,

+        cn: null,

+        link: null,

+        prdctnYear: null,

+        fileId: null,

+        files: [],

+        ctgryIds: [],

+      },

+

+      multipartFiles: [],

+      selectedCtgries: [], // 카테고리 목록

+    };

+  },

+

+  created() {

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

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

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

+    }

+  },

+

+  methods: {

+    // 상세 조회

+    async fnFindDcry() {

+      try {

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

+        this.copyToDcryReqDTO(response.data.data.nesDta);

+      } catch (error) {

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

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

+

+        if (error.response) {

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

+        }

+        console.error(error.message);

+      }

+    },

+

+    // nesDta > requestDTO

+    copyToDcryReqDTO(nesDta) {

+      const copyFields = Object.keys(this.requestDTO).filter(key => key !== 'nesDtaId' && key !== 'ty' && key !== 'files');

+      copyFields.forEach(field => {

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

+      });

+

+      this.requestDTO.files = nesDta.files.length > 0 ? nesDta.files : []; // 기존 첨부파일

+

+      this.multipartFiles = [];

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

+

+      console.log(this.requestDTO);

+    },

+

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

+    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);

+    },

+

+    // 드래그 앤 드롭 이벤트 핸들러

+    handleDragOver(event) {

+      this.isDragging = true;

+    },

+    handleDragLeave(event) {

+      this.isDragging = false;

+    },

+    handleDrop(event) {

+      this.isDragging = false;

+

+      const files = event.dataTransfer.files;

+      if (files.length > 0) {

+        this.processFiles(files);

+      }

+    },

+    handleFileSelect(event) {

+      const files = event.target.files;

+      if (files.length > 0) {

+        this.processFiles(files);

+      }

+    },

+

+    // 파일 업로드 처리 함수

+    processFiles(files) {

+      const allowedTypes = ['jpg', 'jpeg', 'png', 'gif']; // 이미지 파일만 허용

+      const maxSize = 10 * 1024 * 1024 * 1024; // 10GB

+

+      for (let file of files) {

+        const fileType = file.name.split('.').pop().toLowerCase();

+

+        // 파일 타입 검증

+        if (!allowedTypes.includes(fileType)) {

+          alert(`${file.name} 파일은 허용되지 않는 형식입니다. 이미지 파일(jpg, jpeg, png, gif)만 업로드 가능합니다.`);

+          return;

+        }

+

+        // 파일 크기 제한 검증

+        if (file.size > maxSize) {

+          alert(`${file.name} 파일이 10GB를 초과합니다.`);

+          return;

+        }

+

+        this.multipartFiles.push(file);

+      }

+    },

+

+    // 파일 삭제

+    fnDelFile(type, separator) {

+      if (type === 'new') {

+        this.multipartFiles.splice(separator, 1);

+      } else if (type === 'old') {

+        this.requestDTO.files = this.requestDTO.files.filter(item => item.fileId !== separator);

+      }

+    },

+

+    // 등록

+    async submitForm() {

+      // 유효성 검사

+      if (!this.requestDTO.sj) {

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

+        return;

+      }

+

+      try {

+        const formData = new FormData();

+

+        // 텍스트 데이터 추가

+        formData.append('sj', this.requestDTO.sj);

+        formData.append('cn', this.requestDTO.cn);

+        formData.append('link', this.requestDTO.link);

+        formData.append('prdctnYear', this.requestDTO.prdctnYear);

+        formData.append('ty', this.requestDTO.ty);

+

+        // 게시물 아이디

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

+          formData.append('nesDtaId', this.pageId);

+        }

+

+        // 파일 아이디

+        if (!this.$isEmpty(this.requestDTO.fileId)) {

+          formData.append('fileId', this.requestDTO.fileId);

+        }

+

+        // 카테고리 Ids 추가

+        if (this.selectedCtgries && this.selectedCtgries.length > 0) {

+          for (let ctgry of this.selectedCtgries) {

+            formData.append("ctgryIds", ctgry.ctgryId);

+          }

+        }

+

+        // 파일 추가

+        if (this.multipartFiles.length > 0) {

+          formData.append("multipartFiles", this.multipartFiles[0]);

+        }

+

+        // 기존파일 수정

+        if (!this.$isEmpty(this.pageId) && this.requestDTO.files.length > 0) {

+          for (let file of this.requestDTO.files) {

+            formData.append("files", file.fileId);

+          }

+        }

+

+        // API 통신

+        const response = this.$isEmpty(this.pageId) ? await saveNesDtaProc(formData) : await updateNesDtaProc(formData);

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

+

+        // 상세 페이지로 이동

+        this.fnMoveTo('view', response.data.data.nesDtaId);

+      } catch (error) {

+        if (error.response) {

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

+        } else {

+          alert("에러가 발생했습니다.");

+        }

+        console.error(error.message);

+      };

+    },

+

+    // 페이지 이동

+    fnMoveTo(type, id) {

+      const routes = {

+        'list': { name: 'NewsReleaseSearch' },

+        'view': { name: 'NewsReleaseDetail', query: { id } },

+        'edit': { name: 'NewsReleaseInsert', query: this.$isEmpty(id) ? {} : { id } },

+      };

+

+      if (routes[type]) {

+        this.$router.push(routes[type]);

+      } else {

+        alert("올바르지 않은 경로를 요청하여 목록으로 이동합니다.");

+        this.$router.push(routes['list']);

+      }

+    }

+  }

+};

+</script>

+<style>

+.file-label {

+  border: 2px dashed #ddd;

+  border-radius: 8px;

+  padding: 20px;

+  text-align: center;

+  cursor: pointer;

+  transition: all 0.3s ease;

+}

+

+.file-label:hover {

+  border-color: #aaa;

+  background-color: #f9f9f9;

+}

+

+.file-label.drag-over {

+  border-color: #1890ff;

+  background-color: rgba(24, 144, 255, 0.1);

+}

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

+<template>

+  <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>

+    <div class="search-form form">

+      <dl>

+        <dd class="mb-15">

+          <p>검색범위</p>

+          <ul>

+            <li>

+              <input type="checkbox" id="allScope" v-model="isChkAllScope" @change="fnChkAllOptions" />

+              <label for="allScope">전체</label>

+            </li>

+            <li>

+              <input type="checkbox" id="searchSj" v-model="searchReqDTO.useSj" @change="fnChkOption" />

+              <label for="searchSj">제목</label>

+            </li>

+            <li>

+              <input type="checkbox" id="searchCn" v-model="searchReqDTO.useCn" @change="fnChkOption" />

+              <label for="searchCn">내용</label>

+            </li>

+          </ul>

+        </dd>

+        <dd class="mb-15">

+          <p>검색어</p>

+          <div class="wfull"><input type="text" v-model="searchReqDTO.searchText" v-on:keyup.enter="fnSearch()"></div>

+        </dd>

+        <dd class="mb-15">

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

+          <input type="date" v-model="searchReqDTO.startYear">

+          <p class="mark">~</p>

+          <input type="date" v-model="searchReqDTO.endYear">

+        </dd>

+        <dd class="mb-20 category-dd">

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

+          <ul>

+            <li v-for="(category, idx) of categorys" :key="idx">

+              <input type="checkbox" :id="'ctgry_' + idx" name="categorys" :value="category.ctgryId" v-model="searchReqDTO.searchCtgries" />

+              <label :for="'ctgry_' + idx">{{ category.ctgryNm }}</label>

+            </li>

+          </ul>

+        </dd>

+        <dd class="mb-15">

+          <p>정렬</p>

+          <ul>

+            <li v-for="(order, idx) of orders" :key="idx">

+              <input type="radio" :id="order.key" name="orders" :value="order.key" v-model="searchReqDTO.order" />

+              <label :for="order.key">{{ order.value }}</label>

+            </li>

+          </ul>

+        </dd>

+        <div class="btn-group">

+          <button type="button" class="reset" @click="init">

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

+            <p>초기화</p>

+          </button>

+          <button type="button" class="search" @click="fnSearch">

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

+            <p>검색</p>

+          </button>

+        </div>

+      </dl>

+    </div>

+    <div class="search-result">

+      <div class="tabs">

+        <div class="flex-sp-bw mb-20 align-center">

+          <div class="resultext ">

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

+            <p>총 <b>{{ searchReqDTO.totalRecordCount }}개</b>의 보도자료가 검색되었습니다. </p>

+          </div>

+          <div class="flex">

+            <ul class="tab-box mb-20">

+              <li v-for="(tab, idx) in tabs" :key="idx" class="tab-title" :class="{ active: selectedTabId === tab.id }" @click="selectTab(tab.id)">

+                <img :src="selectedTabId === tab.id ? tab.activeImage : tab.inactiveImage" :alt="tab.title" class="tab-icon" />

+                <p><b>{{ tab.title }}</b></p>

+              </li>

+            </ul>

+            <div class="select-box">

+              <select v-model="searchReqDTO.recordSize" @change="fnSearch">

+                <option :value="24">24개</option>

+                <option :value="36">36개</option>

+                <option :value="100">100개</option>

+              </select>

+            </div>

+          </div>

+        </div>

+        <div class="tab-content">

+          <div v-if="searchResult.length > 0">