+<template>

+  <div class="mb-30">

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

+      <div class="resultext">

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

+        <p>총 <b>{{ count }}개</b>의 {{ helpText }}</p>

+      </div>

+      <button type="button" class="gopage" @click="fnMoveTo(routeName, null)">모두보기</button>

+    </div>

+    <ul>

+      <li v-for="(item, idx2) of list" :key="idx2" class="result-box mb-15">

+        <div class="main-img">

+          <img v-if="item.hasOwnProperty('files') && item.files.length > 0" :src="item.files[0].filePath" alt="">

+          <img v-else src="client/resources/images/img6.png" alt="">

+        </div>

+        <div class="text-box">

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

+          <p v-if="name === 'P' || name === 'V'" class="address">{{ item.adres }}</p>

+          <p class="text">{{ item.cn }}</p>

+          <div class="mb-20">

+            <ul class="category">

+              <li v-for="(ctgry, idx3) of item.ctgrys" :key="idx3" class="category1">{{ ctgry.ctgryNm }}</li>

+            </ul>

+          </div>

+          <div class="date">

+            <ul>

+              <li>생산연도 <b>{{ item.prdctnYear }}</b></li>

+              <li>|</li>

+              <li>등록일 <b>{{ item.rgsde }}</b></li>

+            </ul>

+          </div>

+        </div>

+      </li>

+    </ul>

+  </div>

+</template>

+<script>

+export default {

+  name: "CardViewList",

+

+  props: {

+    name: {

+      type: String,

+      default: 'P',

+    },

+    count: {

+      type: Number,

+      default: 0,

+    },

+    list: {

+      type: Array,

+      default: () => [],

+    },

+  },

+

+  data() {

+    return {

+    };

+  },

+

+  computed: {

+    helpText() {

+      switch (this.name) {

+        case 'P':

+          return '사진 기록물이 검색되었습니다.';

+        case 'V':

+          return '영상 기록물이 검색되었습니다.';

+        case 'M':

+          return '미디어 영상이 검색되었습니다.';

+        case 'N':

+          return '보도자료가 검색되었습니다.';

+      }

+    },

+    routeName() {

+      switch (this.name) {

+        case 'P':

+          return 'PicHistorySearch';

+        case 'V':

+          return '영상 기록물';

+        case 'M':

+          return '미디어 영상';

+        case 'N':

+          return '보도자료';

+      }

+    },

+  },

+

+  created() { },

+  mounted() { },

+  watch: {},

+  methods: {

+    // 페이지 이동

+    fnMoveTo(page, id) {

+      if (id !== null || id !== '') {

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

+      } else {

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

+      }

+    }

+  },

+};

+</script>

+<style scoped>

+/* 임시로 추가 */

+.main-img img {

+  max-width: 320px;

+}

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

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

+

+  components: {

+    DoubleLeftOutlined,

+    LeftOutlined,

+    RightOutlined,

+    DoubleRightOutlined

+  },

+      default: () => [],

+  data() {

+    return {

+      items: [

+        { id: 1, category: '카테고리 1', selected: false },

+        { id: 2, category: '카테고리 2', selected: false },

+        { id: 3, category: '카테고리 3', selected: false },

+      ],

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

+      currentPage: 1,

+      totalPages: 1

+    };

+  },

+  methods: {

+    closeModal() {

+      this.$emit('toggleModal');

+    },

+    registerCategories() {

+      // 선택된 카테고리 목록

+      const selectedCategories = this.items

+        .filter(item => item.selected)

+        .map(item => item.category);

+

+      // 선택된 카테고리 ID 목록

+      const selectedIds = this.items

+        .filter(item => item.selected)

+        .map(item => item.id);

+

+      // 부모 컴포넌트로 전달하고 모달 닫기

+      this.$emit('toggleModal', selectedIds);

+    },

+    previousPage() {

+      if (this.currentPage > 1) {

+        this.currentPage--;

+      }

+    },

+    nextPage() {

+      if (this.currentPage < this.totalPages) {

+        this.currentPage++;

+      }

+    }

+  }

+};

+</script>

+  <header>

+    <div class="header-container w1500">

+      <div class="logo-wrap">

+        <router-link :to="{ path: '/' }" class="logo"><img :src="logo" alt=""></router-link>

+      </div>

+      <div class="nav-wrap">

+        <nav>

+          <ul>

+            <li v-if="$store.state.roles[0]?.authority === 'ROLE_ADMIN'" @click="updateMenuStats('MENU_00000001')"><router-link :to="{ path: '/PicHistorySearch.page' }">기록물</router-link></li>

+            <li v-if="$store.state.roles[0]?.authority === 'ROLE_ADMIN'" @click="updateMenuStats('MENU_00000004')"><router-link :to="{ path: '/' }">언론에서 바라본 구미시</router-link></li>

