Merge pull request #193 from beyond-sw-camp/frontend/feature/board/me…

…eting

[Refactor] 회의 추가 시 부가 속성(참여자, 라벨, 태스크, 이슈) 추가 기능

frontend/src/common/component/Editor/QuillEditor.vue

@@ -68,12 +68,29 @@ onMounted(() => {
   color: #28303F;
 }
 
-.ql-tooltip {
-  z-index: 1000;
+.ql-bubble{
+  //max-width: max-content;
+}
+
+.ql-tooltip{
+  position: static;
+}
+
+.ql-bubble .ql-tooltip-arrow{
+  display: none;
 }
 
 .ql-container {
   position: relative;
   overflow: visible;
 }
+
+.ql-bubble .ql-tooltip{
+  position: static !important;
+  max-width: fit-content !important;
+}
+
+.ql-bubble .ql-tooltip-arrow{
+  display: none;
+}
 </style>

frontend/src/layouts/component/NotificationModal.vue

@@ -0,0 +1,24 @@
+<script setup>
+import { useNotificationStore } from '@/store/socket/useNotifyStore';
+
+const notificationStore = useNotificationStore();
+</script>
+
+<template>
+  <div>
+    <div v-for="notification in notificationStore.notifications" :key="notification.id">
+      {{ notification.message }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+  div {
+    position: fixed;
+    top: 0;
+    right: 0;
+    background-color: white;
+    border: 1px solid black;
+    padding: 10px;
+  }
+</style>

frontend/src/layouts/component/WorkspaceModal.vue

@@ -0,0 +1,114 @@
+<script setup>
+import user1 from '@/assets/icon/persona/user1.svg';
+import user2 from '@/assets/icon/persona/user2.svg';
+import user3 from '@/assets/icon/persona/user3.svg';
+import plus from '@/assets/icon/menu/plus.svg';
+import { useRouter } from 'vue-router';
+import { defineProps } from 'vue';
+
+const props = defineProps({
+  closeModal: {
+    type: Function,
+    required: true
+  }
+});
+
+const router = useRouter();
+
+const handleLinkClick = (path) => {
+  router.push(path);
+  props.closeModal();
+};
+</script>
+
+<template>
+  <div class="workspace-list-container">
+    <div>
+      <p>Workspace List</p>
+    </div>
+    <hr>
+    <ul>
+      <li @click="handleLinkClick('/my/dashboard')">
+        <router-link to="/workspace/dashboard">
+          <img :src="user1" alt="user">
+          <p>My Space</p>
+        </router-link>
+      </li>
+      <li @click="handleLinkClick('/workspace/dashboard')">
+        <router-link to="/workspace/dashboard">
+          <img :src="user2" alt="workspace1">
+          <p>MINIONZ</p>
+        </router-link>
+      </li>
+      <li @click="handleLinkClick('/workspace/dashboard')">
+        <router-link to="/workspace/dashboard">
+          <img :src="user3" alt="workspace2">
+          <p>SIMKIDS</p>
+        </router-link>
+      </li>
+    </ul>
+    <hr>
+    <div @click="handleLinkClick('/workspace/scrum/dashboard')">
+      <router-link to="/workspace/scrum/workspace">
+        <img :src="plus" class="plus" alt="plus-btn">
+        <p>Add Workspace</p>
+      </router-link>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.workspace-list-container{
+  background-color: #F3F6FF;
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(0,0,0,0.1);
+  position: absolute;
+  top: 50px;
+  right: 10px;
+  width: 180px;
+
+}
+p{
+  font-weight: 500;
+  margin: 0;
+}
+hr{
+  border: 1px solid #dfe5f1;
+  width: 100%;
+  margin: 10px 0;
+}
+ul{
+  text-decoration: none;
+  padding: 0;
+  li{
+    list-style: none;
+    padding: 0.5rem;
+    gap: 0.625rem;
+    display: flex;
+    align-items: center;
+    &:hover {
+      background-color: #C6D2FD;
+      color: white;
+      border-radius: 10px;
+    }
+  }
+}
+a{
+  display: flex;
+  text-decoration: none;
+  color: #222;
+  align-items: center;
+  gap: 10px;
+  img{
+    width: 40px;
+    height: 40px;
+  }
+}
+.plus{
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background-color: #93AAFD;
+}
+</style>

frontend/src/services/websocketService.js

@@ -1,6 +1,6 @@
 import { useChatRoomStore } from '@/stores/socket/chat/useChatRoomStore';
 import { useChatMessageStore } from "@/stores/socket/chat/useChatMessageStore";
-import { useNotificationStore } from '@/stores/socket/useAlamStore';
+import { useNotificationStore } from '@/stores/socket/useAlarmStore';
 import { useDocsEditStore } from '@/stores/socket/useDocsEditStore';
 import { Client } from '@stomp/stompjs';
 import SockJS from 'sockjs-client';

frontend/src/static/labelData.js

@@ -0,0 +1,40 @@
+import { labelColor } from '@/utils/labelUtils';
+
+export const labelData = [
+    {
+        workspaceId: 1,
+        labelName: "회원 기능",
+        description: "회원과 관련된 기능을 구현한다.",
+        color: labelColor[0]
+    },
+    {
+        workspaceId: 1,
+        labelName: "프로젝트 기능",
+        description: "프로젝트와 관련된 기능을 구현한다.",
+        color: labelColor[1]
+    },
+    {
+        workspaceId: 1,
+        labelName: "채팅 기능",
+        description: "채팅과 관련된 기능을 구현한다.",
+        color: labelColor[2]
+    },
+    {
+        workspaceId: 1,
+        labelName: "메일 기능",
+        description: "메일과 관련된 기능을 구현한다.",
+        color: labelColor[3]
+    },
+    {
+        workspaceId: 1,
+        labelName: "일정 기능",
+        description: "일정과 관련된 기능을 구현한다.",
+        color: labelColor[4]
+    },
+    {
+        workspaceId: 1,
+        labelName: "캘린더 기능",
+        description: "캘린더와 관련된 기능을 구현한다.",
+        color: labelColor[5]
+    }
+]

frontend/src/static/userData.js

@@ -0,0 +1,43 @@
+import user1 from '@/assets/icon/persona/user1.svg';
+import user2 from '@/assets/icon/persona/user2.svg';
+import user3 from '@/assets/icon/persona/user3.svg';
+import user4 from '@/assets/icon/persona/user4.svg';
+import user5 from '@/assets/icon/persona/user5.svg';
+
+export const userData =[
+    {
+        id: 1,
+        username: '최승은',
+        email: '[email protected]',
+        workspaceId: 1,
+        persona: user1
+},
+    {
+        id: 2,
+        username: '차윤슬',
+        email: '[email protected]',
+        workspaceId: 1,
+        persona: user2
+    },
+    {
+        id: 3,
+        username: '지연희',
+        email: '[email protected]',
+        workspaceId: 1,
+        persona: user3
+    },
+    {
+        id: 4,
+        username: '박성준',
+        email: '[email protected]',
+        workspaceId: 1,
+        persona: user4
+    },
+    {
+        id: 5,
+        username: '강혜정',
+        email: '[email protected]',
+        workspaceId: 1,
+        persona: user5
+    },
+]

frontend/src/stores/scrum/useLabelStore.js

@@ -0,0 +1,40 @@
+import { labelData as importedLabelData } from '@/static/labelData';
+import { labelColorPalette as importedLabelColorPalette } from '@/utils/labelUtils';
+
+export const useLabelStore = () => {
+    const labelData = importedLabelData || [];
+    const labelColorPalette = importedLabelColorPalette || [];
+    const getLabels = () => {
+        return labelData;
+    };
+
+    const addLabel = (label) => {
+        labelData.push(label);
+    };
+
+    const updateLabel = (index, updatedLabel) => {
+        if (index >= 0 && index < labelData.length) {
+            labelData[index] = updatedLabel;
+        }
+    };
+
+    const deleteLabel = (index) => {
+        if (index >= 0 && index < labelData.length) {
+            labelData.splice(index, 1);
+        }
+    };
+
+    const setLabelColor = (index, colorIndex) => {
+        if (index >= 0 && index < labelData.length && colorIndex >= 0 && colorIndex < labelColorPalette.length) {
+            labelData[index].color = labelColorPalette[colorIndex];
+        }
+    };
+
+    return {
+        getLabels,
+        addLabel,
+        updateLabel,
+        deleteLabel,
+        setLabelColor
+    };
+};

frontend/src/stores/user/useParticipantsStore.js

@@ -0,0 +1,38 @@
+import { ref, computed } from 'vue';
+import { userData } from "@/static/userData";
+
+export function useParticipants() {
+    const participantsName = ref('');
+    const participants = ref([]);
+    const userList = ref([]);
+
+    const filteredUsers = computed(() => {
+        return userData.filter(user => user.username.includes(participantsName.value));
+    });
+
+    const addParticipant = (participant) => {
+        if (!participants.value.some(p => p.id === participant.id)) {
+            participants.value.push(participant);
+        }
+    };
+
+    const removeParticipant = (id) => {
+        participants.value = participants.value.filter(p => p.id !== id);
+    };
+
+    const saveParticipants = (saveLocation) => {
+        saveLocation.value = [...participants.value];
+        participants.value = [];
+        participantsName.value = '';
+    };
+
+    return {
+        participantsName,
+        participants,
+        userList,
+        filteredUsers,
+        addParticipant,
+        removeParticipant,
+        saveParticipants
+    };
+}

frontend/src/utils/labelUtils.js

@@ -0,0 +1,38 @@
+export const labelColorPalette= [
+    {
+        id: 0,
+        backgroundColor: "rgba(234, 179, 8, 0.1)",
+        color: "rgba(234, 179, 8)"
+    },
+    {
+        id: 1,
+        backgroundColor: 'rgba(236, 72, 153, 0.1)',
+        color: 'rgba(236, 72, 153)'
+    },
+    {
+        id: 2,
+        backgroundColor: 'rgba(168, 85, 247, 0.1)',
+        color: 'rgba(168, 85, 247)'
+    },
+    {
+        id: 3,
+        backgroundColor: 'rgba(8, 234, 179, 0.1)',
+        color: 'rgba(8, 234, 179)'
+    },
+    {
+        id: 4,
+        backgroundColor: 'rgba(34, 197, 94, 0.1)',
+        color: 'rgba(34, 197, 94)'
+    },
+    {
+        id: 5,
+        backgroundColor: "rgba(8,181,234,0.1)",
+        color: "rgba(8,181,234)"
+    },
+];
+
+function getLabelColors() {
+    return labelColorPalette.map(color => color.color);
+}
+
+export { getLabelColors };