2단계 PASONA 섹션 자동 생성 화면을 만들겠습니다. 먼저 현재 코드 구조를 확인하겠습니다.

이제 PASONA 공식 기반의 2단계 컴포넌트와 전체 앱 상태 관리를 구현하겠습니다.

2단계 PASONA 콘텐츠 편집 화면을 완성했습니다.

2단계 주요 기능:

1. AI 자동 생성 시뮬레이션 - 로딩 애니메이션과 함께 1단계 데이터 기반으로 PASONA 6개 섹션 콘텐츠 자동 생성

   • P (Problem): 문제 제기
   • A (Affinity): 공감
   • S (Solution): 해결책
   • O (Offer): 제안
   • N (Narrowing): 한정/긴박감
   • A (Action): 행동 촉구
2. 섹션별 편집 기능 - 각 카드의 "수정" 버튼으로 내용 직접 편집 가능

3. CTA 설정 옵션

   • 신청 폼: 이름, 이메일, 전화번호 등 필드 선택 가능
   • CTA 버튼: 단순 클릭 버튼 형태
4. 단계 이동 - 이전 단계로 돌아가거나 "랜딩페이지 생성" 버튼으로 3단계 진행

3단계 완성본 화면을 이어서 만들까요?

3단계 완성본 화면을 만들겠습니다. 먼저 현재 코드 구조를 확인하겠습니다.

이제 3단계 완성본 컴포넌트를 만들겠습니다. 실제 랜딩페이지처럼 보이는 미리보기와 다운로드/복사 기능을 포함합니다.

이제 메인 컴포넌트를 업데이트하여 3단계를 연결하겠습니다.

3단계 완성본 화면이 완성되었습니다.

3단계 주요 기능:

1. 실제 랜딩페이지 미리보기 - PASONA 섹션이 실제 웹사이트처럼 렌더링되어 보여짐

   • Hero 섹션 (문제 제기)
   • 공감, 해결책, 제안, 한정, 행동 섹션 순서대로 표시
   • 선택한 CTA 타입(폼/버튼)에 따라 하단에 신청 폼 또는 버튼 렌더링
2. 반응형 뷰 모드 - 데스크톱/태블릿/모바일 화면 크기로 미리보기 전환 가능

3. 내보내기 기능

   • HTML 복사: 클립보드로 코드 복사
   • HTML 다운로드: 완전한 HTML 파일로 다운로드 (CSS 포함)

4. 탐색 기능

   • 이전 단계로 돌아가기
   • 새로 만들기 (처음부터 다시 시작)

이제 1단계부터 3단계까지 전체 플로우가 완성되었습니다. 테스트해보시고 추가로 수정하고 싶은 부분이 있으면 말씀해주세요!