From 666c081813ac46f0c4504aebaeda9132d9144788 Mon Sep 17 00:00:00 2001
From: nevermoregb <nevermoregb@local-host.co.kr>
Date: Mon, 31 Mar 2025 14:00:41 +0900
Subject: [PATCH] =?UTF-8?q?=EC=B9=B4=EB=93=9C=20=ED=81=AC=EA=B8=B0=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/main/MemberManagement.vue | 90 ++++++++++++++----------
 1 file changed, 54 insertions(+), 36 deletions(-)

diff --git a/src/components/main/MemberManagement.vue b/src/components/main/MemberManagement.vue
index a45dcb1..ed9d93e 100644
--- a/src/components/main/MemberManagement.vue
+++ b/src/components/main/MemberManagement.vue
@@ -1,42 +1,49 @@
 <template>
-    <div v-if="memberList?.length" 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 class="row g-4 mt-2">
+        <!-- lg 이상에서는 2개, 그 이하에서는 1개씩 -->
+        <div v-for="member in memberList" :key="member.MEMBERSEQ">
+            <div class="card">
+                <div class="card-body p-3">
+                    <div class="d-flex justify-content-between mb-2">
+                        <h5 class="card-title fw-bold">사원 등록 관리</h5>
+                    </div>
+                    <div class="g-2 card col-12 col-lg-6">
+                        <div 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="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 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="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 class="col-3">
+                                <div class="align-items-center">
+                                    <label class="switch"
+                                        ><input type="checkbox" :checked="checked" @change="handleRegisterMember($event)" /><span
+                                            class="slider round"
+                                        ></span
+                                    ></label>
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -51,13 +58,24 @@
     import $api from '@api';
 
     const memberList = ref([]);
+    const checked = ref(false);
 
     const fetchRegisterMemberList = async () => {
         const { data } = await $api.get('main/registerMemberList');
         if (data?.data) memberList.value = data.data;
     };
 
+    const handleRegisterMember = async e => {
+        console.log(e);
+    };
+
     onMounted(async () => {
         await fetchRegisterMemberList();
     });
 </script>
+
+<style scoped>
+    .card {
+        font-size: 0.9rem;
+    }
+</style>