Plura: 에이전시 소유주를 위한 혁신적인 SaaS 애플리케이션

### 잠재력을 발휘하세요: 강력한 멀티테넌트 SaaS 애플리케이션 구축하기
* 🚀 꿈꾸는 모든 것을 만들 수 있는 초능력이 있다고 상상해 보세요. 이것이 바로 **에이전시 소유자를 위해 설계된 멀티테넌트 SaaS 애플리케이션**인 Plura 프로젝트가 제공하는 기능입니다.
* 🛠 이 프로젝트는 초보자도 쉽게 아키텍처를 탐색할 수 있도록 **2개월에 걸쳐 Bun, Stripe Connect, Next.js 14, Tailwind CSS, Clerk 인증**과 같은 고급 기술을 사용하여 세심하게 개발되었습니다.
* 📋 첫 번째 단계는 에이전시 소유자가 가입할 수 있는 **기능적인 랜딩 페이지**를 만든 다음, 에이전시와 고객을 효율적으로 관리할 수 있는 **대시보드**를 만드는 것입니다.
* 💳 Stripe Connect를 통합하면 **월 구독료를 청구하고 거래에서 플랫폼 수수료를 징수**할 수 있어 대행사 소유자와 고객에게 원활한 온보딩 경험을 제공할 수 있습니다.
* 📊 사용자는 **프리미엄 요금제로 업그레이드**하고, **맞춤형 애드온 제품에 액세스**하고, 사용자 경험을 향상시키는 전문 인터페이스를 통해 구독을 관리할 수 있습니다.
* 📈 이 애플리케이션은 클라이언트를 위한 하위 계정을 지원하므로 대행사 소유자는 **미디어 저장, 연락처 관리, 작업 추적을 위한 칸반과 유사한 파이프라인**과 같은 기능을 통해 여러 클라이언트를 효과적으로 관리할 수 있습니다.
* 🔧 직관적인 퍼널 빌더를 통해 하위 계정 사용자는 **드래그 앤 드롭 기능과 반응형 디자인 미리 보기**를 통해 웹사이트와 판매 퍼널을 만들고 관리할 수 있어 최적의 사용자 경험을 보장합니다.
* 🌐 무료 커뮤니티에 가입하여 이 강력한 애플리케이션을 함께 구축하면서 **목표를 달성하는 데 도움이 되는 귀중한 리소스, 멘토링, 프리랜서 기술**을 배울 수 있는 기회를 활용하세요.

### Clerk의 사용자 관리 및 에이전시 설정
* 👤 현재 사용자를 관리하려면 **먼저 사용자가 존재하는지 확인**하고, 존재하지 않으면 **즉시 반환**합니다.
* 📥 **이메일 주소를 사용하여 데이터베이스에서 해당 사용자의 데이터를 가져옵니다.** 사용자가 있는 경우 대행사, 사이드바 옵션, 하위 계정, 권한 등 필요한 세부 정보를 포함하여
* 🔍 **사용자 데이터가 없는 경우 사용자에게 에이전시 계정을 만들라는 메시지**를 표시하는 동시에 하위 계정이나 게스트 등의 역할이 있는지 확인합니다.
* 📩 초대를 받은 사용자의 경우 **초대 상태를 확인**하고 해당되는 경우 **팀 사용자를 생성**하여 관련 활동을 기록합니다.
* 📝 활동 로그를 생성하기 위해 **사용자 작업을 캡처**하여 관련 대행사 또는 하위 계정으로 연결하는 기능을 정의합니다.
* 🚀 또한 계정 생성 후 **사용자 메타데이터 업데이트와 초대장 삭제**도 처리하여 사용자 관리를 간소화합니다.
* 🔗 마지막으로 사용자 역할 및 에이전시 존재 여부에 따라 리디렉션 로직을 구현하여 **사용자의 상태에 따라 적절한 페이지로 사용자를 안내**합니다.
* ⚙ 전체적인 구조는 **대행사 및 하위 계정 기능을 효과적으로 관리**하면서 사용자에게 원활한 경험을 보장합니다.

