Merge pull request #144 from hw-coconote/feat/HC-7

FIX/HC-7 워크스페이스 회원 초대, 워크스페이스 회원 상세보기, 채널 회원 초대, 모달 창 닫기 버튼 및 전체적 디자인 수정
hw-coconote · Oct 31, 2024 · 830ee90 · 830ee90
2 parents 59a724e + ca448fc
commit 830ee90
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 44 deletions.
diff --git a/src/components/ChannelMemberInviteModal.vue b/src/components/ChannelMemberInviteModal.vue
@@ -17,7 +17,7 @@
           append-icon="mdi-magnify"
         ></v-text-field>
       </div>
-      <div class="member-list">
+      <div class="member-list" style="position: relative;">
         <!-- 현재 채널에 있는 멤버 목록 -->
         <h4>현재 채널 멤버</h4>
         <div v-if="isLoadingMembers">로딩 중...</div>
@@ -28,12 +28,18 @@
               <v-list-item-title>{{ member.memberInfo.memberName || '이름 없음' }}<v-icon v-if="member.channelRole === 'MANAGER'" color="#ffbb00">mdi-crown</v-icon></v-list-item-title>
             </div>
             <div>
-               <v-icon v-if="getChannelRole === 'MANAGER'" icon="mdi-dots-vertical" @click="toggleDropdown(member.id)">
-          </v-icon>
+              <v-icon v-if="getChannelRole === 'MANAGER'" icon="mdi-dots-vertical" @click="toggleDropdown(member.id)"></v-icon>
+              <v-menu activator="parent">
+                <v-list>
+                  <v-list-item @click="(channelRoleDialog = true)">권한 변경하기</v-list-item>
+                  <v-list-item @click="removeMember">회원 내보내기</v-list-item>
+                  </v-list>
+              </v-menu>
             </div>
           </div>
         </div>    
 
+
         <v-divider class="my-3"></v-divider>
 
         <!-- 멤버 검색 결과 -->
@@ -53,12 +59,7 @@
           </div>
         </div>
 
-    <div v-if="isDropdownOpen" class="dropdown-menu" @click.stop>
-      <ul>
-        <li @click="(channelRoleDialog = true)">권한 변경하기</li>
-        <li @click="removeMember">회원 내보내기</li>
-      </ul>
-    </div>
+
 
   <v-dialog v-model="channelRoleDialog" width="auto" class="channelRoleDialog">
   <v-card max-width="400">
