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

8
docs/changelog.md
View File

@@ -1,5 +1,13 @@
# 업데이트 요약
## v0.0.2
- Nuxt 3 기반 프로젝트 실행 구조를 추가.
- Tailwind CSS, Zod, Nuxt 서버 API 초기 골격을 추가.
- 공개 화면, 관리자 화면, 콘텐츠 컴포넌트의 기본 파일 구조를 생성.
- Docker 기반 NAS 배포 초안을 추가.
- 프로젝트 전용 개발/운영 포트 기준을 추가.
## v0.0.1
- sori.studio 개인 블로그/CMS 초기 방향 정리.

14
docs/deploy.md
View File

@@ -1,6 +1,6 @@
# 배포 가이드
> 현재 프로젝트는 코드 스캐폴딩 전 상태다. 아래 내용은 Nuxt 앱 생성 후 적용할 기본 배포 방향이다.
> 현재 프로젝트는 Nuxt 3 초기 스캐폴딩 상태다. Docker 설정은 초안이며 운영 DB 확정 후 NAS에서 검증한다.
## 빌드 유형
@@ -35,14 +35,14 @@ npm install
cp .env.example .env.development
# .env.development 파일에 개발 DB 연결 정보 입력
# 개발 서버 실행
# 개발 서버 실행 (127.0.0.1:43117)
npm run dev
```
### 확인 주소
- 개발 서버: http://localhost:3000
- 관리자: http://localhost:3000/admin
- 개발 서버: http://127.0.0.1:43117
- 관리자: http://127.0.0.1:43117/admin
---
@@ -70,7 +70,7 @@ cd sori.studio
# 운영 환경 변수 설정
cp .env.example .env.production
# .env.production 파일에 운영 DB 연결 정보 입력
# .env.production 파일에 운영 DB 연결 정보와 APP_PORT=43118 입력
# Docker 빌드 및 실행
docker-compose up -d
@@ -89,7 +89,9 @@ docker run -d -p 3000:3000 sori.studio:latest
### 포트
- HTTP: 3000
- 로컬 개발: 43117
- NAS Docker 외부: 43118
- 컨테이너 내부: 3000
- HTTPS: 3001 (SSL 설정 시)
---

10
docs/history.md
View File

@@ -1,5 +1,15 @@
# 의사결정 이력
## 2026-04-29 v0.0.2
### Nuxt 통합 백엔드 구조 결정
초기 세팅은 별도 백엔드 앱을 만들지 않고 Nuxt/Nitro의 `server/api`를 사용한다. 개인 블로그와 CMS를 한 서버에서 배포하면 로컬 개발, NAS 운영, 환경 변수 관리가 단순해진다. DB 연결과 API 라우팅은 Nuxt 서버 영역에서 시작하고, 추후 독립 배포나 워커가 필요해질 때 백엔드 분리를 재검토한다.
Nuxt 3, Tailwind CSS, Zod를 실제 의존성으로 추가하고 공개 화면, 관리자 화면, 콘텐츠 컴포넌트의 초기 골격을 만들었다. 현재 API는 샘플 데이터 기반이며 다음 단계에서 개발 DB로 교체한다.
기본 포트와 사용 중인 포트 충돌을 피하기 위해 로컬 개발 서버는 `43117`, NAS Docker 외부 포트는 `43118`을 사용한다. 컨테이너 내부 포트는 Nuxt 기본 실행 흐름에 맞춰 `3000`으로 유지한다.
## 2026-04-29 v0.0.1
### 초기 제품 방향 결정

24
docs/map.md
View File

@@ -61,3 +61,27 @@
| pages/posts/[slug].vue | 블로그 글 상세 |
| pages/tags/[slug].vue | 태그별 글 목록 |
| pages/pages/[slug].vue | 고정 페이지 상세 |
## 서버 API
| 파일 | 기능 |
|------|------|
| server/api/posts.get.js | 게시물 목록 샘플 API |
| server/api/posts/[slug].get.js | 게시물 상세 샘플 API |
| server/api/pages.get.js | 고정 페이지 목록 샘플 API |
| server/api/pages/[slug].get.js | 고정 페이지 상세 샘플 API |
| server/api/tags.get.js | 태그 목록 샘플 API |
| server/utils/content-schema.js | Zod 콘텐츠 스키마 |
| server/utils/sample-content.js | 샘플 콘텐츠 저장소 |
## 설정/배포
| 파일 | 기능 |
|------|------|
| package.json | Nuxt 실행 스크립트와 의존성 |
| nuxt.config.js | Nuxt 앱 설정 |
| tailwind.config.js | Tailwind 테마 설정 |
| assets/css/main.css | 전역 스타일 |
| .env.example | 환경 변수 예시 |
| Dockerfile | NAS 운영 이미지 빌드 |
| docker-compose.yml | NAS 컨테이너 실행 초안 |

29
docs/spec.md
View File

@@ -6,7 +6,7 @@
- **유형**: 커스텀 블로그/CMS
- **목표**: 개인 블로그 중심 운영, 기존 포털성 링크와 서비스 진입점은 블로그 내부 구조에 통합
- **참조**: Ghost(관리자 UX/글쓰기), Thred 테마(사용자 화면)
- **현재 상태**: 코드 스캐폴딩 전 문서 기준점
- **현재 상태**: Nuxt 3 초기 스캐폴딩 완료
- **원격 저장소**: https://git.sori.studio/zenn/sori.studio.git
---
@@ -138,7 +138,15 @@ components/content/
## API 구조
> 아직 구현 전 설계안이다. 실제 구현 시 응답 구조와 엔드포인트가 바뀌면 이 문서를 먼저 갱신한다.
> 현재 API는 Nuxt `server/api` 내부에 샘플 데이터 기반으로 구현되어 있다. DB 연결 후 같은 응답 구조를 유지하되 저장소만 교체한다.
### 백엔드 구성
- 별도 `backend/` 앱을 두지 않고 Nuxt/Nitro 서버 기능을 사용
- 공개 API는 `server/api`에 작성
- 서버 공통 스키마와 샘플 데이터는 `server/utils`에 작성
- 초기 단계에서는 같은 앱 배포로 관리 비용을 낮춤
- 독립 API 서버가 필요해지는 시점에만 백엔드 분리를 재검토
### 공개 API (`/api/`)
@@ -193,8 +201,11 @@ UPLOAD_DIR=/uploads
MAX_FILE_SIZE=10485760
# Site
SITE_URL=https://sori.studio
SITE_TITLE=sori.studio
NUXT_PUBLIC_SITE_URL=https://sori.studio
NUXT_PUBLIC_SITE_TITLE=sori.studio
# Server
APP_PORT=43118
```
### 환경 파일 기준
@@ -205,10 +216,18 @@ SITE_TITLE=sori.studio
| `.env.production` | NAS 운영 | 운영 DB |
| `.env.example` | 공유 예시 | 실제 접속 정보 없음 |
### 포트 기준
| 용도 | 포트 |
|------|------|
| 로컬 개발 서버 | 43117 |
| NAS Docker 외부 포트 | 43118 |
| 컨테이너 내부 포트 | 3000 |
---
## 버전 관리
- 현재 버전: v0.0.1
- 현재 버전: v0.0.2
- 첫 커밋 이후 변경사항을 커밋할 때마다 패치 버전 증가
- 메이저/마이너 버전은 구조 변경 또는 기능 묶음 단위로 결정

