From ac3b12a1ea555d29b82221b777db6060511acd6c Mon Sep 17 00:00:00 2001
From: yhlee <xxxoxxo002@gmail.com>
Date: Fri, 19 Jul 2024 22:52:17 +0900
Subject: [PATCH] =?UTF-8?q?=EC=B6=94=EC=B2=9C=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80,=20=EC=9E=90=EC=8B=A0=EC=9D=B4=20=EC=9E=91?=
 =?UTF-8?q?=EC=84=B1=ED=95=9C=20=EA=B2=8C=EC=8B=9C=EA=B8=80,=20=EB=8C=93?=
 =?UTF-8?q?=EA=B8=80=EC=97=90=20=ED=95=9C=ED=95=B4=20=EC=88=98=EC=A0=95,?=
 =?UTF-8?q?=20=EC=82=AD=EC=A0=9C=20=EA=B8=B0=EB=8A=A5=20=EB=B2=84=ED=8A=BC?=
 =?UTF-8?q?=20=EB=85=B8=EC=B6=9C,=20=ED=9A=8C=EC=9B=90=20=EC=A0=95?=
 =?UTF-8?q?=EB=B3=B4=20=EC=A1=B0=ED=9A=8C=EC=8B=9C=20=EC=B6=94=EC=B2=9C?=
 =?UTF-8?q?=ED=95=9C=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20=EB=AA=A9=EB=A1=9D=20?=
 =?UTF-8?q?=EC=A1=B0=ED=9A=8C=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80,?=
 =?UTF-8?q?=20=EA=B2=80=EC=83=89=20=EA=B8=B0=EB=8A=A5=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/admin/user.css                 |   3 +-
 src/assets/css/fragments.css                  |   7 +-
 src/assets/css/main.css                       |  12 +-
 src/components/admin/AdminBoardComponent.vue  |  26 +++
 src/components/admin/AdminNoticeComponent.vue |  13 ++
 .../admin/AdminUserBoardComponent.vue         |   6 +-
 .../AdminUserBoardRecommendedComponent.vue    |   5 +-
 .../admin/AdminUserCommentComponent.vue       |   6 +-
 src/components/admin/AdminUserComponent.vue   | 178 +++++++++---------
 .../admin/AdminUserDetailComponent.vue        |   3 +
 .../admin/AdminUserLoginLogsComponent.vue     |  12 +-
 .../admin/AdminUserNoticeComponent.vue        |   6 +-
 src/components/board/BoardItemComponent.vue   |  54 +++---
 src/components/fragment/HeaderComponent.vue   |   4 +-
 .../icon/NoProfileImageComponent.vue          |  14 ++
 src/components/icon/UserImageComponent.vue    |  25 +--
 src/components/sub/PagenationComponent.vue    |   7 +-
 src/router/index.js                           |  14 ++
 src/stores/board.js                           |   2 +-
 src/stores/user.js                            |  53 ++++--
 20 files changed, 278 insertions(+), 172 deletions(-)
 create mode 100644 src/components/admin/AdminBoardComponent.vue
 create mode 100644 src/components/admin/AdminNoticeComponent.vue
 create mode 100644 src/components/icon/NoProfileImageComponent.vue

diff --git a/src/assets/css/admin/user.css b/src/assets/css/admin/user.css
index e23c996..8a235f6 100644
--- a/src/assets/css/admin/user.css
+++ b/src/assets/css/admin/user.css
@@ -78,8 +78,7 @@
 }
 
 #userList .user-list-checkbox {
-    display: flex;
-    justify-content: center;
+    text-align: center;
     align-content: center;
 }
 
diff --git a/src/assets/css/fragments.css b/src/assets/css/fragments.css
index b57b23a..bd43253 100644
--- a/src/assets/css/fragments.css
+++ b/src/assets/css/fragments.css
@@ -122,12 +122,15 @@
     align-items: center;
 }
 
