#573 커뮤니티 게시글 '목록' 버튼 추가를 통한 탐색 편의성 개선 (#575)

* 커뮤니티 게시글 '목록' 버튼 추가를 통한 탐색 편의성 개선

* 커뮤니티 게시글 '목록' 버튼 및 네비게이션 상태 유지

* 목록 버튼 위치 수정, 상수 재정의

* dead code 삭제

Author: wlsgur11

frontend/src/i18n/oj/en-US.js

@@ -548,6 +548,7 @@ export const m = {
   Community_Content_Placeholder: "내용을 입력해주세요.",
   Community_Post_Edit: "수정",
   Community_Post_Delete: "삭제",
+  Community_List: "목록",
   Community_Post_Save: "저장",
   Community_Post_Cancel: "취소",
   Community_Post_Edit_Success: "게시글이 수정되었습니다.",

frontend/src/pages/oj/views/community/Community.vue

@@ -280,6 +280,12 @@ export default {
       return this.$t("m.Community")
     },
   },
+  created() {
+    this.restoreState() // 복구 로직 실행
+  },
+  beforeRouteEnter(to, from, next) {
+    next()
+  },
   methods: {
     /**
      * 게시글이 3일 이내에 작성되었는지 확인
@@ -369,8 +375,25 @@ export default {
       this.query.page = 1
       this.fetchPosts()
     },
+    restoreState() {
+      const savedJSON = sessionStorage.getItem("communityState")
+      if (!savedJSON) return false
+
+      const savedData = JSON.parse(savedJSON)
+
+      if (savedData.routeName === this.$route.name) {
+        this.query = savedData.query
+        this.fetchPosts()
+        return true
+      }
+      return false
+    },
     // mount시, 쿼리통해 라우팅
     initRoute() {
+      if (this.restoreState()) {
+        return
+      }
+
       this.query.post_type = "ALL"
       this.query.question_status = "ALL"
       this.query.sort_type = "NEWEST"
@@ -384,6 +407,18 @@ export default {
       this.fetchPosts()
     },
   },
+  beforeRouteLeave(to, from, next) {
+    if (to.name === "community-detail") {
+      const stateToSave = {
+        query: this.query,
+        routeName: from.name,
+      }
+      sessionStorage.setItem("communityState", JSON.stringify(stateToSave))
+    } else {
+      sessionStorage.removeItem("communityState")
+    }
+    next()
+  },
 }
 </script>
 

frontend/src/pages/oj/views/community/PostDetail.vue

@@ -3,7 +3,16 @@
     <div class="contents" v-if="post">
       <div class="post-header">
         <div class="title-section" v-if="!isEditing">
-          <h1 class="post-title">{{ post.title }}</h1>
+          <div class="sub-title-section">
+            <h1 class="post-title">
+              {{ post.title }}
+            </h1>
+            <div class="post-actions-always-visible">
+              <button class="community-back-btn" @click="goback">
+                {{ $t("m.Community_List") }}
+              </button>
+            </div>
+          </div>
           <div class="badges-container">
             <span v-if="isNewPost" class="new-badge">NEW</span>
             <span
@@ -355,11 +364,22 @@ export default {
       editedPostType: "",
       editingCommentId: null,
       editedCommentContent: "",
+      prevRoute: null,
     }
   },
   created() {
     this.fetchPostDetail()
   },
+
+  beforeRouteEnter(to, from, next) {
+    next((vm) => {
+      const validBoards = ["community", "community-free", "community-question"]
+      if (from.name && validBoards.includes(from.name)) {
+        sessionStorage.setItem("last_community_board", from.name)
+      }
+    })
+  },
+
   methods: {
     fetchPostDetail() {
       this.isLoading = true
@@ -428,6 +448,19 @@ export default {
           this.$error("Failed to submit reply.")
         })
     },
+    goback() {
+      const lastBoard = sessionStorage.getItem("last_community_board")
+
+      if (lastBoard) {
+        this.$router.push({ name: lastBoard })
+      } else {
+        if (this.post.post_type === "QUESTION") {
+          this.$router.push({ name: "community-question" })
+        } else {
+          this.$router.push({ name: "community" })
+        }
+      }
+    },
     enterEditMode() {
       this.isEditing = true
       this.editedTitle = this.post.title
@@ -667,6 +700,11 @@ main {
   margin-bottom: 28px;
 }
 
+.sub-title-section {
+  display: flex;
+  justify-content: space-between;
+}
+
 .post-title {
   font-size: 28px;
   font-weight: 600;
@@ -786,7 +824,8 @@ main {
 .post-delete-btn,
 .post-save-btn,
 .post-cancel-btn,
-.question-status-toggle-btn {
+.question-status-toggle-btn,
+.community-back-btn {
   padding: 8px 16px;
   border: none;
   border-radius: 8px;
@@ -833,6 +872,18 @@ main {
   box-shadow: 0 4px 8px rgba(231, 76, 60, 0.2);
 }
 
+.community-back-btn {
+  background: rgb(241, 243, 244);
+  color: black;
+}
+
+.community-back-btn:hover {
+  background: lightgrey;
+  color: rgb(50, 50, 50);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(93, 93, 93, 0.2);
+}
+
 .post-save-btn {
   background: #3498db;
   color: white;