From 5667c3edf8cad557be2f3befa10cf80d96737ece Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Tue, 8 Apr 2025 18:45:27 +0900
Subject: [PATCH] =?UTF-8?q?=ED=94=84=EB=A1=9C=EC=A0=9D=ED=8A=B8=20?=
 =?UTF-8?q?=EC=84=A4=EB=AA=85=20=EC=97=86=EC=9D=84=EB=95=8C=20=ED=95=98?=
 =?UTF-8?q?=EC=9D=B4=ED=94=88=20=EB=B0=8F=20=EC=82=AD=EC=A0=9C=20=EC=BB=A8?=
 =?UTF-8?q?=ED=8E=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/list/ProjectCard.vue | 114 +++++++++++++++++-----------
 1 file changed, 68 insertions(+), 46 deletions(-)

diff --git a/src/components/list/ProjectCard.vue b/src/components/list/ProjectCard.vue
index 5cdd8e4..7fae777 100644
--- a/src/components/list/ProjectCard.vue
+++ b/src/components/list/ProjectCard.vue
@@ -3,7 +3,7 @@
         <div class="row g-0">
             <div class="card-body">
                 <!-- 제목 -->
-                <div class="d-flex justify-content-between ">
+                <div class="d-flex justify-content-between">
                     <h5 class="card-title fw-bold">
                         {{ title }}
                     </h5>
@@ -12,42 +12,62 @@
                         <DeleteBtn v-if="isProjectCreator" @click.stop="handleDelete" class="ms-1"/>
                     </div>
                 </div>
+
                 <!-- 날짜 -->
-                <div class="d-flex flex-sm-row align-items-center pb-2">
-                    <i class="bx bx-calendar"></i>
-                    <div class="ms-2">날짜</div>
-                    <div class="ms-12">{{ strdate }} ~ {{ enddate }}</div>
-                </div>
-                <!-- 참여자 -->
-                <div class="d-flex flex-sm-row align-items-center pb-2">
-                    <i class="bx bxs-user"></i>
-                    <div class="ms-2">참여자</div>
-                    <UserList ref="userListRef" :projctSeq="projctSeq" :showOnlyActive="true" class="ms-8 mb-0" />
-                </div>
-                <!-- 설명 -->
-                <div class="d-flex flex-sm-row align-items-center pb-2">
-                    <i class="bx bx-detail"></i>
-                    <div class="ms-2">설명</div>
-                    <div class="ms-12">{{ description }}</div>
-                </div>
-                <!-- 주소 -->
-                <div class="d-flex flex-sm-row align-items-center pb-2">
-                    <MapPopover
-                        :address="address"
-                        :is-visible="isMapVisible"
-                        @update-visible="updatePopover"
-                    >
-                        <template #trigger>
-                            <div class="d-flex align-items-center cursor-pointer">
-                                <i class="bx bxs-map"></i>
-                                <div class="ms-2">주소</div>
-                            </div>
-                        </template>
-                    </MapPopover>
-                    <div class="ms-12">
-                        {{ address }} {{ addressdtail }}
+                <div class="row align-items-center pb-2">
+                    <div class="col-3 col-md-2 d-flex align-items-center">
+                        <i class="bx bx-calendar"></i>
+                        <div class="ms-2">날짜</div>
+                    </div>
+                    <div class="col-9 col-md-10">
+                        {{ strdate }} ~ {{ enddate }}
+                    </div>
+                </div>
+
+                <!-- 참여자 -->
+                <div class="row align-items-center pb-2">
+                    <div class="col-3 col-md-2 d-flex align-items-center">
+                        <i class="bx bxs-user"></i>
+                        <div class="ms-2">참여자</div>
+                    </div>
+                    <div class="col-9 col-md-10">
+                        <UserList ref="userListRef" :projctSeq="projctSeq" :showOnlyActive="true" class="mb-0" />
+                    </div>
+                </div>
+
+                <!-- 설명 -->
+                <div class="row align-items-center pb-2">
+                    <div class="col-3 col-md-2 d-flex align-items-center">
+                        <i class="bx bx-detail"></i>
+                        <div class="ms-2">설명</div>
+                    </div>
+                    <div class="col-9 col-md-10">
+                        {{ description || '-' }}
+                    </div>
+                </div>
+
+                <!-- 주소 -->
+                <div class="row align-items-center pb-2">
+                    <div class="col-3 col-md-2 d-flex align-items-center">
+                        <MapPopover
+                            :address="address"
+                            :is-visible="isMapVisible"
+                            @update-visible="updatePopover"
+                        >
+                            <template #trigger>
+                                <div class="d-flex align-items-center cursor-pointer">
+                                    <i class="bx bxs-map"></i>
+                                    <div class="ms-2">주소</div>
+                                </div>
+                            </template>
+                        </MapPopover>
+                    </div>
+                    <div class="col-9 col-md-10 d-flex justify-content-between align-items-center">
+                        <div>{{ address }} {{ addressdtail }}</div>
+                        <button type="button" class="btn text-white" :style="`background-color: ${projctColor} !important;`" @click.stop="openModal">
+                            <i class='bx bx-child'></i>
+                        </button>
                     </div>
-                    <button type="button" class="btn ms-auto text-white" :style="`background-color: ${projctColor} !important;`" @click.stop="openModal"><i class='bx bx-child'></i></button>
                 </div>
             </div>
         </div>
@@ -521,17 +541,19 @@ const handleUpdate = async () => {
 
 // 프로젝트 삭제
 const handleDelete = () => {
-    $api.patch('project/delete', {
-        projctSeq: props.projctSeq,
-        projctCol: props.projctCol,
-    })
-    .then(res => {
-        if (res.status === 200) {
-            toastStore.onToast('삭제가 완료되었습니다.', 's');
-            projectStore.getProjectList();
-            projectStore.getMemberProjects();
-        }
-    })
+    if (confirm('프로젝트를 삭제하시겠습니까?')) {
+        $api.patch('project/delete', {
+            projctSeq: props.projctSeq,
+            projctCol: props.projctCol,
+        })
+        .then(res => {
+            if (res.status === 200) {
+                toastStore.onToast('프로젝트가 삭제되었습니다.', 's');
+                projectStore.getProjectList();
+                projectStore.getMemberProjects();
+            }
+        })
+    }
 };
 
 // 컴포넌트 마운트 시 실행