Commit @a46a47a2590c81c1f73a0e2f6b9eebd2f80525da

박정하 03-28

240328 박정하 기록물, 언론에서 바라본 구미시 폼 액션 수정

@a46a47a2590c81c1f73a0e2f6b9eebd2f80525da

0fac8e8

a46a47a

client/views/component/listLayout/DefaultPagination.vue

--- client/views/component/listLayout/DefaultPagination.vue

+++ client/views/component/listLayout/DefaultPagination.vue


 <template>
   <div class="pagination flex-center">
-    <button type="button" :disabled="search.currentPage === search.startPage" @click="$emit('onChange', search.startPage)">
+    <!-- 첫 페이지로 이동 -->
+    <button type="button" :disabled="currentPage <= 1" @click="changePage(1)">
       <DoubleLeftOutlined />
     </button>
-    <button type="button" :disabled="!search.existPrevPage" @click="$emit('onChange', (search.currentPage - 1))">
+    <!-- 이전 페이지로 이동 -->
+    <button type="button" :disabled="currentPage <= 1" @click="changePage(currentPage - 1)">
       <LeftOutlined />
     </button>
-    <template v-for="idx in search.totalPageCount" :key="idx">
-      <button type="button" :class="{ 'page-number': true, clicked: search.currentPage === idx }" :disabled="search.currentPage === idx" @click="$emit('onChange', idx)">{{ idx }}</button>
+    <!-- 페이지 번호 버튼 -->
+    <template v-for="pageNum in displayedPageNumbers" :key="pageNum">
+      <button type="button" :class="{ 'page-number': true, clicked: currentPage === pageNum }" :disabled="currentPage === pageNum" @click="changePage(pageNum)"> {{ pageNum }} </button>
     </template>
-    <button type="button" :disabled="!search.existNextPage" @click="$emit('onChange', (search.currentPage + 1))">
+    <!-- 다음 페이지로 이동 -->
+    <button type="button" :disabled="currentPage >= totalPages" @click="changePage(currentPage + 1)">
       <RightOutlined />
     </button>
