From 972fd6ae9654e7c02b727ad53a78b288ca284364 Mon Sep 17 00:00:00 2001
From: nevermoregb <nevermoregb@local-host.co.kr>
Date: Mon, 31 Mar 2025 13:03:45 +0900
Subject: [PATCH] 1303

---
 src/common/common.js                      | 11 ++++
 src/components/main/MainEventCalendar.vue | 78 +++++++++++------------
 src/components/main/MemberManagement.vue  | 63 ++++++++++++++++++
 src/views/MainView.vue                    | 21 +++++-
 4 files changed, 131 insertions(+), 42 deletions(-)
 create mode 100644 src/components/main/MemberManagement.vue

diff --git a/src/common/common.js b/src/common/common.js
index 2d15edf..89a0f7a 100644
--- a/src/common/common.js
+++ b/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 {
diff --git a/src/components/main/MainEventCalendar.vue b/src/components/main/MainEventCalendar.vue
index ba7a195..bc06eb1 100644
--- a/src/components/main/MainEventCalendar.vue
+++ b/src/components/main/MainEventCalendar.vue
@@ -1,47 +1,45 @@
 <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">
-                    <div class="card-body">
-                        <img
-                            v-if="user"
-                            :src="`${baseUrl}upload/img/profile/${user.profile}`"
-                            alt="Profile Image"
-                            class="w-px-50 h-px-50 rounded-circle"
-                            @error="$event.target.src = '/img/icons/icon.png'"
-                        />
-                        <p class="mt-2 fw-bold">
-                            {{ user.name }}
-                        </p>
+    <div class="card app-calendar-wrapper">
+        <div class="row g-0">
+            <div class="col-3 border-end text-center" id="app-calendar-sidebar">
+                <div class="card-body">
+                    <img
+                        v-if="user"
+                        :src="`${baseUrl}upload/img/profile/${user.profile}`"
+                        alt="Profile Image"
+                        class="w-px-50 h-px-50 rounded-circle"
+                        @error="$event.target.src = '/img/icons/icon.png'"
+                    />
+                    <p class="mt-2 fw-bold">
+                        {{ user.name }}
+                    </p>
 
-                        <CommuterBtn :userId="user.id" :checkedInProject="checkedInProject || {}" ref="workTimeComponentRef" />
+                    <CommuterBtn :userId="user.id" :checkedInProject="checkedInProject || {}" ref="workTimeComponentRef" />
 
-                        <MainEventList
-                            :categoryList="categoryList"
-                            :baseUrl="baseUrl"
-                            :birthdayList="birthdayList"
-                            :vacationList="vacationList"
-                            :birthdayPartyList="birthdayPartyList"
-                            :dinnerList="dinnerList"
-                            :teaTimeList="teaTimeList"
-                            :workShopList="workShopList"
-                        />
-                    </div>
+                    <MainEventList
+                        :categoryList="categoryList"
+                        :baseUrl="baseUrl"
+                        :birthdayList="birthdayList"
+                        :vacationList="vacationList"
+                        :birthdayPartyList="birthdayPartyList"
+                        :dinnerList="dinnerList"
+                        :teaTimeList="teaTimeList"
+                        :workShopList="workShopList"
+                    />
                 </div>
+            </div>
 
-                <div class="col app-calendar-content">
-                    <div class="card shadow-none border-0">
-                        <div class="card-body">
-                            <full-calendar
-                                ref="fullCalendarRef"
-                                :events="calendarEvents"
-                                :options="calendarOptions"
-                                defaultView="dayGridMonth"
-                                class="flatpickr-calendar-only"
-                            >
-                            </full-calendar>
-                        </div>
+            <div class="col app-calendar-content">
+                <div class="card shadow-none border-0">
+                    <div class="card-body">
+                        <full-calendar
+                            ref="fullCalendarRef"
+                            :events="calendarEvents"
+                            :options="calendarOptions"
+                            defaultView="dayGridMonth"
+                            class="flatpickr-calendar-only"
+                        >
+                        </full-calendar>
                     </div>
                 </div>
             </div>
@@ -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 });
diff --git a/src/components/main/MemberManagement.vue b/src/components/main/MemberManagement.vue
new file mode 100644
index 0000000..f2be48a
--- /dev/null
+++ b/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>
diff --git a/src/views/MainView.vue b/src/views/MainView.vue
index 1adecbc..8a42f0f 100644
--- a/src/views/MainView.vue
+++ b/src/views/MainView.vue
@@ -1,7 +1,26 @@
 <template>
-    <MainEventCalendar />
+    <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>