### React에서 사용자 정의 모달 및 사용자 관리 시스템 구축하기
* 🔧 이 프로세스는 사용자 상호작용을 효과적으로 관리하기 위해 **사용자 지정 모달 컴포넌트**를 만드는 것으로 시작되며, 여기에는 **속성 추출 및 모달에 표시되는 X 아이콘**과 같은 UI 요소 사용자 지정이 포함됩니다.
* ⚙ 설정의 일부로 **불필요한 포커스 링과 기타 스타일을 제거**하여 시각적 매력을 높이는 동시에 소품이 올바르게 전달되고 옵션 설정이 구현되었는지 확인합니다.
* 📊 레이아웃에는 사용자 정보를 표시하는 사이드바가 포함되어 있으며, **기기 유형 및 사용자 권한에 따라 요소를 표시하거나 숨길 수 있는 특정 조건**이 있어 반응형 디자인이 가능합니다.
* 🖼 이미지 컴포넌트는 로고를 보여주기 위해 도입되었으며, 깔끔하고 전문적인 외관을 보장하기 위해 **특정 스타일**이 적용되고 팝오버 컴포넌트는 **추가 옵션과 기능**을 표시하는 데 활용됩니다.
* 📝 명령 입력 기능이 통합되어 사용자가 계정을 검색할 수 있으며, **사용자 역할 및 권한에 따라 동적으로 렌더링**되어 관련 데이터만 표시되도록 합니다.
* 🔒 사용자 권한은 구조화된 접근 방식을 통해 관리되므로 **대행사 소유자가 자신의 역할을 변경할 수 없으며 하위 계정에 대한 권한을 업데이트할 수 있는 기능**을 제공합니다.
* 🚀 마지막 작업은 사용자에게 필수 설정 단계를 안내하고 다양한 구성 요소를 원활하게 통합하여 사용자 경험을 향상시키는 **온보딩 런치패드**를 만드는 것입니다.
* 📈 전반적으로 이 시스템은 **사용자 관리에 대한 구조화된 접근 방식**을 강조하여 모든 기능이 직관적이고 접근하기 쉬우면서도 시각적으로도 매력적으로 보이도록 합니다.

### 미디어 업로드 및 파이프라인으로 하위 계정 관리 시스템 구축하기
* 🔍 이 프로젝트는 사용자가 하위 계정을 관리하고, 미디어를 업로드하고, 파이프라인과 상호 작용할 수 있는 **하위 계정 관리 시스템**을 만드는 데 중점을 두고 있습니다.
* 🖼 이 구현에는 사용자가 미디어 버킷에 이미지와 파일을 업로드할 수 있는 **미디어 업로드 기능**이 포함되어 있어 프로젝트의 자산을 더 쉽게 관리할 수 있습니다.
* 💾 업로드된 미디어를 관리하는 구조화된 접근 방식은 **하위 계정과 연결된 모든 미디어 파일을 표시하는 미디어 컴포넌트**를 만들어 설정합니다.
* 🗂 이 코드에는 미디어 파일을 삭제할 때 사용자에게 확인 메시지를 표시하는 **강력한 경고 대화 상자 시스템**이 포함되어 있어 실수로 인한 삭제를 최소화할 수 있습니다.
* ⚙ 이 시스템은 또한 **파이프라인 관리 기능**을 통합하여 사용자가 프로젝트 진행 상황을 추적하는 데 필수적인 파이프라인을 생성하고 관리할 수 있도록 합니다.
* 📜 이 아키텍처에는 **로딩 표시기, 미디어 업로드를 위한 양식, 사용자 인터페이스를 효과적으로 구성하는 레이아웃 구조** 등 다양한 구성 요소가 포함되어 있습니다.
* 🔄 오류 처리는 시스템 전반에 걸쳐 구현되어 상호작용 중에 **사용자에게 피드백**을 제공하고 원활한 사용자 경험을 보장합니다.
* 🔗 이 프로젝트는 **모듈식 설계를 강조**하여 여러 구성 요소와 파일에 걸쳐 문제를 분리함으로써 확장성과 유지 관리가 용이합니다.

