Clerk OrganizationSwitcher 컴포넌트 렌더링 안 되는 문제 해결법

Clerk OrganizationSwitcher 컴포넌트 렌더링 안 되는 문제 해결법

---

 

next.js와 Clerk을 활용해서 로그인 인증 관련 테스트를 하는 도중에 OrganizationSwitcher 컴포넌트가 렌더링 되지 않는 문제를 발견했습니다.

import { SignedIn, SignOutButton, OrganizationSwitcher } from '@clerk/nextjs'
import Image from 'next/image'
import Link from 'next/link'
import { dark } from '@clerk/themes'
function Topbar() {
  return (
    <nav className="topbar">
      <Link
        href="/"
        className="flex
        items-center gap-4"
      >
        <Image src="/assets/logo.svg" alt="logo" width={28} height={28} />
        <p
          className="text-heading3-bold
        text-light-1 max-xs:hidden"
        >
          Threads
        </p>
      </Link>

      <div className="flex items-center gap-1">
        <div className="block md:hidden">
          <SignedIn>
            <SignOutButton>
              <div className="flex cursor-pointer">
                <Image
                  src="/assets/logout.svg"
                  alt="logout"
                  width={24}
                  height={24}
                />
              </div>
            </SignOutButton>
          </SignedIn>
        </div>

        <OrganizationSwitcher
          appearance={{
            baseTheme: dark,
            elements: {
              organizationSwitcherTrigger: 'py-2 px-4',
            },
          }}
        />
      </div>
    </nav>
  )
}
export default Topbar

 

로그인이 되어 있는데도 해당 컴포넌트가 렌더링 되지 않고 개발자 도구에서 저 부분을 찾아봐도 해당 컴포넌트가 보이지 않았다면 Clerk 홈페이지에서 organization 설정 자체가 잘못되었을 수 있습니다.

 

 

https://dashboard.clerk.com/

Dashboard | Clerk.com

Clerk 홈페이지에 로그인 해서 해당 프로젝트에 대한 Application을 클릭합니다.

 

Organization Settings - Enable organizations가 enable 체크가 되어 있는지 확인합니다. enable로 설정을 해두어야 해당 컴포넌트를 활용할 수 있습니다.

해결 완료!