메인 목록 썸네일 높이 안정화
This commit is contained in:
@@ -55,7 +55,7 @@ defineProps({
|
||||
:class="aspectClass"
|
||||
:aria-label="title"
|
||||
>
|
||||
<span class="post-card-media__placeholder-text line-clamp-4">{{ title }}</span>
|
||||
<span class="post-card-media__placeholder-text max-w-full break-words line-clamp-3 sm:line-clamp-4">{{ title }}</span>
|
||||
</span>
|
||||
</figure>
|
||||
</NuxtLink>
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
# 업데이트 요약
|
||||
|
||||
## v1.5.77
|
||||
|
||||
- 메인 화면 Latest 목록에서 긴 설명 때문에 메타 정보가 잘리는 문제를 줄였다.
|
||||
|
||||
## v1.5.76
|
||||
|
||||
- 관리자 사이트 설정 좌측 메뉴에 아이콘이 없던 항목에 아이콘을 추가했다.
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# 배포 가이드
|
||||
|
||||
> 로컬 기준 v1.5.75에서 `npm run lint`, `npm run build` 검증을 통과했다. NAS 실제 컨테이너 기동과 도메인/프록시 접속 검증은 운영 배포 단계에서 진행한다.
|
||||
> 로컬 기준 v1.5.77에서 `npm run lint`, `npm run build` 검증을 통과했다. NAS 실제 컨테이너 기동과 도메인/프록시 접속 검증은 운영 배포 단계에서 진행한다.
|
||||
|
||||
## 빌드 유형
|
||||
|
||||
@@ -16,6 +16,13 @@
|
||||
|
||||
## 로컬 개발
|
||||
|
||||
### v1.5.77 참고
|
||||
|
||||
- 추가 DB 마이그레이션은 없다.
|
||||
- 메인 화면 Latest compact/list 목록에서 긴 요약이 최대 2줄로 표시되고 발행일·댓글 메타가 잘리지 않는지 확인한다.
|
||||
- 모바일 메인 화면 Latest compact 목록에서 썸네일이 80px 정사각형으로 표시되고, `sm` 이상에서는 기존 비율형 썸네일이 유지되는지 확인한다.
|
||||
- 대표 이미지 없는 placeholder 썸네일의 긴 제목이 모바일에서 썸네일 밖으로 넘치지 않는지 확인한다.
|
||||
|
||||
### v1.5.75 참고
|
||||
|
||||
- 추가 DB 마이그레이션은 없다.
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
# 의사결정 이력
|
||||
|
||||
## 2026-06-08 v1.5.77 — Latest 목록은 기존 썸네일 레이아웃을 유지하며 메타 잘림을 줄인다
|
||||
|
||||
메인 Latest 목록은 빠르게 훑는 영역이므로 설명이 길어질 때 메타 정보가 잘려 보이면 스캔성이 떨어진다. 썸네일 레이아웃을 바꾸면 기존 compact 보기의 균형이 깨질 수 있으므로 썸네일 구조는 유지하고, 요약 영역이 메타 행을 밀어내지 않도록 최소 범위에서 조정한다.
|
||||
|
||||
## 2026-06-05 v1.5.75 — 작성 통계는 광고 기준과 같은 문자 기준을 보여준다
|
||||
|
||||
게시물 인아티클 광고가 본문 길이를 기준으로 노출되므로 작성 화면에서도 길이 감각을 바로 확인할 수 있어야 한다. 작성 흐름을 방해하지 않도록 본문 위에 떠 있는 표시 대신 오른쪽 설정 패널 하단에 작은 통계 영역을 두고, 문자 수는 광고 기준과 같은 공백 제외 값을 우선 표시한다. 단어 수와 읽기 시간, 블록·이미지 수는 글의 분량과 구성을 빠르게 파악하는 보조 정보로 함께 둔다.
|
||||
|
||||
@@ -81,7 +81,7 @@
|
||||
| components/site/MainColumn.vue | 메인 화면 중앙, `lg:max-w-[720px]`로 본문 상한 |
|
||||
| components/site/HomeHero.vue | 홈 상단 720px 커버 배너, 라이트·다크 테마별 이미지 교체, 왼쪽 하단 오버레이 제목·본문 |
|
||||
| components/site/PostCard.vue | 목록의 게시물 카드, 카드 hover 인터랙션, 태그는 있을 때만 메타에 표시 |
|
||||
| components/site/PostCardMedia.vue | 게시물 카드 썸네일(대표 이미지 없으면 제목 텍스트 플레이스홀더) |
|
||||
| components/site/PostCardMedia.vue | 게시물 카드 썸네일(대표 이미지 없으면 모바일 3줄·`sm` 이상 4줄 제목 placeholder 표시) |
|
||||
| components/site/TagHeader.vue | 태그 페이지 헤더 |
|
||||
| components/comments/PostComments.vue | 게시물 상세 `#comments` 영역, 회원 댓글/답글(1단) 작성 및 목록 표시, 입력값 기반 등록 버튼 활성화, 작성자 썸네일/좋아요/상대시간 표시 |
|
||||
|
||||
@@ -167,7 +167,7 @@
|
||||
|
||||
| 파일 | 화면 |
|
||||
|------|------|
|
||||
| pages/index.vue | 홈, `site_settings` 커버가 있을 때만 라이트·다크 이미지 지원 `HomeHero`, Featured/Latest, Latest 피드 Compact 기본값·List·Cards 보기, Latest 메타는 태그가 있을 때만 태그 배지 표시, Featured는 추천 글이 있을 때만 표시하며 이미지 없는 추천 글은 제목 placeholder 썸네일과 모바일 터치 가로 스크롤·스냅, 끝에서 화살표 비활성 |
|
||||
| pages/index.vue | 홈, `site_settings` 커버가 있을 때만 라이트·다크 이미지 지원 `HomeHero`, Featured/Latest, Latest 피드 Compact 기본값·List·Cards 보기, Compact 모바일 썸네일 80px 정사각형·Compact/List 설명 2줄 제한, Latest 메타는 태그가 있을 때만 태그 배지 표시, Featured는 추천 글이 있을 때만 표시하며 이미지 없는 추천 글은 제목 placeholder 썸네일과 모바일 터치 가로 스크롤·스냅, 끝에서 화살표 비활성 |
|
||||
| pages/posts/index.vue | 게시물 전체 목록, 태그는 있을 때만 카드 메타에 표시 |
|
||||
| pages/posts/[slug].vue | `/post/:slug` 리다이렉트 |
|
||||
| pages/post/[slug].vue | 블로그 글 상세, 첫 태그가 있을 때만 메타 행에 태그 링크, H1~H3 본문 제목을 오른쪽 TOC 상태로 제공, 로그인 회원이 글쓴이(`author_id`)이면 공유 버튼 옆 새 탭 편집 링크 표시, 게시물 SEO/OG 메타 출력(요약 없으면 본문 fallback), 공유 모달(X/Bluesky/Facebook/LinkedIn/Email/링크복사), 회원 댓글 섹션 |
|
||||
|
||||
@@ -62,7 +62,7 @@
|
||||
### 홈 Latest 피드
|
||||
|
||||
- 기본 보기 방식은 `compact`이며, Default 선택 시에도 `compact`로 복원한다.
|
||||
- `compact`는 썸네일을 포함한 짧은 행 형태, `list`는 텍스트 중심 목록 형태, `cards`는 카드 그리드 형태로 표시한다.
|
||||
- `compact`는 썸네일을 포함한 짧은 행 형태이며 설명은 최대 2줄로 제한한다. 모바일 compact 썸네일은 오른쪽 제목·요약·메타 높이에 맞춘 80px 정사각형으로 표시하고, `sm` 이상에서는 기존 비율형 썸네일을 사용한다. 대표 이미지가 없는 placeholder 제목은 모바일 3줄, `sm` 이상 4줄로 제한하며 긴 단어는 썸네일 안에서 줄바꿈한다. `list`는 텍스트 중심 목록 형태로 설명은 최대 2줄, `cards`는 카드 그리드 형태로 표시한다.
|
||||
- Latest 섹션은 게시물이 적어도 보기 방식 선택 메뉴가 아래쪽에서 잘리지 않도록 최소 높이를 둔다.
|
||||
- 사이트 설정 Ads의 메인 피드 광고 코드가 있으면 Featured 영역과 Latest 목록 사이에 광고 슬롯을 표시한다. 메인 인피드 광고 코드가 있으면 Latest 게시물 목록 사이 한 곳에 브라우저 렌더 시점 기준으로 무작위 삽입한다. 비어 있으면 슬롯 자체를 렌더링하지 않는다.
|
||||
|
||||
|
||||
@@ -1,5 +1,12 @@
|
||||
# 업데이트 이력
|
||||
|
||||
## v1.5.77
|
||||
|
||||
- 메인 화면 Latest 목록: 기존 썸네일 레이아웃은 유지하고, 요약 영역이 메타 정보를 밀어내지 않도록 수정.
|
||||
- 메인 화면 Latest compact 모바일: 썸네일을 본문 정보 높이에 맞춘 80px 정사각형으로 표시하도록 수정.
|
||||
- 메인 화면 Latest placeholder 썸네일: 모바일에서 제목을 3줄로 제한하고 긴 단어가 썸네일 밖으로 넘치지 않도록 수정.
|
||||
- 메인 화면 Latest list 보기: 긴 설명이 과하게 늘어나지 않도록 최대 2줄로 조정.
|
||||
|
||||
## v1.5.76
|
||||
|
||||
- 관리자 사이트 설정: 좌측 내비 아이콘을 브랜드·사이트 정보·POST 설정·사이트 코드·Ads·SNS 정보·게시물보내기·가져오기 항목에 추가.
|
||||
|
||||
4
package-lock.json
generated
4
package-lock.json
generated
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "sori.studio",
|
||||
"version": "1.5.75",
|
||||
"version": "1.5.77",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "sori.studio",
|
||||
"version": "1.5.75",
|
||||
"version": "1.5.77",
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"@nuxtjs/tailwindcss": "^6.14.0",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "sori.studio",
|
||||
"version": "1.5.76",
|
||||
"version": "1.5.77",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"imports": {
|
||||
|
||||
@@ -89,7 +89,7 @@ const getPostFeedArticleClass = (style) => {
|
||||
*/
|
||||
const getPostFeedExcerptClass = (style) => {
|
||||
if (style === 'list') {
|
||||
return 'post-summary-clamp post-summary-clamp--three'
|
||||
return 'post-summary-clamp post-summary-clamp--two'
|
||||
}
|
||||
|
||||
return 'post-summary-clamp post-summary-clamp--two'
|
||||
@@ -505,7 +505,7 @@ watch([latestPosts, hasHomeInfeedAd], () => {
|
||||
:to="post.to"
|
||||
:title="post.title"
|
||||
:featured-image="post.featuredImage"
|
||||
:link-class="isPostFeedCards ? 'post-feed__media post-feed__media--cards mb-3 block aspect-video w-full' : 'post-feed__media post-feed__media--list relative flex-1 aspect-square min-w-16 sm:aspect-video'"
|
||||
:link-class="isPostFeedCards ? 'post-feed__media post-feed__media--cards mb-3 block aspect-video w-full' : 'post-feed__media post-feed__media--list relative h-20 w-20 shrink-0 self-start aspect-square sm:h-auto sm:w-auto sm:flex-1 sm:shrink sm:self-auto sm:min-w-16 sm:aspect-video'"
|
||||
:aspect-class="isPostFeedCards ? 'aspect-video' : 'aspect-square sm:aspect-video'"
|
||||
/>
|
||||
|
||||
@@ -527,7 +527,7 @@ watch([latestPosts, hasHomeInfeedAd], () => {
|
||||
|
||||
<p
|
||||
v-if="post.excerpt"
|
||||
class="flex-1 text-[0.8rem] leading-tight site-muted text-[#6E6661]"
|
||||
class="text-[0.8rem] leading-tight site-muted text-[#6E6661]"
|
||||
:class="getPostFeedExcerptClass(postFeedStyle)"
|
||||
>
|
||||
{{ post.excerpt }}
|
||||
|
||||
Reference in New Issue
Block a user