### 종합적인 파이프라인 관리 시스템 구축
* 🔄 시스템은 먼저 기존 파이프라인 세부 정보를 확인하여 존재하지 않는 경우 **새 파이프라인 생성을 위한 하위 계정 관리**로 사용자를 리디렉션합니다.
* 📊 특정 하위 계정 ID와 연결된 파이프라인을 검색한 다음 **선택할 수 있는 드롭다운에 표시**합니다.
* 📋 레인이라는 개념이 도입되었는데, 파이프라인은 보드와 비슷하며 **레인은 해당 보드의 열**을 나타내므로 **티켓과 태그에 대한 데이터**가 필요합니다.
* 📂 티켓과 태그를 포함하도록 Prisma 클라이언트를 확장하여 추가 처리를 위해 필요한 모든 정보를 가져오도록 하는 **LaneDetails라는 새로운 유형**이 만들어집니다.
* 🔍 쿼리는 **관련 티켓 및 태그와 함께 차선**을 가져오도록 구성되어 사용자에게 표시할 수 있도록 데이터가 올바르게 정렬되도록 합니다.
* 📑 UI 구성 요소는 **UI 라이브러리의 탭**을 사용하여 구축되며, 이를 통해 사용자는 파이프라인 관리 인터페이스 내에서 다양한 보기를 탐색할 수 있습니다.
* 📝 **필수 정보를 표시**하고 사용자가 파이프라인을 효과적으로 관리할 수 있는 **파이프라인 정보 표시줄 컴포넌트**가 생성됩니다.
* 🛠 개발 프로세스 전반에 걸쳐 **파이프라인과 차선을 만들기 위한 양식 등 다양한 구성 요소**가 생성되어 시스템이 견고하고 사용자 친화적인지 확인합니다.

### 동적 태그 관리 시스템 구축
* 🔍 주요 목표는 **사용자가 기존 태그를 검색**하고 그에 따라 필터링할 수 있는 입력 필드를 만드는 것입니다.
* ✏ 검색한 태그가 존재하지 않는 경우 사용자는 **제목을 입력하고 색상을 선택하여 새 태그를 만들 수 있는 옵션**이 있어야 합니다.
* 🛠 이 컴포넌트는 **'하위 계정 ID', '선택한 태그 가져오기' 함수, 선택한 태그의 상태를 관리하는 기본 태그 배열** 등 여러 가지 프로퍼티를 허용합니다.
* 🎨 **파란색, 주황색, 녹색**과 같은 옵션을 포함하여 태그 색상에 대한 상수가 정의되고 나중에 사용할 수 있도록 **태그 색상에 대한 유형이 내보내집니다.**
* 📊 상태 관리에는 **`useState` 훅**을 사용하여 선택한 태그를 추적하고, **`useEffect`를 구현**하여 선택한 태그가 변경될 때마다 업데이트합니다.
* 💡 UI에는 **태그 선택을 위한 알림 대화상자**가 표시되고, 선택한 태그가 시각적으로 보기 좋은 형식으로 표시되며, 사용자가 **X 아이콘으로 태그를 제거**할 수 있습니다.
* 📝 이 구성 요소에는 **사용자가 태그를 빠르게 찾을 수 있는 검색 입력**과 **태그 생성 프로세스를 트리거하는 버튼**도 포함되어 있어 원활한 사용자 경험을 보장합니다.
* 🔄 마지막으로, 백엔드 기능이 통합되어 **태그 생성 및 삭제**를 처리함으로써 시스템이 강력하고 사용자 친화적으로 운영될 수 있도록 합니다.

