TreeView

폴더 구조나 카테고리 계층을 표시하는 트리 뷰 컴포넌트입니다. 파일 탐색기, 사이드바 네비게이션, 조직도 등에 활용할 수 있습니다.

설치

Terminal

npx @msub-core/ui-cli add tree-view

사용법

TSX

import { TreeView } from "@msub-core/ui/components/tree-view"

function MyComponent() {
  const data = [
    {
      id: "1",
      label: "폴더 1",
      children: [
        { id: "1-1", label: "파일 1", isLeaf: true },
        { id: "1-2", label: "파일 2", isLeaf: true },
      ],
    },
  ]

  return (
    <TreeView
      data={data}
      selectionMode="single"
    />
  )
}

기본

문서

업무 문서

개인 문서

사진

휴가

가족

2023년

2024년

비디오

Prop	Type	Default	Required	Description
data	TreeNodeData[]	-	No	트리 데이터 배열
selectionMode	"single" \| "multi" \| "none"	"single"	No	선택 모드
selectedIds	string[]	-	No	선택된 노드 ID (controlled)
defaultSelectedIds	string[]	[]	No	기본 선택된 노드 ID (uncontrolled)
expandedIds	string[]	-	No	확장된 노드 ID (controlled)
defaultExpandedIds	string[]	[]	No	기본 확장된 노드 ID (uncontrolled)
onSelectChange	(ids: string[]) => void	-	No	선택 변경 핸들러
onExpandChange	(ids: string[]) => void	-	No	확장 변경 핸들러
showCheckbox	boolean	false	No	체크박스 표시 여부
variant	"default" \| "outline" \| "ghost"	"default"	No	스타일 변형
size	"sm" \| "default" \| "lg"	"default"	No	크기
showIndentGuides	boolean	false	No	들여쓰기 가이드 라인 표시
enableDragDrop	boolean	false	No	드래그 앤 드롭 활성화
onNodeDrop	(draggedId: string, targetId: string) => void	-	No	노드 드롭 핸들러
onLoadChildren	(nodeId: string) => Promise<TreeNodeData[]>	-	No	비동기 자식 로드 핸들러
filter	(node: TreeNodeData) => boolean	-	No	필터 함수 (검색 기능)

크기

문서

업무 문서

개인 문서

사진

휴가

가족

비디오

default

문서

업무 문서

개인 문서

사진

휴가

가족

비디오

문서

업무 문서

개인 문서

사진

휴가

가족

비디오

변형

default

문서

업무 문서

개인 문서

사진

휴가

가족

비디오

outline

문서

업무 문서

개인 문서

사진

휴가

가족

비디오

ghost

문서

업무 문서

개인 문서

사진

휴가

가족

비디오

선택 모드

선택 없음 (none)

문서

업무 문서

개인 문서

사진

휴가

가족

비디오

단일 선택 (single)

문서

업무 문서

개인 문서

사진

휴가

가족

비디오

다중 선택 (multi)

문서

업무 문서

개인 문서

사진

휴가

가족

2023년

2024년

비디오

선택된 항목: 2-1, 2-2-1

인덴트 가이드

문서

업무 문서

개인 문서

사진

휴가

가족

2023년

2024년

비디오

들여쓰기 가이드 라인이 표시되어 계층 구조를 더 쉽게 파악할 수 있습니다.

커스텀 아이콘

이미지

photo.jpg

비디오

movie.mp4

음악

song.mp3

비동기 로딩

루트 폴더

문서

폴더를 펼치면 서버에서 하위 항목을 비동기로 로드합니다.

드래그 앤 드롭

project

src

components

button.tsx

input.tsx

utils

app.tsx

public

package.json

README.md

노드를 드래그하여 다른 위치로 이동할 수 있습니다. (콘솔에서 로그 확인)

검색/필터

검색어를 입력하면 일치하는 항목만 표시됩니다.

문서

업무 문서

개인 문서

사진

휴가

가족

2023년

2024년

비디오

파일 탐색기 예제

VSCode 스타일의 파일 탐색기 예제입니다. 폴더를 클릭하여 열고 닫을 수 있으며, 파일 아이콘과 계층 구조를 시각화합니다.

EXPLORER

project

src

components

button.tsx

input.tsx

utils

app.tsx

public

package.json

README.md

button.tsx

input.tsx

import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"

const buttonVariants = cva(
  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
        icon: "h-10 w-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button"
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    )
  }
)
Button.displayName = "Button"

export { Button, buttonVariants }

main

0 문제

Ln 52, Col 1UTF-8

TypeScript

TreeView

설치

사용법

기본

크기

변형

선택 모드

체크박스

인덴트 가이드

커스텀 아이콘

비동기 로딩

드래그 앤 드롭

검색/필터

파일 탐색기 예제

카테고리 트리 예제