경로 변경 및 컴포넌트를 단일 페이지에 나타내기 위한 컨테이너 컴포넌트 생성

yhlee002 · Jul 22, 2024 · 73434e2 · 73434e2
1 parent 2e414be
commit 73434e2
Show file tree

Hide file tree

Showing 20 changed files with 212 additions and 38 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,7 +1,7 @@
 <script setup>
 import {RouterView} from 'vue-router'
-import HeaderComponent from './components/fragment/HeaderComponent.vue'
-import FooterComponent from './components/fragment/FooterComponent.vue'
+import HeaderComponent from '@/components/fragment/HeaderComponent.vue'
+import FooterComponent from '@/components/fragment/FooterComponent.vue'
 import BasicModal from '@/components/BasicModal.vue';
 import {useModalStore} from '@/stores/modal.js';
 import {storeToRefs} from "pinia";

diff --git a/src/components/admin/AdminCommentImpComponent.vue b/src/components/admin/AdminCommentImpComponent.vue
@@ -8,7 +8,7 @@
       <div class="inner-block">
         <div class="content">
           <div class="block-title-box">
-            <h2 class="block-title">관리자 페이지 > 공지사항</h2>
+            <h2 class="block-title">관리자 페이지 > 게시글 댓글 조회</h2>
           </div>
 
 

diff --git a/src/components/admin/AdminComponent.vue b/src/components/admin/AdminComponent.vue
@@ -88,7 +88,7 @@ commentStore.getComments(1, 10, null);
         <div class="block-title">
           <h3>회원 관리</h3>
           <small>
-            <router-link to="/users">더보기</router-link>
+            <router-link to="/admin/users">더보기</router-link>
           </small>
         </div>
         <div class="block-content">

diff --git a/src/components/admin/user/AdminUserBoardContainer.vue b/src/components/admin/user/AdminUserBoardContainer.vue
@@ -0,0 +1,27 @@
+<script setup>
+import AdminUserBoard from "@/components/admin/user/sub/AdminUserBoardComponent.vue";
+
+const props = defineProps(['memNo']);
+</script>
+
+<template>
+  <div id="index_user_boards" class="wrapper-block">
+    <div class="inner">
+      <div class="inner-block">
+        <div class="content">
+          <div class="block-title-box">
+            <h2 class="block-title">회원이 작성한 게시글</h2>
+          </div>
+
+
+
+          <AdminUserBoard :memNo="memNo"></AdminUserBoard>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/components/admin/user/AdminUserBoardRecommendedContainer.vue b/src/components/admin/user/AdminUserBoardRecommendedContainer.vue
@@ -0,0 +1,25 @@
+<script setup>
+import AdminUserBoardRecommended from "@/components/admin/user/sub/AdminUserBoardRecommendedComponent.vue";
+
+const props = defineProps(['memNo']);
+</script>
+
+<template>
+  <div id="index_user_boards" class="wrapper-block">
+    <div class="inner">
+      <div class="inner-block">
+        <div class="content">
+          <div class="block-title-box">
+            <h2 class="block-title">회원이 추천한 게시글</h2>
+          </div>
+
+          <AdminUserBoardRecommended :memNo="memNo"></AdminUserBoardRecommended>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/components/admin/user/AdminUserCommentImpContainer.vue b/src/components/admin/user/AdminUserCommentImpContainer.vue
@@ -0,0 +1,25 @@
+<script setup>
+import AdminUserComment from "@/components/admin/user/sub/AdminUserCommentImpComponent.vue";
+
+const props = defineProps(['memNo']);
+</script>
+
+<template>
+  <div id="index_userdetail" class="wrapper-block">
+    <div class="inner">
+      <div class="inner-block">
+        <div class="content">
+          <div class="block-title-box">
+            <h2 class="block-title">회원이 작성한 댓글</h2>
+          </div>
+
+          <AdminUserComment :memNo="memNo"></AdminUserComment>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/components/admin/user/AdminUserCommentMovContainer.vue b/src/components/admin/user/AdminUserCommentMovContainer.vue
@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/components/admin/AdminUserComponent.vue → ...ponents/admin/user/AdminUserComponent.vue b/src/components/admin/AdminUserComponent.vue → ...ponents/admin/user/AdminUserComponent.vue
@@ -6,7 +6,7 @@ import Swal from 'sweetalert2';
 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 AdminUserDetailComponent from "@/components/admin/user/AdminUserDetailComponent.vue";
 import Pagenation from "@/components/sub/PagenationComponent.vue";
 const props = defineProps(['page'])
 const userStore = useUserStore();