### Stripe 통합으로 구독 기반 퍼널 관리 시스템 구축하기
* 🛠 이 프로세스는 각각 `useModel`과 `useRouter`를 사용하여 모델과 라우터를 설정하고 **선택한 요금제 ID에 대한 상태**를 생성하여 구독 요금제를 관리하는 것으로 시작됩니다.
* 📊 필요한 데이터를 사용할 수 있도록 하려면 **모달 공급자에서 플랜 데이터를 정의**해야 하며, 여기에는 **Prisma 클라이언트에서 필요한 유형**을 가져오는 것이 포함됩니다.
* 💳 다음 단계는 구독 상태를 생성하여 **구독 ID와 클라이언트 비밀번호를 관리**하고 Stripe을 통한 결제를 용이하게 하는 데 사용하는 것입니다.
* 🔄 컴포넌트가 렌더링될 때 구독 생성을 처리하기 위해 `useEffect` 훅이 구현되어 **선택한 가격 ID를 기반으로 클라이언트 비밀을 가져오기 위해 Stripe API를 비동기적으로 호출**합니다.
* 📬 사용자에게 이미 요금제가 있는 경우, **토스트 알림을 통해 요금제가 성공적으로 업그레이드**되었음을 알리고 라우터가 변경 사항을 반영하도록 새로 고쳐집니다.
* 📋 구독 양식 래퍼를 가져와서 구독 옵션을 표시하고, 클릭 이벤트를 통해 **선택한 가격 ID를 설정**하여 사용자가 원하는 요금제를 선택할 수 있도록 합니다.
* 💻 사용자가 양식과 상호 작용하면 **선택한 요금제 세부 정보**를 확인할 수 있으며, 제출 시 **결제를 확인**하고 그에 따라 구독 정보를 업데이트하는 데 필요한 작업이 트리거됩니다.
* 🔗 마지막으로 웹훅을 설정하여 **Stripe의 모든 구독 이벤트가 올바르게 처리**되도록 하여 애플리케이션 내에서 구독을 원활하게 통합하고 관리할 수 있도록 합니다.

### 종합적인 퍼널 에디터 구축하기: 아키텍처 및 기능
* 📱 퍼널 에디터는 반응형으로 설계되어 **모바일 기기에서 전체 너비를 보장**하는 동시에 오버플로를 적절히 관리합니다.
* 🎨 Canva에서 생성한 플레이스홀더 이미지가 **SVG 형식으로 변환**되어 밝고 어두운 모드에서 색상을 조정할 수 있습니다.
* 🔗 에디터의 기능에는 **특정 퍼널 ID에 대한 링크와 미리보기 링크, 존재하지 않는 도메인에 대한 오류 처리 기능**이 포함되어 있습니다.
* 🛠 아키텍처는 **탐색 편집기 사이드바와 메인 편집기**로 구성되며, 편집기 상태 및 기록을 관리하기 위해 **데이터 레이어로 감싸져** 있습니다.
* 📜 편집기 요소는 **사용자 정의 정적 요소와 다른 요소**를 포함할 수 있는 재귀 요소로 분류되어 편집기의 유연성을 향상시킵니다.
* 🔄 히스토리 상태 관리를 통해 **실행 취소 및 다시 실행 기능**을 사용할 수 있으며, 편집기에서 변경 사항을 추적하고 원활한 사용자 경험을 제공합니다.
* 💡 편집기는 **색상 및 불투명도와 같은 요소 스타일**을 사용자 지정하기 위해 **슬라이더 및 입력 필드**를 비롯한 다양한 구성 요소를 지원합니다.
* 📂 미디어 버킷 기능을 통해 사용자는 **미디어 파일을 업로드하고 관리**할 수 있으며, 이를 퍼널 에디터에 통합하여 **동적인 콘텐츠를 제작**할 수 있습니다.

### 드래그 앤 드롭 기능이 있는 동적 퍼널 페이지 편집기 구축하기
* 🛠 이 프로세스는 퍼널 페이지 ID를 기반으로 특정 페이지 콘텐츠를 검색하여 동적 콘텐츠 로딩을 허용하는 **'퍼널 페이지 세부 정보 가져오기'라는 쿼리 함수**를 생성하는 것으로 시작됩니다.
* 📦 데이터를 가져올 때 응답이 수신되면 **'로드 데이터' 액션을 전송**하여 가져온 요소로 상태를 업데이트하고 컴포넌트가 라이브 모드에 있어야 하는지 여부를 결정합니다.
* ⚡ 성능을 향상시키기 위해 **서버 측 렌더링을 사용하여 데이터를 미리 로드**함으로써 클라이언트 측 데이터를 가져오는 동안 빈 화면이 표시될 수 있는 지연을 방지합니다.
* 📲 편집기의 레이아웃은 다양한 모드(미리보기 및 라이브)에 맞게 **여백과 패딩을 조정**하여 여러 기기에서 원활한 사용자 경험을 보장하도록 설계되었습니다.
* 🖱 선택한 요소를 변경하는 동작을 실행하는 **클릭 이벤트**를 통해 상호 작용이 도입되어 시각적 피드백을 통해 사용자 참여를 향상시킵니다.
* 🔄 다양한 요소 유형(텍스트, 컨테이너 등)을 처리하기 위해 **재귀 컴포넌트 구조**가 구현되어 중첩된 컴포넌트를 허용하고 깔끔한 코드베이스를 유지합니다.
* 드래그 앤 드롭 기능이 통합되어 사용자가 에디터 내에서 요소를 이동할 수 있어 **유연한 디자인 프로세스에 매우 중요**합니다.
* 💻 연락처 양식 및 결제 양식과 같은 추가 구성 요소는 사용자가 데이터 처리 및 제출 프로세스에 세심한 주의를 기울여 **기능적인 요소**를 만들 수 있도록 제작되었습니다.

