2026-07-27 ServiceOn Blog 작업일지입니다. 오늘은 6건의 작업을 진행했습니다.

페이지 (apps/web / admin)

현상/기능

  • 달력 날짜를 M/D(예: 7/29), 옆에 시간(22:30), 시간대 문구(심야~밤) 표시
  • 자정 넘는 구간 허용, 관리자에서 문구·시간 추가/수정, 포스트 카드에도 문구

작업

  • shared: `BlogTimePeriod`, `getTimePeriodLabel`(자정 넘김), `MOCK_TIME_PERIODS`
  • db: mock/CALL 연동, 에 003 추가
  • admin: `/time-periods` CRUD + 사이드바 메뉴 + `/api/time-periods`
  • web: 홈 헤더 `7/29 · 22:30 · 밤`, TimelineFeed/상세에 시간대 문구
  • 수정: `periods is not iterable` — timePeriods 배열 정규화 + getTimePeriodLabel 방어 처리
  • 수정: 날짜 선택 로딩 — opacity만 쓰던 방식 → `Loader2` 스피너 오버레이로 변경

페이지 (apps/web)

현상/기능

  • apps/web 디자인에 다크모드 추가

현상/기능

  • Today 글자 우측 끝에 달력 아이콘 → 클릭 시 날짜 선택 → selectedDate 반영

현상/기능

  • apps/web 화면이 밋밋함 → 배경에 연한 IT/AI 연관 이미지 적용
  • 방식: 2번(BackgroundDecor 컴포넌트) + 3번(public 이미지) 조합

작업

  • `ThemeProvider` / `ThemeToggle`: localStorage(`serviceon-blog-theme`) + `html.dark`
  • FOUC 방지 인라인 스크립트, ThemeProvider 래핑
  • `globals.css`: `@custom-variant dark`, `:root` / `.dark` CSS 변수
  • Header·BackgroundDecor·홈/상세 UI 컴포넌트에 `dark:` 스타일 보강
  • 수정: Next.js 16 Script beforeInteractive 콘솔 오류 → `<head>` 인라인 `<script>`로 교체
  • 수정: 다크모드에서도 남던 스카이 블루 배경/액센트 → 차콜 배경 + 틸(teal) 액센트로 전환
  • 수정: React DevTools `children should not have changed` 경고 완화
  • `DatePickerButton`: 네이티브 `input type="date"` + Calendar 아이콘, showPicker 오픈
  • `BlogHomeClient`: 제목 행 우측 끝에 DatePickerButton 연결 → DateStrip과 동일 selectedDate 사용
  • IT/AI 분위기 배경 이미지 추가
  • fixed 배경 + opacity + 그라데이션 오버레이
  • BackgroundDecor 연결, 콘텐츠 z-10 래퍼
  • body 그라데이션을 컴포넌트 쪽으로 이관

인증/보안

현상/기능

  • 사용자 패스워드 암호화

작업

  • hashPassword / verifyPassword
  • admin NextAuth `authorize` bcrypt 검증
  • mock admin도 bcrypt 해시 사용
  • `pnpm db:` 시 admin 시드 해시 삽입

DB 연결

현상/기능

  • 서버 설정=서버, DB_PORT=3306, 서버 설정=serviceon2030, 서버 설정=serviceon_blog 연결

작업

  • pool(DB_*), 실 CALL , mock fallback, `pnpm db:`
  • `apps/web|admin/`에 DB_* 설정 (gitignore)
  • 스크립트가 자동 로드하도록 수정 → 스키마/시드 적용 완료

카테고리 기능

현상/기능

  • web 메인에서 카테고리(IT 개발 히스토리, AI 및 IT 소식) 선택
  • 관리자에서 카테고리 추가 가능하도록

작업

  • web: `CategoryFilter` + API `category` 쿼리, 날짜 점/목록도 카테고리 연동
  • admin: `/categories` CRUD 페이지, 포스트 폼 동적 카테고리 select
  • shared/db: 동적 `BlogCategory` 타입, mockStore, 확장

프로젝트 초기 구축

현상/기능

  • 개인 블로그(IT 개발 히스토리 / AI·IT 소식), 관리자 페이지, 반응형, 이미지+짧은 텍스트
  • Header: ServiceOn Blog + 로그인 아이콘
  • 첫 화면: 검색 + 날짜 스트립(게시글 있는 날 표시) + 타임라인
  • Next.js 16 + React 19 + TS 모노레포, admin은 Tailwind4/shadcn/NextAuth, MariaDB (ORM 금지)
  • 로그인 관리자 전용, 이미지 저장 보류, DB 추후 연결, 광고 Google AdSense
  • Ruga `ui-style-guide.mdc`(+`shadcn-style-guide.mdc`)를 rules에 복사해 admin 스타일 가이드로 적용

작업

  • 모노레포: `apps/web`, `apps/admin`
  • web: Header, SearchBar, DateStrip, TimelineFeed, AdSlot, 홈/상세/API
  • admin: NextAuth Credentials, DashboardLayout, 포스트 Split-Panel CRUD(mock), Sonner
  • db: mock 우선, MariaDB env 준비
  • rules: `ui-style-guide.mdc`, `shadcn-style-guide.mdc` (globs: `apps/admin/**`)
  • `npx -y react-doctor@latest` 1회 실행 (admin 46 / web 72). next-auth CVE 경고·Compiler try/catch 일부 수정