페이지 (apps/web 시안 레이아웃) · 페이지 (apps/web 시안 비주얼) 외 2건

2026-08-18 ServiceOn Blog 작업일지입니다. 오늘은 4건의 작업을 진행했습니다.

페이지 (apps/web 시안 레이아웃)

현상/기능

• 라이브가 승인 시안과 다름. PR #4는 토큰만 입히고 홈이 캘린더·인사말 중심
• 시안 HTML 구조를 공개 웹에 동일 반영 (0=홈, 1=홈 모바일, 2=목록, 3=매거진, 4=카드)
• 홈 순서: 헤더 → 키커 → hero-mag → 분류 칩+작은 날짜 → 카드 post-row → 푸터
• 분류 칩에 포트폴리오 추가(/portfolio). 홈·카드 목록에 포트폴리오 글 섞지 말 것
• 테마 토글이 시안을 깨면 숨기고 다크 기본. 스카이/브라운 복귀 금지
• admin/API/DB/n8n/배포·소개·출처 신설·본문 창작 금지

작업

• Header: 홈·카드뉴스·매거진·목록 + 검색. ThemeToggle 숨김, 다크 고정
• MainNav에서 포트폴리오 제거. CategoryFilter 포트폴리오 칩 → `/portfolio`
• HomeHero를 인사말/시계/큰 캘린더에서 툴바(칩+작은 date-cell)로 교체
• 홈 카드는 PostRow 가로 행. 정사각 CardNewsGrid는 홈 기본 아님
• `/posts` 목록 행·포트폴리오 칩, `/magazine` 일간호 타이포, 카드 상세 CARD 필
• `/portfolio`는 시안 톤 유지, 광고 없음. 피드 미혼합

페이지 (apps/web 시안 비주얼)

현상/기능

• 어제 승인된 ON Briefing 정적 시안 비주얼을 공개 웹(apps/web)에 입히기
• PR #1은 정보구조만 밝은 톤에 이식해서 승인 화면과 다름. 이번 PR은 시안을 그대로 반영
• 토큰: 배경 #0b1220 + 청사진 그리드, 워드마크 Montserrat SERVICE ⏻ N BLOG, 앰버 #f59e0b, 본문 크림
• 다크 시네마틱 기본. 스카이/브라운 회사 톤 금지. 라우트·광고 슬롯 유지. admin/API/DB/n8n/배포·본문 새로 쓰기 금지

작업

• `globals.css`: 시안 토큰 + 청사진 그리드 + 앰버 버튼/태그 유틸. 기본 dark, 라이트는 크림+앰버만
• `Wordmark`: SERVICE ⏻ N BLOG (전원 버튼 앰버 글로우)
• `BackgroundDecor`: 포토/스카이 글로우 제거, 그리드만
• `ThemeProvider`: 기본 dark (명시 light만 라이트)
• 홈 Compact 히어로·분류·날짜띠·카드 피드, 매거진/카드 상세, 목록을 시안 밀도로 재스타일
• 광고 Placeholder를 시안 톤에 묻히게. 포트폴리오/공유링크도 동일 팔레트
• 신규 페이지(소개·출처) 없음. 기존 라우트 유지

배포 (GitHub Actions)

현상/기능

• 프로덕션 배포 미착수: blog.serviceon.kr 이 8/5 앱, /magazine /portfolio /cards /posts 404, PM2 12일, /var/www/blog 미 rsync
• GitHub Actions Deploy production 진단·수정. SSH 금지, 앱 페이지 변경 금지, 키 발명 금지, db: 금지

현상/기능

• private repo에 GitHub Actions 자동 배포 추가 (`main` 푸시 + workflow_dispatch)
• 서버는 packed standalone `deploy/` 트리 (git/pnpm/소스 없음). rsync --delete. db: 금지
• secret은 `DEPLOY_SSH_KEY`만. SSH 키/PEM 커밋 금지. 앱 동작·n8n·about/source 변경 금지

작업

• 진단: run `32156823135` (push, main, conclusion=failure, 20s). Actions 활성. 워크플로 트리거됨. rsync/SSH/secret 단계 미도달
• 실패 단계: Setup Node.js. `pnpm/action-setup` 이 pnpm@11.17.0 설치 후 `cache: pnpm` 이 `pnpm store path` 실행 → pnpm 11은 Node >= 22.13 (`node:sqlite`) 필요, workflow는 Node 20.20.2 → `ERR_UNKNOWN_BUILTIN_MODULE`
• 수정: `.github/workflows/deploy.ymlnode-version: 20` → `22`
• `gh secret list` 는 403. DEPLOY_SSH_KEY 존재 여부는 확인 불가. 이번 실패 원인은 secret이 아님
• `.github/workflows/deploy.yml`: checkout → Node 20 + pnpm@11.17.0 → `pnpm install --frozen-lockfile` → `pnpm build:deploy` → `burnett01/rsync-deployments`로 `deploy/` → `/var/www/blog/` → `appleboy/ssh-action`으로 `pm2 reload` (실패 시 restart) → 선택적 curl health check
• pack 출력 경로 확인: `scripts/` → 저장소 루트 `deploy/`
• 는 gitignore라 CI에 없음. rsync exclude로 서버 env 유지
• README 운영 도메인에 `DEPLOY_SSH_KEY` 안내

페이지 (apps/web 홈 시안)

현상/기능

• ON Briefing 홈 시안 정보구조를 기존 Next.js 앱에 이식 (다크 시네마틱으로 통째 변경 금지)
• Compact 히어로, 빈 날 CTA, 본문-원문 여백, /magazine 일간호, 구독 UI, 광고 슬롯 위치, /portfolio 목록
• 소개·출처 신설·admin/API/DB/n8n/배포 변경·main 직접 머지 금지

작업

• 홈(`/`) CompactMagazineHero + 카드 피드. 덱은 「덱으로 보기」만, 자동 진입 없음
• `/cards` 카드뉴스, `/magazine` 일간호·지난 호, `/posts` 글 목록
• EmptyFeedCta: 빈 날짜·dev_history 필터 CTA
• CardNewsModal/CardArticle: 본문-원문 사이 여백, 그 사이 광고 없음
• 매거진 상세: 제목 아래·본문 중간·글 끝 AdSlot. 플레이스홀더 저대비
• 포트폴리오 목록을 풀폭 행으로. 피드 미혼합, 광고 없음
• SubscribePanel: UI 피드백만. SiteFooter 구독
• MainNav: 홈 / 카드뉴스 / 매거진 / 목록 / 포트폴리오