@@ -101,14 +102,14 @@ export default {
       channelMembers: [], // 채널 멤버 목록 추가
       isLoading: false,
       isLoadingMembers: false, // 채널 멤버 로딩 상태
-      isDropdownOpen: false, // 드롭다운 상태 관리
       currentMemberId: null,
       channelRoleDialog: false,
       currentMemberRole: null,
       roleOptions: [
       { text: '채널 매니저', value: 'MANAGER' },
       { text: '일반 회원', value: 'USER' },
     ],
+    contextMenuPosition: { x: 0, y: 0 },
     };
   },
   computed: {
@@ -233,7 +234,6 @@ export default {
     toggleDropdown(chMemberId) {
       // 드롭다운이 열리고 닫히는지 로그 확인
       console.log("Dropdown toggle");
-      this.isDropdownOpen = !this.isDropdownOpen;
       this.currentMemberId = chMemberId;
     },
   },
@@ -313,15 +313,6 @@ export default {
   border-radius: 10px;
 }
 
-/* .member-info {
-  flex-grow: 1;
-  margin-left: 10px;
-}
-
-.member-info p {
-  margin: 0;
-} */
-
 /* 초대 버튼과 가입됨 표시 스타일 */
 .invite-button-wrap {
   display: flex;
@@ -332,15 +323,15 @@ export default {
 
 .invite-button {
   padding: 5px 10px;
-  background-color: #4caf50;
+  background-color: #3a8bcd;
   color: white;
   border: none;
   border-radius: 5px;
   cursor: pointer;
 }
 
 .invite-button:hover {
-  background-color: #45a049;
+  background-color: #3a8bcd
 }
 
 .search-bar input {
@@ -350,4 +341,31 @@ export default {
   outline: none; /* 포커스 시 기본 테두리 제거 */
 }
 
+.member-dropdown-menu {
+  position: absolute;
+  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: 100;
+  /* top: 75px;
+  right: 40px;  */
+}
+
+.member-dropdown-menu ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.member-dropdown-menu ul li {
+  padding: 8px 12px;
+  cursor: pointer;
+}
+
+.member-dropdown-menu ul li:hover {
+  background-color: #f3f3f3;
+}
+
 </style>
diff --git a/src/components/basic/CreateWorkspaceMemberModal.vue b/src/components/basic/CreateWorkspaceMemberModal.vue
@@ -1,21 +1,30 @@
 <template>
   <v-dialog max-width="500px">
     <v-card>
-      <v-card-title class="text-h5 text-center">
-        워크스페이스 회원 초대하기</v-card-title
-      ><br />
-      <v-card-text v-if="isLoading">
+      <v-card-title class="text-h5" style="padding: 24px; position: relative;">
+          {{ getWorkspaceName }}(으)로 사용자 초대
+        <v-icon @click="closeModal" class="close-button" style="position: absolute; top: 20px; right: 18px;">mdi-close</v-icon>
+      </v-card-title>
+      <v-card-subtitle style="margin: 8px;">
+        초대 받을 사람:
+      </v-card-subtitle>
+      <v-card-text v-if="isLoading" style="padding-top: 3px;">
+
         <v-form @submit.prevent="sendMail">
           <v-text-field
-            label="email"
+            variant="outlined"
+            placeholder="email"
             v-model="email"
-            prepend-icon="mdi-email"
             type="email"
             required
           >
+          <template v-slot:prepend>
+            <v-icon style="font-size: 40px;">mdi-email</v-icon>
+          </template>
+          <template v-slot:append>
+            <v-icon style="font-size: 40px;" @click="sendMail">mdi-send</v-icon>
+          </template>
           </v-text-field>
-          <v-btn type="submit" color="blue">전송</v-btn>
-          <v-btn color="grey" @click="closeModal">닫기</v-btn>
         </v-form>
       </v-card-text>
       <v-card-text v-else style="width:100%; display:flex; align-items:center; font-size:14px; color:#69a0f2;">
@@ -28,6 +37,8 @@
 
 <script>
 import axios from 'axios'
+import { mapGetters } from 'vuex'
+
 export default {
   props: {
     selectedValue: {
@@ -39,6 +50,9 @@ export default {
           email:"",
           isLoading: true,
       }
+  },
+    computed: {
+    ...mapGetters(["getWorkspaceName"])
   },
   methods: {
     async sendMail() {
@@ -62,3 +76,27 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+
+.invite-button-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-left: 20px;
+}
+
+.invite-button {
+  padding: 5px 10px;
+  background-color: #3a8bcd;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.invite-button:hover {
+  background-color: #3a8bcd;
+}
+
+</style>
diff --git a/src/components/thread/ThreadLineComponent.vue b/src/components/thread/ThreadLineComponent.vue
@@ -4,7 +4,7 @@
     <!-- 프로필 이미지 -->
     <div>
       <div class="image">
-        <img v-if="isDifferentMember" :src="thread.image ? thread.image : require('@/assets/images/profileImage.png')" alt="image" class="profile-image">
+        <img v-if="isDifferentMember" :src="thread.image ? thread.image : require(`@/assets/images/profile/profile${thread.memberId % 10}.jpg`)" alt="image" class="profile-image">
       </div>
     </div>
 

diff --git a/src/views/member/MemberView.vue b/src/views/member/MemberView.vue
@@ -3,13 +3,14 @@
 
   <!-- MemberView 헤더 부분 -->
   <div class="memberview-header" style="margin: 20px; padding-left: 30px;">
-    <h1>모든 회원</h1>
+    <h2>모든 회원</h2>
   </div>
 
   <!-- 중간에 상자 부분 -->
   <div class="memberview-banner" style="background-color: #000435; color: white; padding: 50px; margin-top: 20px;">
     <br>
     <br>
+    <h1>COCONOTE로 팀 초대</h1>
     <p>팀 멤버를 COCONOTE에 참여시켜 더 나은 환경에서 작업할 수 있습니다. 이메일로 초대장을 보내거나 간단한 링크를 보내 공유할 수 있습니다.</p>
     <br>
     <v-btn @click="showMailSender" color="#3a8bcd" text="회원 초대"></v-btn>
@@ -39,10 +40,18 @@
 <!-- 회원 카드 상세 보기 -->
     <v-dialog v-model="workspaceMemberModal" max-width="600px" class="workspaceMemberModal">
        <v-card>
-        <v-card-title class="text-h5" style="padding : 24px;">
+        <v-card-title class="text-h5" style="padding : 24px; position: relative;">
           <h2>프로필 
-          <v-icon color="grey" v-if="isMe(workspaceMemberInfo.workspaceMemberId)" @click="startEditing(workspaceMemberInfo)" size="20">mdi-cog</v-icon></h2>
-
+          <v-icon color="grey" v-if="isMe(workspaceMemberInfo.workspaceMemberId)" @click="startEditing(workspaceMemberInfo)" size="20">mdi-cog</v-icon>
+          <v-icon v-if="getWsRole !== 'USER' && workspaceMemberInfo.wsRole !== 'PMANAGER'" icon="mdi-dots-vertical" size="30" style="color: #a4a4a4;"></v-icon>
+            <v-menu activator="parent">
+              <v-list style="max-width: 120px;">
+                <v-list-item @click="(workspaceRoleDialog = true)">권한 변경하기</v-list-item>
+                <v-list-item @click="removeMember">회원 내보내기</v-list-item>
+              </v-list>
+            </v-menu>
+          </h2>
+          <v-icon @click="workspaceMemberModal=false" class="close-button" style="position: absolute; top: 20px; right: 18px;">mdi-close</v-icon>
         </v-card-title>
         <v-card-text>
             <v-row justify="center">
@@ -53,13 +62,6 @@
                       <img :src="workspaceMemberInfo.profileImage && workspaceMemberInfo.profileImage !== 'null' ? workspaceMemberInfo.profileImage : require(`@/assets/images/profile/profile${this.memberImageId}.jpg`)" 
                       alt="Profile Image" 
                       style="width: 100%; border-radius: 15px;"/>
-
-                      <div v-if="getWsRole !== 'USER' && workspaceMemberInfo.wsRole !== 'PMANAGER'">
-                      <v-btn color="#3a8bcd" text="권한" @click="(workspaceRoleDialog = true)">
-                      </v-btn>
-                      <v-btn color="red" text="강퇴" @click="removeMember">
-                      </v-btn>
-                      </div>
                     </v-col>
                     <v-col cols="7">
                       <div class="member-info-container">
@@ -129,7 +131,7 @@
                               </v-col>
                               <v-col cols="9" class="member-info-list">
                                 <div class="member-info">등급</div>
-                                <div v-if="workspaceMemberInfo.wsRole === 'PMANAGER'">워크스페이스 최고 관리자</div>
+                                <div v-if="workspaceMemberInfo.wsRole === 'PMANAGER'">워크스페이스 소유자</div>
                                 <div v-if="workspaceMemberInfo.wsRole === 'SMANAGER'">워크스페이스 관리자</div>
                                 <div v-if="workspaceMemberInfo.wsRole === 'USER'">일반 회원</div>
                               </v-col>
@@ -145,8 +147,9 @@
             </v-col>
         </v-row>
         </v-card-text>
+        <br />
 
-      <v-btn class="" text="닫기" @click="workspaceMemberModal=false"></v-btn>
+      <!-- <v-btn class="" text="닫기" @click="workspaceMemberModal=false"></v-btn> -->
     </v-card>
 
     </v-dialog>