-    <button type="button" :disabled="search.currentPage === search.endPage" @click="$emit('onChange', search.endPage)">
+    <!-- 마지막 페이지로 이동 -->
+    <button type="button" :disabled="currentPage >= totalPages" @click="changePage(totalPages)">
       <DoubleRightOutlined />
     </button>
   </div>
 </template>
 <script>
 import { DoubleLeftOutlined, LeftOutlined, RightOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
+
 export default {
   components: {
     DoubleLeftOutlined,

   props: {
     search: {
       type: Object,
-      default: {},
+      required: true,
+      default: () => ({}),
     }
   },
 
-  methods: {},
+  computed: {
+    // 현재 페이지
+    currentPage() {
+      return this.search.currentPage;
+    },
+
+    // 총 페이지 수
+    totalPages() {
+      return this.search.totalPageCount > 0 ? this.search.totalPageCount : 1;
+    },
+
+    // 표시할 페이지 번호 목록
+    displayedPageNumbers() {
+      const currentPage = this.currentPage;
+      const totalPages = this.totalPages;
+
+      const visiblePages = this.search.pageSize > 0 ? this.search.pageSize : 10;
+
+      // 표시할 페이지 범위 계산
+      let startPageNum = Math.max(1, currentPage - Math.floor(visiblePages / 2));
+      let endPageNum = Math.min(totalPages, startPageNum + visiblePages - 1);
+
+      // endPage가 최대 페이지 수보다 작을 경우, startPage를 조정
+      if (endPageNum - startPageNum + 1 < visiblePages) {
+        startPageNum = Math.max(1, endPageNum - visiblePages + 1);
+      }
+
+      // 페이지 번호 배열 생성
+      const pageNumbers = [];
+      for (let i = startPageNum; i <= endPageNum; i++) {
+        pageNumbers.push(i);
+      }
+
+      return pageNumbers;
+    }
+  },
+
+  methods: {
+    // 페이지 변경 처리
+    changePage(pageNum) {
+      if (pageNum < 1) pageNum = 1;
+      if (pageNum > this.totalPages) pageNum = this.totalPages;
+
+      if (pageNum !== this.currentPage) {
+        this.$emit('onChange', pageNum);
+      }
+    }
+  }
 }
-</script>
-<style scoped>
-button:disabled {
-  cursor: not-allowed;
-}
-</style>
+</script>

0fac8e8

a46a47a

client/views/pages/bbsDcry/photo/PicHistoryDetail.vue

--- client/views/pages/bbsDcry/photo/PicHistoryDetail.vue

+++ client/views/pages/bbsDcry/photo/PicHistoryDetail.vue


       <h2>사진 기록물</h2>
       <div class="breadcrumb-list">
         <ul>
-          <li><img :src="homeicon" alt="Home Icon">
+          <li>
+            <img :src="homeicon" alt="Home Icon">
             <p>기록물</p>
           </li>
           <li><img :src="righticon" alt=""></li>

         </ul>
       </div>
     </div>
-    <div class="gallery-form mb-40">
+    <form class="gallery-form mb-40" @submit.prevent>
       <dl class="mb-20">
         <dd>
-          <p>{{ dcry.sj }}</p>
+          <p>{{ findResult.sj }}</p>
           <div class="date flex align-center">
             <img :src="calendaricon" alt="">
-            <span>{{ $dotFormatDate(dcry.rgsde) }}</span>
+            <span>{{ $dotFormatDate(findResult.rgsde) }}</span>
           </div>
         </dd>
       </dl>

         <div class="gallery">
           <div class="main-swiper">
             <swiper :style="{ '--swiper-navigation-color': '#fff', '--swiper-pagination-color': '#fff' }" :loop="true" :spaceBetween="10" :thumbs="{ swiper: thumbsSwiper }" :modules="modules" class="mySwiper2">
-              <swiper-slide v-for="(item, idx) of dcry.files" :key="idx">
+              <swiper-slide v-for="(item, idx) of findResult.files" :key="idx">
                 <img :src="item.filePath" :alt="item.fileNm" />
               </swiper-slide>
             </swiper>
           </div>
           <div class="thumbnail">
             <swiper @swiper="setThumbsSwiper" :spaceBetween="20" :slidesPerView="4" :freeMode="true" :watchSlidesProgress="true" :modules="modules" :navigation="true" class="mySwiper">
-              <swiper-slide v-for="(item, idx) of dcry.files" :key="idx">
+              <swiper-slide v-for="(item, idx) of findResult.files" :key="idx">
                 <input type="checkbox" :id="'photo_' + idx" :value="item.fileId" v-model="selectedFiles" />
                 <img :src="item.filePath" :alt="item.fileNm" />
               </swiper-slide>

           <button class="all-down" @click="fnDownload('all')">전체 다운로드</button>
         </div>
       </div>
-    </div>
+    </form>
     <h3>내용</h3>
-    <div class="info-form mb-50">
+    <form class="info-form mb-50" @submit.prevent>
       <dl>
         <dd>
-          <ViewerComponent :content="dcry.cn" />
+          <ViewerComponent :content="findResult.cn" />
         </dd>
       </dl>
-    </div>
+    </form>
     <h3>기본정보</h3>
-    <div class="info-form mb-50">
+    <form class="info-form mb-50" @submit.prevent>
       <dl>
         <dd class="mb-20">
           <img :src="addressicon" alt="">
           <span>주소</span>
-          <p>{{ dcry.adres }}</p>
+          <p>{{ findResult.adres }}</p>
         </dd>
         <dd class="mb-20">
           <img :src="yearicon" alt="">
           <span>생산연도</span>
-          <p>{{ $dotFormatDate(dcry.prdctnYear) }}</p>
+          <p>{{ $dotFormatDate(findResult.prdctnYear) }}</p>
         </dd>
         <dd>
           <img :src="categoryicon" alt="">
           <span>카테고리</span>
           <ul class="category">
-            <li v-for="(item, idx) of dcry.ctgrys" :key="idx" class="category">{{ item.ctgryNm }}</li>
+            <li v-for="(item, idx) of findResult.ctgrys" :key="idx" class="category">{{ item.ctgryNm }}</li>
           </ul>
         </dd>
       </dl>
-    </div>
+    </form>
     <div class="btn-group flex-center">
       <button class="red-line " type="button" @click="fnDelete">삭제</button>
-      <button class="blue-line " type="button" @click="fnMoveTo('PicHistoryInsert', pageId)">수정</button>
-      <button class="gray-line-bg " type="button" @click="fnMoveTo('PicHistorySearch')">목록</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>

       categoryicon: 'client/resources/images/icon/categoryicon.png',
 
       pageId: null,
-      dcry: {},
+      findResult: {},
       selectedFiles: [],
     };
   },

     this.pageId = this.$route.query.id;
     if (this.pageId === null) {
       alert("게시물 존재하지 않습니다.");
-      this.fnMoveTo('PicHistorySearch');
+      this.fnMoveTo('list');
     }
   },
 

       try {
         const response = await findDcryProc(this.pageId);
 
-        if (response.data.data.dcry.ty !== 'P') {
+        this.findResult = response.data.data.dcry;
+        if (this.findResult.ty !== 'P') {
           alert('올바른 접근이 아닙니다.');
-          this.fnMoveTo('PicHistorySearch'); // 목록으로 이동
+          this.fnMoveTo('list'); // 목록으로 이동
         }
-
-        this.dcry = response.data.data.dcry;
       } catch (error) {
         alert('조회중 오류가 발생했습니다.');
-        this.fnMoveTo('PicHistorySearch');
+        this.fnMoveTo('list');
 
         if (error.response) {
           alert(error.response.data.message);

       try {
         // 파일 ID 수집
         let fileIds = this.selectedFiles[0];
-        if (type === 'all' && this.dcry.files.length > 1) {
-          fileIds = this.dcry.files.map(file => file.fileId).join(',');
+        if (type === 'all' && this.findResult.files.length > 1) {
+          fileIds = this.findResult.files.map(file => file.fileId).join(',');
         }
 
         let isMultiple = fileIds.length > 1;

         const response = await deleteDcryProc(this.pageId);
         alert('해당 페이지를 삭제했습니다.');
 
-        this.fnMoveTo('PicHistorySearch');
+        this.fnMoveTo('list');
       } catch (error) {
         if (error.response) {
           alert(error.response.data.message);

     },
 
     // 페이지 이동
-    fnMoveTo(page, id) {
-      if (this.$isEmpty(id)) {
-        this.$router.push({ name: page });
+    fnMoveTo(type, id) {
+      const routes = {
+        'list': { name: 'PicHistorySearch' },
+        'view': { name: 'PicHistoryDetail', query: { id } },
+        'edit': { name: 'PicHistoryInsert', query: this.$isEmpty(id) ? {} : { id } },
+      };
+
+      if (routes[type]) {
+        this.$router.push(routes[type]);
       } else {
-        this.$router.push({ name: page, query: { id: id } });
+        alert("올바르지 않은 경로를 요청하여 목록으로 이동합니다.");
+        this.$router.push(routes['list']);
       }
     },
   },

0fac8e8

a46a47a

client/views/pages/bbsDcry/photo/PicHistoryInsert.vue

--- client/views/pages/bbsDcry/photo/PicHistoryInsert.vue

+++ client/views/pages/bbsDcry/photo/PicHistoryInsert.vue


       <h2>사진 기록물</h2>
       <div class="breadcrumb-list">
         <ul>
-          <li><img :src="homeicon" alt="Home Icon">
+          <li>
+            <img :src="homeicon" alt="Home Icon">
             <p>기록물</p>
           </li>
           <li><img :src="righticon" alt=""></li>

         </ul>
       </div>
     </div>
-    <form class="insert-form mb-50">
+    <form class="insert-form mb-50" @submit.prevent>
       <dl>
         <dd>
           <label for="sj" class="require">제목</label>

0fac8e8

a46a47a

client/views/pages/bbsDcry/photo/PicHistorySearch.vue

--- client/views/pages/bbsDcry/photo/PicHistorySearch.vue

+++ client/views/pages/bbsDcry/photo/PicHistorySearch.vue


         </dd>
         <dd class="mb-15">
           <p>검색어</p>
-          <div class="wfull"><input type="text" v-model="searchReqDTO.searchText" v-on:keyup.enter="fnSearch()"></div>
+          <div class="wfull"><input type="text" v-model="searchReqDTO.searchText" v-on:keyup.enter="fnChnageReqDTO"></div>
         </dd>
         <dd class="mb-15">
           <p>생산연도</p>

             <img :src="reseticon" alt="">
             <p>초기화</p>
           </button>
-          <button type="button" class="search" @click="fnSearch">
+          <button type="button" class="search" @click="fnChnageReqDTO">
             <img :src="searchicon" alt="">
             <p>검색</p>
           </button>

               </li>
             </ul>
             <div class="select-box">
-              <select v-model="searchReqDTO.recordSize" @change="fnSearch">
+              <select v-model="searchReqDTO.recordSize" @change="fnChnageReqDTO">
                 <option :value="24">24개</option>
                 <option :value="36">36개</option>
                 <option :value="100">100개</option>

     this.fnFindCategorys(); // 카테고리 목록 조회 (검색조건 없음)
   },
 
-  mounted() {
-    let searchText = this.$route.query.searchText;
-    if (searchText !== null) {
-      this.searchReqDTO.searchText = searchText;
-    }
-
-    this.fnSearch(); // 통합검색
-  },
-
   methods: {
     // 초기화
     init() {
       if (this.isInitialLoad) {
         this.isInitialLoad = false;
+
+        let searchText = this.$route.query.searchText;
+        if (searchText !== null) {
+          this.searchReqDTO.searchText = searchText;
+        }
       } else {
         if (!confirm('검색 조건을 초기화하시겠습니까?')) {
           return;

     fnChangeCurrentPage(currentPage) {
       this.searchReqDTO.currentPage = Number(currentPage);
       this.$nextTick(() => {
-        this.fnFindCategorys();
+        this.fnSearch();
+      });
+    },
+
+    // 검색 조건이 변경된 경우
+    fnChnageReqDTO() {
+      this.searchReqDTO.currentPage = 1;
+      this.$nextTick(() => {
+        this.fnSearch();
       });
     },
 

0fac8e8

a46a47a

client/views/pages/bbsDcry/video/VideoHistoryDetail.vue

--- client/views/pages/bbsDcry/video/VideoHistoryDetail.vue

+++ client/views/pages/bbsDcry/video/VideoHistoryDetail.vue


         </ul>
       </div>
     </div>
-    <form action="" class="gallery-form mb-40">
+    <form class="gallery-form mb-40" @submit.prevent>
       <dl class="mb-20">
         <dd>
-          <p>{{ dcry.sj }}</p>
+          <p>{{ findResult.sj }}</p>
           <div class="date flex align-center">
             <img :src="calendaricon" alt="">
-            <span>{{ $dotFormatDate(dcry.rgsde) }}</span>
+            <span>{{ $dotFormatDate(findResult.rgsde) }}</span>
           </div>
         </dd>
       </dl>

       </div>
     </form>
     <h3>내용</h3>
-    <form action="" class=" info-form mb-50">
+    <form class=" info-form mb-50" @submit.prevent>
       <dl>
         <dd>
-          <p> 대한민국 최대의 내륙 산업단지를 보유하고, 서울로부터 277km, 부산으로부터 167km 거리에 있으며, 면적은 615㎢로 경상북도 전체 면적의 3.2%에 달합니다. 인구는 41만 명이고, 선산읍, 고아읍, 산동읍을 비롯한 3읍, 5면, 17개 동으로 구성되어 있습니다.</p>
+          <ViewerComponent :content="findResult.cn" />
         </dd>
       </dl>
     </form>
     <h3>기본정보</h3>
-    <form action="" class="info-form mb-50">
+    <form class="info-form mb-50" @submit.prevent>
       <dl>
         <dd class="mb-20">
           <img :src="addressicon" alt="">
           <span>주소</span>
-          <p>경상북도 구미시 송정대로 55</p>
+          <p>{{ findResult.adres }}</p>
         </dd>
         <dd class="mb-20">
           <img :src="yearicon" alt="">
           <span>생산연도</span>
-          <p>2017</p>
+          <p>{{ $dotFormatDate(findResult.prdctnYear) }}</p>
         </dd>
         <dd>
           <img :src="categoryicon" alt="">
           <span>카테고리</span>
           <ul class="category">
-            <li v-if="resultitem.category1" class="category1">카테고리1</li>
-            <li v-if="resultitem.category2" class="category2">카테고리2</li>
+            <li v-for="(item, idx) of findResult.ctgrys" :key="idx" class="category">{{ item.ctgryNm }}</li>
           </ul>
         </dd>
       </dl>
     </form>
     <div class="btn-group flex-center">
-      <button class="red-line " type="button" @click="fnDeleteUser">삭제</button>
-      <button class="blue-line " type="button" @click="fnUpdateUser">수정</button>
-      <button class="gray-line-bg " type="button" @click="fnUpdateUser">목록</button>
-      <button class="gradient ">다운로드</button>
+      <button type="button" class="red-line" @click="fnDelete">삭제</button>
+      <button type="button" class="blue-line" @click="fnMoveTo('edit', pageId)">수정</button>
+      <button type="button" class="gray-line-bg" @click="fnMoveTo('list')">목록</button>
+      <button type="button" class="gradient" @click="fnDownload">다운로드</button>
     </div>
   </div>
 </template>
 <script>
-import axios from "axios";
-import { ref } from 'vue';
-import { updateUsers, logOutProc, updatePassword } from "../../../../resources/api/user"
-// Import Swiper Vue components
-import { CaretRightOutlined, PauseOutlined } from '@ant-design/icons-vue';
-import { Swiper, SwiperSlide } from 'swiper/vue';
-
-// Import Swiper styles
-import 'swiper/css';
-
-import 'swiper/css/free-mode';
-import 'swiper/css/navigation';
-import 'swiper/css/thumbs';
-
-// import required modules
-import { FreeMode, Navigation, Thumbs } from 'swiper/modules';
+// COMPONENT
+import ViewerComponent from '../../../component/editor/ViewerComponent.vue';
+// API
+import { findDcryProc, deleteDcryProc } from '@/resources/api/dcry';
+import { fileDownloadProc, multiFileDownloadProc } from '@/resources/api/file';
 
 export default {
   components: {
-    PauseOutlined,
-    CaretRightOutlined,
-    Swiper,
-    SwiperSlide,
+    ViewerComponent,
   },
-  setup() {
-    const thumbsSwiper = ref(null);
 
-    const setThumbsSwiper = (swiper) => {
-      thumbsSwiper.value = swiper;
-    };
-
-    return {
-      thumbsSwiper,
-      setThumbsSwiper,
-      modules: [FreeMode, Navigation, Thumbs],
-    };
-  },
   data() {
     return {
-      resultitem: {
-        category1: true,
-        category2: true,
-      },
+      // ICON
       calendaricon: 'client/resources/images/icon/calendaricon.png',
       homeicon: 'client/resources/images/icon/home.png',
       erroricon: 'client/resources/images/icon/error.png',

       addressicon: 'client/resources/images/icon/addressicon.png',
       yearicon: 'client/resources/images/icon/yearicon.png',
       categoryicon: 'client/resources/images/icon/categoryicon.png',
-      eximg: 'client/resources/images/img8.png',
-      slides: [
-        { img: 'client/resources/images/visual.png', alt: 'Slide 1' },
-        { img: 'client/resources/images/visual.png', alt: 'Slide 2' },
-        { img: 'client/resources/images/visual.png', alt: 'Slide 3' },
-        { img: 'client/resources/images/visual.png', alt: 'Slide 3' },
-        { img: 'client/resources/images/visual.png', alt: 'Slide 3' },
-        { img: 'client/resources/images/visual.png', alt: 'Slide 3' },
-        // Add more slides as needed
-      ],
 
+      pageId: null,
+      findResult: {},
+      selectedFiles: [],
     };
   },
+
+  created() {
+    this.pageId = this.$route.query.id;
+    if (this.pageId === null) {
+      alert("게시물 존재하지 않습니다.");
+      this.fnMoveTo('list');
+    }
+  },
+
+  mounted() {
+    this.fnFindDcry(); // 상세 조회
+  },
+
   methods: {
+    // 상세 조회
+    async fnFindDcry() {
+      try {
+        const response = await findDcryProc(this.pageId);
+
+        this.findResult = response.data.data.dcry;
+        if (this.findResult.ty !== 'V') {
+          alert('올바른 접근이 아닙니다.');
+          this.fnMoveTo('list'); // 목록으로 이동
+        }
+      } catch (error) {
+        alert('조회중 오류가 발생했습니다.');
+        this.fnMoveTo('list');
+
+        if (error.response) {
+          alert(error.response.data.message);
+        }
+        console.error(error.message);
+      }
+    },
+
+    // 파일 다운로드
+    async fnDownload() {
+      let url = null;
+      let link = null;
+
+      try {
+        // 파일 ID 수집
+        let fileId = this.findResult.files[0].fileId;
+        const response = await fileDownloadProc(fileId);
+
+        // 파일명 조회
+        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 deleteDcryProc(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: 'VideoHistorySearch' },
+        'view': { name: 'VideoHistoryDetail', query: { id } },
+        'edit': { name: 'VideoHistoryInsert', query: this.$isEmpty(id) ? {} : { id } },
+      };
+
+      if (routes[type]) {
+        this.$router.push(routes[type]);
+      } else {
+        alert("올바르지 않은 경로를 요청하여 목록으로 이동합니다.");
+        this.$router.push(routes['list']);
+      }
+    },
   },
-  watch: {},
-  computed: {
-  },
-  mounted() { },
 };
 </script>

0fac8e8

a46a47a

client/views/pages/bbsDcry/video/VideoHistoryInsert.vue

--- client/views/pages/bbsDcry/video/VideoHistoryInsert.vue

+++ client/views/pages/bbsDcry/video/VideoHistoryInsert.vue


         </ul>
       </div>
     </div>
-    <form class="insert-form mb-50">
+    <form class="insert-form mb-50" @submit.prevent>
       <dl>
         <dd>
           <label for="sj" class="require">제목</label>

0fac8e8

a46a47a

client/views/pages/bbsDcry/video/VideoHistorySearch.vue

--- client/views/pages/bbsDcry/video/VideoHistorySearch.vue

+++ client/views/pages/bbsDcry/video/VideoHistorySearch.vue


         </dd>
         <dd class="mb-15">
           <p>검색어</p>
-          <div class="wfull"><input type="text" v-model="searchReqDTO.searchText" v-on:keyup.enter="fnSearch()"></div>
+          <div class="wfull"><input type="text" v-model="searchReqDTO.searchText" v-on:keyup.enter="fnChnageReqDTO"></div>
         </dd>
         <dd class="mb-15">
           <p>생산연도</p>

             <img :src="reseticon" alt="">
             <p>초기화</p>
           </button>
-          <button type="button" class="search" @click="fnSearch">
+          <button type="button" class="search" @click="fnChnageReqDTO">
             <img :src="searchicon" alt="">
             <p>검색</p>
           </button>

               </li>
             </ul>
             <div class="select-box">
-              <select v-model="searchReqDTO.recordSize" @change="fnSearch">
+              <select v-model="searchReqDTO.recordSize" @change="fnChnageReqDTO">
                 <option :value="24">24개</option>
                 <option :value="36">36개</option>
                 <option :value="100">100개</option>

     this.fnFindCategorys(); // 카테고리 목록 조회 (검색조건 없음)
   },
 
-  mounted() {
-    let searchText = this.$route.query.searchText;
-    if (searchText !== null) {
-      this.searchReqDTO.searchText = searchText;
-    }
-
-    this.fnSearch(); // 통합검색
-  },
-
   methods: {
     // 초기화
     init() {
       if (this.isInitialLoad) {
         this.isInitialLoad = false;
+
+        let searchText = this.$route.query.searchText;
+        if (searchText !== null) {
+          this.searchReqDTO.searchText = searchText;
+        }
       } else {
         if (!confirm('검색 조건을 초기화하시겠습니까?')) {
           return;

 
       this.selectedTabId = this.tabs[0].id;
 
-      this.fnSearch(); // 통합검색
+      this.fnChnageReqDTO(); // 통합검색
     },
 
     // 카테고리 목록 조회

       });
     },
 
+    // 검색 조건이 변경된 경우
+    fnChnageReqDTO() {
+      this.searchReqDTO.currentPage = 1;
+      this.$nextTick(() => {
+        this.fnSearch();
+      });
+    },
+
     // 통합검색
     async fnSearch() {
       try {

0fac8e8

a46a47a

client/views/pages/bbsMediaVido/MediaVideoDetail.vue

--- client/views/pages/bbsMediaVido/MediaVideoDetail.vue

+++ client/views/pages/bbsMediaVido/MediaVideoDetail.vue


         </ul>
       </div>
     </div>
-    <div class="gallery-form mb-40">
+    <form class="gallery-form mb-40" @submit.prevent>
       <dl class="mb-20">
         <dd>
-          <p>{{ mediaVido.sj }} </p>
+          <p>{{ findResult.sj }} </p>
           <div class="date flex align-center">
             <img :src="calendaricon" alt="">
-            <span>{{ $dotFormatDate(mediaVido.rgsde) }}</span>
+            <span>{{ $dotFormatDate(findResult.rgsde) }}</span>
           </div>
         </dd>
       </dl>
       <div class="gallery video">
-        <Youtube-component :link="mediaVido.link" />
+        <Youtube-component :link="findResult.link" />
       </div>
-    </div>
+    </form>
     <h3>내용</h3>
-    <div class="info-form mb-50">
+    <form class="info-form mb-50" @submit.prevent>
       <dl>
         <dd>
-          <Viewer-component :content="mediaVido.cn" />
+          <Viewer-component :content="findResult.cn" />
         </dd>
       </dl>
-    </div>
+    </form>
     <h3>기본정보</h3>
-    <div class="info-form mb-50">
+    <form class="info-form mb-50" @submit.prevent>
       <dl>
         <dd class="mb-20">
           <img :src="addressicon" alt="">
           <span>원본주소</span>
-          <p>{{ mediaVido.link }}</p>
+          <p>{{ findResult.link }}</p>
         </dd>
         <dd class="mb-20">
           <img :src="yearicon" alt="">
           <span>생산연도</span>
-          <p>{{ $dotFormatDate(mediaVido.prdctnYear) }}</p>
+          <p>{{ $dotFormatDate(findResult.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>
+            <li v-for="(item, idx) of findResult.ctgrys" :key="idx" class="category">{{ item.ctgryNm }}</li>
           </ul>
         </dd>
       </dl>
-    </div>
+    </form>
     <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>
+      <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>

       categoryicon: 'client/resources/images/icon/categoryicon.png',
 
       pageId: null,
-      mediaVido: {},
+      findResult: {},
       selectedFiles: [],
     };
   },

     this.pageId = this.$route.query.id;
     if (this.pageId === null) {
       alert("게시물 존재하지 않습니다.");
-      this.fnMoveTo('MediaVideoSearch');
+      this.fnMoveTo('list');
     }
   },
 

     async fnFindDcry() {
       try {
         const response = await findMediaVidoProc(this.pageId);
-        this.mediaVido = response.data.data.mediaVido;
+        this.findResult = response.data.data.mediaVido;
       } catch (error) {
         alert('조회중 오류가 발생했습니다.');
-        this.fnMoveTo('MediaVideoSearch');
+        this.fnMoveTo('list');
 
         if (error.response) {
           alert(error.response.data.message);

         const response = await deleteMediaVidoProc(this.pageId);
         alert('해당 페이지를 삭제했습니다.');
 
-        this.fnMoveTo('MediaVideoSearch');
+        this.fnMoveTo('list');
       } catch (error) {
         if (error.response) {
           alert(error.response.data.message);

     },
 
     // 페이지 이동
-    fnMoveTo(page, id) {
-      if (this.$isEmpty(id)) {
-        this.$router.push({ name: page });
+    fnMoveTo(type, id) {
+      const routes = {
+        'list': { name: 'MediaVideoSearch' },
+        'view': { name: 'MediaVideoDetail', query: { id } },
+        'edit': { name: 'MediaVideoInsert', query: this.$isEmpty(id) ? {} : { id } },
+      };
+
+      if (routes[type]) {
+        this.$router.push(routes[type]);
       } else {
-        this.$router.push({ name: page, query: { id: id } });
+        alert("올바르지 않은 경로를 요청하여 목록으로 이동합니다.");
+        this.$router.push(routes['list']);
       }
     },
   },

0fac8e8

a46a47a

client/views/pages/bbsMediaVido/MediaVideoInsert.vue

--- client/views/pages/bbsMediaVido/MediaVideoInsert.vue

+++ client/views/pages/bbsMediaVido/MediaVideoInsert.vue


         </ul>
       </div>
     </div>
-    <form class="insert-form mb-50">
+    <form class="insert-form mb-50" @submit.prevent>
       <dl>
         <dd>
           <label for="sj" class="require">제목</label>

0fac8e8

a46a47a

client/views/pages/bbsMediaVido/MediaVideoSearch.vue

--- client/views/pages/bbsMediaVido/MediaVideoSearch.vue

+++ client/views/pages/bbsMediaVido/MediaVideoSearch.vue


         </dd>
         <dd class="mb-15">
           <p>검색어</p>
-          <div class="wfull"><input type="text" v-model="searchReqDTO.searchText" v-on:keyup.enter="fnSearch()"></div>
+          <div class="wfull"><input type="text" v-model="searchReqDTO.searchText" v-on:keyup.enter="fnChnageReqDTO"></div>
         </dd>
         <dd class="mb-15">
           <p>생산연도</p>

             <img :src="reseticon" alt="">
             <p>초기화</p>
           </button>
-          <button type="button" class="search" @click="fnSearch">
+          <button type="button" class="search" @click="fnChnageReqDTO">
             <img :src="searchicon" alt="">
             <p>검색</p>
           </button>

               </li>
             </ul>
             <div class="select-box">
-              <select v-model="searchReqDTO.recordSize" @change="fnSearch">
+              <select v-model="searchReqDTO.recordSize" @change="fnChnageReqDTO">
                 <option :value="24">24개</option>
                 <option :value="36">36개</option>
                 <option :value="100">100개</option>

     this.fnFindCategorys(); // 카테고리 목록 조회 (검색조건 없음)
   },
 
-  mounted() {
-    let searchText = this.$route.query.searchText;
-    if (searchText !== null) {
-      this.searchReqDTO.searchText = searchText;
-    }
-
-    this.fnSearch(); // 통합검색
-  },
-
   methods: {
     // 초기화
     init() {
       if (this.isInitialLoad) {
         this.isInitialLoad = false;
+
+        let searchText = this.$route.query.searchText;
+        if (searchText !== null) {
+          this.searchReqDTO.searchText = searchText;
+        }
       } else {
         if (!confirm('검색 조건을 초기화하시겠습니까?')) {
           return;

 
       this.selectedTabId = this.tabs[0].id;
 
-      this.fnSearch(); // 통합검색
+      this.fnChnageReqDTO(); // 통합검색
     },
 
     // 카테고리 목록 조회

     // 페이지 이동
     fnChangeCurrentPage(currentPage) {
       this.searchReqDTO.currentPage = Number(currentPage);
-      this.fnFindCategorys();
+      this.$nextTick(() => {
+        this.fnSearch();
+      });
+    },
+
+    // 검색 조건이 변경된 경우
+    fnChnageReqDTO() {
+      this.searchReqDTO.currentPage = 1;
+      this.$nextTick(() => {
+        this.fnSearch();
+      });
     },
 
     // 통합검색

0fac8e8

a46a47a

client/views/pages/bbsNesDta/NewsReleaseSearch.vue

--- client/views/pages/bbsNesDta/NewsReleaseSearch.vue

+++ client/views/pages/bbsNesDta/NewsReleaseSearch.vue


         </dd>
         <dd class="mb-15">
           <p>검색어</p>
-          <div class="wfull"><input type="text" v-model="searchReqDTO.searchText" v-on:keyup.enter="fnSearch()"></div>
+          <div class="wfull"><input type="text" v-model="searchReqDTO.searchText" v-on:keyup.enter="fnChnageReqDTO"></div>
         </dd>
         <dd class="mb-15">
           <p>생산연도</p>

             <img :src="reseticon" alt="">
             <p>초기화</p>
           </button>
-          <button type="button" class="search" @click="fnSearch">
+          <button type="button" class="search" @click="fnChnageReqDTO">
             <img :src="searchicon" alt="">
             <p>검색</p>
           </button>

               </li>
             </ul>
             <div class="select-box">
-              <select v-model="searchReqDTO.recordSize" @change="fnSearch">
+              <select v-model="searchReqDTO.recordSize" @change="fnChnageReqDTO">
                 <option :value="24">24개</option>
                 <option :value="36">36개</option>
                 <option :value="100">100개</option>

     this.fnFindCategorys(); // 카테고리 목록 조회 (검색조건 없음)
   },
 
-  mounted() {
-    let searchText = this.$route.query.searchText;
-    if (searchText !== null) {
-      this.searchReqDTO.searchText = searchText;
-    }
-
-    this.fnSearch(); // 통합검색
-  },
-
   methods: {
     // 초기화
     init() {
       if (this.isInitialLoad) {
         this.isInitialLoad = false;
+
+        let searchText = this.$route.query.searchText;
+        if (searchText !== null) {
+          this.searchReqDTO.searchText = searchText;
+        }
       } else {
         if (!confirm('검색 조건을 초기화하시겠습니까?')) {
           return;

 
       this.selectedTabId = this.tabs[0].id;
 
-      this.fnSearch(); // 통합검색
+      this.fnChnageReqDTO(); // 통합검색
     },
 
     // 카테고리 목록 조회

     // 페이지 이동
     fnChangeCurrentPage(currentPage) {
       this.searchReqDTO.currentPage = Number(currentPage);
-      this.fnFindCategorys();
+      this.$nextTick(() => {
+        this.fnSearch();
+      });
+    },
+
+    // 검색 조건이 변경된 경우
+    fnChnageReqDTO() {
+      this.searchReqDTO.currentPage = 1;
+      this.$nextTick(() => {
+        this.fnSearch();
+      });
     },
 
     // 통합검색

Add a comment

Open 0
Closed 0

List

...	...	@@ -4,7 +4,8 @@
4	4	<h2>사진 기록물</h2>
5	5	<div class="breadcrumb-list">
6	6	<ul>
7		- <li><img :src="homeicon" alt="Home Icon">
	7	+ <li>
	8	+ <img :src="homeicon" alt="Home Icon">
8	9	<p>기록물</p>
9	10	</li>
10	11	<li><img :src="righticon" alt=""></li>
...	...	@@ -12,13 +13,13 @@
12	13	</ul>
13	14	</div>
14	15	</div>
15		- <div class="gallery-form mb-40">
	16	+ <form class="gallery-form mb-40" @submit.prevent>
16	17	<dl class="mb-20">
17	18	<dd>
18		- <p>{{ dcry.sj }}</p>
	19	+ <p>{{ findResult.sj }}</p>
19	20	<div class="date flex align-center">
20	21	<img :src="calendaricon" alt="">
21		- <span>{{ $dotFormatDate(dcry.rgsde) }}</span>
	22	+ <span>{{ $dotFormatDate(findResult.rgsde) }}</span>
22	23	</div>
23	24	</dd>
24	25	</dl>
...	...	@@ -26,14 +27,14 @@
26	27	<div class="gallery">
27	28	<div class="main-swiper">
28	29	<swiper :style="{ '--swiper-navigation-color': '#fff', '--swiper-pagination-color': '#fff' }" :loop="true" :spaceBetween="10" :thumbs="{ swiper: thumbsSwiper }" :modules="modules" class="mySwiper2">
29		- <swiper-slide v-for="(item, idx) of dcry.files" :key="idx">
	30	+ <swiper-slide v-for="(item, idx) of findResult.files" :key="idx">
30	31	<img :src="item.filePath" :alt="item.fileNm" />
31	32	</swiper-slide>
32	33	</swiper>
33	34	</div>
34	35	<div class="thumbnail">
35	36	<swiper @swiper="setThumbsSwiper" :spaceBetween="20" :slidesPerView="4" :freeMode="true" :watchSlidesProgress="true" :modules="modules" :navigation="true" class="mySwiper">
36		- <swiper-slide v-for="(item, idx) of dcry.files" :key="idx">
	37	+ <swiper-slide v-for="(item, idx) of findResult.files" :key="idx">
37	38	<input type="checkbox" :id="'photo_' + idx" :value="item.fileId" v-model="selectedFiles" />
38	39	<img :src="item.filePath" :alt="item.fileNm" />
39	40	</swiper-slide>
...	...	@@ -45,41 +46,41 @@
45	46	<button class="all-down" @click="fnDownload('all')">전체 다운로드</button>
46	47	</div>
47	48	</div>
48		- </div>
	49	+ </form>
49	50	<h3>내용</h3>
50		- <div class="info-form mb-50">
	51	+ <form class="info-form mb-50" @submit.prevent>
51	52	<dl>
52	53	<dd>
53		- <ViewerComponent :content="dcry.cn" />
	54	+ <ViewerComponent :content="findResult.cn" />
54	55	</dd>
55	56	</dl>
56		- </div>
	57	+ </form>
57	58	<h3>기본정보</h3>
58		- <div class="info-form mb-50">
	59	+ <form class="info-form mb-50" @submit.prevent>
59	60	<dl>
60	61	<dd class="mb-20">
61	62	<img :src="addressicon" alt="">
62	63	<span>주소</span>
63		- <p>{{ dcry.adres }}</p>
	64	+ <p>{{ findResult.adres }}</p>
64	65	</dd>
65	66	<dd class="mb-20">
66	67	<img :src="yearicon" alt="">
67	68	<span>생산연도</span>
68		- <p>{{ $dotFormatDate(dcry.prdctnYear) }}</p>
	69	+ <p>{{ $dotFormatDate(findResult.prdctnYear) }}</p>
69	70	</dd>
70	71	<dd>
71	72	<img :src="categoryicon" alt="">
72	73	<span>카테고리</span>
73	74	<ul class="category">
74		- <li v-for="(item, idx) of dcry.ctgrys" :key="idx" class="category">{{ item.ctgryNm }}</li>
	75	+ <li v-for="(item, idx) of findResult.ctgrys" :key="idx" class="category">{{ item.ctgryNm }}</li>
75	76	</ul>
76	77	</dd>
77	78	</dl>
78		- </div>
	79	+ </form>
79	80	<div class="btn-group flex-center">
80	81	<button class="red-line " type="button" @click="fnDelete">삭제</button>
81		- <button class="blue-line " type="button" @click="fnMoveTo('PicHistoryInsert', pageId)">수정</button>
82		- <button class="gray-line-bg " type="button" @click="fnMoveTo('PicHistorySearch')">목록</button>
	82	+ <button class="blue-line " type="button" @click="fnMoveTo('edit', pageId)">수정</button>
	83	+ <button class="gray-line-bg " type="button" @click="fnMoveTo('list')">목록</button>
83	84	</div>
84	85	</div>
85	86	</template>
...	...	@@ -136,7 +137,7 @@
136	137	categoryicon: 'client/resources/images/icon/categoryicon.png',
137	138
138	139	pageId: null,
139		- dcry: {},
	140	+ findResult: {},
140	141	selectedFiles: [],
141	142	};
142	143	},
...	...	@@ -145,7 +146,7 @@
145	146	this.pageId = this.$route.query.id;
146	147	if (this.pageId === null) {
147	148	alert("게시물 존재하지 않습니다.");
148		- this.fnMoveTo('PicHistorySearch');
	149	+ this.fnMoveTo('list');
149	150	}
150	151	},
151	152
...	...	@@ -159,15 +160,14 @@
159	160	try {
160	161	const response = await findDcryProc(this.pageId);
161	162
162		- if (response.data.data.dcry.ty !== 'P') {
	163	+ this.findResult = response.data.data.dcry;
	164	+ if (this.findResult.ty !== 'P') {
163	165	alert('올바른 접근이 아닙니다.');
164		- this.fnMoveTo('PicHistorySearch'); // 목록으로 이동
	166	+ this.fnMoveTo('list'); // 목록으로 이동
165	167	}
166		-
167		- this.dcry = response.data.data.dcry;
168	168	} catch (error) {
169	169	alert('조회중 오류가 발생했습니다.');
170		- this.fnMoveTo('PicHistorySearch');
	170	+ this.fnMoveTo('list');
171	171
172	172	if (error.response) {
173	173	alert(error.response.data.message);
...	...	@@ -190,8 +190,8 @@
190	190	try {
191	191	// 파일 ID 수집
192	192	let fileIds = this.selectedFiles[0];
193		- if (type === 'all' && this.dcry.files.length > 1) {
194		- fileIds = this.dcry.files.map(file => file.fileId).join(',');
	193	+ if (type === 'all' && this.findResult.files.length > 1) {
	194	+ fileIds = this.findResult.files.map(file => file.fileId).join(',');
195	195	}
196	196
197	197	let isMultiple = fileIds.length > 1;
...	...	@@ -238,7 +238,7 @@
238	238	const response = await deleteDcryProc(this.pageId);
239	239	alert('해당 페이지를 삭제했습니다.');
240	240
241		- this.fnMoveTo('PicHistorySearch');
	241	+ this.fnMoveTo('list');
242	242	} catch (error) {
243	243	if (error.response) {
244	244	alert(error.response.data.message);
...	...	@@ -248,11 +248,18 @@
248	248	},
249	249
250	250	// 페이지 이동
251		- fnMoveTo(page, id) {
252		- if (this.$isEmpty(id)) {
253		- this.$router.push({ name: page });
	251	+ fnMoveTo(type, id) {
	252	+ const routes = {
	253	+ 'list': { name: 'PicHistorySearch' },
	254	+ 'view': { name: 'PicHistoryDetail', query: { id } },
	255	+ 'edit': { name: 'PicHistoryInsert', query: this.$isEmpty(id) ? {} : { id } },
	256	+ };
	257	+
	258	+ if (routes[type]) {
	259	+ this.$router.push(routes[type]);
254	260	} else {
255		- this.$router.push({ name: page, query: { id: id } });
	261	+ alert("올바르지 않은 경로를 요청하여 목록으로 이동합니다.");
	262	+ this.$router.push(routes['list']);
256	263	}
257	264	},
258	265	},

...	...	@@ -38,7 +38,7 @@
38	38	</dd>
39	39	<dd class="mb-15">
40	40	<p>검색어</p>
41		- <div class="wfull"><input type="text" v-model="searchReqDTO.searchText" v-on:keyup.enter="fnSearch()"></div>
	41	+ <div class="wfull"><input type="text" v-model="searchReqDTO.searchText" v-on:keyup.enter="fnChnageReqDTO"></div>
42	42	</dd>
43	43	<dd class="mb-15">
44	44	<p>생산연도</p>
...	...	@@ -69,7 +69,7 @@
69	69	<img :src="reseticon" alt="">
70	70	<p>초기화</p>
71	71	</button>
72		- <button type="button" class="search" @click="fnSearch">
	72	+ <button type="button" class="search" @click="fnChnageReqDTO">
73	73	<img :src="searchicon" alt="">
74	74	<p>검색</p>
75	75	</button>
...	...	@@ -91,7 +91,7 @@
91	91	</li>
92	92	</ul>
93	93	<div class="select-box">
94		- <select v-model="searchReqDTO.recordSize" @change="fnSearch">
	94	+ <select v-model="searchReqDTO.recordSize" @change="fnChnageReqDTO">
95	95	<option :value="24">24개</option>
96	96	<option :value="36">36개</option>
97	97	<option :value="100">100개</option>
...	...	@@ -197,20 +197,16 @@
197	197	this.fnFindCategorys(); // 카테고리 목록 조회 (검색조건 없음)
198	198	},
199	199
200		- mounted() {
201		- let searchText = this.$route.query.searchText;
202		- if (searchText !== null) {
203		- this.searchReqDTO.searchText = searchText;
204		- }
205		-
206		- this.fnSearch(); // 통합검색
207		- },
208		-
209	200	methods: {
210	201	// 초기화
211	202	init() {
212	203	if (this.isInitialLoad) {
213	204	this.isInitialLoad = false;
	205	+
	206	+ let searchText = this.$route.query.searchText;
	207	+ if (searchText !== null) {
	208	+ this.searchReqDTO.searchText = searchText;
	209	+ }
214	210	} else {
215	211	if (!confirm('검색 조건을 초기화하시겠습니까?')) {
216	212	return;
...	...	@@ -244,7 +240,15 @@
244	240	fnChangeCurrentPage(currentPage) {
245	241	this.searchReqDTO.currentPage = Number(currentPage);
246	242	this.$nextTick(() => {
247		- this.fnFindCategorys();
	243	+ this.fnSearch();
	244	+ });
	245	+ },
	246	+
	247	+ // 검색 조건이 변경된 경우
	248	+ fnChnageReqDTO() {
	249	+ this.searchReqDTO.currentPage = 1;
	250	+ this.$nextTick(() => {
	251	+ this.fnSearch();
248	252	});
249	253	},
250	254

...	...	@@ -38,7 +38,7 @@
38	38	</dd>
39	39	<dd class="mb-15">
40	40	<p>검색어</p>
41		- <div class="wfull"><input type="text" v-model="searchReqDTO.searchText" v-on:keyup.enter="fnSearch()"></div>
	41	+ <div class="wfull"><input type="text" v-model="searchReqDTO.searchText" v-on:keyup.enter="fnChnageReqDTO"></div>
42	42	</dd>
43	43	<dd class="mb-15">
44	44	<p>생산연도</p>
...	...	@@ -69,7 +69,7 @@
69	69	<img :src="reseticon" alt="">
70	70	<p>초기화</p>
71	71	</button>
72		- <button type="button" class="search" @click="fnSearch">
	72	+ <button type="button" class="search" @click="fnChnageReqDTO">
73	73	<img :src="searchicon" alt="">
74	74	<p>검색</p>
75	75	</button>
...	...	@@ -91,7 +91,7 @@
91	91	</li>
92	92	</ul>
93	93	<div class="select-box">
94		- <select v-model="searchReqDTO.recordSize" @change="fnSearch">
	94	+ <select v-model="searchReqDTO.recordSize" @change="fnChnageReqDTO">
95	95	<option :value="24">24개</option>
96	96	<option :value="36">36개</option>
97	97	<option :value="100">100개</option>
...	...	@@ -197,20 +197,16 @@
197	197	this.fnFindCategorys(); // 카테고리 목록 조회 (검색조건 없음)
198	198	},
199	199
200		- mounted() {
201		- let searchText = this.$route.query.searchText;
202		- if (searchText !== null) {
203		- this.searchReqDTO.searchText = searchText;
204		- }
205		-
206		- this.fnSearch(); // 통합검색
207		- },
208		-
209	200	methods: {
210	201	// 초기화
211	202	init() {
212	203	if (this.isInitialLoad) {
213	204	this.isInitialLoad = false;
	205	+
	206	+ let searchText = this.$route.query.searchText;
	207	+ if (searchText !== null) {
	208	+ this.searchReqDTO.searchText = searchText;
	209	+ }
214	210	} else {
215	211	if (!confirm('검색 조건을 초기화하시겠습니까?')) {
216	212	return;
...	...	@@ -222,7 +218,7 @@
222	218
223	219	this.selectedTabId = this.tabs[0].id;
224	220
225		- this.fnSearch(); // 통합검색
	221	+ this.fnChnageReqDTO(); // 통합검색
226	222	},
227	223
228	224	// 카테고리 목록 조회
...	...	@@ -248,6 +244,14 @@
248	244	});
249	245	},
250	246
	247	+ // 검색 조건이 변경된 경우
	248	+ fnChnageReqDTO() {
	249	+ this.searchReqDTO.currentPage = 1;
	250	+ this.$nextTick(() => {
	251	+ this.fnSearch();
	252	+ });
	253	+ },
	254	+
251	255	// 통합검색
252	256	async fnSearch() {
253	257	try {

...	...	@@ -12,54 +12,54 @@
12	12	</ul>
13	13	</div>
14	14	</div>
15		- <div class="gallery-form mb-40">
	15	+ <form class="gallery-form mb-40" @submit.prevent>
16	16	<dl class="mb-20">
17	17	<dd>
18		- <p>{{ mediaVido.sj }} </p>
	18	+ <p>{{ findResult.sj }} </p>
19	19	<div class="date flex align-center">
20	20	<img :src="calendaricon" alt="">
21		- <span>{{ $dotFormatDate(mediaVido.rgsde) }}</span>
	21	+ <span>{{ $dotFormatDate(findResult.rgsde) }}</span>
22	22	</div>
23	23	</dd>
24	24	</dl>
25	25	<div class="gallery video">
26		- <Youtube-component :link="mediaVido.link" />
	26	+ <Youtube-component :link="findResult.link" />
27	27	</div>
28		- </div>
	28	+ </form>
29	29	<h3>내용</h3>
30		- <div class="info-form mb-50">
	30	+ <form class="info-form mb-50" @submit.prevent>
31	31	<dl>
32	32	<dd>
33		- <Viewer-component :content="mediaVido.cn" />
	33	+ <Viewer-component :content="findResult.cn" />
34	34	</dd>
35	35	</dl>
36		- </div>
	36	+ </form>
37	37	<h3>기본정보</h3>
38		- <div class="info-form mb-50">
	38	+ <form class="info-form mb-50" @submit.prevent>
39	39	<dl>
40	40	<dd class="mb-20">
41	41	<img :src="addressicon" alt="">
42	42	<span>원본주소</span>
43		- <p>{{ mediaVido.link }}</p>
	43	+ <p>{{ findResult.link }}</p>
44	44	</dd>
45	45	<dd class="mb-20">
46	46	<img :src="yearicon" alt="">
47	47	<span>생산연도</span>
48		- <p>{{ $dotFormatDate(mediaVido.prdctnYear) }}</p>
	48	+ <p>{{ $dotFormatDate(findResult.prdctnYear) }}</p>
49	49	</dd>
50	50	<dd>
51	51	<img :src="categoryicon" alt="">
52	52	<span>카테고리</span>
53	53	<ul class="category">
54		- <li v-for="(item, idx) of mediaVido.ctgrys" :key="idx" class="category">{{ item.ctgryNm }}</li>
	54	+ <li v-for="(item, idx) of findResult.ctgrys" :key="idx" class="category">{{ item.ctgryNm }}</li>
55	55	</ul>
56	56	</dd>
57	57	</dl>
58		- </div>
	58	+ </form>
59	59	<div class="btn-group flex-center">
60	60	<button class="red-line " type="button" @click="fnDelete">삭제</button>
61		- <button class="blue-line " type="button" @click="fnMoveTo('MediaVideoInsert', pageId)">수정</button>
62		- <button class="gray-line-bg " type="button" @click="fnMoveTo('MediaVideoSearch')">목록</button>
	61	+ <button class="blue-line " type="button" @click="fnMoveTo('edit', pageId)">수정</button>
	62	+ <button class="gray-line-bg " type="button" @click="fnMoveTo('list')">목록</button>
63	63	</div>
64	64	</div>
65	65	</template>
...	...	@@ -89,7 +89,7 @@
89	89	categoryicon: 'client/resources/images/icon/categoryicon.png',
90	90
91	91	pageId: null,
92		- mediaVido: {},
	92	+ findResult: {},
93	93	selectedFiles: [],
94	94	};
95	95	},
...	...	@@ -98,7 +98,7 @@
98	98	this.pageId = this.$route.query.id;
99	99	if (this.pageId === null) {
100	100	alert("게시물 존재하지 않습니다.");
101		- this.fnMoveTo('MediaVideoSearch');
	101	+ this.fnMoveTo('list');
102	102	}
103	103	},
104	104
...	...	@@ -111,10 +111,10 @@
111	111	async fnFindDcry() {
112	112	try {
113	113	const response = await findMediaVidoProc(this.pageId);
114		- this.mediaVido = response.data.data.mediaVido;
	114	+ this.findResult = response.data.data.mediaVido;
115	115	} catch (error) {
116	116	alert('조회중 오류가 발생했습니다.');
117		- this.fnMoveTo('MediaVideoSearch');
	117	+ this.fnMoveTo('list');
118	118
119	119	if (error.response) {
120	120	alert(error.response.data.message);
...	...	@@ -179,7 +179,7 @@
179	179	const response = await deleteMediaVidoProc(this.pageId);
180	180	alert('해당 페이지를 삭제했습니다.');
181	181
182		- this.fnMoveTo('MediaVideoSearch');
	182	+ this.fnMoveTo('list');
183	183	} catch (error) {
184	184	if (error.response) {
185	185	alert(error.response.data.message);
...	...	@@ -189,11 +189,18 @@
189	189	},
190	190
191	191	// 페이지 이동
192		- fnMoveTo(page, id) {
193		- if (this.$isEmpty(id)) {
194		- this.$router.push({ name: page });
	192	+ fnMoveTo(type, id) {
	193	+ const routes = {
	194	+ 'list': { name: 'MediaVideoSearch' },
	195	+ 'view': { name: 'MediaVideoDetail', query: { id } },
	196	+ 'edit': { name: 'MediaVideoInsert', query: this.$isEmpty(id) ? {} : { id } },
	197	+ };
	198	+
	199	+ if (routes[type]) {
	200	+ this.$router.push(routes[type]);
195	201	} else {
196		- this.$router.push({ name: page, query: { id: id } });
	202	+ alert("올바르지 않은 경로를 요청하여 목록으로 이동합니다.");
	203	+ this.$router.push(routes['list']);
197	204	}
198	205	},
199	206	},

...	...	@@ -33,7 +33,7 @@
33	33	</dd>
34	34	<dd class="mb-15">
35	35	<p>검색어</p>
36		- <div class="wfull"><input type="text" v-model="searchReqDTO.searchText" v-on:keyup.enter="fnSearch()"></div>
	36	+ <div class="wfull"><input type="text" v-model="searchReqDTO.searchText" v-on:keyup.enter="fnChnageReqDTO"></div>
37	37	</dd>
38	38	<dd class="mb-15">
39	39	<p>생산연도</p>
...	...	@@ -64,7 +64,7 @@
64	64	<img :src="reseticon" alt="">
65	65	<p>초기화</p>
66	66	</button>
67		- <button type="button" class="search" @click="fnSearch">
	67	+ <button type="button" class="search" @click="fnChnageReqDTO">
68	68	<img :src="searchicon" alt="">
69	69	<p>검색</p>
70	70	</button>
...	...	@@ -86,7 +86,7 @@
86	86	</li>
87	87	</ul>
88	88	<div class="select-box">
89		- <select v-model="searchReqDTO.recordSize" @change="fnSearch">
	89	+ <select v-model="searchReqDTO.recordSize" @change="fnChnageReqDTO">
90	90	<option :value="24">24개</option>
91	91	<option :value="36">36개</option>
92	92	<option :value="100">100개</option>
...	...	@@ -190,20 +190,16 @@
190	190	this.fnFindCategorys(); // 카테고리 목록 조회 (검색조건 없음)
191	191	},
192	192
193		- mounted() {
194		- let searchText = this.$route.query.searchText;
195		- if (searchText !== null) {
196		- this.searchReqDTO.searchText = searchText;
197		- }
198		-
199		- this.fnSearch(); // 통합검색
200		- },
201		-
202	193	methods: {
203	194	// 초기화
204	195	init() {
205	196	if (this.isInitialLoad) {
206	197	this.isInitialLoad = false;
	198	+
	199	+ let searchText = this.$route.query.searchText;
	200	+ if (searchText !== null) {
	201	+ this.searchReqDTO.searchText = searchText;
	202	+ }
207	203	} else {
208	204	if (!confirm('검색 조건을 초기화하시겠습니까?')) {
209	205	return;
...	...	@@ -215,7 +211,7 @@
215	211
216	212	this.selectedTabId = this.tabs[0].id;
217	213
218		- this.fnSearch(); // 통합검색
	214	+ this.fnChnageReqDTO(); // 통합검색
219	215	},
220	216
221	217	// 카테고리 목록 조회
...	...	@@ -236,7 +232,17 @@
236	232	// 페이지 이동
237	233	fnChangeCurrentPage(currentPage) {
238	234	this.searchReqDTO.currentPage = Number(currentPage);
239		- this.fnFindCategorys();
	235	+ this.$nextTick(() => {
	236	+ this.fnSearch();
	237	+ });
	238	+ },
	239	+
	240	+ // 검색 조건이 변경된 경우
	241	+ fnChnageReqDTO() {
	242	+ this.searchReqDTO.currentPage = 1;
	243	+ this.$nextTick(() => {
	244	+ this.fnSearch();
	245	+ });
240	246	},
241	247
242	248	// 통합검색

...	...	@@ -1,24 +1,30 @@
1	1	<template>
2	2	<div class="pagination flex-center">
3		- <button type="button" :disabled="search.currentPage === search.startPage" @click="$emit('onChange', search.startPage)">
	3	+ <!-- 첫 페이지로 이동 -->
	4	+ <button type="button" :disabled="currentPage <= 1" @click="changePage(1)">
4	5	<DoubleLeftOutlined />
5	6	</button>
6		- <button type="button" :disabled="!search.existPrevPage" @click="$emit('onChange', (search.currentPage - 1))">
	7	+ <!-- 이전 페이지로 이동 -->
	8	+ <button type="button" :disabled="currentPage <= 1" @click="changePage(currentPage - 1)">
7	9	<LeftOutlined />
8	10	</button>
9		- <template v-for="idx in search.totalPageCount" :key="idx">
10		- <button type="button" :class="{ 'page-number': true, clicked: search.currentPage === idx }" :disabled="search.currentPage === idx" @click="$emit('onChange', idx)">{{ idx }}</button>
	11	+ <!-- 페이지 번호 버튼 -->
	12	+ <template v-for="pageNum in displayedPageNumbers" :key="pageNum">
	13	+ <button type="button" :class="{ 'page-number': true, clicked: currentPage === pageNum }" :disabled="currentPage === pageNum" @click="changePage(pageNum)"> {{ pageNum }} </button>
11	14	</template>
12		- <button type="button" :disabled="!search.existNextPage" @click="$emit('onChange', (search.currentPage + 1))">
	15	+ <!-- 다음 페이지로 이동 -->
	16	+ <button type="button" :disabled="currentPage >= totalPages" @click="changePage(currentPage + 1)">
13	17	<RightOutlined />
14	18	</button>
15		- <button type="button" :disabled="search.currentPage === search.endPage" @click="$emit('onChange', search.endPage)">
	19	+ <!-- 마지막 페이지로 이동 -->
	20	+ <button type="button" :disabled="currentPage >= totalPages" @click="changePage(totalPages)">
16	21	<DoubleRightOutlined />
17	22	</button>
18	23	</div>
19	24	</template>
20	25	<script>
21	26	import { DoubleLeftOutlined, LeftOutlined, RightOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
	27	+
22	28	export default {
23	29	components: {
24	30	DoubleLeftOutlined,
...	...	@@ -30,15 +36,58 @@
30	36	props: {
31	37	search: {
32	38	type: Object,
33		- default: {},
	39	+ required: true,
	40	+ default: () => ({}),
34	41	}
35	42	},
36	43
37		- methods: {},
	44	+ computed: {
	45	+ // 현재 페이지
	46	+ currentPage() {
	47	+ return this.search.currentPage;
	48	+ },
	49	+
	50	+ // 총 페이지 수
	51	+ totalPages() {
	52	+ return this.search.totalPageCount > 0 ? this.search.totalPageCount : 1;
	53	+ },
	54	+
	55	+ // 표시할 페이지 번호 목록
	56	+ displayedPageNumbers() {
	57	+ const currentPage = this.currentPage;
	58	+ const totalPages = this.totalPages;
	59	+
	60	+ const visiblePages = this.search.pageSize > 0 ? this.search.pageSize : 10;
	61	+
	62	+ // 표시할 페이지 범위 계산
	63	+ let startPageNum = Math.max(1, currentPage - Math.floor(visiblePages / 2));
	64	+ let endPageNum = Math.min(totalPages, startPageNum + visiblePages - 1);
	65	+
	66	+ // endPage가 최대 페이지 수보다 작을 경우, startPage를 조정
	67	+ if (endPageNum - startPageNum + 1 < visiblePages) {
	68	+ startPageNum = Math.max(1, endPageNum - visiblePages + 1);
	69	+ }
	70	+
	71	+ // 페이지 번호 배열 생성
	72	+ const pageNumbers = [];
	73	+ for (let i = startPageNum; i <= endPageNum; i++) {
	74	+ pageNumbers.push(i);
	75	+ }
	76	+
	77	+ return pageNumbers;
	78	+ }
	79	+ },
	80	+
	81	+ methods: {
	82	+ // 페이지 변경 처리
	83	+ changePage(pageNum) {
	84	+ if (pageNum < 1) pageNum = 1;
	85	+ if (pageNum > this.totalPages) pageNum = this.totalPages;
	86	+
	87	+ if (pageNum !== this.currentPage) {
	88	+ this.$emit('onChange', pageNum);
	89	+ }
	90	+ }
	91	+ }
38	92	}
39		-</script>
40		-<style scoped>
41		-button:disabled {
42		- cursor: not-allowed;
43		-}
44		-</style> (파일 끝에 줄바꿈 문자 없음)
	93	+</script> (파일 끝에 줄바꿈 문자 없음)

...	...	@@ -12,13 +12,13 @@
12	12	</ul>
13	13	</div>
14	14	</div>
15		- <form action="" class="gallery-form mb-40">
	15	+ <form class="gallery-form mb-40" @submit.prevent>
16	16	<dl class="mb-20">
17	17	<dd>
18		- <p>{{ dcry.sj }}</p>
	18	+ <p>{{ findResult.sj }}</p>
19	19	<div class="date flex align-center">
20	20	<img :src="calendaricon" alt="">
21		- <span>{{ $dotFormatDate(dcry.rgsde) }}</span>
	21	+ <span>{{ $dotFormatDate(findResult.rgsde) }}</span>
22	22	</div>
23	23	</dd>
24	24	</dl>
...	...	@@ -27,88 +27,58 @@
27	27	</div>
28	28	</form>
29	29	<h3>내용</h3>
30		- <form action="" class=" info-form mb-50">
	30	+ <form class=" info-form mb-50" @submit.prevent>
31	31	<dl>
32	32	<dd>
33		- <p> 대한민국 최대의 내륙 산업단지를 보유하고, 서울로부터 277km, 부산으로부터 167km 거리에 있으며, 면적은 615㎢로 경상북도 전체 면적의 3.2%에 달합니다. 인구는 41만 명이고, 선산읍, 고아읍, 산동읍을 비롯한 3읍, 5면, 17개 동으로 구성되어 있습니다.</p>
	33	+ <ViewerComponent :content="findResult.cn" />
34	34	</dd>
35	35	</dl>
36	36	</form>
37	37	<h3>기본정보</h3>
38		- <form action="" class="info-form mb-50">
	38	+ <form class="info-form mb-50" @submit.prevent>
39	39	<dl>
40	40	<dd class="mb-20">
41	41	<img :src="addressicon" alt="">
42	42	<span>주소</span>
43		- <p>경상북도 구미시 송정대로 55</p>
	43	+ <p>{{ findResult.adres }}</p>
44	44	</dd>
45	45	<dd class="mb-20">
46	46	<img :src="yearicon" alt="">
47	47	<span>생산연도</span>
48		- <p>2017</p>
	48	+ <p>{{ $dotFormatDate(findResult.prdctnYear) }}</p>
49	49	</dd>
50	50	<dd>
51	51	<img :src="categoryicon" alt="">
52	52	<span>카테고리</span>
53	53	<ul class="category">
54		- <li v-if="resultitem.category1" class="category1">카테고리1</li>
55		- <li v-if="resultitem.category2" class="category2">카테고리2</li>
	54	+ <li v-for="(item, idx) of findResult.ctgrys" :key="idx" class="category">{{ item.ctgryNm }}</li>
56	55	</ul>
57	56	</dd>
58	57	</dl>
59	58	</form>
60	59	<div class="btn-group flex-center">
61		- <button class="red-line " type="button" @click="fnDeleteUser">삭제</button>
62		- <button class="blue-line " type="button" @click="fnUpdateUser">수정</button>
63		- <button class="gray-line-bg " type="button" @click="fnUpdateUser">목록</button>
64		- <button class="gradient ">다운로드</button>
	60	+ <button type="button" class="red-line" @click="fnDelete">삭제</button>
	61	+ <button type="button" class="blue-line" @click="fnMoveTo('edit', pageId)">수정</button>
	62	+ <button type="button" class="gray-line-bg" @click="fnMoveTo('list')">목록</button>
	63	+ <button type="button" class="gradient" @click="fnDownload">다운로드</button>
65	64	</div>
66	65	</div>
67	66	</template>
68	67	<script>
69		-import axios from "axios";
70		-import { ref } from 'vue';
71		-import { updateUsers, logOutProc, updatePassword } from "../../../../resources/api/user"
72		-// Import Swiper Vue components
73		-import { CaretRightOutlined, PauseOutlined } from '@ant-design/icons-vue';
74		-import { Swiper, SwiperSlide } from 'swiper/vue';
75		-
76		-// Import Swiper styles
77		-import 'swiper/css';
78		-
79		-import 'swiper/css/free-mode';
80		-import 'swiper/css/navigation';
81		-import 'swiper/css/thumbs';
82		-
83		-// import required modules
84		-import { FreeMode, Navigation, Thumbs } from 'swiper/modules';
	68	+// COMPONENT
	69	+import ViewerComponent from '../../../component/editor/ViewerComponent.vue';
	70	+// API
	71	+import { findDcryProc, deleteDcryProc } from '@/resources/api/dcry';
	72	+import { fileDownloadProc, multiFileDownloadProc } from '@/resources/api/file';
85	73
86	74	export default {
87	75	components: {
88		- PauseOutlined,
89		- CaretRightOutlined,
90		- Swiper,
91		- SwiperSlide,
	76	+ ViewerComponent,
92	77	},
93		- setup() {
94		- const thumbsSwiper = ref(null);
95	78
96		- const setThumbsSwiper = (swiper) => {
97		- thumbsSwiper.value = swiper;
98		- };
99		-
100		- return {
101		- thumbsSwiper,
102		- setThumbsSwiper,
103		- modules: [FreeMode, Navigation, Thumbs],
104		- };
105		- },
106	79	data() {
107	80	return {
108		- resultitem: {
109		- category1: true,
110		- category2: true,
111		- },
	81	+ // ICON
112	82	calendaricon: 'client/resources/images/icon/calendaricon.png',
113	83	homeicon: 'client/resources/images/icon/home.png',
114	84	erroricon: 'client/resources/images/icon/error.png',
...	...	@@ -116,24 +86,122 @@
116	86	addressicon: 'client/resources/images/icon/addressicon.png',
117	87	yearicon: 'client/resources/images/icon/yearicon.png',
118	88	categoryicon: 'client/resources/images/icon/categoryicon.png',
119		- eximg: 'client/resources/images/img8.png',
120		- slides: [
121		- { img: 'client/resources/images/visual.png', alt: 'Slide 1' },
122		- { img: 'client/resources/images/visual.png', alt: 'Slide 2' },
123		- { img: 'client/resources/images/visual.png', alt: 'Slide 3' },
124		- { img: 'client/resources/images/visual.png', alt: 'Slide 3' },
125		- { img: 'client/resources/images/visual.png', alt: 'Slide 3' },
126		- { img: 'client/resources/images/visual.png', alt: 'Slide 3' },
127		- // Add more slides as needed
128		- ],
129	89
	90	+ pageId: null,
	91	+ findResult: {},
	92	+ selectedFiles: [],
130	93	};
131	94	},
	95	+
	96	+ created() {
	97	+ this.pageId = this.$route.query.id;
	98	+ if (this.pageId === null) {
	99	+ alert("게시물 존재하지 않습니다.");
	100	+ this.fnMoveTo('list');
	101	+ }
	102	+ },
	103	+
	104	+ mounted() {
	105	+ this.fnFindDcry(); // 상세 조회
	106	+ },
	107	+
132	108	methods: {
	109	+ // 상세 조회
	110	+ async fnFindDcry() {
	111	+ try {
	112	+ const response = await findDcryProc(this.pageId);
	113	+
	114	+ this.findResult = response.data.data.dcry;
	115	+ if (this.findResult.ty !== 'V') {
	116	+ alert('올바른 접근이 아닙니다.');
	117	+ this.fnMoveTo('list'); // 목록으로 이동
	118	+ }
	119	+ } catch (error) {
	120	+ alert('조회중 오류가 발생했습니다.');
	121	+ this.fnMoveTo('list');
	122	+
	123	+ if (error.response) {
	124	+ alert(error.response.data.message);
	125	+ }
	126	+ console.error(error.message);
	127	+ }
	128	+ },
	129	+
	130	+ // 파일 다운로드
	131	+ async fnDownload() {
	132	+ let url = null;
	133	+ let link = null;
	134	+
	135	+ try {
	136	+ // 파일 ID 수집
	137	+ let fileId = this.findResult.files[0].fileId;
	138	+ const response = await fileDownloadProc(fileId);
	139	+
	140	+ // 파일명 조회
	141	+ let filename = 'downloadFile.bin';
	142	+ const filenameRegex = /file[Nn]ame[^;=\n]=((['"]).?\2\|[^;\n]*)/;
	143	+ const matches = filenameRegex.exec(response.headers['content-disposition']);
	144	+ if (matches != null && matches[1]) {
	145	+ filename = matches[1].replace(/['"]/g, '');
	146	+ }
	147	+
	148	+ // 파일 다운로드 생성
	149	+ url = window.URL.createObjectURL(new Blob([response.data]));
	150	+ link = document.createElement('a');
	151	+ link.href = url;
	152	+ link.setAttribute('download', filename);
	153	+ document.body.appendChild(link);
	154	+ link.click();
	155	+ } catch (error) {
	156	+ alert('파일 다운로드 중 오류가 발생했습니다.');
	157	+ } finally {
	158	+ // 리소스 정리
	159	+ setTimeout(() => {
	160	+ if (url) {
	161	+ window.URL.revokeObjectURL(url);
	162	+ }
	163	+ if (link && link.parentNode) {
	164	+ document.body.removeChild(link);
	165	+ }
	166	+ }, 100);
	167	+ }
	168	+ },
	169	+
	170	+ // 삭제
	171	+ async fnDelete() {
	172	+ let isCheck = confirm("해당 페이지를 삭제하시겠습니까?");
	173	+ if (!isCheck) {
	174	+ return;
	175	+ }
	176	+
	177	+ try {
	178	+ const response = await deleteDcryProc(this.pageId);
	179	+ alert('해당 페이지를 삭제했습니다.');
	180	+
	181	+ this.fnMoveTo('list');
	182	+ } catch (error) {
	183	+ if (error.response) {
	184	+ alert(error.response.data.message);
	185	+ }
	186	+ console.error(error.message);
	187	+ }
	188	+ },
	189	+
	190	+ // 페이지 이동
	191	+ fnMoveTo(type, id) {
	192	+ const routes = {
	193	+ 'list': { name: 'VideoHistorySearch' },
	194	+ 'view': { name: 'VideoHistoryDetail', query: { id } },
	195	+ 'edit': { name: 'VideoHistoryInsert', query: this.$isEmpty(id) ? {} : { id } },
	196	+ };
	197	+
	198	+ if (routes[type]) {
	199	+ this.$router.push(routes[type]);
	200	+ } else {
	201	+ alert("올바르지 않은 경로를 요청하여 목록으로 이동합니다.");
	202	+ this.$router.push(routes['list']);
	203	+ }
	204	+ },
133	205	},
134		- watch: {},
135		- computed: {
136		- },
137		- mounted() { },
138	206	};
139	207	</script> (파일 끝에 줄바꿈 문자 없음)

...	...	@@ -12,7 +12,7 @@
12	12	</ul>
13	13	</div>
14	14	</div>
15		- <form class="insert-form mb-50">
	15	+ <form class="insert-form mb-50" @submit.prevent>
16	16	<dl>
17	17	<dd>
18	18	<label for="sj" class="require">제목</label>

...	...	@@ -34,7 +34,7 @@
34	34	</dd>
35	35	<dd class="mb-15">
36	36	<p>검색어</p>
37		- <div class="wfull"><input type="text" v-model="searchReqDTO.searchText" v-on:keyup.enter="fnSearch()"></div>
	37	+ <div class="wfull"><input type="text" v-model="searchReqDTO.searchText" v-on:keyup.enter="fnChnageReqDTO"></div>
38	38	</dd>
39	39	<dd class="mb-15">
40	40	<p>생산연도</p>
...	...	@@ -65,7 +65,7 @@
65	65	<img :src="reseticon" alt="">
66	66	<p>초기화</p>
67	67	</button>
68		- <button type="button" class="search" @click="fnSearch">
	68	+ <button type="button" class="search" @click="fnChnageReqDTO">
69	69	<img :src="searchicon" alt="">
70	70	<p>검색</p>
71	71	</button>
...	...	@@ -87,7 +87,7 @@
87	87	</li>
88	88	</ul>
89	89	<div class="select-box">
90		- <select v-model="searchReqDTO.recordSize" @change="fnSearch">
	90	+ <select v-model="searchReqDTO.recordSize" @change="fnChnageReqDTO">
91	91	<option :value="24">24개</option>
92	92	<option :value="36">36개</option>
93	93	<option :value="100">100개</option>
...	...	@@ -191,20 +191,16 @@
191	191	this.fnFindCategorys(); // 카테고리 목록 조회 (검색조건 없음)
192	192	},
193	193
194		- mounted() {
195		- let searchText = this.$route.query.searchText;
196		- if (searchText !== null) {
197		- this.searchReqDTO.searchText = searchText;
198		- }
199		-
200		- this.fnSearch(); // 통합검색
201		- },
202		-
203	194	methods: {
204	195	// 초기화
205	196	init() {
206	197	if (this.isInitialLoad) {
207	198	this.isInitialLoad = false;
	199	+
	200	+ let searchText = this.$route.query.searchText;
	201	+ if (searchText !== null) {
	202	+ this.searchReqDTO.searchText = searchText;
	203	+ }
208	204	} else {
209	205	if (!confirm('검색 조건을 초기화하시겠습니까?')) {
210	206	return;
...	...	@@ -216,7 +212,7 @@
216	212
217	213	this.selectedTabId = this.tabs[0].id;
218	214
219		- this.fnSearch(); // 통합검색
	215	+ this.fnChnageReqDTO(); // 통합검색
220	216	},
221	217
222	218	// 카테고리 목록 조회
...	...	@@ -237,7 +233,17 @@
237	233	// 페이지 이동
238	234	fnChangeCurrentPage(currentPage) {
239	235	this.searchReqDTO.currentPage = Number(currentPage);
240		- this.fnFindCategorys();
	236	+ this.$nextTick(() => {
	237	+ this.fnSearch();
	238	+ });
	239	+ },
	240	+
	241	+ // 검색 조건이 변경된 경우
	242	+ fnChnageReqDTO() {
	243	+ this.searchReqDTO.currentPage = 1;
	244	+ this.$nextTick(() => {
	245	+ this.fnSearch();
	246	+ });
241	247	},
242	248
243	249	// 통합검색

Delete comment