Merge pull request #68 from usn757/main

usn757 · web-flow · commit b84d5a317ef8 · 2025-06-07T23:34:46.000+09:00
[DB] 콘텐츠 상세 페이지 UI 개선 및 썸네일 오류 수정
diff --git a/src/main/resources/static/js/content_detail.js b/src/main/resources/static/js/content_detail.js
@@ -214,12 +214,8 @@ function loadThumbnails(firstImage, firstImage2, additionalImages) {
         addThumbnail(firstImage, (contentDetail.title || "대표") + " 이미지", firstImage, true);
     }
 
-    // 2. 보조 대표 이미지(firstImage2) 추가 (firstImage와 다르고 유효한 경우)
-    if (firstImage2 && firstImage2 !== firstImage) {
-        addThumbnail(firstImage2, (contentDetail.title || "추가") + " 이미지 1", firstImage2);
-    }
 
-    // 3. 추가 이미지 목록(additionalImagesData) 처리
+    // 2. 추가 이미지 목록(additionalImagesData) 처리
     if (additionalImages && additionalImages.length > 0) {
         additionalImages.forEach((image, index) => {
             const imgSrc = image.smallImageUrl || image.originImgUrl; // 썸네일 URL 우선, 없으면 원본 URL 사용
diff --git a/src/main/resources/templates/content_detail.html b/src/main/resources/templates/content_detail.html
@@ -10,11 +10,47 @@
 
     <th:block layout:fragment="css">
         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
-        <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet"/>
         <link rel="stylesheet" th:href="@{/css/bootstrap-overrides.css}"/>
-        <link rel="stylesheet" th:href="@{/css/search.css}"/>
-    </th:block>
 
+        <style>
+            .nav-tabs {
+                --bs-nav-tabs-border-color: var(--input-border-color);
+                --bs-nav-tabs-link-hover-border-color: var(--input-border-color) var(--input-border-color) var(--point-color);
+                --bs-nav-tabs-link-active-color: var(--accent-color);
+                --bs-nav-tabs-link-active-bg: var(--card-bg-color);
+                --bs-nav-tabs-link-active-border-color: var(--input-border-color) var(--input-border-color) var(--card-bg-color);
+            }
+            .tab-content > .tab-pane {
+                background-color: var(--card-bg-color); /* common.css 변수 */
+                border: 1px solid var(--input-border-color); /* common.css 변수 */
+                border-top: none;
+                padding: 1.5rem;
+                border-radius: 0 0 var(--border-radius-md) var(--border-radius-md); /* common.css 변수 */
+                box-shadow: var(--box-shadow-light); /* common.css 변수 */
+            }
+
+            .nav-link:hover, .nav-link:focus {
+                color: var(--point-color);
+            }
+
+            .nav-tabs .nav-link.active {
+                color: var(--accent-color); /* 활성 탭 텍스트 색상 명확히 */
+                font-weight: bold;
+            }
+            #thumbnailContainer img {
+                height: 80px; /* 썸네일 이미지의 높이를 80px로 강제합니다. */
+                width: auto; /* 너비는 높이에 맞춰 자동으로 조절됩니다. */
+                border-radius: var(--border-radius-sm); /* 둥근 모서리 적용 */
+                cursor: pointer;
+                transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+            }
+
+            #thumbnailContainer img:hover {
+                transform: scale(1.05); /* 마우스를 올리면 약간 커지는 효과 */
+                box-shadow: var(--box-shadow-cute);
+            }
+        </style>
+    </th:block>
 </head>
 
 <body>
