zenn/sori.studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Nuxt 초기 세팅 추가

Browse Source
This commit is contained in:
zenn
2026-04-29 14:54:44 +09:00
parent efc7955415
commit 37f6c38caa
60 changed files with 12698 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
pages/admin/index.vue Normal file
View File

@@ -0,0 +1,21 @@
<script setup>
definePageMeta({
layout: 'admin'
})
</script>
<template>
<section class="admin-dashboard">
<div class="admin-dashboard__header border-b border-line bg-paper p-6">
<p class="admin-dashboard__eyebrow text-xs font-semibold uppercase text-muted">
Admin
</p>
<h1 class="admin-dashboard__title mt-2 text-3xl font-semibold">
대시보드
</h1>
</div>
<div class="admin-dashboard__body bg-paper p-6 text-sm text-muted">
관리자 기능은 Ghost 스타일의 글쓰기 흐름을 기준으로 단계별 구현합니다.
</div>
</section>
</template>

16
pages/admin/pages/index.vue Normal file
View File

@@ -0,0 +1,16 @@
<script setup>
definePageMeta({
layout: 'admin'
})
</script>
<template>
<section class="admin-pages bg-paper p-6">
<h1 class="admin-pages__title text-3xl font-semibold">
페이지 관리
</h1>
<p class="admin-pages__description mt-4 text-sm text-muted">
고정 페이지 CRUD는 2차 관리자 개발 범위입니다.
</p>
</section>
</template>

16
pages/admin/posts/[id].vue Normal file
View File

@@ -0,0 +1,16 @@
<script setup>
definePageMeta({
layout: 'admin'
})
</script>
<template>
<section class="admin-post-edit bg-paper p-6">
<h1 class="admin-post-edit__title text-3xl font-semibold">
글 수정
</h1>
<p class="admin-post-edit__description mt-4 text-sm text-muted">
저장된 글 데이터 연결 후 수정 화면을 구성합니다.
</p>
</section>
</template>

16
pages/admin/posts/index.vue Normal file
View File

@@ -0,0 +1,16 @@
<script setup>
definePageMeta({
layout: 'admin'
})
</script>
<template>
<section class="admin-posts bg-paper p-6">
<h1 class="admin-posts__title text-3xl font-semibold">
글 목록
</h1>
<p class="admin-posts__description mt-4 text-sm text-muted">
글 목록 조회는 DB 설계 이후 연결합니다.
</p>
</section>
</template>

16
pages/admin/posts/new.vue Normal file
View File

@@ -0,0 +1,16 @@
<script setup>
definePageMeta({
layout: 'admin'
})
</script>
<template>
<section class="admin-post-editor bg-paper p-6">
<h1 class="admin-post-editor__title text-3xl font-semibold">
새 글 작성
</h1>
<p class="admin-post-editor__description mt-4 text-sm text-muted">
마크다운 기반 위지윅 에디터는 다음 단계에서 구현합니다.
</p>
</section>
</template>

16
pages/admin/settings/index.vue Normal file
View File

@@ -0,0 +1,16 @@
<script setup>
definePageMeta({
layout: 'admin'
})
</script>
<template>
<section class="admin-settings bg-paper p-6">
<h1 class="admin-settings__title text-3xl font-semibold">
사이트 설정
</h1>
<p class="admin-settings__description mt-4 text-sm text-muted">
사이트 설정은 2차 관리자 개발 범위입니다.
</p>
</section>
</template>

16
pages/admin/tags/index.vue Normal file
View File

@@ -0,0 +1,16 @@
<script setup>
definePageMeta({
layout: 'admin'
})
</script>
<template>
<section class="admin-tags bg-paper p-6">
<h1 class="admin-tags__title text-3xl font-semibold">
태그 관리
</h1>
<p class="admin-tags__description mt-4 text-sm text-muted">
DEV, NOTE, REVIEW, PLAY 같은 카테고리성 태그를 관리합니다.
</p>
</section>
</template>

38
pages/index.vue Normal file
View File

@@ -0,0 +1,38 @@
<script setup>
const posts = [
{
title: 'sori.studio를 직접 만들기 시작하며',
excerpt: '블로그와 포털의 경계에 있는 개인 공간을 직접 구축하기 위한 첫 기록입니다.',
tag: 'NOTE',
publishedAt: '2026.04.29',
to: '/posts/hello-sori-studio'
},
{
title: '글쓰기 도구는 왜 직접 만들게 되는가',
excerpt: '네이버 블로그, 티스토리, 워드프레스, Ghost를 거쳐 남은 취향의 빈칸을 정리합니다.',
tag: 'DEV',
publishedAt: '2026.04.29',
to: '/posts/custom-writing-tool'
}
]
</script>
<template>
<MainColumn>
<section class="home-hero site-section">
<div class="home-hero__inner site-section-header">
<p class="home-hero__eyebrow text-xs font-semibold uppercase text-muted">
Personal Blog / CMS
</p>
<h1 class="home-hero__title mt-3 text-5xl font-semibold leading-tight tracking-normal">
sori.studio
</h1>
<p class="home-hero__description mt-4 max-w-xl text-base leading-7 text-muted">
글을 쌓고, 프로젝트와 링크를 연결하고, 오래 쓰기 좋은 개인 블로그를 직접 구축합니다.
</p>
</div>
</section>
<PostCard v-for="post in posts" :key="post.to" :post="post" />
</MainColumn>
</template>

19
pages/pages/[slug].vue Normal file
View File

@@ -0,0 +1,19 @@
<script setup>
definePageMeta({
layout: 'page'
})
</script>
<template>
<article class="static-page mx-auto min-h-screen max-w-3xl px-6 py-16">
<p class="static-page__eyebrow text-xs font-semibold uppercase text-muted">
Page
</p>
<h1 class="static-page__title mt-4 text-5xl font-semibold leading-tight">
고정 페이지
</h1>
<p class="static-page__description mt-6 text-lg leading-8 text-muted">
About, Projects, Links, Contact 같은 고정 페이지는 헤더와 사이드바 없이 본문 중심으로 표시합니다.
</p>
</article>
</template>

44
pages/posts/[slug].vue Normal file
View File

@@ -0,0 +1,44 @@
<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>

10
pages/tags/[slug].vue Normal file
View File

@@ -0,0 +1,10 @@
<template>
<MainColumn>
<TagHeader title="NOTE" description="생각과 기록을 모아두는 태그 페이지입니다." />
<section class="tag-posts site-section">
<div class="tag-posts__empty site-section-body text-sm text-muted">
태그별 글 목록은 DB 연결 후 표시합니다.
</div>
</section>
</MainColumn>
</template>