-.nav > .user-box > .user-image-box > img.profile_image {
+img.profile_image {
     width: 3em;
     height: 3em;
     border-radius: 3rem;
     line-height: 1.5em;
-    margin-right:1rem;
+}
+
+.nav > .user-box > .user-image-box > img.profile_image {
+    margin-right: 0.4rem;
 }
 
 .nav > .user-box .userbox-text {
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index 755bc5c..ac6cb33 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -299,19 +299,11 @@ input[readonly] {
 }
 
 /* Profile Image */
-div.admin_no_image {
-    background-image: url("@/assets/images/icons/icons8-female-user-100.png") !important;
+img.admin_no_image,
+img.user_no_image {
     background-position: center !important;
     background-repeat: no-repeat !important;
-    /*background-size: 2rem !important;*/
     background-size: 100% !important;
     width: 2rem;
     height: 2rem;
-}
-
-div.user_no_image {
-    background-image: url("@/assets/images/icons/icons8-customer-100.png") !important;
-    background-position: center !important;
-    background-repeat: no-repeat !important;
-    background-size: 100% !important;
 }
\ No newline at end of file
diff --git a/src/components/admin/AdminBoardComponent.vue b/src/components/admin/AdminBoardComponent.vue
new file mode 100644
index 0000000..20e3c56
--- /dev/null
+++ b/src/components/admin/AdminBoardComponent.vue
@@ -0,0 +1,26 @@
+<script setup>
+
+</script>
+
+<template>
+  <div id="index_notice" class="wrapper-block">
+    <div class="inner">
+      <div class="inner-block">
+        <div class="content">
+          <div class="block-title-box">
+            <h2 class="block-title">관리자 페이지 > 공지사항</h2>
+          </div>
+
+
+
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+#adminBoards, #adminBoardsTable {
+  width: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/admin/AdminNoticeComponent.vue b/src/components/admin/AdminNoticeComponent.vue
new file mode 100644
index 0000000..5762a82
--- /dev/null
+++ b/src/components/admin/AdminNoticeComponent.vue
@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+<div>
+
+</div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/admin/AdminUserBoardComponent.vue b/src/components/admin/AdminUserBoardComponent.vue
index dc7935e..d841eac 100644
--- a/src/components/admin/AdminUserBoardComponent.vue
+++ b/src/components/admin/AdminUserBoardComponent.vue
@@ -62,7 +62,9 @@ function goBoardPage(id) {
 
 <template>
   <div id="userBoards">
-    <!--    <h4>작성한 글 목록</h4>-->
+    <div style="display: flex; justify-content: end; width: 100%; margin: 1rem 0;">
+      <router-link :to="`/admin/notices?memNo=${memNo}`">더보기</router-link>
+    </div>
     <table id="userBoardsTable">
       <thead>
       <tr>
@@ -74,7 +76,7 @@ function goBoardPage(id) {
       </thead>
       <tbody>
       <tr v-for="board in boards" :key="board.id">
-        <td class="userdetail-board-checkbox" style="display: flex; justify-content: center;">
+        <td class="userdetail-board-checkbox" style="text-align: center;">
           <input :value="board.id" type="checkbox"/>
         </td>
         <td>{{ board.id }}</td>
diff --git a/src/components/admin/AdminUserBoardRecommendedComponent.vue b/src/components/admin/AdminUserBoardRecommendedComponent.vue
index 5b1653b..98aba50 100644
--- a/src/components/admin/AdminUserBoardRecommendedComponent.vue
+++ b/src/components/admin/AdminUserBoardRecommendedComponent.vue
@@ -10,7 +10,7 @@ const boardStore = useBoardStore();
 const props = defineProps(['memNo']);
 
 const boards = ref([]);
-const result = await boardStore.getRecommendedBoardByMemNo(props.memNo, 1, 10);
+const result = await boardStore.getRecommendedBoardByUser(props.memNo, 1, 10);
 const data = result.data;
 if (data.data) {
   boards.value = data.data.boardImpList;
@@ -23,6 +23,9 @@ function goBoardPage(id) {
 
 <template>
   <div id="userRecommendedBoards">
+    <div style="display: flex; justify-content: end; width: 100%; margin: 1rem 0;">
+      <router-link :to="`/admin/notices?memNo=${memNo}`">더보기</router-link>
+    </div>
     <table id="userRecommendedBoardsTable">
       <thead>
       <tr>
diff --git a/src/components/admin/AdminUserCommentComponent.vue b/src/components/admin/AdminUserCommentComponent.vue
index 1496636..149e0d5 100644
--- a/src/components/admin/AdminUserCommentComponent.vue
+++ b/src/components/admin/AdminUserCommentComponent.vue
@@ -62,7 +62,9 @@ function goBoardPage(id) {
 
 <template>
   <div id="userComments">
-    <!--    <h4>작성한 댓글 목록</h4>-->
+    <div style="display: flex; justify-content: end; width: 100%; margin: 1rem 0;">
+      <router-link :to="`/admin/notices?memNo=${memNo}`">더보기</router-link>
+    </div>
     <table id="userCommentsTable">
       <thead>
       <tr>
@@ -75,7 +77,7 @@ function goBoardPage(id) {
       </thead>
       <tbody>
       <tr v-for="comment in comments" :key="comment.id">
-        <td class="userdetail-comment-checkbox" style="display: flex; justify-content: center;">
+        <td class="userdetail-comment-checkbox" style="text-align: center;">
           <input :value="comment.id" type="checkbox"/>
         </td>
         <td>{{ comment.id }}</td>
diff --git a/src/components/admin/AdminUserComponent.vue b/src/components/admin/AdminUserComponent.vue
index e8a009a..9d568c2 100644
--- a/src/components/admin/AdminUserComponent.vue
+++ b/src/components/admin/AdminUserComponent.vue
@@ -3,15 +3,20 @@ import '@/assets/css/admin/user.css';
 
 import {useUserStore} from "@/stores/user.js";
 import Swal from 'sweetalert2';
-import {ref, watch} from "vue";
+import {computed, ref, watch} from "vue";
 import SortingComponent from "@/components/icon/SortingComponent.vue";
 import PagenationComponent from "@/components/sub/PagenationComponent.vue";
 import AdminUserDetailComponent from "@/components/admin/AdminUserDetailComponent.vue";
 import Pagenation from "@/components/sub/PagenationComponent.vue";
-
+const props = defineProps(['page'])
 const userStore = useUserStore();
-await userStore.getUsers(1, 10, null);
-const list = ref(userStore.users);
+
+const page = computed(() => {
+  const nanable = Number(props.page || "1");
+  return isNaN(nanable) ? 1 : nanable;
+});
+const updateCnt = ref(0);
+const list = ref([]);
 const currentMember = ref({
   memNo: '',
   identifier: '',
@@ -21,24 +26,11 @@ const currentMember = ref({
   certification: '',
   role: ''
 });
-
 const searchOption = ref({
   role: 'ALL',
   certification: 'ALL',
   provider: 'ALL',
 }); // condition: 'identifier'
-
-watch(searchOption, (newVal, oldVal) => {
-  list.value = userStore.users.slice();
-  for (let key in newVal) {
-    if (newVal[key] !== 'ALL') {
-      list.value = list.value.filter(item => item[key] === newVal[key]);
-    }
-  }
-}, {deep: true});
-
-const searchCondition = ref('identifier');
-
 const sorting = ref({
   memNo: {
     enabled: false,
@@ -69,6 +61,33 @@ const sorting = ref({
     type: 'desc'
   },
 });
+const searchCondition = ref('identifier');
+const keyword = ref('');
+const modalShow = ref(false);
+
+await getUserList(searchCondition.value, keyword.value);
+
+async function getUserList(option, keyword) {
+  list.value = [];
+  const result = await userStore.findUserByKeyword(page.value, 10, option, keyword);
+  if (result.data?.memberList) {
+    list.value = result.data.memberList;
+  }
+}
+
+watch(searchOption, async (newVal, oldVal) => {
+  changeModalShow(false);
+  await getUserList();
+  changeSearchOptions(newVal);
+}, {deep: true});
+
+function changeSearchOptions(options, list) {
+  for (let key in options) {
+    if (options[key] !== 'ALL') {
+      list.value = list.value.filter(item => item[key] === options[key]);
+    }
+  }
+}
 
 function changeSortingType(name) {
   const current = sorting.value[name];
@@ -83,19 +102,27 @@ function changeSortingType(name) {
 }
 
 watch(sorting, (newVal, oldVal) => {
+  const columns = getSortingColumns(newVal);
+  sortingResult(columns, list.value);
+}, {deep: true});
+
+function getSortingColumns(sortingObj) {
   const columns = {};
-  for (let key in newVal) {
-    if (newVal[key].enabled) {
-      columns[key] = newVal[key].type;
+  for (let key in sortingObj) {
+    if (sortingObj[key].enabled) {
+      columns[key] = sortingObj[key].type;
     }
   }
+  return columns;
+}
 
+function sortingResult(columns, list) {
   if (Object.keys(columns).length === 0) {
-    list.value = userStore.users.slice();
+    list.value = list.value.slice();
   } else {
     multiSort(list.value, columns);
   }
-}, {deep: true});
+}
 
 function multiSort(data, columns) {
   const comparer = (a, b) => {
@@ -116,7 +143,7 @@ function multiSort(data, columns) {
       } else {
         result = ascending(a[column], b[column]);
       }
-      return result *= ( order === 'desc' ? -1 : 1);
+      return result *= (order === 'desc' ? -1 : 1);
     }
     // result;
   }
@@ -143,17 +170,33 @@ function multiSort(data, columns) {
   data.sort(comparer);
 }
 
-const modalShow = ref(false);
-function changeModalShow() {
-  modalShow.value = !modalShow.value;
+function enterEvent() {
+  if (window.event.keyCode === 13) {
+    search(searchCondition.value, keyword.value);
+  }
+}
+
+async function search(option, keyword) {
+  await getUserList(option, keyword);
+
+  changeSearchOptions(searchOption.value);
+
+  const columns = getSortingColumns(searchOption.value);
+  sortingResult(columns);
+}
+
+function changeModalShow(value) {
+  if (value !== null && value !== undefined) modalShow.value = value;
+  else modalShow.value = !modalShow.value;
 }
 
-function showModal(memNo) {
+function showUserDetail(memNo) {
   if (currentMember.value.memNo !== memNo) {
     if (!modalShow.value) changeModalShow();
 
     const user = userStore.users.find(u => u.memNo === memNo);
     currentMember.value = user;
+    updateCnt.value += 1;
   } else {
     changeModalShow();
   }
@@ -188,7 +231,7 @@ function deleteMultiUserInfo() {
 function changeMultiUserRole() {
   const inputs = document.querySelectorAll('.user-list-checkbox input[type=checkbox]:checked');
   let memNoList = [];
-  for(let input of inputs) {
+  for (let input of inputs) {
     memNoList.push(input.value);
   }
 
@@ -309,7 +352,7 @@ function certificationToKorean(certification) {
                     <option value="identifier">아이디</option>
                     <option value="name">이름</option>
                   </select>
-                  <input id="searchMemberInput" type="text" placeholder="검색"/>
+                  <input id="searchMemberInput" v-model="keyword" @keydown="enterEvent" placeholder="검색"/>
                 </div>
               </div>
             </div>
@@ -322,36 +365,43 @@ function certificationToKorean(certification) {
               <tr>
                 <th style="width: 3rem;"></th>
                 <th @click="changeSortingType('memNo')">식별번호
-                  <SortingComponent type='number' :enabled="sorting.memNo.enabled" :value="sorting.memNo.type"></SortingComponent>
+                  <SortingComponent type='number' :enabled="sorting.memNo.enabled"
+                                    :value="sorting.memNo.type"></SortingComponent>
                 </th>
                 <th @click="changeSortingType('identifier')">아이디
-                  <SortingComponent type='text' :enabled="sorting.identifier.enabled" :value="sorting.identifier.type"></SortingComponent>
+                  <SortingComponent type='text' :enabled="sorting.identifier.enabled"
+                                    :value="sorting.identifier.type"></SortingComponent>
                 </th>
                 <th @click="changeSortingType('provider')">소셜 로그인
-                  <SortingComponent type='text' :enabled="sorting.provider.enabled" :value="sorting.provider.type"></SortingComponent>
+                  <SortingComponent type='text' :enabled="sorting.provider.enabled"
+                                    :value="sorting.provider.type"></SortingComponent>
                 </th>
                 <th @click="changeSortingType('name')">이름
-                  <SortingComponent type='text' :enabled="sorting.name.enabled" :value="sorting.name.type"></SortingComponent>
+                  <SortingComponent type='text' :enabled="sorting.name.enabled"
+                                    :value="sorting.name.type"></SortingComponent>
                 </th>
                 <th @click="changeSortingType('role')">권한
-                  <SortingComponent type='text' :enabled="sorting.role.enabled" :value="sorting.role.type"></SortingComponent>
+                  <SortingComponent type='text' :enabled="sorting.role.enabled"
+                                    :value="sorting.role.type"></SortingComponent>
                 </th>
                 <th @click="changeSortingType('certification')">인증 여부
-                  <SortingComponent type='text' :enabled="sorting.certification.enabled" :value="sorting.certification.type"></SortingComponent>
+                  <SortingComponent type='text' :enabled="sorting.certification.enabled"
+                                    :value="sorting.certification.type"></SortingComponent>
                 </th>
                 <th @click="changeSortingType('regDate')">가입일자
-                  <SortingComponent type='number' :enabled="sorting.regDate.enabled" :value="sorting.regDate.type"></SortingComponent>
+                  <SortingComponent type='number' :enabled="sorting.regDate.enabled"
+                                    :value="sorting.regDate.type"></SortingComponent>
                 </th>
               </tr>
               </thead>
               <tbody>
-              <tr v-for="member in list" :key="`admin_user_${member.memNo}`" @click="showModal(member.memNo)">
+              <tr v-for="member in list" :key="`admin_user_${member.memNo}`" @click="showUserDetail(member.memNo)">
                 <td class="user-list-checkbox" style="border-collapse: collapse;">
                   <input type="checkbox" :value="member.memNo">
                 </td>
                 <td>{{ member.memNo }}</td>
                 <td>{{ member.identifier }}</td>
-                <td>{{ providerToKorean(member.provider)}}</td>
+                <td>{{ providerToKorean(member.provider) }}</td>
                 <td>{{ member.name }}</td>
                 <td>{{ roleToKorean(member.role) }}</td>
                 <td>{{ certificationToKorean(member.certification) }}</td>
@@ -369,56 +419,12 @@ function certificationToKorean(certification) {
             <button class="button-default" type="button" @click="deleteMultiUserInfo()">삭제</button>
           </div>
 
-          <PagenationComponent category="admin/users" :pages="userStore.totalPages" :page="userStore.currentPage"></PagenationComponent>
+          <PagenationComponent category="admin/users" :pages="userStore.totalPages"
+                               :page="userStore.currentPage"></PagenationComponent>
 
           <div id="userDetailModal" v-show="modalShow">
-            <AdminUserDetailComponent v-if="currentMember.memNo" :memNo="currentMember.memNo"></AdminUserDetailComponent>
-<!--            <div class="block-title-box">-->
-<!--              <h3 class="block-title">상세 회원 정보</h3>-->
-<!--            </div>-->
-
-<!--            <table id="userDetailTable">-->
-<!--              <tr>-->
-<!--                <td rowspan="3" style="width: 6rem; height: 8rem; overflow: hidden;">-->
-<!--                  <img style="width: 6rem; height: 6rem;" :src="currentMember.profileImage"/>-->
-<!--                </td>-->
-<!--                <td class="table-column-cell" style="width: 6rem;">식별번호</td>-->
-<!--                <td style="width: 8rem;">{{ currentMember.memNo }}</td>-->
-<!--                <td class="table-column-cell" style="width: 4rem;">아이디</td>-->
-<!--                <td colspan="3" style="width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">-->
-<!--                  {{ currentMember.identifier }}-->
-<!--                </td>-->
-<!--                <td class="table-column-cell" style="width: 7rem">소셜 로그인</td>-->
-<!--                <td colspan="2">{{ currentMember.provider }}</td>-->
-
-<!--              </tr>-->
-<!--              <tr>-->
-<!--                <td class="table-column-cell" style="width: 5rem;">이름</td>-->
-<!--                <td>{{ currentMember.name }}</td>-->
-<!--                <td class="table-column-cell" style="width: 4rem;">권한</td>-->
-<!--                <td style="width: 4rem;">{{ currentMember.role.substring('ROLE_'.length) }}</td>-->
-<!--                <td class="table-column-cell" style="width: 5rem;">인증 여부</td>-->
-<!--                <td>{{ currentMember.certification }}</td>-->
-<!--                <td class="table-column-cell" style="width: 4rem;">연락처</td>-->
-<!--                <td colspan="2">{{ currentMember.phone }}</td>-->
-<!--              </tr>-->
-<!--              <tr>-->
-<!--                <td class="table-column-cell">작성한 글 수</td>-->
-<!--                <td></td>-->
-<!--                <td class="table-column-cell" colspan="2">작성한 댓글 수</td>-->
-<!--                <td></td>-->
-<!--                <td class="table-column-cell">회원가입일자</td>-->
-<!--                <td colspan="2">{{ currentMember.regDate }}</td>-->
-
-<!--              </tr>-->
-<!--            </table>-->
-
-<!--            <div class="button-box" style="align-self: end;">-->
-<!--              <button class="button-default" type="button" @click="modifyUserInfo()">수정</button>-->
-<!--              <button class="button-default" type="button" @click="showLoginLog()">로그인 기록</button>-->
-<!--              <button class="button-default" type="button" @click="changeUserRole()">권한 변경</button>-->
-<!--              <button class="button-default" type="button" @click="deleteUserInfo()">삭제</button>-->
-<!--            </div>-->
+            <AdminUserDetailComponent v-if="currentMember.memNo" :memNo="currentMember.memNo"
+                                      :key="updateCnt"></AdminUserDetailComponent>
           </div>
 
         </div>
diff --git a/src/components/admin/AdminUserDetailComponent.vue b/src/components/admin/AdminUserDetailComponent.vue
index f95fb97..20671ea 100644
--- a/src/components/admin/AdminUserDetailComponent.vue
+++ b/src/components/admin/AdminUserDetailComponent.vue
@@ -284,6 +284,9 @@ function modifyUserInfo() {
   height: 2rem;
   padding: 0 1rem;
   cursor: pointer;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 }
 
 #userDetailTabIdxs li.user-detail-tab-index:hover {
diff --git a/src/components/admin/AdminUserLoginLogsComponent.vue b/src/components/admin/AdminUserLoginLogsComponent.vue
index add47f6..4b53b49 100644
--- a/src/components/admin/AdminUserLoginLogsComponent.vue
+++ b/src/components/admin/AdminUserLoginLogsComponent.vue
@@ -11,7 +11,9 @@ const logs = logStore.logs;
 
 <template>
   <div id="loginLogs">
-    <!--    <h4>로그인 기록</h4>-->
+    <div style="display: flex; justify-content: end; width: 100%; margin: 1rem 0;">
+      <router-link :to="`/admin/notices?memNo=${memNo}`">더보기</router-link>
+    </div>
     <table id="loginLogsTable">
       <thead>
       <tr>
@@ -40,12 +42,4 @@ const logs = logStore.logs;
   width: 100%;
 }
 
-#loginLogs {
-  display: flex;
-  justify-content: center;
-}
-
-#loginLogsTable {
-  max-width: 40rem;
-}
 </style>
\ No newline at end of file
diff --git a/src/components/admin/AdminUserNoticeComponent.vue b/src/components/admin/AdminUserNoticeComponent.vue
index 99985da..b5e55e5 100644
--- a/src/components/admin/AdminUserNoticeComponent.vue
+++ b/src/components/admin/AdminUserNoticeComponent.vue
@@ -63,7 +63,9 @@ function goBoardPage(id) {
 
 <template>
   <div id="userNotices">
-    <!--    <h4>작성한 글 목록</h4>-->
+    <div style="display: flex; justify-content: end; width: 100%; margin: 1rem 0;">
+      <router-link :to="`/admin/notices?memNo=${memNo}`">더보기</router-link>
+    </div>
     <table id="userNoticesTable">
       <thead>
       <tr>
@@ -75,7 +77,7 @@ function goBoardPage(id) {
       </thead>
       <tbody>
       <tr v-for="board in boards" :key="board.id">
-        <td class="userdetail-notice-checkbox" style="display: flex; justify-content: center;">
+        <td class="userdetail-notice-checkbox" style="text-align: center;">
           <input :value="board.id" type="checkbox"/>
         </td>
         <td>{{ board.id }}</td>
diff --git a/src/components/board/BoardItemComponent.vue b/src/components/board/BoardItemComponent.vue
index 1df1b0e..261cd3f 100644
--- a/src/components/board/BoardItemComponent.vue
+++ b/src/components/board/BoardItemComponent.vue
@@ -27,16 +27,24 @@ const recommended = ref(false);
 const recommendedCnt = ref(0);
 if (props.category === 'boards') {
   // 로그인 유저가 해당 글을 추천했는지 조회
+  getRecommendedByCurrentUser();
+}
+
+watch(recommended, async (newVal) => {
+  await getRecommendedCount();
+})
+
+async function getRecommendedByCurrentUser() {
   const result = await store.isRecommendedByUser(board.id, loginUser.memNo);
   if (result.data) {
     recommended.value = result.data.data;
   }
 }
 
-watch(recommended, async (newVal) => {
-  const result = await store.isRecommendedByUser(board.id);
+async function getRecommendedCount() {
+  const result = await store.getBoardrecommendedCount(board.id);
   recommendedCnt.value = result.data.data;
-})
+}
 
 const regDate = new Date(board.regDate);
 const now = new Date();
@@ -63,36 +71,26 @@ writeTime += '전';
 await commentStore.getCommentsByBoard(board.id, commentStore.currentPage);
 
 async function submitComment() {
-  const input = document.getElementById('commentInput');
-  const value = input.value;
-  if (value) {
-    const result = await commentStore.saveComment(board.id, userStore.user.memNo, value);
-    if (result.data) {
-      input.value = '';
-      await commentStore.getCommentsByBoard(board.id, commentStore.currentPage, 20);
+  if (userStore.checkLogin()) {
+    const input = document.getElementById('commentInput');
+    const value = input.value;
+    if (value) {
+      const result = await commentStore.saveComment(board.id, userStore.user.memNo, value);
+      if (result.data) {
+        input.value = '';
+        await commentStore.getCommentsByBoard(board.id, commentStore.currentPage, 20);
+      }
+    } else {
+      Swal.fire({
+        text: '댓글 내용을 입력해주세요.',
+        icon: 'warning'
+      });
     }
-  } else {
-    Swal.fire({
-      text: '댓글 내용을 입력해주세요.',
-      icon: 'warning'
-    });
   }
 }
 
 async function recommendBoard() {
-  if (!loginUser || !loginUser.memNo) {
-    Swal.fire({
-      text: '로그인 후 이용 가능합니다. 로그인하시겠습니까?',
-      icon: 'question',
-      confirmButtonText: '확인',
-      cancelButtonText: '취소',
-      showCancelButton: true
-    }).then(async result => {
-      if (result.isConfirmed) {
-        router.push(`/sign-in`)
-      }
-    })
-  } else {
+  if (userStore.checkLogin()) {
     const value = !recommended.value;
     const result = await store.updateBoardRecommended(board.id, loginUser.memNo, value);
     if (result.data.data?.id) recommended.value = true;
diff --git a/src/components/fragment/HeaderComponent.vue b/src/components/fragment/HeaderComponent.vue
index 0fe5b2f..0d6b5bf 100644
--- a/src/components/fragment/HeaderComponent.vue
+++ b/src/components/fragment/HeaderComponent.vue
@@ -1,6 +1,7 @@
 <script setup>
 import {useUserStore} from '@/stores/user.js';
 import Logo from "@/components/fragment/LogoComponent.vue";
+import NoProfileImageComponent from "@/components/icon/NoProfileImageComponent.vue";
 
 const userStore = useUserStore();
 userStore.getCurrentUser();
@@ -45,8 +46,7 @@ async function logout() {
             <!-- profile image -->
             <img class="profile_image" v-if="userStore.profileImage"
                  :src="userStore.profileImage" alt="user profile image"/>
-            <div class="profile_image user_no_image" v-if="!userStore.profileImage && !userStore.isAdmin"></div>
-            <div class="profile_image admin_no_image" v-if="!userStore.profileImage && userStore.isAdmin"></div>
+            <NoProfileImageComponent :role="userStore.isAdmin ? 'ROLE_ADMIN' : 'ROLE_USER'"></NoProfileImageComponent>
             <span class="userbox-text" v-if="userStore.user != null">{{ userStore.user.name }}
           <span v-if="userStore.user.role ==='ROLE_ADMIN'" style="color: #c6c6c6; font-size: 0.8rem">(관리자)</span>
           </span>
diff --git a/src/components/icon/NoProfileImageComponent.vue b/src/components/icon/NoProfileImageComponent.vue
new file mode 100644
index 0000000..09033ec
--- /dev/null
+++ b/src/components/icon/NoProfileImageComponent.vue
@@ -0,0 +1,14 @@
+<script setup>
+  const props = defineProps(['role', 'width', 'height'])
+</script>
+
+<template>
+  <img v-if="role === 'ROLE_ADMIN'" class="profile_image admin_no_image"
+       src="@/assets/images/icons/icons8-female-user-100.png" alt="프로필 이미지" :style="{width: width, height: height}"/>
+  <img v-if="role === 'ROLE_USER'" class="profile_image user_no_image"
+       src="@/assets/images/icons/icons8-customer-100.png" alt="프로필 이미지" :style="{width: width, height: height}"/>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/icon/UserImageComponent.vue b/src/components/icon/UserImageComponent.vue
index e976f6f..4390e78 100644
--- a/src/components/icon/UserImageComponent.vue
+++ b/src/components/icon/UserImageComponent.vue
@@ -1,25 +1,28 @@
 <script setup>
+import NoProfileImageComponent from "@/components/icon/NoProfileImageComponent.vue";
+
 const props = defineProps(['profileImage', 'role', 'width', 'height'])
 </script>
 
 <template>
-  <div v-if="profileImage" id="writerProfileImage" :style="{width: width, height: height}">
-    <img v-if="profileImage && role !== 'ROLE_ADMIN'" :src="profileImage" alt="프로필 이미지"/>
+  <div v-if="profileImage" id="writerProfileImage">
+    <img v-if="profileImage && role !== 'ROLE_ADMIN'" :src="profileImage"
+         :style="{width: width, height: height}"
+         class="profile_image" alt="프로필 이미지"/>
+  </div>
+  <div v-if="!profileImage" id="writerProfileImage">
+    <NoProfileImageComponent :role="role" :width="width" :height="height"></NoProfileImageComponent>
   </div>
-  <div v-if="!profileImage" id="writerProfileImage" :class="role === 'ROLE_ADMIN' ? 'admin_no_image' : 'user_no_image'"
-       :style="{width: width, height: height}"></div>
 </template>
 
 <style scoped>
 div#writerProfileImage {
-  width: 3rem;
-  height: 3rem;
+  width: 100%;
+  height: 100%;
   border-radius: 3rem;
   overflow: hidden;
-}
-
-div#writerProfileImage > img {
-  width: 3rem;
-  height: 3rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/sub/PagenationComponent.vue b/src/components/sub/PagenationComponent.vue
index 988f2c8..4f049cb 100644
--- a/src/components/sub/PagenationComponent.vue
+++ b/src/components/sub/PagenationComponent.vue
@@ -45,7 +45,8 @@ function updateShowPages(pages, page) {
 
 function getPage(page) {
   const path = router.currentRoute.value.path;
-  router.push({path: path, query: {page: page}, force: true});
+  // router.push({path: path, query: {page: page}, force: true});
+  window.location.href=`${path}?page=${page}`;
 }
 
 function goPrevPage() {
@@ -115,14 +116,14 @@ function goNextPage() {
   margin: 2rem 0;
 }
 
-.pagenation-box ul.pagenation-page-list a {
+.pagenation-box ul.pagenation-page-list li {
   padding: 0 0.2rem;
   margin: 0 0.3rem;
   cursor: pointer;
   color: #000000;
 }
 
-.pagenation-box ul.pagenation-page-list a.current-page {
+.pagenation-box ul.pagenation-page-list li.current-page {
   color: #2553a7;
   font-weight: bold;
 }
diff --git a/src/router/index.js b/src/router/index.js
index 0b287d4..c0c3e56 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -13,6 +13,8 @@ import Editor from "@/components/board/EditorComponent.vue";
 import UserProfile from "@/components/UserProfileComponent.vue";
 import AdminUser from "@/components/admin/AdminUserComponent.vue";
 import AdminUserDetailContainer from "@/components/admin/AdminUserDetailContainer.vue";
+import AdminBoard from "@/components/admin/AdminBoardComponent.vue";
+import AdminNotice from "@/components/admin/AdminNoticeComponent.vue";
 
 const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),
@@ -40,6 +42,18 @@ const router = createRouter({
                     component: AdminUserDetailContainer,
                     // props: true
                 },
+                {
+                    path: '/admin/boards',
+                    name: 'adminBoards',
+                    component: AdminBoard,
+                    props: route => ({page: route.query.page, memNo: route.query.memNo})
+                },
+                {
+                    path: '/admin/notices',
+                    name: 'adminNotices',
+                    component: AdminNotice,
+                    props: route => ({page: route.query.page, memNo: route.query.memNo})
+                },
                 {
                     path: '/search',
                     name: 'searchMovie',
diff --git a/src/stores/board.js b/src/stores/board.js
index da22dbe..5eaa817 100644
--- a/src/stores/board.js
+++ b/src/stores/board.js
@@ -121,7 +121,7 @@ export const useBoardStore = defineStore('board', {
                     console.error(e);
                 });
         },
-        async getRecommendedBoardByMemNo(memNo, page, size) {
+        async getRecommendedBoardByUser(memNo, page, size) {
             return (await axios.get(`/api/imps/recommended`, {
                 params: {
                     page: page - 1,
diff --git a/src/stores/user.js b/src/stores/user.js
index cca0036..2908175 100644
--- a/src/stores/user.js
+++ b/src/stores/user.js
@@ -66,6 +66,25 @@ export const useUserStore = defineStore('user', {
         clearState() {
             this.user = userDefault;
         },
+        checkLogin() {
+          const user = this.user;
+          if (!user.memNo) {
+              Swal.fire({
+                  text: '로그인 후 이용 가능합니다. 로그인하시겠습니까?',
+                  icon: 'question',
+                  confirmButtonText: '확인',
+                  cancelButtonText: '취소',
+                  showCancelButton: true
+              }).then(async result => {
+                  if (result.isConfirmed) {
+                      router.push(`/sign-in`)
+                  }
+              })
+              return false;
+          } else {
+              return true;
+          }
+        },
         async getUser(memNo) {
           return (await axios.get(`/api/members/${memNo}`)).data;
         },
@@ -108,6 +127,27 @@ export const useUserStore = defineStore('user', {
         async getOauthUserInfoFromSession() {
             return (await axios.get('/api/members/oauth2/userinfo')).data;
         },
+        /**
+         * 회원 검색
+         * @param page
+         * @param size
+         * @param option identifier | name
+         * @param keyword
+         */
+        async findUserByKeyword(page, size, option, keyword) {
+            const params = {
+                page: page - 1,
+                size: size,
+            }
+
+            if (option && keyword) {
+                params[option] = keyword;
+            }
+
+            return (await axios.get('/api/members/search', {
+                params: params
+            })).data;
+        },
         resetProfile() {
             this.profile.id = null;
             this.profile.name = null;
@@ -253,23 +293,14 @@ export const useUserStore = defineStore('user', {
             }))
         },
         async deleteUser(memNo) {
-            return (await axios.delete(`/api/members/flag?memNo=${memNo}`)).data;
-        },
-        async deleteUsers(memNoList) {
-            return (await axios.post(`/api/members/flag/batch-delete`, {
-                memNoList: memNoList
-            })).data;
-        },
-        // 영구 삭제
-        async deleteUserPermanently(memNo) {
             return (await axios.delete(`/api/members?memNo=${memNo}`)
                     .catch(e => console.error(e))
             ).data;
         },
-        async deleteUsersPermanently(memNoList) {
+        async deleteUsers(memNoList) {
             return (await axios.post(`/api/members/batch-delete`, {
                 memNoList: memNoList
             })).data;
-        }
+        },
     }
 }, {persist: true})
\ No newline at end of file