Add custom pages to Clerk's UserProfile component
- Clerk의 UserProfile 컴포넌트를 확장하여 사용자 계정 관리 기능을 강화하는 방법을 설명합니다. 🛠️
- 이전 비디오에서 사용자 드롭다운 메뉴를 확장한 것에 이어, 이번에는 UserProfile에 사용자 정의 페이지, 탭, 링크를 추가합니다. 🔗
- UserProfile 컴포넌트는 기본적으로 프로필 및 보안과 같은 계정 관리 기능을 제공합니다. ⚙️
- UserProfile에 사용자 정의 콘텐츠를 추가하는 두 가지 주요 방법이 있습니다. ✌️
- 첫 번째는
UserProfilePage를 사용하여 UserProfile 모달/대화 상자 내부에 사용자 정의 페이지를 추가하는 것입니다. 📄
UserProfilePage는 레이블, 아이콘을 가지며, 내부에서 JSX 또는 사용자 정의 컴포넌트를 렌더링합니다. 🖼️
- 두 번째는
UserProfileLink를 사용하여 사용자를 UserProfile 모달 외부의 다른 페이지로 이동시키는 링크를 추가하는 것입니다. ➡️
UserProfileLink는 레이블, 아이콘, 그리고 이동할 URL을 필요로 합니다. 🌐
- 예시로, 'Terms'라는 사용자 정의 페이지를 추가하여 모달 내부에 약관 내용을 표시하는 방법을 시연합니다. 📜
- 또한, 'Homepage'로 이동하는 링크를 추가하여 사용자를 대시보드에서 홈페이지로 리디렉션하는 방법을 보여줍니다. 🏠
- UserProfile은 기본적으로 대화 상자 형태로 렌더링되지만, 별도의 페이지로도 렌더링할 수 있으며 관련 문서는 설명에 있습니다. 📖
데브허브 | DEVHUB | Add custom pages to Clerk's UserProfile component