Merge pull request #18 from hw-coconote/feat/HC-6

feat/HC-6
hw-coconote · Oct 2, 2024 · f651dd0 · f651dd0
2 parents 18cee6e + 673b9ce
commit f651dd0
Show file tree

Hide file tree

Showing 6 changed files with 126 additions and 55 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,33 +1,15 @@
 <template>
   <v-app class="app global_bg">
-    <!-- <v-row no-gutters>
-      <v-col cols="12">
-        <v-sheet class="pa-2">
-          .v-col-12
-        </v-sheet>
-      </v-col>
-      <v-col cols="2">
-        <v-sheet class="pa-2 ma-2">
-          .v-col-2
-        </v-sheet>
-      </v-col>
-      <v-col>
-        <v-sheet class="pa-2 ma-2">
-          .v-col-auto
-        </v-sheet>
-      </v-col>
-    </v-row> -->
-
     <v-sheet>
       <v-row no-gutters>
         <v-col cols="12" class="CommonTopContainer">
-          <CommonTopMenu />
+          <CommonTopMenu @selected="handleSelected" />
         </v-col>
       </v-row>
       <v-row no-gutters>
         <v-col cols="2">
           <div class="d-flex innerMenuContainer">
-            <InnerMenu />
+            <InnerMenu :selectedValue="selectedValue" />
           </div>
         </v-col>
         <v-col>
@@ -43,13 +25,40 @@
 <script>
 import CommonTopMenu from "@/components/basic/CommonTopMenu.vue";
 import InnerMenu from "@/components/basic/InnerMenu.vue";
+import axios from "axios";
 
 export default {
   name: "App",
   components: {
     CommonTopMenu,
     InnerMenu,
   },
+  data() {
+    return {
+      selectedValue: null,
+      workspaceInfo: [],
+    };
+  },
+   methods: {
+    handleSelected(value) {
+      this.selectedValue = value;
+      this.sendToServer(value);
+    },
+    async sendToServer(value) {
+      try{
+        const token = "eyJhbGciOiJIUzM4NCJ9.eyJzdWIiOiJtaW5qaTIyNzZAZ21haWwuY29tIiwiaWF0IjoxNzI3ODM0NTQ0LCJleHAiOjE3Mjg0MzkzNDR9.l3yDcj9uMg1iT_71PTeihdjUgp974t-Oz_ucZnmOQHF-i4d7la7X1MOY-WCNPaQx";
+        const response = await axios.get(`${process.env.VUE_APP_API_BASE_URL}/workspace/detail/${value}`, {
+          headers: {
+            'Authorization': `Bearer ${token}` // 토큰을 헤더에 추가
+          }
+        });
+        console.log(response.data.result);
+        // this.workspaceInfo = response.data.result;
+      } catch (e) {
+        console.log(e);
+      }
+    }
+  }
 };
 </script>
 

diff --git a/src/components/basic/CommonTopMenu.vue b/src/components/basic/CommonTopMenu.vue
@@ -2,31 +2,68 @@
   <v-app-bar :elevation="2" class="topMenu" height="40">
     <v-app-bar-title class="title"> COCONOTE </v-app-bar-title>
     <template v-slot:append>
-      <v-select
-        v-model="selectedItem"
+        <v-form @submit.prevent="emitSelected">
+          <v-row>
+            <v-col cols="auto">
+              <v-select
+                v-model="selectedValue"
         :items="items"
+        item-title="name"
+        item-value="workspaceId"
         outlined
         single-line
         hide-details
         dense
         class="inline"
         style="font-size:0.9rem"
       ></v-select>
+            </v-col>
+            <v-col cols="auto">
+              <v-btn type="submit">이동</v-btn>
+            </v-col>
+          </v-row>
+        </v-form>
+
+
     </template>
   </v-app-bar>
 </template>
 
-
 <script>
