haholula 블로그 추가 기능 제안

현재 상태: Astro + Tailwind + daisyUI, TOC(목차 + sticky), 이미지 처리, OG 이미지 API, font-ownglyph + twemoji 적용 완료.

---

우선순위 추천: sitemap + RSS + 코드 복사 버튼

셋 다 반나절 안에 끝나고 체감 효과가 커서 먼저 하면 좋음.

1. sitemap

• @astrojs/sitemap 통합 추가
• SEO용으로 사실상 필수급
• 구현: astro add sitemap 후 astro.config.mjs에 site 값만 정확히 설정
• 공식 문서: https://docs.astro.build/en/guides/integrations-guide/sitemap/

2. RSS 피드

• @astrojs/rss 패키지로 몇 줄이면 완성
• 다른 사람이 블로그 구독 가능해짐
• 나중에 “새 글 올라오면 아루 Discord 봇 알림” 같은 연동도 가능
• 공식 문서(레시피): https://docs.astro.build/en/recipes/rss/
• content collections 기반 items 생성 예시가 레시피 문서 안 “Using content collections” 섹션에 있음 (getCollection() 활용, 지금 blog 구조와 그대로 맞음)

3. 코드 블록 복사 버튼

• 개발 블로그 특성상 코드 블록(예: 총 실행시간: ... 같은 로그/코드) 자주 등장
• Astro 기본 Shiki 하이라이팅 자체엔 복사 버튼이 없어서, 커뮤니티 통합 Expressive Code를 얹거나 직접 스크립트로 버튼을 붙여야 함
• 공식 문서(Syntax Highlighting, Shiki 설정): https://docs.astro.build/en/guides/syntax-highlighting/
• Expressive Code 등 커뮤니티 통합은 공식 통합 디렉토리에서 확인: https://astro.build/integrations/?search=syntax+highlight

---

바로 체감되는 추가 기능

읽는 시간 표시

• render() 결과의 본문 텍스트 길이로 대략 계산 (예: 분당 평균 글자 수 나누기)
• “약 5분 소요” 같은 형태로 포스트 상단에 표시
• 구현 난이도 낮고 티가 잘 남
• 관련 문서: render()가 반환하는 remarkPluginFrontmatter 등 활용 가능 — Markdown 콘텐츠 속성 참고 https://docs.astro.build/en/guides/markdown-content/#available-properties

---

콘텐츠 탐색 관련

태그 / 카테고리 페이지

• content collections schema에 tags 필드 추가
• /tags/[tag].astro 동적 라우트로 모아보기 구현
• 업무 관련 글(BlueAI, poom_db 등)과 개인 프로젝트 글(haholula, 게임개발 등) 성격이 다르므로 분류해두면 관리 편해짐
• 공식 문서(Dynamic Routes): https://docs.astro.build/en/guides/routing/#dynamic-routes
• 공식 문서(getStaticPaths() 레퍼런스): https://docs.astro.build/en/reference/routing-reference/#getstaticpaths
• 튜토리얼(태그 페이지 실습 예제, 지금 구조와 가장 비슷함): https://docs.astro.build/en/tutorial/5-astro-api/2/

이전글 / 다음글 네비게이션

• 포스트 목록에서 현재 글의 인덱스를 찾아 prev/next 링크 표시
• 구현 자체는 간단
• 참고 문서(콘텐츠 컬렉션 쿼리/정렬): https://docs.astro.build/en/guides/content-collections/#querying-collections

---

마무리 다듬기

다크모드 토글

• daisyUI 사용 중이라 테마 스위처는 daisyUI 컴포넌트로 거의 공짜로 붙음 (daisyUI는 Astro 공식 통합이 아니라 daisyUI 자체 문서 참고 필요)
• dark:prose-invert 등 다크모드 스타일은 이미 준비돼 있음, 토글 버튼만 추가하면 됨
• Astro 자체의 클라이언트 스크립트로 토글 붙일 때 참고: https://docs.astro.build/en/guides/client-side-scripts/

---

참고: 이번 대화에서 완성한 것

• TOC(목차) 자동 생성 (getHeadings() 활용)
• 본문 옆 sticky TOC 배치 (absolute + sticky 트랙 기법)
• scroll-margin-top으로 앵커 이동 시 고정 헤더 가림 방지
• 스크롤 위치에 따른 TOC 항목 강조(IntersectionObserver) — 구현은 했으나 rootMargin 튜닝은 보류 상태