콘텐츠로 건너뛰기
1.6k

방향

LTR(좌에서 우로)과 RTL(우에서 좌로) 방향 간에 컴포넌트를 전환하여, 아랍어, 히브리어, 페르시아어 환경에서 메뉴, 슬라이더, 탭이 올바르게 반전되도록 하는 컨텍스트 프로바이더입니다.

DirectionProvider 컴포넌트는 애플리케이션의 텍스트 방향(ltr 또는 rtl)을 설정하는 데 사용합니다. 이는 아랍어, 히브리어, 페르시아어처럼 오른쪽에서 왼쪽으로 쓰는 언어를 지원하는 데 필수적입니다.

RTL 모드에서 컴포넌트를 미리 본 모습입니다. 언어 선택기를 사용해 언어를 전환하세요. 더 많은 예제는 각 컴포넌트 페이지의 RTL 섹션을 참고하세요.

트리를 한 번 감싸 두면 방향에 반응하는 컴포넌트(드롭다운 메뉴, 슬라이더, 탭, 툴팁)가 DOM을 훑지 않고 React context에서 방향을 읽습니다. Base UI Direction Provider 유틸리티를 기반으로 하며, 자체로는 아무것도 렌더링하지 않고 스타일도 없습니다. 네오브루탈리즘 테두리와 그림자는 이 프로바이더가 이끄는 컴포넌트 쪽에 있습니다.

다음과 같은 경우에 사용합니다.

  • 아랍어, 히브리어, 페르시아어 앱 — 화살표 키 탐색, 팝업 정렬, 슬라이더 동작이 읽기 방향에 맞춰 뒤집힙니다.
  • 로케일 전환기 — 사용자가 언어를 바꿀 때 프로바이더의 direction과 <html>의 dir을 함께 바꿉니다.
  • 방향이 섞인 페이지 — 기본적으로 LTR인 앱 안에서 RTL 블록(삽입된 폼, 인용 콘텐츠)만 프로바이더로 감쌉니다.

설치

pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/direction.json
npx shadcn@latest add https://neobrutalism.com/r/base/direction.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/direction.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/direction.json

다음 의존성을 설치합니다.

pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react

다음 코드를 복사해 프로젝트에 붙여넣습니다.

components/ui/direction.tsx
"use client"

import * as React from "react"
import { Direction } from "radix-ui"

function DirectionProvider({
  dir,
  direction,
  children,
}: React.ComponentProps<typeof Direction.DirectionProvider> & {
  direction?: React.ComponentProps<typeof Direction.DirectionProvider>["dir"]
}) {
  return (
    <Direction.DirectionProvider dir={direction ?? dir}>
      {children}
    </Direction.DirectionProvider>
  )
}

const useDirection = Direction.useDirection

export { DirectionProvider, useDirection }

임포트 경로를 프로젝트 구성에 맞게 수정합니다.

사용법

import { DirectionProvider } from "@/components/ui/direction"
<html dir="rtl">
  <body>
    <DirectionProvider direction="rtl">
      {/* Your app content */}
    </DirectionProvider>
  </body>
</html>

useDirection

useDirection 훅은 애플리케이션의 현재 방향을 가져오는 데 사용합니다.

import { useDirection } from "@/components/ui/direction"
 
function MyComponent() {
  const direction = useDirection()
  return <div>Current direction: {direction}</div>
}

접근성

DirectionProvider는 컴포넌트 로직만 이끕니다. dir 속성은 절대 설정하지 않습니다. <html>(또는 감싸는 요소)에도 반드시 dir을 두세요. 브라우저, 스크린 리더, CSS 논리 속성은 React context가 아니라 DOM 속성에서 방향을 해석합니다. 둘을 맞춰 두어야 RTL 페이지가 올바르게 그려지고 읽힙니다.