Merge pull request #96 from hw-coconote/feat/HC-209

[FEAT] axios 전역기능 추가, ws 리스트 오류 수정
hw-coconote · Oct 18, 2024 · e02a367 · e02a367
2 parents 0cd7432 + 2562ace
commit e02a367
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 23 deletions.
diff --git a/src/components/basic/InnerMenu.vue b/src/components/basic/InnerMenu.vue
@@ -3,6 +3,7 @@
     <v-list density="compact" nav class="menu-container">
       <!-- 현재 접속해 있는 워크스페이스 -->
       <v-list-item
+        ref="workspaceListButton"
         prepend-icon="mdi-alpha-w-box"
         title="workspace"
         @click="toggleDropdown"
@@ -133,15 +134,14 @@ export default {
     };
   },
   mounted() {
-    console.error("❤️❤️❤️❤️❤️",this.selectedMenu);
     const routeName = this.$route.name;
     const nameSelectMenuObj = {
       MemberView: "member",
-      SEARCH: "search"
-    }
-    if(nameSelectMenuObj[routeName]){
+      SEARCH: "search",
+    };
+    if (nameSelectMenuObj[routeName]) {
       this.selectedMenu = nameSelectMenuObj[routeName];
-    }else{
+    } else {
       this.selectedMenu = "home";
     }
     // this.changeSelectedMenu(this.selectedMenu);
@@ -162,6 +162,13 @@ export default {
       // 드롭다운이 열리고 닫히는지 로그 확인
       console.log("Dropdown toggle");
       this.isDropdownOpen = !this.isDropdownOpen;
+      if (this.isDropdownOpen) {
+        console.error("이벤트 추가");
+        document.addEventListener("click", this.handleOutsideClick);
+      } else {
+        console.error("이벤트 삭제");
+        document.removeEventListener("click", this.handleOutsideClick);
+      }
     },
     async fetchMyWorkspaceList() {
       try {
@@ -174,7 +181,6 @@ export default {
       }
     },
     async selectWorkspace(workspaceId) {
-      console.error("selectWorkspace >> ", workspaceId)
       try {
         const wsInfo = await axios.get(
           // 워크스페이스 정보
@@ -188,30 +194,23 @@ export default {
       }
     },
     changeSelectedMenu(name) {
-      if(name == this.selectedMenu){
+      if (name == this.selectedMenu) {
         return false;
       }
-      console.error("getWorkspaceId >> ", this.getWorkspaceId)
       switch (name) {
         case "home":
-          console.log("###### home")
           this.locationHome();
           break;
         case "member":
-          console.log("###### member")
-          window.location.href=`/member/${this.getWorkspaceId}`;
-          // this.$router.push(`/member/${this.getWorkspaceId}`);
+          window.location.href = `/member/${this.getWorkspaceId}`;
           break;
         case "search":
-          console.log("###### search")
-          window.location.href=`/workspace/${this.getWorkspaceId}/search`;
-          // this.$router.push(`/workspace/${this.getWorkspaceId}/search`);
+          window.location.href = `/workspace/${this.getWorkspaceId}/search`;
           break;
       }
-      // this.selectedMenu = name;
     },
     async locationHome() {
-      window.location.href=`/channel/view`;
+      window.location.href = `/channel/view`;
     },
     setModalPosition() {
       const button = this.$refs.profileButton; // 버튼 요소 참조
@@ -234,8 +233,13 @@ export default {
     },
     handleOutsideClick(event) {
       // 클릭이 모달 외부인지 확인
-      if (!this.$refs.profileButton.contains(event.target)) {
+      if (
+        (!this.$refs.profileButton.contains(event.target) && this.dialog) ||
+        (!this.$refs?.workspaceListButton?.$el?.contains(event.target) &&
+          this.isDropdownOpen)
+      ) {
         this.dialog = false; // 모달 닫기
+        this.isDropdownOpen = false;
         document.removeEventListener("click", this.handleOutsideClick); // 리스너 제거
       }
     },
@@ -308,14 +312,14 @@ export default {
 }
 
 .workspace-dropdown-menu {
-  position: absolute;
+  position: fixed;
   background-color: white;
   border: 1px solid #ccc;
   border-radius: 4px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   padding: 10px;
   z-index: 1005;
-  top: 75px;
+  top: 50px;
 }
 
 .workspace-dropdown-menu ul {

diff --git a/src/services/axios.js b/src/services/axios.js
@@ -1,13 +1,28 @@
 // src/services/axios.js
 import axios from 'axios';
 
+let isLoginAlert = false;
+
 // 요청 인터셉터 설정
 axios.interceptors.request.use(
-  (config) => {
+  config => {
     const accessToken = localStorage.getItem('accessToken');
 
-    // S3 URL이 아닌 경우에만 Authorization 헤더 추가
-    if (accessToken && !config.url.includes('amazonaws.com')) {
+    if (!isLoginAlert && !accessToken && !config.url.includes('/oauth2/authorization')) { // token이 없고 login api도 아닌 경우
+      isLoginAlert = true
+      alert("로그인 후 시도해주세요.")
+      // 페이지 이동을 약간 지연시켜 isLoginAlert 값을 true로 설정할 시간을 확보
+      setTimeout(() => {
+        const urlSplitCheck = window.location.href.split("/");
+        console.error(window.location.href, "현 주소 확인",urlSplitCheck)
+        if(urlSplitCheck.length > 3){ // router 를 못 불러와서, /기준 뒤에 추가 url이 없는 걸로 체크
+          localStorage.clear();
+          window.location.href = "/";
+          // 이동 시, 다른 axios에서 오류가 나지만, 
+        }
+      }, 10); // 100ms 지연 (사용자 경험을 해치지 않는 범위 내에서)
+      return false;
+    }else if (accessToken && !config.url.includes('amazonaws.com')) { // S3 URL이 아닌 경우에만 Authorization 헤더 추가
       config.headers.Authorization = `Bearer ${accessToken}`;
     }
 
@@ -32,6 +47,11 @@ axios.interceptors.response.use(
   (error) => {
     // 응답 에러 처리
     console.error('Response error:', error); // 에러 로그
+    if (error.response?.data) {
+      if(error.response?.data?.status_message.contain(`For input string:`)){ // null 일 때 대기해야하는데, alert창 뜨는 부분
+        alert(`${error.response?.data?.status_message} \ncode :: ${error.response?.data?.status_code}`)
+      }
+    }
     return Promise.reject(error);
   }
 );