nextjs clerk 설정 페이지

일단 설정 url이 맞게 나오는지 간단한 페이지를 만들어요.

/app/(platform)/(dashboard)/organization/[organizationId]/settings/page.tsx

const SettingsPage = () => {
  return (
    <div>
      Settings
    </div>
  )
}

export default SettingsPage

OrganizationProfile을 불러오고 사용자정의 css를 적용합니다.

import { OrganizationProfile } from "@clerk/nextjs"

const SettingsPage = () => {
  return (
    <div className="w-full">
      <OrganizationProfile 
        appearance={{
          elements: {
            rootBox: {
              boxShadow: "none",
              width: "100%"
            },
            card: {
              border: "1px solid #e5e5e5",
              boxShadow: "none",
              width: "100%"
            }
          }
        }}
      />
    </div>
  )
}

export default SettingsPage