← 갤러리로 돌아가기마케팅AI진단
이 앱은 데모 페이지에서 로그인 없이 바로 체험할 수 있어요. 아래 버튼으로 이동해서 더미 데이터로 주요 기능을 눌러보세요.
데모 보러 가기🛠️ 개발 가이드
실제 PageSpeed·AI 호출 없이, 입력한 URL을 해시로 변환해 항상 같은 URL이면 같은 점수가 나오게 만든 진단 데모예요.
기술 스택
Next.jsReact해시 기반 샘플 데이터 생성
핵심 구현 포인트
- 문자열 해시값으로 점수·등급·이슈 목록을 결정해서, 매번 다르지만 URL마다 일관된 "가짜" 결과를 만들어요.
- 부호 있는 비트 시프트(>>) 대신 부호 없는 시프트(>>>)를 써서 큰 해시값에서 음수가 나오는 버그를 피했어요.
- 진단 결과를 history 배열에 계속 누적해서 "진단 이력" 탭에서 추이 차트로 보여줘요.
이렇게 만들면 돼요
- 문자열을 정수 해시로 바꾸는 hash() 함수를 만들어요.
- 해시값을 % 연산해 점수·등급·불리언 플래그를 뽑아내요.
- 결과를 history 배열에 저장하고, 최근 N개로 추이를 그려요.
참고 파일
components/gallery/MarketerOpsDiagnosisDemo.jsx