개발 프리뷰 출시 이후 Catalyst의 첫 번째 주요 업데이트를 발표했습니다. 두 가지 새로운 애플리케이션 레이아웃, 네비게이션 바 및 사이드바 컴포넌트, 설명 목록 등이 추가되었습니다.

또한 Headless UI v2.0 for React 출시와 함께 Catalyst가 더 이상 개발 프리뷰 단계가 아니며, 공식적으로 안정화되었다는 소식을 전하게 되어 기쁩니다. 이제 프로덕션 환경에서도 걱정 없이 사용할 수 있습니다.

새로 업데이트된 라이브 데모 사이트를 확인해 보세요. Catalyst 프로젝트가 어떤 모습인지 직접 체험할 수 있습니다.

​새로운 애플리케이션 레이아웃 컴포넌트

새로운 프로젝트 아이디어를 시작할 때 가장 어려운 점 중 하나는 빈 캔버스를 넘어 실제로 무언가를 구축할 수 있는 구조를 만드는 것입니다.

이번 업데이트에서는 프로젝트에 형태와 구조를 쉽게 부여할 수 있도록 두 가지 새로운 애플리케이션 레이아웃 컴포넌트를 추가했습니다. 이를 통해 여러분은 바로 구축을 시작할 수 있습니다.

첫 번째 레이아웃은 클래식한 사이드바 레이아웃으로, 작은 화면에서는 사이드바를 접을 수 있는 모바일 메뉴로 변환합니다:

import { SidebarLayout } from '@/components/sidebar-layout'
import { Navbar } from '@/components/navbar'
import { Sidebar } from '@/components/sidebar'

function Example({ children }) {
  return (
    <SidebarLayout
      sidebar={<Sidebar>{/* 사이드바 메뉴 */}</Sidebar>}
      navbar={<Navbar>{/* 모바일 화면용 네비게이션 바 */}</Navbar>}
    >
      {/* 페이지 콘텐츠 */}
    </SidebarLayout>
  )
}

두 번째는 더 간단한 스택형 레이아웃으로, 수평 네비게이션 메뉴를 가지고 있습니다. 이 레이아웃은 페이지가 적은 앱에 적합합니다:

import { StackedLayout } from '@/components/stacked-layout'
import { Navbar } from '@/components/navbar'
import { Sidebar } from '@/components/sidebar'

function Example({ children }) {
  return (
    <StackedLayout
      navbar={<Navbar>{/* 상단 네비게이션 메뉴 */}</Navbar>}
      sidebar={<Sidebar>{/* 모바일 메뉴용 사이드바 콘텐츠 */}</Sidebar>}
    >
      {/* 페이지 콘텐츠 */}
    </StackedLayout>
  )
}

물론 두 레이아웃 모두 다크 모드를 지원합니다:

이 모든 컴포넌트의 API를 올바르게 설계하기 위해 많은 노력을 기울였습니다. 필요한 위치에 요소를 배치하고, 아이콘을 선택적으로 포함하며, 드롭다운 메뉴를 통합하는 등의 작업이 쉽게 이루어질 수 있도록 했습니다.

최종 결과는 매우 단순하게 느껴지도록 설계되었으며, 여러분도 이를 사용해 구축하는 과정이 즐거울 것이라고 생각합니다.

사이드바 레이아웃 문서와 스택형 레이아웃 문서를 확인하여 시작해 보세요. 그런 다음 네비게이션 바와 사이드바 컴포넌트를 살펴보며 네비게이션 항목을 구조화하는 방법을 배워보세요.

​설명 목록

애플리케이션 레이아웃 작업을 하던 중, 데모용으로 사용할 만한 적절한 콘텐츠가 없다는 것을 깨달았습니다. 그래서 빈 공간을 채우기 위해 DescriptionList 컴포넌트를 만들었습니다.

import { DescriptionDetails, DescriptionList, DescriptionTerm } from '@/components/description-list'

function Example() {
  return (
    <DescriptionList>
      <DescriptionTerm>고객</DescriptionTerm>
      <DescriptionDetails>Michael Foster</DescriptionDetails>

      <DescriptionTerm>이벤트</DescriptionTerm>
      <DescriptionDetails>Bear Hug: Live in Concert</DescriptionDetails>

       {/* ... */}
    </DescriptionList>
  )
}

이 API는 HTML <dl> 엘리먼트와 동일하게 작동하지만, 스타일이 잘 적용되어 있고 반응형이며, 다크 모드도 지원합니다.

더 자세한 내용은 설명 목록 문서를 참고하세요.

​페이지 제목

데모를 더 멋지게 보이게 하기 위해 필요한 컴포넌트를 추가했습니다! UI에서 빠르고 일관되게 제목을 지정할 수 있는 Heading과 Subheading 컴포넌트를 추가했습니다.

import { Heading, Subheading } from '@/components/heading'

function Example() {
  return (
    <div>
      <Heading>Heading</Heading>
      <Subheading>Subheading</Subheading>
    </div>
  )
}

level prop을 사용하여 렌더링할 HTML 제목 엘리먼트를 제어할 수 있으며, 다른 모든 것과 마찬가지로 내장된 다크 모드 지원과 함께 반응형으로 동작합니다.

더 많은 예제는 Heading 문서를 참고하세요.

​구분선

마지막으로 가장 좋은 것을 남겼습니다. Catalyst에는 이제 여러분이 원하는 곳에 넣을 수 있는 회색 선이 포함되어 있습니다.

import { Divider } from '@/components/divider'

function Example() {
  return <Divider />
}

이 기능을 위해 우리는 끊임없이 노력했고, 여러분의 애플리케이션 개발 과정을 더 쉽게 만들어 줄 수 있어 매우 자랑스럽습니다.

Divider 문서를 확인해 보세요. 최소한 하나의 prop은 가지고 있습니다.

Catalyst는 Tailwind UI 전체 접근 라이선스에 추가 비용 없이 포함되어 있습니다. 라이선스를 가지고 있다면 로그인하여 최신 버전을 다운로드하고 개발을 시작하세요.

여러분이 어떤 것을 만들어 낼지 기대됩니다!