추천 기능 추가, 자신이 작성한 게시글, 댓글에 한해 수정, 삭제 기능 버튼 노출, 회원 정보 조회시 추천한 게시글 목록 조…

…회 기능 추가
yhlee002 · Jul 18, 2024 · c36c0d5 · c36c0d5
1 parent 41aae35
commit c36c0d5
Show file tree

Hide file tree

Showing 12 changed files with 213 additions and 49 deletions.
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
@@ -179,11 +179,17 @@ form .form-group input[type=password] { /* 해당 form에만 적용 */
     height: 2rem;
     padding: 0 0.5rem;
     white-space: nowrap;
+    background-color: #ffffff;
+    border: 1px solid #a8a8a8;
+    border-radius: 2rem;
 }
 
 .button-large {
     width: 6rem;
     height: 2.4rem;
+    background-color: #ffffff;
+    border: 1px solid #a8a8a8;
+    border-radius: 2rem;
 }
 
 .button-box {
@@ -198,7 +204,8 @@ button.submit { /* .form-box form button.submit */
     color: #FFFFFF;
     background-color: #ff7c14;
     border: 0.1rem solid #f67b1a;
-    border-radius: 0.1rem;
+    border-radius: 2rem;
+    /*border-radius: 0.1rem;*/
 }
 
 .icon-button {

diff --git a/src/components/UserComponent.vue b/src/components/UserComponent.vue
@@ -3,6 +3,7 @@
 </script>
 
 <template>
+  <!-- User Info Popup -->
 
 </template>
 

diff --git a/src/components/admin/AdminUserBoardRecommendedComponent.vue b/src/components/admin/AdminUserBoardRecommendedComponent.vue
@@ -0,0 +1,54 @@
+<script setup>
+import {useBoardStore} from "@/stores/board.js";
+import Swal from "sweetalert2";
+import {ref} from "vue";
+import {useRouter} from "vue-router";
+
+const router = useRouter()
+
+const boardStore = useBoardStore();
+const props = defineProps(['memNo']);
+
+const boards = ref([]);
+const result = await boardStore.getRecommendedBoardByMemNo(props.memNo, 1, 10);
+const data = result.data;
+if (data.data) {
+  boards.value = data.data.boardImpList;
+}
+
+function goBoardPage(id) {
+  router.push(`/boards/${id}`)
+}
+</script>
+
+<template>
+  <div id="userRecommendedBoards">
+    <table id="userRecommendedBoardsTable">
+      <thead>
+      <tr>
+        <th style="width: 5rem;">식별번호</th>
+        <th>제목</th>
+        <th style="width: 12rem;">작성일자</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr v-for="board in boards" :key="board.id">
+        <td>{{ board.id }}</td>
+        <td>
+          <span @click="goBoardPage(board.id)" style="cursor:pointer;">{{ board.title }}</span>
+        </td>
+        <td>{{ board.regDate }}</td>
+      </tr>
+      <tr v-if="boards.length === 0">
+        <td colspan="4" style="text-align: center;">작성한 게시글이 존재하지 않습니다.</td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+#userRecommendedBoards, #userRecommendedBoardsTable {
+  width: 100%;
+}
+</style>
diff --git a/src/components/admin/AdminUserDetailComponent.vue b/src/components/admin/AdminUserDetailComponent.vue
@@ -11,6 +11,7 @@ import AdminUserNoticeComponent from "@/components/admin/AdminUserNoticeComponen
 import {useBoardStore} from "@/stores/board";
 import {useCommentStore} from "@/stores/comment";
 import UserImageComponent from "@/components/icon/UserImageComponent.vue";
+import AdminUserBoardRecommendedComponent from "@/components/admin/AdminUserBoardRecommendedComponent.vue";
 
 const router = useRouter();
 let id = ref(router.currentRoute.value.params.id);
@@ -223,8 +224,9 @@ function modifyUserInfo() {
     <ul id="userDetailTabIdxs">
       <li class="user-detail-tab-index" @click="activeTab(0)">작성한 공지</li>
       <li class="user-detail-tab-index active" @click="activeTab(1)">작성한 글</li>
-      <li class="user-detail-tab-index" @click="activeTab(2)">작성한 댓글</li>
-      <li class="user-detail-tab-index" @click="activeTab(3)">로그인 기록</li>
+      <li class="user-detail-tab-index" @click="activeTab(2)">추천한 글</li>
+      <li class="user-detail-tab-index" @click="activeTab(3)">작성한 댓글</li>
+      <li class="user-detail-tab-index" @click="activeTab(4)">로그인 기록</li>
     </ul>
 
     <div id="userDetailTabContents">
@@ -238,11 +240,15 @@ function modifyUserInfo() {
       </div>
 
       <div id="userDetailTab2" class="user-detail-tab">
+        <AdminUserBoardRecommendedComponent :memNo="id"></AdminUserBoardRecommendedComponent>
+      </div>
+
+      <div id="userDetailTab3" class="user-detail-tab">
         <!-- 작성한 댓글 -->
         <AdminUserCommentComponent :memNo="id"></AdminUserCommentComponent>
       </div>
 
-      <div id="userDetailTab3" class="user-detail-tab">
+      <div id="userDetailTab4" class="user-detail-tab">
         <!-- 로그인 기록 -->
         <AdminUserLoginLogsComponent :memNo="id"></AdminUserLoginLogsComponent>
       </div>

diff --git a/src/components/board/BoardComponent.vue b/src/components/board/BoardComponent.vue
@@ -19,7 +19,6 @@ const orderBy = ref("recent");
 
 const pageNum = computed(() => {
   const nanable = Number(props.page || "1");
-  console.log('반환될 값', isNaN(nanable) ? 1 : nanable);
   return isNaN(nanable) ? 1 : nanable;
 });
 boardStore.currentPage = pageNum.value;

diff --git a/src/components/board/BoardItemComponent.vue b/src/components/board/BoardItemComponent.vue
@@ -8,7 +8,7 @@ import {useBoardStore} from "@/stores/board.js";
 import Swal from 'sweetalert2'
 import UserCard from "@/components/sub/UserCardComponent.vue";
 import CommentItem from "@/components/sub/CommentItemComponent.vue";
-import {ref} from "vue";
+import {ref, watch} from "vue";
 
 const props = defineProps(['category']);
 const router = useRouter();
@@ -24,12 +24,20 @@ const board = store.currentBoard;
 const loginUser = userStore.user;
 
 const recommended = ref(false);
+const recommendedCnt = ref(0);
 if (props.category === 'boards') {
   // 로그인 유저가 해당 글을 추천했는지 조회
-  const result = store.getBoardRecommendedByUser(board.id, loginUser.memNo);
-  recommended.value = result.data;
+  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);
+  recommendedCnt.value = result.data.data;
+})
+
 const regDate = new Date(board.regDate);
 const now = new Date();
 
@@ -85,8 +93,9 @@ async function recommendBoard() {
       }
     })
   } else {
-    const result = await store.updateBoardRecommended(board.id, loginUser.memNo);
-    if (result.data) recommended.value = true;
+    const value = !recommended.value;
+    const result = await store.updateBoardRecommended(board.id, loginUser.memNo, value);
+    if (result.data.data?.id) recommended.value = true;
     else recommended.value = false;
   }
 }
