페이지 섹션 추천 아이콘 반영

This commit is contained in:
2026-07-01 11:06:36 +09:00
parent 60a0a6a47a
commit ce20ce1d6d
8 changed files with 21 additions and 7 deletions

View File

@@ -1,5 +1,9 @@
# 업데이트 요약
## v1.9.30
- 홈 Pages 진열장의 추천 페이지 표시를 게시물과 같은 SVG 아이콘 배지로 정리했다.
## v1.9.29
- 사이트에서 쓰는 단축키, 슬래시 명령, Markdown 약식 문법을 `docs/shortcuts.md`로 정리했다.

View File

@@ -1,5 +1,9 @@
# 의사결정 이력
## 2026-07-01 v1.9.30 — Pages 추천 표시는 게시물과 같은 아이콘 배지로 맞춘다
홈 Pages 진열장의 추천 상태가 텍스트 `추천` 배지로 표시되면 게시물 카드의 추천 표시와 시각 언어가 달라진다. 추천 상태는 빠르게 인지하는 표시이므로, 게시물과 같은 SVG 아이콘 배지로 통일해 홈 안의 추천 표현을 일관되게 유지한다.
## 2026-07-01 v1.9.28 — HTML 문서 입력은 태그 내부 따옴표를 정규화한다
페이지 HTML 문서 모드는 원문 HTML을 그대로 공개 응답하므로 관리자 입력에 스마트 따옴표가 섞이면 브라우저가 `href`나 `class` 같은 속성을 의도와 다르게 해석할 수 있다. 본문 텍스트의 표현은 건드리지 않고 태그 내부의 따옴표만 저장 전에 정규화해, 붙여넣기 출처에 따른 HTML 파손을 줄인다.

View File

@@ -203,7 +203,7 @@
| 파일 | 화면 |
|------|------|
| pages/index.vue | 홈, `site_settings` 커버가 있을 때만 라이트·다크 이미지 지원 `HomeHero`, Featured/Latest, 사이트 설정 표시개수 기준 Latest·Featured·Pages 데이터 제한, 홈 표시 페이지를 섹션별 도서 진열장형 Pages 선반으로 노출, Featured와 Pages 선반의 독립 이전·다음 버튼 및 문서 레벨 포인터 추적 기반 드래그 슬라이드·스냅(이동 임계값 미만 클릭은 링크 이동, 포인터 캡처는 드래그 확정 뒤 적용), Pages 선반 ResizeObserver 기반 버튼 상태 갱신, Pages 카드 hover 상단 여백 보정, Latest 피드 Compact 기본값·List·Cards 보기, Compact 모바일 썸네일 80px 정사각형·Compact/List 설명 2줄 제한, Latest 메타는 태그가 있을 때만 링크 배지 표시, 카드 오른쪽 아래 화살표는 게시물 상세 링크, Featured는 추천 글이 있을 때만 표시하며 이미지 없는 추천 글은 제목 placeholder 썸네일과 모바일 터치 가로 스크롤·스냅, 끝에서 화살표 비활성 |
| pages/index.vue | 홈, `site_settings` 커버가 있을 때만 라이트·다크 이미지 지원 `HomeHero`, Featured/Latest, 사이트 설정 표시개수 기준 Latest·Featured·Pages 데이터 제한, 홈 표시 페이지를 섹션별 도서 진열장형 Pages 선반으로 노출, Pages 추천 카드는 왼쪽 위 SVG 아이콘 배지 표시, Featured와 Pages 선반의 독립 이전·다음 버튼 및 문서 레벨 포인터 추적 기반 드래그 슬라이드·스냅(이동 임계값 미만 클릭은 링크 이동, 포인터 캡처는 드래그 확정 뒤 적용), Pages 선반 ResizeObserver 기반 버튼 상태 갱신, Pages 카드 hover 상단 여백 보정, Latest 피드 Compact 기본값·List·Cards 보기, Compact 모바일 썸네일 80px 정사각형·Compact/List 설명 2줄 제한, Latest 메타는 태그가 있을 때만 링크 배지 표시, 카드 오른쪽 아래 화살표는 게시물 상세 링크, Featured는 추천 글이 있을 때만 표시하며 이미지 없는 추천 글은 제목 placeholder 썸네일과 모바일 터치 가로 스크롤·스냅, 끝에서 화살표 비활성 |
| pages/posts/index.vue | 게시물 전체 목록, 사이트 설정 Posts 표시개수 기준 서버 페이지네이션, 태그는 있을 때만 카드 메타에 링크로 표시 |
| pages/posts/[slug].vue | `/post/:slug` 리다이렉트 |
| pages/post/[slug].vue | 블로그 글 상세, 첫 태그가 있을 때만 메타 행에 태그 링크, H1~H3 본문 제목을 오른쪽 TOC 상태로 제공, 공개 회원 로그인 세션의 회원이 글쓴이(`author_id`)이면 공유 버튼 옆 새 탭 편집 링크 표시, 게시물 SEO/OG 메타 출력(요약 없으면 본문 fallback), 공유 모달(X/Bluesky/Facebook/LinkedIn/Email/링크복사), 회원 댓글 섹션 |

