[Release] Week 4 Demo – 실제 티스토리 연동 & 인증/온보딩/캠페인 생성 통합

[2seb2]

🚀 Week 4 Demo Release

이번 PR은 Week 4 데모를 위한 릴리즈 PR로,
사용자 인증부터 SDK 연동, 광고 캠페인 생성까지의 전체 사용자 여정을 완성하는 것을 목표로 합니다.

금요일 데모 이후, 해당 주차의 작업 내용을 develop → main으로 머지하여
main 브랜치를 항상 데모 가능한 안정 버전으로 유지하고자 합니다.

---

✅ 작업 내용

이번 PR은 Frontend ↔ Backend ↔ SDK 전체 흐름을 연결하고,
회원가입 → SDK 연동 → 캠페인 생성 → 광고 노출까지 end-to-end로 동작하도록 구성한 변경입니다.

1️⃣ Frontend (인증 & 온보딩 & 캠페인 생성)

• 인증 시스템

  • 회원가입/로그인 페이지 UI 구현
  • Google OAuth 연동
  • 공통 Modal, TextField 컴포넌트

• SDK 설치 가이드

  • 코드 스니펫 및 복사 기능 (react-syntax-highlighter)
  • Toast 알림 시스템
  • 3단계 설치 가이드 UI
  • React.lazy 코드 스플리팅 및 스켈레톤

• 캠페인 생성 플로우

  • 3단계 프로그래스 바 및 네비게이션
  • Zustand 기반 폼 상태 관리
  • Step1: 이미지 업로드, 제목/내용/URL, 키워드 선택, 고의도 타겟팅
  • Step2: 일일/총 예산, CPC 설정
  • Step3: 최종 확인 및 광고 시작

• 공통 개선

  • Toast 알림 시스템 (Context API)
  • 온보딩 전용 레이아웃
  • FSD 아키텍처 정리 (폴더명 숫자 prefix)
  • 아이콘 시스템 확장

📁 주요 파일

• frontend/src/1_app/* - 앱 진입점, 라우팅
• frontend/src/2_pages/auth/*, onboardingSdkGuide/*, campaignCreate/*
• frontend/src/3_features/sdkInstallation/*, campaignCreation/*, authorize/*
• frontend/src/4_shared/ui/* - 공통 UI 컴포넌트

---

2️⃣ Backend (인증 & DB & 보안)

• Google OAuth

  • OAuth 시작 및 콜백 엔드포인트
  • state 검증 및 token 교환
  • JWKS 기반 id_token 검증

• Database 설정

  • TypeORM 세팅 및 Entity 구성
  • 배포 환경 DB 연동
  • OAuthAccount, UserCredential 테이블 추가

• 보안 강화

  • blogKey 검증 Guard
  • Rate Limiting (IP당 60초 100회)
  • Service 레이어 중복 검증 제거

• 코드베이스 리팩토링

  • Campaign 타입 통합 (CampaignWithTags)
  • Repository 메서드 네이밍 통일
  • snake_case → camelCase 전환
  • 순환 의존성 제거

📁 주요 파일

• backend/src/auth/* - OAuth 구현
• backend/src/common/guards/* - blogKey Guard
• backend/src/campaign/* - Repository 통합
• backend/typeorm.config.ts, docker-compose.yml

---

3️⃣ SDK (광고 삽입 & 보안 & 행동 분석)

• 동적 광고 삽입

  • 1차 광고: 본문 최상단
  • 2차 광고: 스크롤 기준 최근접 위치
  • 고의도 사용자 감지 시 광고 교체

• 보안 개선

  • XSS 방어 (HTML Escape)
  • Tab-nabbing 방지 (rel="noopener noreferrer")

• 행동 분석 강화

  • 코드 블록 복사 감지 (15점)
  • 일반 복사 (5점)
  • 태그 추출 3단계 폴백 전략

• UI 개선

  • "Sponsored" 라벨 및 "by BoostAD" 푸터

📁 주요 파일

• sdk/src/features/DevAdSDK.ts - 광고 삽입 전략
• sdk/src/features/BannerAdRenderer.ts - XSS 방어
• sdk/src/features/TagExtractor.ts, BehaviorTracker.ts

---

4️⃣ 인프라 (도메인 & HTTPS)

• CloudFlare 도메인 연결

  • boostad.site 도메인 구매
  • DNS 레코드 설정 (www, api)
  • CloudFlare Workers로 HTTPS 적용

• 배포 설정

  • Nginx 설정 (CloudFlare Proxy)
  • NCP Object Storage 권한 자동화
  • CORS 설정 정리

📁 주요 파일

• nginx/default.conf
• docker-compose.yml
• .github/workflows/*

---

📸 스크린샷 / 데모

인증 및 온보딩

코드 스니펫 + 캠페인 생성

---

🧪 테스트 방법

• LOCAL
  npm run dev

• 프론트엔드

  1. /auth/register - 회원가입
  2. /auth/login - 로그인
  3. /publisher/onboarding/sdk-guide - SDK 가이드 및 코드 복사
  4. /advertiser/campaign-create - 캠페인 생성 (Step 1→2→3)

• 백엔드

  1. GET /api/auth/google - OAuth 시작
  2. Rate Limiting 테스트 (60초 100회 초과)
  3. 미등록 blogKey로 SDK 요청 → 403 응답

• SDK

  1. sdk/test/test-blog.html Live Server 실행
  2. 스크롤/복사 행동 수행 → 70점 도달 시 광고 교체 확인
  3. 코드 블록 복사 → 15점 부여 확인

• 배포 환경
  https://www.boostad.site

---

💬 To Reviewers

• develop → main 머지 PR입니다.
• 변경 범위가 Frontend / Backend / SDK / 인프라 전반에 걸쳐 있어 기능 단위로 정리했습니다.

Week 4 핵심 목표

실제 tistory에서 동작하기

1. 사용자 인증 (회원가입/로그인 + OAuth)
2. 퍼블리셔 온보딩 (SDK 설치 가이드)
3. 광고주 온보딩 (캠페인 생성 전체 플로우)
4. SDK 고도화 (동적 삽입, XSS 방어, 행동 분석)
5. 인프라 (HTTPS, DB, 보안)

후속 작업

• 회원가입/로그인 API 연동
• OAuth callback 리다이렉트 처리
• 폼 유효성 검사 강화
• 이미지 업로드 에러 처리