v0.0.48 Thred형 북마크·회원가입 카드와 X 임베드 보강

북마크·뉴스레터 CTA 마크다운 블록과 컴포넌트를 추가하고, Twitter/X URL은 공식 embed iframe으로 렌더링한다.
Callout 강조선과 이미지 캡션 색을 테마 변수에 맞춘다.

Co-authored-by: Cursor <cursoragent@cursor.com>

docs/history.md

@@ -1,5 +1,13 @@
 # 의사결정 이력
 
+## 2026-05-08 v0.0.48
+
+### Twitter/X 공식 embed iframe과 북마크·회원가입 마크다운 블록
+
+공개 본문에서 트위터 게시물은 `platform.twitter.com/embed/Tweet.html` iframe으로 표시한다. oEmbed API나 스크립트 삽입에 비해 구현이 단순하고 SSR·테마(`useThemeMode`)와 `theme` 쿼리만 맞추면 라이트/다크 일관성을 유지하기 쉽기 때문이다.
+
+북마크·뉴스레터 CTA는 Ghost/Thred 스킨에서 흔한 카드 패턴이므로 `:::bookmark`·`:::signup` 확장 블록으로 저장하고 전용 Vue 컴포넌트로 렌더링한다. 메타데이터 풍부한 북마크는 추후 oEmbed나 서버 페치로 보강할 수 있도록 마크다운 키값 형식을 병행한다.
+
 ## 2026-05-07 v0.0.45
 
 ### 사용자 화면 단일 배경과 사이드바 전환 방식 결정

docs/map.md

@@ -48,8 +48,10 @@
 | components/content/ProseAudio.vue | 오디오 |
 | components/content/ProseFile.vue | 파일 |
 | components/content/ProseProduct.vue | 상품 카드 |
+| components/content/ProseBookmark.vue | 본문 북마크 카드(썸네일·도메인·외부 링크) |
+| components/content/ProseSignup.vue | 본문 회원가입·뉴스레터 CTA 카드 |
 | components/content/ProseHeaderCard.vue | 헤더 카드 |
-| components/content/ProseEmbed.vue | YouTube, Twitter 임베드 |
+| components/content/ProseEmbed.vue | YouTube·Twitter/X iframe 임베드, 기타 외부 링크 |
 
 ## 관리자 페이지
 

docs/spec.md

@@ -99,8 +99,10 @@ components/content/
 ├── ProseAudio.vue       # Audio 카드
 ├── ProseFile.vue        # File 카드
 ├── ProseProduct.vue    # Product 카드
+├── ProseBookmark.vue   # 북마크 카드(썸네일·제목·도메인)
+├── ProseSignup.vue     # 회원가입/뉴스레터 CTA 카드
 ├── ProseHeaderCard.vue # Header 카드 (Simple/Wide/Full-width/Split)
-└── ProseEmbed.vue      # Embeds (YouTube, Twitter)
+└── ProseEmbed.vue      # Embeds (YouTube iframe, Twitter/X iframe, 기타 링크)
 ```
 
 ### 공개 본문 스타일 가이드(Thred 기준)
@@ -121,10 +123,12 @@ components/content/
   - `:::gallery` ~ `:::` fenced block 내부에 이미지 마크다운 행을 여러 개 작성
   - 렌더링: `ContentMarkdownRenderer.vue` (그리드 + 라이트박스)
 - 카드류
-  - Callout: `:::callout` ~ `:::`
+  - Callout: `:::callout` ~ `:::` (왼쪽 강조선은 `var(--site-accent)`)
   - Toggle: `:::toggle 제목` ~ `:::`
-  - Embed: `:::embed` ~ `:::` (YouTube URL은 iframe, 그 외는 링크)
-  - 렌더링: `ProseCallout.vue`, `ProseToggle.vue`, `ProseEmbed.vue`
+  - Bookmark: `:::bookmark` ~ `:::` (본문은 `url=`, `title=`, `description=`, `thumbnail=` 키값 또는 첫 줄 URL·이어지는 제목/설명 줄)
+  - Signup: `:::signup` ~ `:::` (선택: `title=`, `description=`, `button=`, `placeholder=`)
+  - Embed: `:::embed` ~ `:::` (YouTube·YouTube Shorts URL은 iframe, `twitter.com`·`x.com` 게시물 URL은 X 공식 embed iframe, 그 외는 외부 링크 카드)
+  - 렌더링: `ProseCallout.vue`, `ProseToggle.vue`, `ProseBookmark.vue`, `ProseSignup.vue`, `ProseEmbed.vue`
 
 ---
 
@@ -365,7 +369,11 @@ components/content/
 - 콜아웃 블록은 `:::callout` fenced block 안에 본문을 저장한다.
 - 토글 블록은 `:::toggle 제목` fenced block 안에 펼침 본문을 저장한다.
 - 임베드 블록은 `:::embed` fenced block 안에 URL을 저장한다.
-- YouTube 임베드 URL은 공개 화면에서 iframe으로 렌더링하고, 그 외 URL은 외부 링크로 표시한다.
+- YouTube 임베드 URL은 공개 화면에서 iframe으로 렌더링한다.
+- Twitter/X 게시물 URL(`twitter.com`·`x.com`·`mobile.twitter.com`, 경로에 `status` 포함)은 `platform.twitter.com/embed/Tweet.html` iframe으로 렌더링하며, 테마는 `useThemeMode()`와 동기화한다.
+- 그 외 URL은 외부 링크 텍스트 카드로 표시한다.
+- 북마크 블록은 `:::bookmark` fenced block으로 저장할 수 있으며 공개 화면에서 Thred형 가로 카드로 렌더링한다.
+- 회원가입(뉴스레터) CTA는 `:::signup` fenced block으로 저장할 수 있으며 실제 폼 연동은 후속 작업으로 분리한다.
 
 ### 관리자 페이지 편집
 
@@ -481,6 +489,6 @@ APP_PORT=43118
 
 ## 버전 관리
 
-- 현재 버전: v0.0.47
+- 현재 버전: v0.0.48
 - 첫 커밋 이후 변경사항을 커밋할 때마다 패치 버전 증가
 - 메이저/마이너 버전은 구조 변경 또는 기능 묶음 단위로 결정

docs/todo.md

@@ -30,8 +30,6 @@
 - [ ] ProseFile 실제 파일 데이터 연결
 - [ ] ProseProduct 실제 상품 카드 데이터 연결
 - [ ] ProseHeaderCard Simple/Wide/Full-width/Split 변형 구현
-- [ ] ProseEmbed Twitter 실제 렌더링 연결
-
 ## 데이터베이스
 
 - [ ] NAS 운영 DB 연결 설정 실제 값 작성

docs/update.md

@@ -1,5 +1,11 @@
 # 업데이트 이력
 
+## v0.0.48
+
+- 공개 본문에 Thred형 북마크 카드(`ProseBookmark`, `:::bookmark`)와 회원가입 CTA(`ProseSignup`, `:::signup`) 추가.
+- `ProseEmbed`에서 Twitter/X 게시물 URL을 공식 embed iframe으로 렌더링하고 테마와 동기화.
+- Callout 왼쪽 강조선·이미지 캡션 변수 색상 등 카드/미디어 스타일을 Thred에 가깝게 보정.
+
 ## v0.0.47
 
 - 공개 본문 렌더러에서 Ordered list(숫자 목록) 문법을 지원.