45 lines
1.4 KiB
Vue
45 lines
1.4 KiB
Vue
<script setup>
|
|
definePageMeta({
|
|
layout: 'post'
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<ContentRenderer>
|
|
<ProseHeaderCard>
|
|
<p class="post-detail__eyebrow text-sm uppercase text-white/70">
|
|
NOTE
|
|
</p>
|
|
<h1 class="post-detail__title mt-3 text-4xl font-semibold leading-tight">
|
|
sori.studio를 직접 만들기 시작하며
|
|
</h1>
|
|
</ProseHeaderCard>
|
|
|
|
<p>
|
|
이 페이지는 게시물 본문 스타일을 확인하기 위한 초기 샘플입니다.
|
|
실제 글 데이터와 마크다운 기반 위지윅 렌더링은 다음 단계에서 연결합니다.
|
|
</p>
|
|
|
|
<ProseHeading :level="2">
|
|
본문 스타일 기준
|
|
</ProseHeading>
|
|
<p>
|
|
제목, 리스트, 인용구, 이미지, 버튼, 카드류 컴포넌트를 개별 컴포넌트로 분리해 이후 스타일 변경이 쉽도록 둡니다.
|
|
</p>
|
|
|
|
<ProseList>
|
|
<li>Regular image, Wide image, Full-width image 구분</li>
|
|
<li>Callout, Toggle, File, Product 카드 분리</li>
|
|
<li>YouTube, Twitter 임베드 영역 분리</li>
|
|
</ProseList>
|
|
|
|
<ProseBlockquote>
|
|
글쓰기 경험은 Ghost를 참고하되, 공개 화면은 sori.studio에 맞게 조정합니다.
|
|
</ProseBlockquote>
|
|
|
|
<ProseCallout>
|
|
<strong>초기 상태:</strong> 지금은 샘플 콘텐츠이며, DB와 관리자 글쓰기 연결 후 실제 데이터로 교체합니다.
|
|
</ProseCallout>
|
|
</ContentRenderer>
|
|
</template>
|