### Stripe 통합으로 SaaS 애플리케이션 구축하기: 종합 가이드
* 🚀 애플리케이션의 로딩 양식은 **글로벌 로딩을 사용하여 클라이언트 ID와 클라이언트 비밀이 모두 존재하는 경우 양식을 표시**하고, 그렇지 않은 경우 **로딩 메시지를 표시**합니다.
* 🔄 디버깅 결과 **재귀 컴포넌트가 결제 양식에 대한 지원이 필요**하여 로딩 문제를 해결하기 위해 가져오기를 해야 한다는 메시지가 표시되었습니다.
* 🔍 연구에 따르면 결제 생성 세션은 **"예기치 않은 JSON 종료"와 같은 오류**를 방지하기 위해 JSON 데이터가 포함된 유효한 응답을 반환해야 합니다.
* ⚠ 대리점 계정이 연결되어 있는지 확인하는 불필요한 섹션이 확인되었으며, **Plura의 대금 수금에 중점을 두어야 한다**는 점을 강조했습니다.
* 💡 연결된 계정으로 송금하는 기능을 구현하는 과제가 제시되었으며, **추가 탐색을 위한 리소스**가 제공되었습니다.
* 💻 이 대시보드는 기능을 향상시키기 위해 **Stripe 데이터를 활용하여 순이익 및 잠재적 수입**을 포함한 다양한 메트릭을 표시하도록 개발되었습니다.
* 📈 모든 환경 변수와 데이터베이스 연결이 프로덕션에 맞게 올바르게 구성되었는지 확인하는 데 중점을 두고 **애플리케이션을 Vercel에 성공적으로 배포**했습니다.
* 🔗 연결된 계정을 효과적으로 처리하기 위해 적절한 엔드포인트 구성의 필요성을 강조하면서 **Stripe 통합을 위한 웹훅 설정의 중요성**이 강조되었습니다.

Plura는 혁신적인 기능과 사용자 지정 가능한 도구를 통해 에이전시 소유자가 비즈니스를 원활하게 구축하고 관리할 수 있도록 지원합니다.

SaaS Website Builder, Project Management And Dashboard: Nextjs14, Bun, Stripe Connect, Prisma, MySQL

Giving you free web development tips and tricks everyday!

Im Perrin,
A seasoned web developer with over 7 years of professional experience. My passion lies in utilizing modern technologies to create user-friendly responsive web applications. Ive worked with startups and fortune 5 companies helping them generate more than $20M+ in revenue! Im here to share my knowledge with you today so that you can accomplish the same, if not even better! 


Web Prodigies

플루라를 통한 에이전시 소유주 역량 강화

Plura는 멀티테넌트 SaaS 애플리케이션으로, Bun, Stripe Connect, Next.

js 등의 기술을 사용하여 에이전시 소유자의 역량을 강화하도록 설계되었습니다.

이 플랫폼은 원활한 온보딩 프로세스, 동적 대시보드, 고객을 위한 하위 계정 생성 기능을 제공합니다.

맞춤형 Stripe 양식, 애드온 제품, 모든 기능을 갖춘 웹사이트 빌더와 같은 기능을 통해 Plura는 대행사 소유자에게 비즈니스를 효과적으로 관리하고 성장시키는 데 필요한 도구를 제공하는 것을 목표로 합니다.

이미지 다운로드 및 프로젝트 설정

공개 폴더에서 모든 이미지를 다운로드하여 자산 폴더에 정리합니다.

js의 이미지 컴포넌트를 사용하여 이미지 태그를 생성하고 소스를 다운로드한 미리보기 이미지로 설정합니다.

