Skip to content

[DB] 콘텐츠 상세 페이지 UI 개선 및 썸네일 오류 수정 #68

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
usn757 merged 3 commits into from
Jun 7, 2025
Merged

[DB] 콘텐츠 상세 페이지 UI 개선 및 썸네일 오류 수정 #68

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
234fdfc
[fix] thumbnailContainer에서 firstimage2 추가하는 로직 제거
usn757 Jun 7, 2025
aa377fc
[fix] 콘텐츠 상세 페이지의 썸네일 크기 오류 및 탭 스타일 수정
usn757 Jun 7, 2025
78f98c7
Merge remote-tracking branch 'origin/main'
usn757 Jun 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 1 addition & 5 deletions src/main/resources/static/js/content_detail.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 사용
Expand Down
42 changes: 39 additions & 3 deletions src/main/resources/templates/content_detail.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down