diff --git a/...onents/admin/AdminUserDetailComponent.vue → ...s/admin/user/AdminUserDetailComponent.vue b/...onents/admin/AdminUserDetailComponent.vue → ...s/admin/user/AdminUserDetailComponent.vue
@@ -1,17 +1,17 @@
 <script setup>
 import '@/assets/css/admin/user.css';
-import {ref, watch} from "vue";
+import AdminUserLoginLogsComponent from "@/components/admin/user/sub/AdminUserLoginLogsComponent.vue";
+import AdminUserBoardComponent from "@/components/admin/user/sub/AdminUserBoardComponent.vue";
+import AdminUserCommentComponent from "@/components/admin/user/sub/AdminUserCommentImpComponent.vue";
+import AdminUserNoticeComponent from "@/components/admin/user/sub/AdminUserNoticeComponent.vue";
+import UserImageComponent from "@/components/icon/UserImageComponent.vue";
+import AdminUserBoardRecommendedComponent from "@/components/admin/user/sub/AdminUserBoardRecommendedComponent.vue";
 import Swal from "sweetalert2";
-import {useUserStore} from "@/stores/user.js";
+import {ref, watch} from "vue";
 import {useRouter} from "vue-router";
-import AdminUserLoginLogsComponent from "@/components/admin/AdminUserLoginLogsComponent.vue";
-import AdminUserBoardComponent from "@/components/admin/AdminUserBoardComponent.vue";
-import AdminUserCommentComponent from "@/components/admin/AdminUserCommentComponent.vue";
-import AdminUserNoticeComponent from "@/components/admin/AdminUserNoticeComponent.vue";
-import {useBoardStore} from "@/stores/board";
-import {useCommentStore} from "@/stores/comment";
-import UserImageComponent from "@/components/icon/UserImageComponent.vue";
-import AdminUserBoardRecommendedComponent from "@/components/admin/AdminUserBoardRecommendedComponent.vue";
+import {useUserStore} from "@/stores/user.js";
+import {useBoardStore} from "@/stores/board.js";
+import {useCommentStore} from "@/stores/comment.js";
 
 const router = useRouter();
 let id = ref(router.currentRoute.value.params.id);