탐색 컴포넌트를 빌드하고, 동적 라우팅을 설정하고, 데이터베이스 관리를 위해 Prisma를 초기화합니다.

에이전시 데이터베이스에서 관계 구축

한 에이전시에는 여러 명의 소유자가 있을 수 있지만 각 소유자는 하나의 에이전시에만 속할 수 있습니다.

관계는 대행사 ID를 통해 설정되며, 대행사가 삭제되면 소유자가 제거되는 계단식 삭제 작업을 통해 설정됩니다.

데이터베이스 스키마에는 사용자, 권한, 에이전시, 하위 계정, 알림 등에 대한 테이블이 포함되어 있으며, 다양한 필드와 관계를 통해 에이전시 내의 사용자 액세스 및 작업을 관리할 수 있습니다.

이 양식에는 로고 업로드, 대행사 세부 정보 입력, 대행사 목표 제공을 위한 기능이 포함되어 있습니다.

상태 관리 및 API 호출을 위한 UI 구성 요소와 후크의 조합을 사용합니다.

또한 양식에는 유효성 검사, 오류 처리, 대행사 정보를 생성하거나 업데이트하는 기능이 포함되어 있으며, 제출이 성공하면 대행사 페이지로 원활하게 전환됩니다.

재사용 가능한 사이드바 컴포넌트 만들기

사이드바 구성 요소는 모바일 디바이스뿐만 아니라 에이전시 및 하위 계정 보기 모두에서 재사용할 수 있도록 설계되었습니다.

ID(문자열)와 유형(에이전시 또는 하위 계정)이라는 두 가지 프로퍼티가 필요합니다.

이 컴포넌트는 사용자 세부 정보를 가져와 적절한 로고를 결정하고 사용자의 역할 및 권한에 따라 사이드바 옵션을 생성합니다.

하위 계정 설정하기: 단계별 가이드

업서트 하위 계정 쿼리는 하위 계정을 매개변수로 사용하고 에이전시 소유자를 확인하는 비동기 함수를 사용하여 작성됩니다.

에이전시 소유자를 찾을 수 없으면 오류가 기록됩니다.

그런 다음 이 함수는 새 권한을 만들고 하위 계정을 삽입하여 필요한 필드를 설정하고 권한을 연결합니다.

하위 계정에 대한 기본 사이드바 옵션도 생성됩니다.

사용자 세부 정보에 대해서도 이 과정을 반복하여 사용자 정보를 변경하고 권한을 업데이트할 수 있습니다.

이 구현에는 오류 처리, 로딩 상태 및 하위 계정 생성을 위한 사용자 지정 모달이 포함됩니다.

컴포넌트 구조에는 선택 컴포넌트에 대한 Shad CN UI 라이브러리를 사용하여 선택 드롭다운이 있는 사용자 역할에 대한 양식 항목이 포함됩니다.

이 로직은 사용자 역할 변경, 특정 역할에 대한 드롭다운 비활성화, 사용자 세부 정보 저장 등을 처리합니다.

또한 이 컴포넌트에는 변경 사항을 제출하는 버튼, 사용자 권한 섹션, 권한을 변경하고 하위 계정을 삭제할 수 있는 하위 계정의 동적 목록이 포함되어 있습니다.

이 코드는 또한 새 하위 계정을 만들기 위한 모달과 사용자 역할 및 권한을 표시하는 데이터 테이블을 구현합니다.

React 및 트랜잭션 스택으로 데이터 테이블 설정하기

프로세스는 Bun 명령을 사용하여 Trans Stack 테이블을 설치한 다음 개발 서버를 실행하는 것으로 시작됩니다.

열 정의와 핵심 행 모델을 포함하여 Trans Stack React 테이블에서 주요 임포트가 이루어집니다.

그런 다음 데이터와 값에 대한 일반 유형이 포함된 데이터 테이블 컴포넌트가 생성되고, 검색 컴포넌트와 테이블 렌더링 로직을 포함한 레이아웃을 구조화하는 데 React 조각이 사용됩니다.

미디어 컴포넌트 구축 및 파이프라인 관리

