> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 유료 이벤트 웹사이트 출시하기

> Notion을 바탕으로 프로그램, 연사, 장소, 유료 티켓을 출시하세요.

export const Connectors = ({items}) => <div style={{
  margin: "8px 0 20px"
}}>
    <style>{`
      .connectors-list, .connectors-list * { margin-top: 0 !important; margin-bottom: 0 !important; }
      .connectors-row {
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 4px 0 !important;
        min-height: 0 !important;
        height: auto !important;
      }
      .connectors-row img {
        width: 20px !important;
        height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
        margin: 2px 0 0 !important;
        display: block !important;
      }
    `}</style>
    <div className="connectors-list">
      {items.map((item, i) => <div key={item.id} className="connectors-row" style={{
  borderTop: i === 0 ? "none" : "1px solid rgba(130,130,130,0.22)"
}}>
          <img src={`/images/connectors/${item.id}.svg`} alt="" width={20} height={20} />
          <div style={{
  minWidth: 0
}}>
            <div>
              <strong>{item.name}</strong>
              {item.why ? <span style={{
  opacity: 0.72
}}> · {item.why}</span> : null}
            </div>
            {item.auth === "api-key" ? <div style={{
  fontSize: "11.5px",
  lineHeight: 1.35,
  color: "#F26207",
  marginTop: "2px"
}}>
                Not a native connector. Agent will ask for your API key.
              </div> : null}
          </div>
        </div>)}
    </div>
  </div>;

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block max-w-full overflow-x-hidden font-sans !whitespace-pre-wrap !break-words" style={{
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
      <div className="pr-7" style={{
    whiteSpace: "pre-wrap",
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
        {children}
      </div>
    </CodeBlock>;
};

프로그램, 연사, 장소, 오시는 길, 티켓 체크아웃을 갖춘 완전한 유료 이벤트 웹사이트를
만드세요. 참석자는 Replit Database에 저장하고, 결제는 Stripe로 받고, 확인 메일은
Resend로 보내고, 명단은 내보내세요. 링크를 공유하기 전에 테스트 주문을 넣어보세요.

## 적합한 대상

* 콘퍼런스, 밋업, 출시 행사를 위한 공개 페이지와 유료 티켓이 필요한 이벤트 마케터
* 별도의 콘텐츠 시스템 없이 앱 안에서 어젠다를 편집해야 하는 커뮤니티 리드

## 커넥터

<Connectors
  items={[
{
  id: "notion",
  name: "Notion",
  why: "연사, 프로그램, 세션 시간",
},
{ id: "resend", name: "Resend", why: "구매 후 확인 이메일" },
{ id: "stripe", name: "Stripe", why: "유료 티켓과 체크아웃" },
]}
/>

## 시작하기 전에

이벤트 이름, 날짜, 장소, 티켓 가격과 연사용 Notion 데이터베이스(이름, 사진, 세션)를
준비하세요. Notion, Resend, Stripe를 연결하세요. Agent가 앱 안에 체크아웃을
구축합니다.

## Agent에게 요청하기

<AiPrompt>
  이 Notion 페이지\[링크]를 바탕으로 완전한 유료 이벤트 웹사이트를 만들어
  주세요: 프로그램, 연사, 장소, 오시는 길, 티켓 체크아웃입니다. Notion에서 연사
  이름, 사진, 직함, 소개, 세션 시간을 사용해 주세요. Stripe로 티켓당 \[가격]을
  청구해 주세요. 참석자는 Replit Database에 저장하고, Resend로 확인 메일을
  보내고, 명단을 내보내 주세요.
</AiPrompt>

## 예상되는 결과

Agent는 공개 사이트를 빌드하고 체크아웃, 결제, 확인 메일, 참석자 명단을
연결합니다. 링크를 공유하기 전에 테스트 주문을 넣어보세요. Stripe 테스트 모드와
테스트 카드를 사용한 다음, 실제 결제로 전환하기 전에 확인 메일이 도착하는지,
참석자가 명단에 있는지, 내보내기에 포함되는지 확인하세요.

## 나에게 맞게 조정하기

<AiPrompt>
  이 Notion 데이터베이스\[링크]를 바탕으로 연사 페이지를 추가해 주세요. 이름,
  사진, 직함, 소개, 세션 시간을 사용해 주세요. Notion이 변경되면 페이지도
  동기화되게 해주세요.
</AiPrompt>

<AiPrompt>
  참석자가 \[n]명이 되면 티켓 판매를 마감하고 대신 대기자 명단 폼을 보여주세요.
</AiPrompt>

## 문제 해결

* **확인 이메일이 오지 않음:** Resend가 연결되어 있고 발신 도메인이 인증되었는지 확인하세요. 테스트 주문을 넣고 Resend 대시보드에서 이메일이 발송되었는지 확인하세요.
* **연사나 시간이 잘못됨:** Agent에게 Notion 데이터베이스(이름, 사진, 직함, 소개, 세션 시간)를 알려주고, Notion이 변경되면 페이지도 동기화하도록 요청하세요.
* **체크아웃에서 결제가 되지 않음:** Stripe가 연결되어 있고 먼저 테스트 모드인지 확인하세요. 링크를 공유하기 전에 테스트 주문을 넣어보세요.

## 관련 문서

<CardGroup cols={2}>
  <Card title="랜딩 페이지 디자인하기" href="/ko/use-cases/design-landing-page">
    대기자 명단이나 출시 페이지에도 동일한 Notion 브리프를 사용합니다.
  </Card>

  <Card title="소셜 아이콘과 배너 만들기" href="/ko/use-cases/create-social-kit">
    프로필 및 커버 자산도 필요한 이벤트 마케터를 위한 문서입니다.
  </Card>
</CardGroup>