+            <li v-if="$store.state.roles[0]?.authority === 'ROLE_ADMIN'" @click="updateMenuStats('MENU_00000007')"><router-link :to="{ path: '/MemberManagement.page' }">회원관리</router-link></li>

+            <li v-if="$store.state.roles[0]?.authority === 'ROLE_ADMIN'" @click="updateMenuStats('MENU_00000008')"><router-link :to="{ path: '/CategoryManagement.page' }">카테고리 관리</router-link></li>

+            <li v-if="$store.state.roles[0]?.authority === 'ROLE_USER'" @click="updateMenuStats('MENU_00000001')">기록물</li>

+            <li v-if="$store.state.roles[0]?.authority === 'ROLE_USER'" @click="updateMenuStats('MENU_00000004')">언론에서 바라본 구미시</li>

+          </ul>

+        </nav>

+      </div>

+      <div class="auth-area">

+        <ul v-if="$store.state.userId != null">

+          <li><img src="../../resources/images/icon/user-settings-line.png" alt="">

+            <router-link :to="{ path: '/MyInfo.page' }">{{ $store.state.userNm }}</router-link>

+          </li>

+          <li>

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

+          </li>

+          <li><img src="../../resources/images/icon/logout-box-line.png" alt="">

+            <a href="#" @click.prevent="logout">로그아웃</a>

+          </li>

+        </ul>

+        <a href="#" class="all-menu"><img src="../../resources/images/allmenu.png" alt=""></a>

+      </div>

+    </div>

+  </header>

+  data() {

+    return {

+      // Define the image sources

+      logo: 'client/resources/images/logo.png',

+    };

+  },