미디어 컴포넌트는 사용자에게 업로드된 모든 미디어 파일을 표시하여 URL을 쉽게 복사하여 붙여넣을 수 있도록 합니다.

설정에는 미디어 폴더 만들기, 미디어 페이지 정의, 미디어 파일 가져오기 및 만들기 기능 구현이 포함됩니다.

파이프라인 관리에는 파이프라인 페이지 설정, 파이프라인 세부 정보 쿼리, 여러 파이프라인을 선택하고 관리하기 위한 드롭다운 사용 등이 포함됩니다.

이 프로세스에는 파이프라인에 대한 사용자 지정 모달을 만든 다음, 파이프라인 세부 정보를 위한 하나의 필드가 있는 간단한 양식을 작성하는 것이 포함됩니다.

퍼널과 파이프라인 모두에 대한 양식 스키마와 업서트 함수가 필요한 유형과 함께 정의됩니다.

구성 요소 구조에는 레인을 추가하고, 주문을 업데이트하고, 태그를 사용하여 티켓을 관리하는 기능과 함께 파이프라인을 보고 관리할 수 있는 탭 인터페이스가 포함되어 있습니다.

드래그 앤 드롭 기능을 위해 React Beautiful DND가 통합되어 있으며, 데이터 가져오기 및 업데이트를 처리하기 위해 다양한 쿼리가 생성됩니다.

드래그 앤 드롭 기능으로 티켓팅 시스템 구축하기

티켓팅 시스템은 파이프라인 보기를 통해 티켓을 생성하고 관리하는 데 중점을 두고 개발 중입니다.

이 프로세스에는 필요한 구성 요소를 가져오고, 상태 관리를 설정하고, 티켓 레인을 위한 드래그 앤 드롭 기능을 구현하는 작업이 포함됩니다.

티켓 관리 프로세스를 간소화하기 위한 팀원 배정, 태그 추가, 연락처 검색 등의 추가 기능도 개발 중입니다.

태그 생성기 컴포넌트를 사용하면 태그를 검색, 생성 및 선택할 수 있습니다.

상태 관리를 사용해 선택한 태그를 추적하고 태그를 추가 및 삭제하는 기능을 제공합니다.

또한 이 컴포넌트는 데이터베이스에서 기존 태그를 가져와 UI를 업데이트하고, 작업을 정리하기 위한 원활한 드래그 앤 드롭 기능을 제공합니다.

연락처 관리 및 Stripe 통합 구현하기

연락처 관리 시스템은 비동기 기능을 사용하여 이름과 이메일에 대한 간단한 양식으로 데이터베이스에 연락처를 업데이트합니다.

이 시스템을 통해 연락처를 티켓에 배정할 수 있으며 예상 티켓 값에 대한 파이프라인 보기를 제공합니다.

그런 다음 튜토리얼은 계정 관리, 연결된 계정 만들기 및 수신 설정에 대한 Stripe 통합으로 전환하여 Stripe 대시보드 구성 및 애플리케이션 업데이트에 대한 자세한 단계를 안내합니다.

구독 모델은 필요한 구성 요소를 가져오고 URL 검색 매개변수를 사용하여 사용자의 요금제를 결정함으로써 통합됩니다.

요금제 선택 모달을 트리거하는 버튼과 함께 요금제 옵션을 표시하는 가격 카드가 생성됩니다.

구독 양식은 사용자 입력을 처리하고 결제 처리를 위해 Stripe와 상호 작용하도록 설정되며, 구독 데이터를 데이터베이스와 동기화하기 위해 웹훅이 설정됩니다.

기능이 의도한 대로 작동하는지 확인하기 위해 디버깅 및 테스트가 수행됩니다.

구독 생성 디버깅 및 Stripe 계정 연결하기

사용자가 구독을 생성하는 데 어려움을 겪었고, 처음에는 설정의 비례 배분 과금 때문에 잘못된 요금제에 가입했습니다.

그 후 플랜을 업데이트하고 에이전시 계정과 하위 계정 모두에 대해 Stripe 계정을 연결하는 데 어려움을 겪었습니다.

이 과정에는 퍼널을 위한 동적 폴더와 페이지를 만들고, 제품 테이블을 설정하고, 퍼널 단계를 위한 드래그 앤 드롭 기능을 구현하는 작업이 포함되었습니다.

