From 0bf6b99189f4725a6f288e7de68fd1db24507485 Mon Sep 17 00:00:00 2001
From: nevermoregb <nevermoregb@local-host.co.kr>
Date: Tue, 1 Apr 2025 15:24:54 +0900
Subject: [PATCH] 1

---
 src/common/common.js                   |  2 +
 src/components/main/MainEventBoard.vue | 21 +++++++++
 src/components/main/MainEventList.vue  | 63 ++++++++++++++++----------
 3 files changed, 61 insertions(+), 25 deletions(-)
 create mode 100644 src/components/main/MainEventBoard.vue

diff --git a/src/common/common.js b/src/common/common.js
index b4753dc..428fd71 100644
--- a/src/common/common.js
+++ b/src/common/common.js
@@ -65,6 +65,8 @@ const common = {
                 callback = `${year}-${month}-${day}`;
             } else if (type == 'MD') {
                 callback = `${month}-${day}`;
+            } else if (type == 'T') {
+                callback = `${hours}:${minutes}`;
             } else {
                 callback = `${year}-${month}-${day} ${hours}:${minutes}`;
             }
diff --git a/src/components/main/MainEventBoard.vue b/src/components/main/MainEventBoard.vue
new file mode 100644
index 0000000..cb9a245
--- /dev/null
+++ b/src/components/main/MainEventBoard.vue
@@ -0,0 +1,21 @@
+<template>
+    <div class="ms-1">
+        <span class="d-flex align-items-center g-2"><i class="bx bx-map"></i>{{ place }}</span>
+        <span class="d-flex align-items-center g-2"><i class="bx bx-time-five"></i> {{ $common.dateFormatter(time, 'T') }}</span>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: {
+            place: {
+                type: String,
+                required: true,
+            },
+            time: {
+                type: String,
+                required: true,
+            },
+        },
+    };
+</script>
diff --git a/src/components/main/MainEventList.vue b/src/components/main/MainEventList.vue
index 05fcbfe..ef612b7 100644
--- a/src/components/main/MainEventList.vue
+++ b/src/components/main/MainEventList.vue
@@ -22,44 +22,26 @@
                             />
                         </div>
                     </div>
-                    <div class="col-9 mx-0 px-0">
+                    <div v-if="category.CMNCODVAL === 300201 || category.CMNCODVAL === 300202" class="col-9 mx-0 px-0">
                         <template v-if="category.CMNCODVAL === 300201">
                             <MainMemberProfile :members="birthdayList" :baseUrl="baseUrl" />
                         </template>
                         <template v-if="category.CMNCODVAL === 300202">
                             <MainMemberProfile :members="vacationList" :baseUrl="baseUrl" />
                         </template>
+                    </div>
+                    <div v-else class="col-9 mx-0 px-0 d-flex flex-column align-items-center">
                         <template v-if="category.CMNCODVAL === 300203">
-                            <div>
-                                {{ birthdayPartyList[0].LOCEVTPLC }}
-                            </div>
-                            <div>
-                                {{ $common.dateFormatter(birthdayPartyList[0].LOCEVTTME) }}
-                            </div>
+                            <MainEventBoard :place="birthdayPartyList[0].LOCEVTPLC" :time="birthdayPartyList[0].LOCEVTTME" />
                         </template>
                         <template v-if="category.CMNCODVAL === 300204">
-                            <div>
-                                {{ dinnerList[0].LOCEVTPLC }}
-                            </div>
-                            <div>
-                                {{ $common.dateFormatter(dinnerList[0].LOCEVTTME) }}
-                            </div>
+                            <MainEventBoard :place="dinnerList[0].LOCEVTPLC" :time="dinnerList[0].LOCEVTTME" />
                         </template>
                         <template v-if="category.CMNCODVAL === 300205">
-                            <div>
-                                {{ teaTimeList[0].LOCEVTPLC }}
-                            </div>
-                            <div>
-                                {{ $common.dateFormatter(teaTimeList[0].LOCEVTTME) }}
-                            </div>
+                            <MainEventBoard :place="teaTimeList[0].LOCEVTPLC" :time="teaTimeList[0].LOCEVTTME" />
                         </template>
                         <template v-if="category.CMNCODVAL === 300206">
-                            <div>
-                                {{ workShopList[0].LOCEVTPLC }}
-                            </div>
-                            <div>
-                                {{ $common.dateFormatter(workShopList[0].LOCEVTTME) }}
-                            </div>
+                            <MainEventBoard :place="workShopList[0].LOCEVTPLC" :time="workShopList[0].LOCEVTTME" />
                         </template>
                     </div>
                 </div>
@@ -71,6 +53,7 @@
 <script setup>
     import { defineEmits } from 'vue';
     import MainMemberProfile from '@c/main/MainMemberProfile.vue';
+    import MainEventBoard from '@c/main/MainEventBoard.vue';
 
     const props = defineProps({
         project: {
@@ -120,3 +103,33 @@
         },
     });
 </script>
+
+<style scoped>
+    .event-board {
+        width: 100%;
+        padding: 0.5rem;
+    }
+
+    .event-info {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+
+    .info-item {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
+    .label {
+        font-weight: 500;
+        color: #666;
+        min-width: 3rem;
+    }
+
+    .content {
+        color: #333;
+        word-break: break-all;
+    }
+</style>