1303

src/common/common.js

@@ -188,6 +188,17 @@ const common = {
     showImage(event) {
         return (event.target.style.visibility = 'visible');
     },
+
+    addHyphenToPhoneNumber(phoneNum) {
+        const phoneNumber = phoneNum;
+        const length = phoneNumber.length;
+
+        if (length >= 9) {
+            return phoneNumber.replace(/[^0-9]/g, '').replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`);
+        } else {
+            return phoneNum;
+        }
+    },
 };
 
 export default {

src/components/main/MainEventCalendar.vue

@@ -1,5 +1,4 @@
 <template>
-    <div class="container-xxl flex-grow-1 container-p-y pb-0">
     <div class="card app-calendar-wrapper">
         <div class="row g-0">
             <div class="col-3 border-end text-center" id="app-calendar-sidebar">
@@ -46,7 +45,6 @@
             </div>
         </div>
     </div>
-    </div>
 
     <EventModal
         v-if="showModal"
@@ -90,8 +88,6 @@
     const selectedProject = ref(null);
     const checkedInProject = ref(null);
 
-    const commuters = ref([]);
-
     // 이벤트 모달 관련
     const showModal = ref(false);
     const modalPosition = ref({ x: 0, y: 0 });

src/components/main/MemberManagement.vue

@@ -0,0 +1,63 @@
+<template>
+    <div v-if="memberList" class="card mt-2 mb-3 shadow-sm border">
+        <div class="row g-0">
+            <div class="card-body">
+                <div class="d-flex justify-content-between">
+                    <h5 class="card-title fw-bold">사원 등록 관리</h5>
+                </div>
+                <div class="g-2 card">
+                    <div v-for="member in memberList" :key="member.MEMBERSEQ" class="row card-body">
+                        <div class="col-2">
+                            <img
+                                :src="`upload/img/profile/`"
+                                alt="Profile Image"
+                                class="img-fluid"
+                                @error="$event.target.src = '/img/icons/icon.png'"
+                            />
+                        </div>
+                        <div class="col-7">
+                            <!-- 날짜 -->
+                            <div class="d-flex flex-sm-row align-items-center pb-2">
+                                <div class="">{{ member.MEMBERNAM }}</div>
+                            </div>
+                            <!-- 참여자 -->
+                            <div class="d-flex flex-sm-row align-items-center pb-2">
+                                <i class="bx bxs-envelope"></i>
+                                <div class="ms-2">{{ member.MEMBERIDS }}@local-host.co.kr</div>
+                            </div>
+                            <div class="d-flex flex-sm-row align-items-center pb-2">
+                                <i class="bx bxs-phone"></i>
+                                <div class="ms-2">{{ $common.addHyphenToPhoneNumber(member.MEMBERTEL) }}</div>
+                            </div>
+                            <div class="d-flex flex-sm-row align-items-center pb-2">
+                                <i class="bx bx-calendar"></i>
+                                <div class="ms-2">{{ $common.dateFormatter(member.MEMBERRDT) }}</div>
+                            </div>
+                        </div>
+                        <div class="col-3">
+                            <div class="align-items-center">
+                                <label class="switch"><input type="checkbox" checked="" /><span class="slider round"></span></label>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+    import { inject, onMounted, ref } from 'vue';
+    import $api from '@api';
+
+    const memberList = ref([]);
+
+    const fetchRegisterMemberList = async () => {
+        const { data } = await $api.get('main/registerMemberList');
+        if (data?.data) memberList.value = data.data;
+    };
+
+    onMounted(async () => {
+        await fetchRegisterMemberList();
+    });
+</script>

src/views/MainView.vue

@@ -1,7 +1,26 @@
 <template>
+    <div class="container-xxl flex-grow-1 container-p-y pb-0">
         <MainEventCalendar />
+        <MemberManagement />
+    </div>
 </template>
 
 <script setup>
     import MainEventCalendar from '@/components/main/MainEventCalendar.vue';
+    import MemberManagement from '@/components/main/MemberManagement.vue';
+    import { useUserInfoStore } from '@/stores/useUserInfoStore';
+    import { inject, onMounted, ref } from 'vue';
+    import $api from '@api';
+
+    const userStore = useUserInfoStore();
+    const user = ref();
+
+    const isAdmin = user => {
+        return user.value.role === 'ROLE_ADMIN' ? true : false;
+    };
+
+    onMounted(async () => {
+        await userStore.userInfo();
+        user.value = userStore.user;
+    });
 </script>