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

페이지 (apps/web 헤더·분류)

현상/기능

  • blog.serviceon.kr 공개 웹에서 분류 칩의 포트폴리오·공유링크를 헤더 메뉴로 옮기기
  • 헤더 내비: 홈 / 카드뉴스 / 매거진 / 목록 / 포트폴리오 / 공유링크
  • 분류 칩: 전체 / IT 개발 히스토리 / AI 및 IT 소식만
  • 포트폴리오 `/portfolio`, 공유링크 `/links`. 홈 브리핑·카드 피드에 섞지 말 것
  • API·DB·admin·n8n·배포는 건드리지 말 것

작업

  • `MainNav`: 포트폴리오(`/portfolio`), 공유링크(`/links`) 메뉴 추가
  • `CategoryFilter`: `NAV_EXTRAS` 목적지 칩 제거. 글 카테고리만 표시(메타 카테고리 제외 유지)
  • `Header`/`HomeHero`/`PostArchiveClient`/`portfolio`/`links` 페이지 summary 갱신

테마·반응형

현상/기능

  • 전체 반응형 점검·수정
  • light 모드 추가, light/dark 선택, 기본은 system

작업

  • `ThemeProvider`: preference system|light|dark (기본 system), OS 변경 감지
  • `ThemeToggle`: system→light→dark 순환 (Monitor/Sun/Moon), Header에 표시
  • `globals.css`: light(:root)/dark(.dark) 토큰 분리, hero·cell·header 변수화
  • Header·MainNav·date-cell·pill 모바일 패딩/스크롤 반응형

ON Briefing 시안 동기화

현상/기능

  • 날짜 셀: 1번 이미지(넓은 직사각 시안)처럼. 2번(좁은 셀)로 나오지 않게

현상/기능

  • 매거진 히어로: 있을 때/없을 때 높이 동일 (있을 때 크기 기준)

현상/기능

  • 분류 칩 영역에 포트폴리오가 안 보임(스크린샷) → 수정

현상/기능

  • `serviceon-blog-on (2)/blog-on` 디자인과 동일하게 변경
  • 시안 분류에 없는 포트폴리오도 포함 (공유 링크 칩도 함께)

작업

  • `DateStrip` + `.date-cell`: flex 균등 폭, `.dow`/`.num` 타이포, 오늘 시안, 선택 앰버 (blog-on styles 동기화)
  • `.hero-mag`에 `min-height` (17.5rem / sm 19rem), 빈 상태는 `.is-empty`로 세로 중앙
  • `HomeHero`: 분류·날짜를 한 줄 flex에서 **세로 스택**으로 분리 (칩이 날짜에 밀리지 않음)
  • `CategoryFilter`: 포트폴리오·공유 링크를 `NAV_EXTRAS`로 항상 렌더, `inline-flex shrink-0`
  • `public/grid.svg` 추가, `BackgroundDecor` → site-bg + 그리드
  • `Wordmark`: 시안 전원 O SVG + 펄스, `BLOG` 앰버 구분
  • 폰트: Montserrat + Noto Sans KR, 토큰/히어로/post-row/칩을 시안 CSS에 맞춤
  • 셸 폭 `on-shell`(1180px), Header·푸터·목록·상세 적용
  • `CategoryFilter`: 전체·DB카테고리 + **포트폴리오** + **공유 링크** 칩
  • 포트폴리오·공유 링크 페이지에도 동일 분류 바 표시