← 갤러리로 돌아가기마케팅AICMS
이 앱은 데모 페이지에서 로그인 없이 바로 체험할 수 있어요. 아래 버튼으로 이동해서 더미 데이터로 주요 기능을 눌러보세요.
데모 보러 가기🛠️ 개발 가이드
AI 사이트 편집기의 변경 미리보기(diff)를, 실제 AI 없이 직접 구현한 줄 단위 비교 알고리즘으로 보여주는 데모예요.
기술 스택
Next.jsReactlocalStorage직접 구현한 line diff
핵심 구현 포인트
- diff 뷰는 두 문자열을 줄 단위로 비교하는 직접 구현 알고리즘이라, 별도 라이브러리가 없어요.
- "승인 & 커밋" 버튼은 실제 GitHub API 대신 가짜 커밋 URL을 만들어 커밋 이력 배열에 저장해요.
- 블로그 포스트·뉴스레터 구독자는 모두 localStorage 배열에 대한 CRUD로 구현했어요.
이렇게 만들면 돼요
- 가짜 파일 트리(경로 → 내용 맵)를 정의해요.
- 프롬프트를 입력받아 간단한 문자열 치환으로 "수정본"을 만들어요.
- 원본과 수정본을 줄 단위로 비교해서 +/- 표시로 그려요.
- 커밋 버튼에 지연 후 가짜 커밋 URL을 반환하는 함수를 붙여요.
참고 파일
components/gallery/MarketerOpsBlogSiteDemo.jsx