@@ -231,24 +231,39 @@ function modifyUserInfo() {
 
     <div id="userDetailTabContents">
       <div id="userDetailTab0" class="user-detail-tab">
+        <div style="display: flex; justify-content: end; width: 100%; margin: 0.5rem 0;">
+          <router-link :to="`/admin/users/notices?memNo=${member.memNo}`">더보기</router-link>
+        </div>
         <AdminUserNoticeComponent :memNo="id"></AdminUserNoticeComponent>
       </div>
 
       <div id="userDetailTab1" class="user-detail-tab active">
+        <div style="display: flex; justify-content: end; width: 100%; margin: 0.5rem 0;">
+          <router-link :to="`/admin/users/boards?memNo=${member.memNo}`">더보기</router-link>
+        </div>
         <!-- 작성한 글 -->
         <AdminUserBoardComponent :memNo="id"></AdminUserBoardComponent>
       </div>
 
       <div id="userDetailTab2" class="user-detail-tab">
+        <div style="display: flex; justify-content: end; width: 100%; margin: 0.5rem 0;">
+          <router-link :to="`/admin/users/recommended-boards?memNo=${member.memNo}`">더보기</router-link>
+        </div>
         <AdminUserBoardRecommendedComponent :memNo="id"></AdminUserBoardRecommendedComponent>
       </div>
 
       <div id="userDetailTab3" class="user-detail-tab">
+        <div style="display: flex; justify-content: end; width: 100%; margin: 0.5rem 0;">
+          <router-link :to="`/admin/users/imp-comments?memNo=${member.memNo}`">더보기</router-link>
+        </div>
         <!-- 작성한 댓글 -->
         <AdminUserCommentComponent :memNo="id"></AdminUserCommentComponent>
       </div>
 
       <div id="userDetailTab4" class="user-detail-tab">
+        <div style="display: flex; justify-content: end; width: 100%; margin: 0.5rem 0;">
+          <router-link :to="`/admin/users/loginlogs?memNo=${member.memNo}`">더보기</router-link>
+        </div>
         <!-- 로그인 기록 -->
         <AdminUserLoginLogsComponent :memNo="id"></AdminUserLoginLogsComponent>
       </div>
@@ -308,5 +323,6 @@ function modifyUserInfo() {
 
 #userDetailTabContents .user-detail-tab.active {
   display: flex;
+  flex-direction: column;
 }
 </style>
diff --git a/...onents/admin/AdminUserDetailContainer.vue → ...s/admin/user/AdminUserDetailContainer.vue b/...onents/admin/AdminUserDetailContainer.vue → ...s/admin/user/AdminUserDetailContainer.vue
@@ -1,5 +1,5 @@
 <script setup>
-import AdminUserDetail from "@/components/admin/AdminUserDetailComponent.vue";
+import AdminUserDetail from "@/components/admin/user/AdminUserDetailComponent.vue";
 
 const props = defineProps(['memNo']);
 </script>

diff --git a/src/components/admin/user/AdminUserLoginLogContainer.vue b/src/components/admin/user/AdminUserLoginLogContainer.vue
@@ -0,0 +1,25 @@
+<script setup>
+import AdminUserLoginLog from "@/components/admin/user/sub/AdminUserLoginLogsComponent.vue";
+
+const props = defineProps(['memNo']);
+</script>
+
+<template>
+  <div id="index_user_notices" class="wrapper-block">
+    <div class="inner">
+      <div class="inner-block">
+        <div class="content">
+          <div class="block-title-box">
+            <h2 class="block-title">회원 로그인 기록</h2>
+          </div>
+
+          <AdminUserLoginLog :memNo="memNo"></AdminUserLoginLog>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/components/admin/user/AdminUserNoticeContainer.vue b/src/components/admin/user/AdminUserNoticeContainer.vue
@@ -0,0 +1,25 @@
+<script setup>
+import AdminUserNotice from "@/components/admin/user/sub/AdminUserNoticeComponent.vue";
+
+const props = defineProps(['memNo']);
+</script>
+
+<template>
+  <div id="index_user_notices" class="wrapper-block">
+    <div class="inner">
+      <div class="inner-block">
+        <div class="content">
+          <div class="block-title-box">
+            <h2 class="block-title">회원이 작성한 공지사항</h2>
+          </div>
+
+          <AdminUserNotice :memNo="memNo"></AdminUserNotice>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/...ponents/admin/AdminUserBoardComponent.vue → ...dmin/user/sub/AdminUserBoardComponent.vue b/...ponents/admin/AdminUserBoardComponent.vue → ...dmin/user/sub/AdminUserBoardComponent.vue
@@ -62,9 +62,6 @@ function goBoardPage(id) {
 
 <template>
   <div id="userBoards">
-    <div style="display: flex; justify-content: end; width: 100%; margin: 0.5rem 0;">
-      <router-link :to="`/admin/notices?memNo=${memNo}`">더보기</router-link>
-    </div>
     <table id="userBoardsTable">
       <thead>
       <tr>

diff --git a/...in/AdminUserBoardRecommendedComponent.vue → ...ub/AdminUserBoardRecommendedComponent.vue b/...in/AdminUserBoardRecommendedComponent.vue → ...ub/AdminUserBoardRecommendedComponent.vue
@@ -23,9 +23,6 @@ function goBoardPage(id) {
 
 <template>
   <div id="userRecommendedBoards">
-    <div style="display: flex; justify-content: end; width: 100%; margin: 0.5rem 0;">
-      <router-link :to="`/admin/notices?memNo=${memNo}`">더보기</router-link>
-    </div>
     <table id="userRecommendedBoardsTable">
       <thead>
       <tr>

diff --git a/...nents/admin/AdminUserCommentComponent.vue → ...user/sub/AdminUserCommentImpComponent.vue b/...nents/admin/AdminUserCommentComponent.vue → ...user/sub/AdminUserCommentImpComponent.vue
@@ -62,9 +62,6 @@ function goBoardPage(id) {
 
 <template>
   <div id="userComments">
-    <div style="display: flex; justify-content: end; width: 100%; margin: 0.5rem 0;">
-      <router-link :to="`/admin/notices?memNo=${memNo}`">더보기</router-link>
-    </div>
     <table id="userCommentsTable">
       <thead>
       <tr>

diff --git a/...nts/admin/AdminUserLoginLogsComponent.vue → .../user/sub/AdminUserLoginLogsComponent.vue b/...nts/admin/AdminUserLoginLogsComponent.vue → .../user/sub/AdminUserLoginLogsComponent.vue
@@ -11,9 +11,6 @@ const logs = logStore.logs;
 
 <template>
   <div id="loginLogs">
-    <div style="display: flex; justify-content: end; width: 100%; margin: 0.5rem 0;">
-      <router-link :to="`/admin/notices?memNo=${memNo}`">더보기</router-link>
-    </div>
     <table id="loginLogsTable">
       <thead>
       <tr>

diff --git a/...onents/admin/AdminUserNoticeComponent.vue → ...min/user/sub/AdminUserNoticeComponent.vue b/...onents/admin/AdminUserNoticeComponent.vue → ...min/user/sub/AdminUserNoticeComponent.vue
@@ -1,7 +1,7 @@
 <script setup>
 import Swal from "sweetalert2";
 import {ref} from "vue";
-import {useNoticeStore} from "@/stores/notice";
+import {useNoticeStore} from "@/stores/notice.js";
 import {useRouter} from "vue-router";
 
 const router = useRouter()
@@ -63,9 +63,6 @@ function goBoardPage(id) {
 
 <template>
   <div id="userNotices">
-    <div style="display: flex; justify-content: end; width: 100%; margin: 0.5rem 0;">
-      <router-link :to="`/admin/notices?memNo=${memNo}`">더보기</router-link>
-    </div>
     <table id="userNoticesTable">
       <thead>
       <tr>

diff --git a/src/components/board/NoticeComponent.vue b/src/components/board/NoticeComponent.vue
@@ -7,7 +7,7 @@ import {useRouter} from "vue-router";
 import {useUserStore} from "@/stores/user.js";
 import {ref, watch} from "vue";
 import Pagenation from "@/components/sub/PagenationComponent.vue";
-import {useBoardStore} from "@/stores/board";
+import {useBoardStore} from "@/stores/board.js";
 
 const props = defineProps(['page']);
 

diff --git a/src/components/sub/CommentItemComponent.vue b/src/components/sub/CommentItemComponent.vue
@@ -4,7 +4,7 @@ import UserCard from "@/components/sub/UserCardComponent.vue";
 import Swal from 'sweetalert2';
 import {ref} from "vue";
 import {useUserStore} from "@/stores/user.js";
-import {useCommentStore} from "@/stores/comment";
+import {useCommentStore} from "@/stores/comment.js";
 import emitter from '@/eventBus/emitter.js';
 
 const props = defineProps(['comment', 'editMode']);