+import axios from "axios";
+
 export default {
   name: "CommonTopMenu",
-  components: {},
+  components: {
+  },
   data() {
     return {
-      items: [{ title: "A 워크스페이스" }, { title: "B 워크스페이스" }],
-      selectedItem: "A 워크스페이스",
+      items: [],
+      selectedValue: null,
     };
   },
+  created() {
+    this.fetchMyWorkspaceList();
+  },
+  methods: {
+    async fetchMyWorkspaceList() {
+      try {
+        const token = "eyJhbGciOiJIUzM4NCJ9.eyJzdWIiOiJtaW5qaTIyNzZAZ21haWwuY29tIiwiaWF0IjoxNzI3ODM0NTQ0LCJleHAiOjE3Mjg0MzkzNDR9.l3yDcj9uMg1iT_71PTeihdjUgp974t-Oz_ucZnmOQHF-i4d7la7X1MOY-WCNPaQx";
+        const response = await axios.get(`${process.env.VUE_APP_API_BASE_URL}/workspace/list`, {
+          headers: {
+            'Authorization': `Bearer ${token}` // 토큰을 헤더에 추가
+          }
+        });
+        this.items = response.data.result; // 내 워크스페이스 목록 가져오기
+        console.log(response.data.result);
+      } catch (e) {
+        console.log(e);
+      }
+    },
+    emitSelected() {
+      this.$emit('selected', this.selectedValue);
+    }
+  }
 };
 </script>
 

diff --git a/src/components/basic/InnerMenu.vue b/src/components/basic/InnerMenu.vue
@@ -7,7 +7,6 @@
         @click="selectedMenu = 'home'"
         :class="{ 'selected-item': selectedMenu === 'home' }"
       ></v-list-item>
-
       <v-list-item
         prepend-icon="mdi-account-group"
         title="member"
@@ -16,24 +15,31 @@
       ></v-list-item>
     </v-list>
   </v-navigation-drawer>
-  <InnerRelatedMenuHome v-if="selectedMenu === 'home'" />
-  <InnerRelatedMenuMember v-if="selectedMenu === 'member'" />
+  <InnerRelatedMenuHome v-if="selectedMenu === 'home'" :selectedValue="selectedValue" />
+  <InnerRelatedMenuMember v-if="selectedMenu === 'member'" :selectedValue="selectedValue" />
 </template>
 
 
 <script>
 import InnerRelatedMenuHome from "@/components/basic/InnerRelatedMenuHome.vue";
 import InnerRelatedMenuMember from "@/components/basic/InnerRelatedMenuMember.vue";
 export default {
+  props: {
+    selectedValue: {
+      type: Number,
+    }
+  },
   name: "InnerMenu",
   components: {
     InnerRelatedMenuHome,
     InnerRelatedMenuMember,
   },
+
   data() {
     return {
       // 선택된 메뉴를 저장할 변수
       selectedMenu: "home", // 기본값으로 'home'을 선택
+      selectedWorkspaceId: "",
     };
   },
 };

diff --git a/src/components/basic/InnerRelatedMenuHome.vue b/src/components/basic/InnerRelatedMenuHome.vue
@@ -1,50 +1,49 @@
 <template>
-  <v-navigation-drawer permanent class="innerSubMenu" :absolute="false">
+  <v-navigation-drawer permanent class="innerSubMenu" :absolute="false" >
     <h1>코코노트 동아리</h1>
-    <v-list>
+    <h1>워크스페이스 이름 들어가야 함</h1>
+      <v-icon>mdi-cog</v-icon>
+    <v-list v-for="section in workspaceInfo" :key="section.sectionId">
       <v-list-subheader class="section-title">
-        <v-icon icon="mdi-menu-right" /> Group
+        <v-icon icon="mdi-menu-right" />{{ section.sectionName }}
       </v-list-subheader>
-      <v-list-item
-        title="공지채널"
+      <v-list-item v-for="channel in section.channelList" :key="channel.channelId"
+        :title= "channel.channelName"
         value="1"
         @click="goToThread('1', '공지채널')"
         :class="{ 'selected-item': selectedMenuId == '1' }"
         class="channel-item"
       ></v-list-item>