View File

@@ -122,7 +122,7 @@
- Pages 진열장 커버는 3:4 세로 비율을 기준으로 표시한다. 제작 권장 크기는 `900×1200px`이며, 고해상도 원본을 준비할 때는 `1200×1600px`을 권장한다. 최소 권장 크기는 `600×800px`이다.
- 페이지 섹션 생성·이름 변경·삭제·표시 순서는 관리자 네비게이션 관리의 `페이지 섹션` 탭에서 다룬다. 섹션 추가는 모달에서 이름을 입력해 생성하고, 이름 변경과 섹션 표시 순서는 탭 안의 `페이지 섹션 저장`으로 한 번에 저장한다. 페이지 작성·수정 화면에서는 등록된 섹션을 검색형 입력으로 선택한다.
- 섹션 내부 페이지 표시 순서는 관리자 네비게이션 관리의 `페이지 섹션` 탭에서 섹션별 `페이지 순서` 모달로 조정하며, 페이지 작성·수정 화면에서는 직접 입력하지 않는다. 순서 모달은 페이지 썸네일 카드형 가로 목록으로 표시하고, 추천 페이지를 먼저 보여 주며, 추천 페이지가 비추천 페이지 뒤로 드롭되면 즉시 추천 우선 순서로 보정한다. 페이지를 해당 섹션에서 바로 제거할 수 있다.
- `추천으로 강조`된 페이지는 같은 섹션 안에서 먼저 정렬한다.
- `추천으로 강조`된 페이지는 같은 섹션 안에서 먼저 정렬하며, 홈 Pages 진열장 카드 왼쪽 위에 SVG 아이콘 배지로 표시한다.
- 목록 설명은 홈 카드에는 표시하지 않고 공개 검색 결과와 관리용 메타로 사용한다.
- 헤더와 사이드바를 사용하지 않고 본문 중심 전체 화면으로 표시
- 페이지는 `renderMode`로 렌더링 방식을 구분한다. 기본값은 `html_document`이며 관리자에서 붙여넣은 전체 HTML 문서를 공개 `/pages/:slug` 요청에서 `text/html` 원문으로 응답한다. `markdown`은 관리자 UI에서 `일반 텍스트`로 표시하며 기존 Markdown 콘텐츠 렌더러를 사용한다.

View File

@@ -1,5 +1,9 @@
# 업데이트 이력
## v1.9.30
- 홈 Pages 진열장 추천 페이지 표시를 텍스트 배지에서 SVG 아이콘 배지로 변경.
## v1.9.29
- 사이트 단축키·슬래시 명령·Markdown 약식 문법 정리 문서 추가.

4
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{
"name": "sori.studio",
"version": "1.9.23",
"version": "1.9.30",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "sori.studio",
"version": "1.9.23",
"version": "1.9.30",
"hasInstallScript": true,
"dependencies": {
"@nuxtjs/tailwindcss": "^6.14.0",

View File

@@ -1,6 +1,6 @@
{
"name": "sori.studio",
"version": "1.9.29",
"version": "1.9.30",
"private": true,
"type": "module",
"imports": {

View File

@@ -867,8 +867,10 @@ watch([latestPosts, hasHomeInfeedAd], () => {
<div v-else class="flex h-full w-full items-center justify-center p-3 text-center text-sm font-semibold leading-tight site-muted">
{{ page.title }}
</div>
<span v-if="page.isFeatured" class="absolute left-2 top-2 rounded-full bg-[var(--site-accent)] px-2 py-0.5 text-[10px] font-semibold text-white shadow-sm">
추천
<span v-if="page.isFeatured" class="absolute left-2 top-2 rounded-full bg-[var(--site-accent)] px-0.5 py-0.5 text-[10px] font-semibold text-white shadow-sm">
<svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M13 3v7h6l-8 11v-7H5l8-11" />
</svg>
</span>
</div>
<h3 class="mt-2 line-clamp-2 text-xs font-semibold leading-snug text-[var(--site-text)]">