← 갤러리로 돌아가기

Service Dashboard

여러 서비스의 현황·비용·AI 플랜을 한 화면에서 관리해요.

운영대시보드AI

이 앱은 데모 페이지에서 로그인 없이 바로 체험할 수 있어요. 아래 버튼으로 이동해서 더미 데이터로 주요 기능을 눌러보세요.

데모 보러 가기

🛠️ 개발 가이드

이 포트폴리오 갤러리 자체의 앱 목록을 "관리 대상 서비스"로 삼는, 자기 참조형 운영 대시보드예요.

기술 스택

Next.jsReactlocalStorage

핵심 구현 포인트

  • data/apps.js에 등록된 실제 앱 목록을 그대로 import해서 서비스 카드를 자동 생성해요.
  • 탭마다 독립적인 하위 상태를 갖되, 전체를 하나의 STORAGE_KEY로 저장해요.
  • AI PM·모닝 브리핑 등은 미리 써둔 문장 뱅크(PLAN_BANK)에서 무작위로 골라 조합해 "생성된 것처럼" 보여줘요.

이렇게 만들면 돼요

  1. 앱 레지스트리를 import해서 서비스 목록을 만들어요.
  2. 현황/자동화/AI PM/아이디어/비용/모닝브리핑/피드백 탭을 구성해요.
  3. 샘플 문장 뱅크로 AI 생성 결과를 흉내내요.

참고 파일

components/gallery/ServiceDashboardDemo.jsxdata/apps.js