[Feat/link-111] ✨ feat: 링크 컴포넌트 + 플러그인 추가

[swallowedB]

요약

• 변경 목적(왜?):

  • 문서/블로그 내에서 외부 링크 표현 방식을 일관성 있게 개선하기 위함
  • 문장 브레이크 없이 인라인 방식으로 배지형 링크를 사용할 수 있도록 구성
  • 향후 링크 카드/멘션 등 확장 플러그인 적용 기반 마련

• 주요 변경(무엇을?):

  • LinkBadge 컴포넌트 추가
  • lucide 아이콘 기반으로 외부 링크 UI 적용
  • remark/rehype 기반 플러그인 추가 구조 준비

변경 내용

• LinkBadge 컴포넌트 추가
• lucide-react 기반 아이콘 적용
• icon, variant props로 확장성 고려
• prose 환경에서 no-underline 적용
• MDX components={...} 등록 처리
• Callout / 리스트 내부에서 사용 가능하도록 구조 조정

스크린샷/동영상 (선택)

테스트

• 로컬 렌더링 확인
• 인라인 링크 배치 정상 작동
• MDX + prose 환경 정상 출력
• dark/light 모드 대응 확인
• SSR/Hydration 오류 없음

관련 이슈

close #111

Summary by CodeRabbit

릴리스 노트

• Documentation

  • 세 개의 프로젝트(COMMA, Plaist, RoomE)에 대한 개발 로그 및 회고 포스트 추가
  • 2025년 연간 회고 콘텐츠 추가

• New Features

  • 외부 링크 배지 컴포넌트 추가
  • 포스트 언급 기능 추가

• Enhancement

  • 반응형 레이아웃 및 카드 스타일 개선
  • 이미지 배치 옵션 확장 (정렬 및 너비 제어)
  • 시리즈 레지스트리에 새로운 프로젝트 카테고리 추가

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
b0o0a	Ready	Preview, Comment	Jan 19, 2026 7:57am

[coderabbitai]

Caution

Review failed

The pull request is closed.

📝 Walkthrough

Walkthrough

프로젝트 배경과 구현 기록을 담은 다양한 MDX 블로그 포스트가 추가되었습니다. 동시에 링크 임베드 기능이 도입되었고, UI 컴포넌트들(LinkBadge, PostMention, Figure 개선)이 추가/수정되었으며, 반응형 레이아웃 조정과 스타일 미세조정이 이루어졌습니다.

Changes

코호트 / 파일(들)	변경사항
MDX 콘텐츠 추가 content/posts/DEV_LOG/comma-*.mdx (3개), content/posts/DEV_LOG/plaist-*.mdx (3개), content/posts/DEV_LOG/roome-*.mdx (5개), content/posts/JOURNAL/2025-recap.mdx	14개의 새로운 블로그 포스트 추가: 프로젝트 배경, 개발 기록(이미지 업로드, 게임 구현, 문제 해결), 3D 모델링, 팀 회고 등. 각 파일은 MDX 구조와 frontmatter를 포함합니다.
MDX 콘텐츠 삭제 content/posts/INSIGHT/velite-test.mdx	기존 velite 테스트 포스트 삭제 (170줄)
MDX 컴포넌트 신규 추가 src/components/mdx/LinkBadge.tsx, src/components/mdx/PostMention.tsx	LinkBadge: 외부 링크를 아이콘과 스타일로 표시하는 새 컴포넌트. PostMention: 특정 포스트로 링크하는 멘션 컴포넌트
MDX 컴포넌트 개선 src/components/mdx/Figure.tsx, src/components/mdx/Quote.tsx, src/components/mdx/Callout.tsx	Figure: maxWidth, align 프롭 추가 및 이미지 3개일 때의 특수 레이아웃 구현. Quote: 다크모드 텍스트 색상 및 폰트 조정. Callout: 제목 스페이싱(mb-1 → mb-3) 증가
MDX 컴포넌트 인덱스 src/components/mdx/index.ts	LinkBadge, PostMention, CodeBlockFigure 내보내기 추가
카테고리/시리즈 UI 레이아웃 src/app/(layout)/(shell)/(category)/[category]/_components/CategoryHeader.tsx, CategorySeries.tsx, SeriesFolder.tsx, SeriesPostList.tsx	반응형 레이아웃 개선: 모바일에서 flex-col, 태블릿 이상에서 flex-row. SeriesPostList의 Props 변경(category: string → CategoryKey, pageSize 추가). 데이터 페칭 업데이트 및 UI 재배치
포스트 카드 및 목록 UI src/app/(layout)/(shell)/_components/posts/PostCard.tsx, PostListGrid.tsx, PostToolbar.tsx	다크모드 배경색 통일(#0b0d37), gap 조정(clsx 동적 적용), 정렬 변경(items-center → items-baseline)
포스트 페이지 스타일 src/app/(layout)/posts/[slug]/page.tsx	경계선 불투명도 미세조정(border-foreground/30 → border-foreground/20)
빌드 설정 및 의존성 .gitignore, package.json, velite.config.ts	.gitignore에 content/_templates/ 추가. remark-link-card-plus 의존성 추가. velite 설정에서 remark-link-card-plus 플러그인 적용 및 series 필드 변환 로직 수정(capitalizeFirst → trim)
시리즈 레지스트리 src/lib/posts/registry/series.registry.ts	Plaist(purple), Comma(blue) 새 시리즈 메타데이터 16줄 추가
포스트 쿼리 로직 src/lib/posts/queries.ts	getAllPosts의 draft 필터 변경: post.draft === false → post.draft !== true (undefined 포스트 포함)
MDX 스타일 src/styles/mdx.css	인라인 코드 배경 불투명도 감소(0.848 → 0.476), .prose a.no-underline 유틸리티 추가

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

근거: 변경된 파일 수는 많지만(30+), MDX 콘텐츠 추가가 대량을 차지하여 동질적 패턴이 반복됩니다. 코드 변경은 대부분 UI 스타일링 미세조정이고, 새로운 컴포넌트(LinkBadge, PostMention)는 단순한 구조입니다. 다만 SeriesPostList의 Props 변경과 Figure의 이미지 3개 케이스 처리는 별도로 검토가 필요합니다.

Possibly related PRs

• [Feat/post-23] ✨ feat: post 상세 레이아웃 수정 및 목차 스크롤 추가 #93: content/posts/INSIGHT/velite-test.mdx 파일 삭제와 직접 관련되어 있으며, 충돌 가능성이 있습니다.
• [Feat/series-27] ✨ feat: 시리즈 구조 정리 및 카테고리 위젯 기능 추가 #88: 카테고리/시리즈 코드 경로(CategorySeries, SeriesPostList, SeriesFolder, series.registry.ts) 동시 수정으로 관련성이 높습니다.
• [Feat/mdx-89] ✨ feat: mdx 컴포넌트 추가 및 스타일링 수정 #90: MDX 컴포넌트 표면(Figure, Callout, 스타일) 수정이 겹칩니다.

Poem

📝 새로운 기억들을 담아
링크를 임베드하고 레이아웃을 고쳐,
포스트 세 개 프로젝트가 피어난다
반응형 UI 속에서 멘션도 울린다
콤마, 플레이, 룸이 기록된다 ✨

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}