From 50e3f31bfc9f2aaf45aa97cd3673a41952c4d338 Mon Sep 17 00:00:00 2001
From: usn757 <usn757@gmail.com>
Date: Sun, 8 Jun 2025 00:50:30 +0900
Subject: [PATCH] =?UTF-8?q?[fix]=20=EC=B9=B4=EC=B9=B4=EC=98=A4=EB=A7=B5=20?=
 =?UTF-8?q?=EC=A0=95=EB=B3=B4=EC=B0=BD=20UI/UX=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

카카오맵 정보창(InfoWindow)의 레이아웃 깨짐 문제를 해결하고, 사용자 경험을 향상시키기 위해 전체적인 디자인을 개선했습니다.

- **정보창 너비 확장**: 콘텐츠 오버플로우를 방지하고 안정적인 레이아웃을 제공하기 위해 정보창의 최소 너비를 300px로 확장했습니다.
- **콘텐츠 중앙 정렬**: Flexbox 유틸리티(`d-flex`, `justify-content-center`)를 사용하여 버튼을 수평 중앙에 배치하고, 장소명과 주소 또한 중앙 정렬하여 시각적 균형을 맞췄습니다.
- **버튼 스타일 및 간격 미세 조정**:
  - 버튼의 padding 값을 조정하여 시인성과 클릭 편의성을 높였습니다.
  - 버튼 상하(mt, mb) 및 좌우(me) 마진 값을 여러 번 미세 조정하여 최적의 간격을 찾았습니다.
- **수정 파일**:
  - `content_detail.js`: 정보창의 동적 HTML 구조 변경
  - `content_detail.html`: 정보창 내부 요소에 대한 CSS 스타일 재정의
---
 src/main/resources/static/js/content_detail.js   | 16 ++++++++--------
 src/main/resources/templates/content_detail.html |  6 ++++++
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/main/resources/static/js/content_detail.js b/src/main/resources/static/js/content_detail.js
index 3c5b5c1..0022dfb 100644
--- a/src/main/resources/static/js/content_detail.js
+++ b/src/main/resources/static/js/content_detail.js
@@ -683,14 +683,14 @@ function initKakaoMapOnTab(pane, mapData) {
 
         // 인포윈도우 내용 구성
         const iwContent = `
-            <div class="kakao-infowindow p-2 shadow-sm rounded" style="min-width: 200px; font-size: 0.85rem;">
-                <strong class="d-block mb-1" style="font-size: 1rem;">${mapData.title || '선택 위치'}</strong>
-                <span class="text-muted">${mapData.address || '주소 정보 없음'}</span>
-                <div class="mt-2">
-                    <a href="https://map.kakao.com/link/to/${mapData.title || '선택 위치'},${mapData.mapY},${mapData.mapX}" target="_blank" class="btn btn-sm btn-primary me-1">길찾기</a>
-                    <a href="https://map.kakao.com/link/map/${mapData.title || '선택 위치'},${mapData.mapY},${mapData.mapX}" target="_blank" class="btn btn-sm btn-secondary">큰 지도</a>
-                </div>
-            </div>`;
+    <div class="kakao-infowindow p-2 shadow-sm rounded" style="min-width: 300px;">
+        <strong class="d-block mb-1 text-center" style="font-size: 1rem;">${mapData.title || '선택 위치'}</strong>
+        <span class="text-muted d-block text-center" style="font-size: 0.85rem;">${mapData.address || '주소 정보 없음'}</span>
+        <div class="mt-2 mb-2 d-flex justify-content-center">
+            <a href="https://map.kakao.com/link/to/${mapData.title || '선택 위치'},${mapData.mapY},${mapData.mapX}" target="_blank" class="btn btn-sm btn-primary me-3">길찾기</a>
+            <a href="https://map.kakao.com/link/map/${mapData.title || '선택 위치'},${mapData.mapY},${mapData.mapX}" target="_blank" class="btn btn-sm btn-secondary">큰 지도</a>
+        </div>
+    </div>`;
         const infowindow = new kakao.maps.InfoWindow({ content: iwContent, removable: true });
         infowindow.open(kakaoMapInstance, marker); // 마커 위에 인포윈도우 표시
 
diff --git a/src/main/resources/templates/content_detail.html b/src/main/resources/templates/content_detail.html
index 489f556..0c5daf2 100644
--- a/src/main/resources/templates/content_detail.html
+++ b/src/main/resources/templates/content_detail.html
@@ -49,6 +49,12 @@
                 transform: scale(1.05); /* 마우스를 올리면 약간 커지는 효과 */
                 box-shadow: var(--box-shadow-cute);
             }
+
+            .kakao-infowindow .btn {
+                padding: 6px 14px; /* 이전(4px 8px)보다 여백을 늘려 버튼을 더 키웁니다. */
+                font-size: 0.85rem;  /* 폰트 크기를 약간 키웁니다. */
+                border-radius: var(--border-radius-sm);
+            }
         </style>
     </th:block>
 </head>