Merge branch 'main' into mypage

src/components/main/EventModal.vue

@@ -27,6 +27,7 @@
                     style="height: 25px; font-size: 12px"
                     placeholder="장소"
                     v-model="eventPlace"
+                    maxlength="20"
                 />
             </div>
             <div class="mb-2">

src/components/main/MemberManagement.vue

@@ -1,12 +1,14 @@
 <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">
+    <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">
-                    <div v-for="member in memberList" :key="member.MEMBERSEQ" class="row card-body">
+                    <div class="g-2 card col-12 col-lg-6">
+                        <div class="row card-body">
                             <div class="col-2">
                                 <img
                                     :src="`upload/img/profile/`"
@@ -36,7 +38,12 @@
                             </div>
                             <div class="col-3">
                                 <div class="align-items-center">
-                                <label class="switch"><input type="checkbox" checked="" /><span class="slider round"></span></label>
+                                    <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>