← 갤러리로 돌아가기마케팅AI분석
이 앱은 데모 페이지에서 로그인 없이 바로 체험할 수 있어요. 아래 버튼으로 이동해서 더미 데이터로 주요 기능을 눌러보세요.
데모 보러 가기🛠️ 개발 가이드
GA4·Search Console의 실제 OAuth 연동 없이, "연결하기" 버튼 한 번으로 연결된 것처럼 보이게 만든 데모예요.
기술 스택
Next.jsReact해시 기반 샘플 데이터 생성
핵심 구현 포인트
- "연동하기" 버튼은 실제 OAuth 대신 로컬 state를 connected: true로 바꾸는 것뿐이에요.
- GA4/GSC/SOV/경쟁사 비교가 모두 같은 해시 기반 샘플 데이터 생성 패턴을 재사용해요.
- 채널별 색상 매핑 객체 하나로 막대 그래프 색을 항상 통일해요.
이렇게 만들면 돼요
- 연동 버튼 클릭 → 가짜 connected 상태와 계정 정보를 채워요.
- "데이터 불러오기" 버튼 → 해시 기반 샘플 데이터를 생성해요.
- 탭별로 KPI 카드·막대그래프·리스트를 연결해요.
참고 파일
components/gallery/MarketerOpsChannelsDemo.jsx