43
docs/todo.md
View File

@@ -26,28 +26,27 @@
## 프론트엔드 개발
- [ ] SiteHeader.vue 구현 (57px 높이)
- [ ] LeftSidebar.vue 구현 (287px, 패딩 12px 12px 12px 0)
- [ ] RightSidebar.vue 구현 (287px, 패딩 20px 0 20px 20px)
- [ ] MainColumn.vue 구현 (720px)
- [ ] PostCard.vue 구현
- [ ] TagHeader.vue 구현
- [ ] 공개 화면 반응형 세부 스타일 조정
- [ ] Thred 참고 화면 기준 시각 QA
- [ ] 게시물 카드 실제 데이터 연동
- [ ] 태그 페이지 실제 데이터 연동
- [ ] 고정 페이지 실제 데이터 연동
## 콘텐츠 스타일 구현
- [ ] ProseHeading (h1~h6)
- [ ] ProseList (Ordered/Unordered)
- [ ] ProseBlockquote
- [ ] ProseImage (Regular/Wide/Full-width)
- [ ] ProseButton (Left-aligned/Centered)
- [ ] ProseCallout
- [ ] ProseToggle
- [ ] ProseVideo
- [ ] ProseAudio
- [ ] ProseFile
- [ ] ProseProduct
- [ ] ProseHeaderCard (Simple/Wide/Full-width/Split)
- [ ] ProseEmbed (YouTube, Twitter)
- [ ] ProseHeading 실제 스타일 세부 조정
- [ ] ProseList 실제 스타일 세부 조정
- [ ] ProseBlockquote 실제 스타일 세부 조정
- [ ] ProseImage Regular/Wide/Full-width 동작 검증
- [ ] ProseButton Left/Center 정렬 검증
- [ ] ProseCallout 실제 스타일 세부 조정
- [ ] ProseToggle 실제 스타일 세부 조정
- [ ] ProseVideo 실제 임베드 렌더링 연결
- [ ] ProseAudio 실제 오디오 렌더링 연결
- [ ] ProseFile 실제 파일 데이터 연결
- [ ] ProseProduct 실제 상품 카드 데이터 연결
- [ ] ProseHeaderCard Simple/Wide/Full-width/Split 변형 구현
- [ ] ProseEmbed YouTube, Twitter 실제 렌더링 연결
## 데이터베이스
@@ -63,7 +62,5 @@
## 배포
- [ ] UGREEN NAS Docker 배포 가이드 작성
- [ ] 로컬 개발 환경 가이드 작성
- [ ] Dockerfile 작성
- [ ] docker-compose.yml 작성
- [ ] .env.example 작성
- [ ] Docker 빌드 검증
- [ ] NAS 운영 환경 변수 작성

12
docs/update.md
View File

@@ -1,5 +1,17 @@
# 업데이트 이력
## v0.0.2
- Nuxt 3 프로젝트 기본 실행 구조 추가.
- Tailwind CSS 설정과 전역 Pretendard 기준 스타일 추가.
- 공개 레이아웃, 게시물 레이아웃, 고정 페이지 레이아웃, 관리자 레이아웃 골격 추가.
- 사이트 컴포넌트와 콘텐츠 컴포넌트 초기 골격 추가.
- 홈, 게시물 상세, 태그, 고정 페이지, 관리자 기본 화면 추가.
- Nuxt `server/api` 기반 백엔드 골격 추가.
- Zod 기반 콘텐츠 스키마와 샘플 API 추가.
- `.env.example`, Dockerfile, docker-compose.yml, .dockerignore 추가.
- 로컬 개발 포트 43117, NAS Docker 외부 포트 43118 기준 추가.
## v0.0.1
- sori.studio 개인 블로그/CMS 방향 정리.