드래그 앤 드롭 기능으로 퍼널 페이지 구축하기

이 코드는 페이지 매핑 및 상태 관리를 위해 제공된 함수를 사용하여 드래그 앤 드롭 기능으로 퍼널 페이지를 만드는 과정을 간략하게 설명합니다.

여기에는 드래그 이벤트 처리, 페이지 순서 업데이트, 변경 사항을 저장하기 위한 API 호출을 위한 함수가 포함되어 있습니다.

정적 및 재귀적 요소의 사용과 실행 취소 및 다시 실행 작업을 위한 기록 상태 관리 시스템의 구현을 강조하면서 편집기의 아키텍처에 대해 설명합니다.

Redux와 유사한 에디터 상태 관리 만들기

편집기의 상태는 요소 추가, 업데이트, 삭제와 같은 작업을 전송하는 리듀서를 사용하여 관리됩니다.

리듀서는 스위치 문을 사용하여 다양한 액션 유형을 처리하고 그에 따라 에디터의 상태 및 히스토리 스택을 업데이트합니다.

컨텍스트 공급자는 편집기의 상태와 디스패치 기능을 컴포넌트에 제공하여 편집기의 상태와 동작을 원활하게 관리할 수 있도록 설정됩니다.

퍼널 편집기에는 설정, 컴포넌트, 스택 및 미디어 파일에 대한 여러 트리거가 있는 탭 목록이 포함되어 있습니다.

두 번째 사이드바가 생성되어 사용자 선택에 따라 특정 탭 콘텐츠를 렌더링합니다.

편집기에서는 드래그 가능한 컴포넌트, 라이브 모드, 스타일 및 속성을 동적으로 업데이트하는 기능과 같은 기능을 사용하여 텍스트 및 미디어를 포함한 요소를 실시간으로 사용자 정의할 수 있습니다.

재귀 컴포넌트로 드래그 앤 드롭 에디터 구축하기

편집기의 컨테이너 구성 요소는 재귀적으로 설계되어 다른 요소와 컨테이너를 중첩할 수 있습니다.

드래그 앤 드롭 기능이 구현되어 사용자가 사이드바에서 컨테이너로 요소를 이동할 수 있습니다.

이 컴포넌트에는 요소를 선택, 삭제, 복제하는 기능과 컨테이너의 콘텐츠에 따라 하위 요소를 동적으로 렌더링하는 기능도 포함되어 있습니다.

링크 및 양식 기능을 갖춘 동적 웹 컴포넌트 구축하기

이 컴포넌트는 프로덕션 모드에 따라 링크 또는 스팬을 렌더링하여 원치 않는 페이지 리디렉션을 방지합니다.

재귀 컴포넌트는 2열 레이아웃을 생성하는 데 사용되어 요소를 추가할 수 있습니다.

연락처 및 결제 양식은 리드를 캡처하고 결제를 처리하도록 제작되었으며, Stripe 기능을 위해 API 호출 및 클라이언트 비밀 생성이 통합되어 있습니다.

하위 도메인과 퍼널로 웹 애플리케이션 구축하기

애플리케이션은 각 퍼널에 고유한 하위 도메인이 필요하며 하위 도메인을 기반으로 퍼널 페이지 데이터를 검색합니다.

여기에는 페이지를 찾을 수 없음 오류를 처리하고 퍼널 페이지의 방문 횟수를 업데이트하는 로직이 포함되어 있습니다.

대시보드는 대행사 및 하위 계정에 대한 지표를 제공하며, 프리랜서 및 성공을 위한 지원 커뮤니티 구축에 중점을 두고 마감된 세션, 보류 중인 세션, 순이익 및 잠재적 수입에 대한 인사이트를 제공합니다.

SaaS 애플리케이션 구축하기: 개발에서 배포까지

이 프로세스에는 파이프라인 값 계산, 카드 구성 요소 생성, 파이프라인 추적을 위한 진행률 구성 요소 구현이 포함됩니다.

애플리케이션에는 퍼널 성능 차트, 결제 활동 및 거래 내역 테이블도 포함됩니다.

마지막으로 Vercel에 배포하고 PlanetScale로 프로덕션 데이터베이스 설정하면 애플리케이션 설정이 완료됩니다.