+  methods: {

+    async updateMenuStats(menuId) {

+      try {

+        const response = await updateStatsByMenuId(menuId);

+        if (response.status === 200) {

+          console.log(`메뉴 ID ${menuId} 통계 업데이트 성공`);

+        }

+      } catch (error) {

+        console.error(`메뉴 ID ${menuId} 통계 업데이트 중 오류:`, error);

+      }

+    logout() {

+      // 백엔드 로그아웃 API 호출

+      logOutProc()

+        .then(() => {

+          console.log('로그아웃 성공 - 서버 측 쿠키 삭제 완료');

+          this.$store.commit('setStoreReset'); // 로그아웃 성공 후 스토어 초기화

+          this.$router.push({ path: '/Login.page' }); // 로그인 페이지로 리다이렉트

+        })

+        .catch(err => {

+          console.error('로그아웃 처리 중 오류:', err);

+          this.$store.commit('setStoreReset'); // 오류가 있어도 스토어는 초기화

+          this.$router.push({ path: '/Login.page' }); // 로그인 페이지로 리다이렉트

+        });

+

+  },

+  watch: {},

+  computed: {},

+  components: {},

+  mounted() { },

+// 공통

+// 통합검색

+// 사진기록물

+// 보도자료

+// 회원관리

+import MyInfo from "./user/MyInfo.vue";

+// 카테고리관리

+  { path: "/", name: "MainPage", component: Main, meta: { authorization: ['ROLE_ADMIN', 'ROLE_USER'] } },

+  { path: "/MyInfo.page", name: "MyInfo", component: MyInfo, meta: { authorization: ['ROLE_ADMIN', 'ROLE_USER'] } },

+

+  if (authorization) {

+    if (!authorization.includes(store.state.roles[0].authority)) {

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

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

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

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

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

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

+import axios from 'axios';

+import apiClient from '../../../resources/api';

+    EditorComponent,

+    CategorySelectModal,

+      // 아이콘 경로

+      isDragging: false,

+      selectedFiles: [],

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

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

+      }

+    },

+

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

+    processFiles(files) {

+      // 파일 타입 검증 (이미지 파일만 허용)

+      const allowedTypes = ['jpg', 'jpeg', 'png', 'gif'];

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

+

+      for (let i = 0; i < files.length; i++) {

+        const fileType = files[i].name.split('.').pop().toLowerCase();

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

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

+          return;

+        }

+

+        // 파일 크기 제한 체크 (10GB)

+        if (files[i].size > maxSize) {

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

+          return;

+        }

+      }

+

+      // 실제 File 객체들을 저장

+      for (let i = 0; i < files.length; i++) {

+        this.selectedFiles.push(files[i]);

+      }

+

+      // UI에 표시할 파일 정보 저장

+      for (let i = 0; i < files.length; i++) {

+        const file = files[i];

+        const fileType = file.name.split('.').pop().toLowerCase();  // 파일 확장자 추출

+

+        // 파일 타입에 따른 아이콘 선택

+        let iconPath = this.fileicon; // 기본 아이콘

+

+        if (['jpg', 'jpeg', 'png', 'gif'].includes(fileType)) {

+          iconPath = 'client/resources/images/icon/imgicon.png';

+        } else if (['pdf'].includes(fileType)) {

+          iconPath = 'client/resources/images/icon/pdficon.png';

+        } else if (['xls', 'xlsx'].includes(fileType)) {

+          iconPath = 'client/resources/images/icon/excelicon.png';

+        } else if (['hwp'].includes(fileType)) {

+          iconPath = 'client/resources/images/icon/hwpicon.png';

+        }

+

+        // 파일 이름과 아이콘을 목록에 추가

+        this.fileNames.push({

+          name: file.name,

+          icon: iconPath,

+          size: this.formatFileSize(file.size)

+        });

+      }

+    },

+

+    fnToggleModal(selectedCtgryIds) {

+      this.isModalOpen = !this.isModalOpen;

+      if (selectedCtgryIds && selectedCtgryIds.length > 0) {

+        this.insertDTO.ctgryIds = selectedCtgryIds;

+      }

+    showFileNames(event) {

+      const files = event.target.files;

+      if (files.length > 0) {

+        this.processFiles(files);

+      }

+    },

+    removeFile(index) {

+      // UI 목록과 실제 파일 객체 목록에서 모두 제거

+      this.fileNames.splice(index, 1);

+      this.selectedFiles.splice(index, 1);

+    },

+    formatFileSize(bytes) {

+      if (bytes === 0) return '0 Bytes';

+      const k = 1024;

+      const sizes = ['Bytes', 'KB', 'MB', 'GB'];

+      const i = Math.floor(Math.log(bytes) / Math.log(k));

+      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];

+    },

+

+    // 등록

+    submitForm() {

+      const vm = this;

+

+      // 폼 요소들의 값을 가져오기

+      const titleInput = document.getElementById('id');

+      const yearInput = document.getElementById('year');

+      const addressInput = document.getElementById('address');

+

+      // insertDTO 업데이트

+      vm.insertDTO.sj = titleInput ? titleInput.value : null;

+      vm.insertDTO.prdctnYear = yearInput ? yearInput.value : null;

+      vm.insertDTO.adres = addressInput ? addressInput.value : null;

+

+      // 유효성 검사

+      if (!vm.insertDTO.sj) {

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

+        return;

+      }

+      if (vm.selectedFiles.length < 1) {

+        alert("파일을 1개 이상 첨부해 주세요.");

+        return;

+      }

+

+      // 데이터 세팅

+      const formData = new FormData();

+

+      // 텍스트 데이터 추가

+      formData.append('sj', vm.insertDTO.sj);

+      formData.append('cn', vm.insertDTO.cn || '');

+      formData.append('adres', vm.insertDTO.adres || '');

+      formData.append('prdctnYear', vm.insertDTO.prdctnYear || '');

+      formData.append('ty', vm.insertDTO.ty);

+

+      // 카테고리 IDs 추가

+      if (vm.insertDTO.ctgryIds && vm.insertDTO.ctgryIds.length > 0) {

+        // 백엔드 요구사항에 따라 조정 필요

+        vm.insertDTO.ctgryIds.forEach((id, index) => {

+          formData.append(`ctgryIds[${index}]`, id);

+        });

+      }

+

+      // 파일 추가

+      for (let i = 0; i < vm.selectedFiles.length; i++) {

+        formData.append("multipartFiles", vm.selectedFiles[i]);

+      }

+

+      // API 통신

+      axios({

+        url: "/dcry/saveDcry.file",

+        method: "post",

+        headers: {

+          "Content-Type": "multipart/form-data",

+        },

+        data: formData,

+      }).then(response => {

+        let result = response.data;

+        let id = result.data.dcryId;

+        alert("등록 되었습니다.");

+

+        // 상세 페이지로 이동

+        vm.fnMoveTo('PicHistoryDetail', id);

+      }).catch(error => {

+        if (error.response) {

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

+        } else {

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

+        }

+        console.error(error.message);

+      });

+    },

+

+    // 페이지 이동

+    fnMoveTo(page, id) {

+      if (id !== null || id !== '') {

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

+      } else {

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

+      }

+    }

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

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

+            <li>

+              <input type="checkbox" id="photoRecord" v-model="searchReqDTO.usePhoto" @change="fnChkOption('record')" />

+              <label for="photoRecord">사진</label>

+            </li>

+            <li>

+              <input type="checkbox" id="videoRecord" v-model="searchReqDTO.useVideo" @change="fnChkOption('record')" />

+              <label for="videoRecord">영상</label>

+            </li>

+            <li>

+              <input type="checkbox" id="mediaVideo" v-model="searchReqDTO.useMedia" @change="fnChkOption('record')" />

+              <label for="mediaVideo">미디어영상</label>

+            </li>

+            <li>

+              <input type="checkbox" id="newsData" v-model="searchReqDTO.useNews" @change="fnChkOption('record')" />

+              <label for="newsData">보도자료</label>