@@ -163,19 +172,29 @@ async function go(path) {
             </div>
 
             <div class="button-box">
-              <button class="button-large icon-button"
-                      v-if="category === 'boards' && board.writerId !== loginUser.memNo"
-                      type="button" @click="recommendBoard">
-                <img src="@/assets/images/icons/icons8-heart-30.png" alt="추천"/>추천
-              </button>
-              <button class="button-large icon-button submit" v-if="board.writerId === loginUser.memNo"
-                      type="button" @click="modifyBoard">
-                <img src="@/assets/images/icons/icons8-pencil-48.png" alt="수정"/>수정
-              </button>
-              <button class="button-large button-gray icon-button" v-if="board.writerId === loginUser.memNo"
-                      type="button" @click="deleteBoard">
-                <img src="@/assets/images/icons/icons8-trash-48.png" alt="삭제"/>삭제
-              </button>
+              <ul class="board-options">
+                <li v-if="board.writerId !== loginUser.memNo">
+                  <button @click="recommendBoard" :class="recommended ? 'recommended' : ''">
+                    <img src="@/assets/images/icons/icons8-heart-30.png" alt="추천"/>
+                    <!--                    추천-->
+                    <span>{{ recommendedCnt }}</span>
+                  </button>
+                </li>
+
+                <li v-if="board.writerId === loginUser.memNo">
+                  <button @click="modifyBoard">
+                    <!--                    <img src="@/assets/images/icons/icons8-pencil-48.png" alt="수정"/>-->
+                    수정
+                  </button>
+                </li>
+
+                <li v-if="board.writerId === loginUser.memNo">
+                  <button @click="deleteBoard">
+                    <!--                    <img src="@/assets/images/icons/icons8-trash-48.png" alt="삭제"/>-->
+                    삭제
+                  </button>
+                </li>
+              </ul>
             </div>
           </div>
 
@@ -189,11 +208,12 @@ async function go(path) {
                   profileImage: loginUser.profileImage, role: loginUser.role}"
                     :image-only="true"></UserCard>
                 <div style="margin: 0 1.4rem 0 0; height: 100%; border-right: 0.1rem solid #f2f2f2"></div>
-                <textarea id="commentInput" type="text" style="width: 100%; border: 0.1rem solid #f2f2f2;"></textarea>
+                <div contenteditable="true" id="commentInput" type="text"
+                     style="width: 100%; border: 0.1rem solid #f2f2f2; padding: 1rem;"></div>
               </div>
 
               <div style="display: flex; justify-content: end; margin-top: 0.5rem">
-                <button class="button-default submit" @click="submitComment()" type="button">작성</button>
+                <button class="button-default" @click="submitComment()" type="button">작성</button>
               </div>
             </div>
 
@@ -202,7 +222,7 @@ async function go(path) {
               <div v-if="commentStore.comments.length === 0">
                 <div
                     style="border: 0.1rem solid #f2f2f2; border-radius: 2px; display: flex; justify-content: center; align-items: center;">
-                  <p>작성된 댓글이 없습니다.</p>
+                  <p style="margin: 1rem 0;">작성된 댓글이 없습니다.</p>
                 </div>
               </div>
               <CommentItem v-for="comment in commentStore.comments" :key="comment" :comment="comment"></CommentItem>
@@ -211,7 +231,7 @@ async function go(path) {
 
           <div style="display: flex; flex-direction: column">
             <ul>
-              <li style="display: flex;">
+              <li style="display: flex; margin-bottom: 0.5rem;">
                 <div style="margin-right: 1rem;">이전글</div>
                 <p style="cursor: pointer;" v-if="store.prevBoard" @click="go(`/${category}/${store.prevBoard.id}`)">
                   {{ store.prevBoard.title }}</p>
@@ -339,7 +359,7 @@ async function go(path) {
   flex-direction: column;
   width: calc(100% - 2rem);
   border: 0.1rem solid #f2f2f2;
-  border-radius: 1rem;
+  border-radius: 2px; /*1rem;*/
   margin-bottom: 1rem;
   padding: 1rem;
 }
@@ -354,4 +374,46 @@ async function go(path) {
 .comment-box {
   padding: 2rem 0;
 }
+
+.board-options {
+  display: flex;
+  flex-direction: row;
+  width: fit-content;
+  height: fit-content;
+  border-radius: 0.5rem;
+  overflow: hidden;
+  border: 1px solid #f2f2f2;
+  align-items: center;
+}
+
+.board-options li {
+  height: fit-content;
+  width: fit-content;
+}
+
+.board-options li:not(li:last-child) {
+  border-right: 1px solid #f2f2f2;
+}
+
+.board-options li button {
+  border: none;
+  background-color: transparent;
+  box-shadow: none;
+  padding: 0.5rem 0.5rem;
+  display: flex;
+}
+
+.board-options li button.recommended img {
+  opacity: 1;
+}
+
+.board-options li button img {
+  width: 1rem;
+  height: 1rem;
+  opacity: 0.7;
+}
+
+.board-options li button span {
+  margin: 0 0.2rem;
+}
 </style>
diff --git a/src/components/login/SignInComponent.vue b/src/components/login/SignInComponent.vue
@@ -221,4 +221,14 @@ async function socialLogin(provider) {
   background: url("@/assets/images/kakao-xs.png") no-repeat;
   background-size: 100% 100%;
 }
+
+#rememberme-box {
+  display: flex;
+  width: fit-content;
+  align-items: center;
+}
+
+#rememberme-box label {
+  width: fit-content;
+}
 </style>
diff --git a/src/components/login/SignUpComponent.vue b/src/components/login/SignUpComponent.vue
@@ -353,7 +353,9 @@ emitter.on('phone-validation', param => {
               </div>
 
               <ul class="button-box">
-                <input v-if="params.type !== 'oauth'" class="button-large" @click="resetMessage()" type="reset" name="signup-form-reset" value="초기화">
+                <input v-if="params.type !== 'oauth'" @click="resetMessage()"
+                       style="background-color: #ffffff; border: 1px solid #a8a8a8; border-radius: 2rem;"
+                       class="button-large"  type="reset" name="signup-form-reset" value="초기화">
                 <button class="button-large submit" type="button" name="submit"
                         @click="signUp()">확인
                 </button>

diff --git a/src/components/sub/CommentItemComponent.vue b/src/components/sub/CommentItemComponent.vue
@@ -1,11 +1,15 @@
 <script setup>
 import UserCard from "@/components/sub/UserCardComponent.vue";
 import Swal from 'sweetalert2';
+import {useUserStore} from "@/stores/user";
 
 const props = defineProps(['comment']);
-
 const comment = props.comment;
 
+const userStore = useUserStore();
+await userStore.getCurrentUser();
+const loginUser = userStore.user;
+
 function changeCommentUpdateForm(commentId) {
   const inputs = document.getElementsByClassName(`board_item_comments`);
   inputs.readonly = true;
@@ -59,8 +63,10 @@ function deleteComment(commentId) {
 
     <!-- Comment Options -->
     <div class="comment-option-box">
-      <button class="button-modify-minimalize" type="button" @click="changeCommentUpdateForm"></button>
-      <button class="button-delete-minimalize" type="button" @click="deleteComment"></button>
+      <button v-if="loginUser.memNo === comment.writerId"
+              class="button-modify-minimalize" type="button" @click="changeCommentUpdateForm"></button>
+      <button v-if="loginUser.memNo === comment.writerId"
+              class="button-delete-minimalize" type="button" @click="deleteComment"></button>
     </div>
   </div>
 </template>

diff --git a/src/components/sub/PagenationComponent.vue b/src/components/sub/PagenationComponent.vue
@@ -93,14 +93,12 @@ function goNextPage() {
     </div>
     <div>
       <ul class="pagenation-page-list">
-        <!--        <li v-for="idx in showPages" :key="`page-${idx}`" @click="getPage(idx)"-->
-        <!--            :class="idx === page? 'current-page' : ''">{{ idx }}-->
-        <!--        </li>-->
-
-        <router-link v-for="idx in showPages" :key="`page-${idx}`" :class="idx === page? 'current-page' : ''"
-                     :to="{ name: category, query: { page: idx }, force: true }">
-          {{ idx }}
-        </router-link>
+<!--        <router-link v-for="idx in showPages" :key="`page-${idx}`" :class="idx === page? 'current-page' : ''"-->
+<!--                     :to="{ name: category, query: { page: idx }, force: true }">-->
+<!--          {{ idx }}-->
+<!--        </router-link>-->
+        <li v-for="idx in showPages" :key="`page-${idx}`" :class="idx === page ? 'current-page' : ''"
+            @click="getPage(idx)">{{idx}}</li>
       </ul>
     </div>
     <div class="next-button">