-
-      <v-list-item
-        title="채널2"
-        value="2"
-        @click="goToThread('2', '채널2')"
-        :class="{ 'selected-item': selectedMenuId == '2' }"
-      ></v-list-item>
-
-      <v-list-item
-        title="채널3"
-        value="3"
-        @click="goToThread('3', '채널3')"
-        :class="{ 'selected-item': selectedMenuId == '3' }"
-      ></v-list-item>
     </v-list>
   </v-navigation-drawer>
 </template>
 
 <script>
+import axios from "axios";
 import { mapActions } from "vuex";
 
 export default {
+    props: {
+    selectedValue: {
+      type: Number,
+    }
+  },
   name: "InnerRelatedMenuHome",
   components: {},
   created() {
-    this.selectedMenuId = this.$store.getters.getChannelId;
-    this.selectedMenuId = this.selectedMenuId != null ? this.selectedMenuId : "l"; // 기본값으로 일단 1번 선택
-    console.log("초기 채널 아이디 >> ", this.selectedMenuId);
+    // this.selectedMenuId = this.$store.getters.getChannelId;
+    // this.selectedMenuId = this.selectedMenuId != null ? this.selectedMenuId : "l"; // 기본값으로 일단 1번 선택
+    // console.log("초기 채널 아이디 >> ", this.selectedMenuId);
+    
+  },
+  updated() {
+    this.fetchWorkspaceInfo();
   },
   data() {
     return {
       // 선택된 메뉴를 저장할 변수
-      selectedMenuId: "1", // 기본값으로 일단 1번 선택
+      // selectedMenuId: "1", // 기본값으로 일단 1번 선택
+      workspaceInfo: {},
     };
   },
   methods: {
@@ -53,13 +52,26 @@ export default {
       console.log("@@@@@", channelValue, channelName);
       this.setChannelInfoActions(channelValue); // Vuex store에 업데이트
       this.setChannelNameInfoActions(channelName); // Vuex store에 업데이트
-      this.selectedMenuId = channelValue;
-      this.$router.push(`/channel/view/${channelValue}`);
+      // this.selectedMenuId = channelValue;
+      // this.$router.push(/channel/view/${channelValue});
+    },
+    async fetchWorkspaceInfo() {
+      try {
+        const token = "eyJhbGciOiJIUzM4NCJ9.eyJzdWIiOiJtaW5qaTIyNzZAZ21haWwuY29tIiwiaWF0IjoxNzI3ODM0NTQ0LCJleHAiOjE3Mjg0MzkzNDR9.l3yDcj9uMg1iT_71PTeihdjUgp974t-Oz_ucZnmOQHF-i4d7la7X1MOY-WCNPaQx";
+        const response = await axios.get(`${process.env.VUE_APP_API_BASE_URL}/workspace/detail/${this.selectedValue}`, {
+          headers: {
+            'Authorization': `Bearer ${token}` // 토큰을 헤더에 추가
+          }
+        });
+        this.workspaceInfo = response.data.result; 
+      } catch (e) {
+        console.log(e);
+      }
     },
   },
 };
 </script>
 
 <style lang="scss" scoped>
 @import "@/assets/css/innerRelated.scss"; /* SCSS 파일을 불러오기 */
-</style>
+</style>
diff --git a/src/components/basic/InnerRelatedMenuMember.vue b/src/components/basic/InnerRelatedMenuMember.vue
@@ -1,6 +1,7 @@
 <template>
   <v-navigation-drawer permanent class="innerSubMenu" :width="220">
     <h1>코코노트 동아리</h1>
+    <h1>{{ selectedValue }}</h1>
     <v-list>
       <v-list-item
         title="멤버"
@@ -15,6 +16,11 @@
 
 <script>
 export default {
+    props: {
+    selectedValue: {
+      type: Number,
+    }
+  },
   name: "InnerRelatedMenuMember",
   components: {},
 };

diff --git a/src/store/channel.js b/src/store/channel.js
@@ -30,3 +30,4 @@ const channel = {
 }
 
 export default channel;
+
Original file line number	Diff line number	Diff line change
Expand Up		@@ -30,3 +30,4 @@ const channel = {
		}

		export default channel;