my work temp save

src/components/main/MainCalendar.vue

@@ -2,7 +2,7 @@
     <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">
+                <div class="col-3 border-end text-center" id="app-calendar-sidebar">
                     <div class="card-body">
                         <img
                             v-if="user"
@@ -23,7 +23,9 @@
                             ref="workTimeComponentRef"
                         />
 
-                        <CommuterProjectList
+                        <MainEventList :categoryList="categoryList" :baseUrl="baseUrl" />
+                        <!-- <CommuterProjectList
+                            :categoryList="categoryList"
                             :project="project"
                             :commuters="commuters"
                             :baseUrl="baseUrl"
@@ -31,7 +33,7 @@
                             :selectedProject="selectedProject"
                             :checkedInProject="checkedInProject"
                             @drop="handleProjectDrop"
-                        />
+                        /> -->
                     </div>
                 </div>
 
@@ -96,9 +98,10 @@
     import { useProjectStore } from '@/stores/useProjectStore';
     import CommuterBtn from '@c/commuters/CommuterBtn.vue';
     import CommuterProjectList from '@c/commuters/CommuterProjectList.vue';
+    import MainEventList from '@c/main/MainEventList.vue';
     import BackBtn from '@c/button/BackBtn.vue';
 
-    const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
+    const baseUrl = import.meta.env.VITE_DOMAIN;
     const user = ref({});
     const project = ref({});
     const userStore = useUserInfoStore();
@@ -165,6 +168,13 @@
         }
     };
 
+    // 이벤트 카테고리 데이터 로딩
+    const categoryList = ref([]);
+    const fetchCategoryList = async () => {
+        const { data } = await $api.get('main/category');
+        if (data) categoryList.value = [...data.data.filter(categoryInfo => categoryInfo.CMNCODODR != 0)];
+    };
+
     // 캘린더 데이터 가져오기
     const fetchData = async () => {
         // FullCalendar API 인스턴스 가져오기
@@ -419,5 +429,7 @@
             selectedProject.value = storedProject.PROJCTSEQ;
             checkedInProject.value = storedProject;
         }
+
+        await fetchCategoryList();
     });
 </script>

src/components/main/MainEventList.vue

@@ -0,0 +1,117 @@
+<template>
+    <div class="">
+        <template v-for="category in categoryList" :key="category.CMNCODVAL">
+            <div v-if="true" class="border border-2 mt-3 card p-2">
+                <div class="row">
+                    <div class="col-3 mx-0 px-0">
+                        <div class="ratio ratio-1x1">
+                            <img
+                                :src="`${baseUrl}img/main-category-img/main-${category.CMNCODVAL}.png`"
+                                :alt="`${category.CMNCODNAM}`"
+                                @error="$event.target.src = '/img/icons/icon.png'"
+                            />
+                        </div>
+                    </div>
+                    <div class="col-9 d-flex flex-wrap mx-0 px-0">
+                        <!-- <div v-for="commuter in commuters" :key="commuter.COMMUTCMT" class="col-4"> -->
+
+                        <div class="ratio ratio-1x1">
+                            <img
+                                :src="`${baseUrl}upload/img/profile/123123`"
+                                alt="User Profile"
+                                class="rounded-circle"
+                                @error="$event.target.src = '/img/icons/icon.png'"
+                            />
+                        </div>
+
+                        <div class="ratio ratio-1x1">
+                            <img
+                                :src="`${baseUrl}upload/img/profile/123123`"
+                                alt="User Profile"
+                                class="rounded-circle"
+                                @error="$event.target.src = '/img/icons/icon.png'"
+                            />
+                        </div>
+
+                        <div class="ratio ratio-1x1">
+                            <img
+                                :src="`${baseUrl}upload/img/profile/123123`"
+                                alt="User Profile"
+                                class="rounded-circle"
+                                @error="$event.target.src = '/img/icons/icon.png'"
+                            />
+                        </div>
+
+                        <div class="ratio ratio-1x1">
+                            <img
+                                :src="`${baseUrl}upload/img/profile/123123`"
+                                alt="User Profile"
+                                class="rounded-circle"
+                                @error="$event.target.src = '/img/icons/icon.png'"
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </template>
+    </div>
+</template>
+
+<script setup>
+    import { defineProps, defineEmits } from 'vue';
+
+    const props = defineProps({
+        project: {
+            type: Object,
+            required: false,
+        },
+        categoryList: {
+            type: Array,
+        },
+        commuters: {
+            type: Array,
+            required: false,
+        },
+        baseUrl: {
+            type: String,
+            required: false,
+        },
+        user: {
+            type: Object,
+            required: false,
+        },
+        selectedProject: {
+            type: Number,
+            default: null,
+        },
+        checkedInProject: {
+            type: Object,
+            default: null,
+        },
+    });
+
+    const emit = defineEmits(['drop', 'update:selectedProject', 'update:checkedInProject']);
+
+    // 현재 사용자 확인
+    const isCurrentUser = commuter => {
+        return props.user && commuter && commuter.MEMBERSEQ === props.user.id;
+    };
+
+    // 드래그 시작 이벤트 핸들러
+    const dragStart = (event, project) => {
+        // 드래그 데이터 설정
+        event.dataTransfer.setData('application/json', JSON.stringify(project));
+        event.dataTransfer.effectAllowed = 'copy';
+    };
+
+    // 드래그 오버 드롭 허용
+    const allowDrop = event => {
+        event.preventDefault();
+    };
+
+    // 드롭
+    const handleDrop = (event, targetProject) => {
+        event.preventDefault();
+        emit('drop', { event, targetProject });
+    };
+</script>