develop -> main

src/tree/RootTreeContext.tsx

@@ -2,11 +2,13 @@ import * as React from 'react';
 
 export interface RootTreeContextValue {
   open?: boolean;
+  dropDownIcon?: React.ReactNode;
 }
 
 export const RootTreeContext = React.createContext<RootTreeContextValue | null>(
   {
     open: false,
+    dropDownIcon: '▶',
   }
 );
 

src/tree/Tree.stories.tsx

@@ -28,9 +28,8 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  args: {
-    'aria-label': 'Default',
-    children: (
+  render: () => {
+    return (
       <Tree aria-label="Default" open dropDownIcon=">">
         <TreeItem itemType="leaf">
           <TreeItemLayout>customer id: 1234567890</TreeItemLayout>
@@ -63,6 +62,6 @@ export const Default: Story = {
           </Tree>
         </TreeItem>
       </Tree>
-    ),
+    );
   },
 };

src/tree/Tree.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { RootTreeContext } from './RootTreeContext';
 import { SubTreeContext } from './SubTreeContext';
+import { TreeLevelContext } from './TreeLevelContext';
 
 // Tree 컴포넌트의 Props 타입
 export interface TreeProps {
@@ -27,27 +28,28 @@ const RootTree = ({
   ...props
 }: TreeProps) => {
   return (
-    <RootTreeContext.Provider value={{ open }}>
-      <SubTreeContext.Provider value={{ dropDownIcon }}>
-        <div role="tree" className={className} {...props}>
-          {children}
-        </div>
+    <RootTreeContext.Provider value={{ open, dropDownIcon }}>
+      <SubTreeContext.Provider value={null}>
+        <TreeLevelContext.Provider value={{ level: 0 }}>
+          <div role="tree" className={className} {...props}>
+            {children}
+          </div>
+        </TreeLevelContext.Provider>
       </SubTreeContext.Provider>
     </RootTreeContext.Provider>
   );
 };
 
-const SubTree = ({
-  children,
-  className = '',
-  dropDownIcon,
-  ...props
-}: TreeProps) => {
+const SubTree = ({ children, className = '', ...props }: TreeProps) => {
+  const { level } = React.useContext(TreeLevelContext);
+
   return (
-    <SubTreeContext.Provider value={{ dropDownIcon }}>
-      <div role="tree" className={className} {...props}>
-        {children}
-      </div>
+    <SubTreeContext.Provider value={null}>
+      <TreeLevelContext.Provider value={{ level: level + 1 }}>
+        <div role="tree" className={className} {...props}>
+          {children}
+        </div>
+      </TreeLevelContext.Provider>
     </SubTreeContext.Provider>
   );
 };

src/tree/TreeItem.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { TreeItemContext } from './TreeItemContext';
 import { useRootTreeContext } from './RootTreeContext';
 import './TreeItem.css';
+import { TreeItemContext } from './TreeItemContext';
+import { useTreeLevelContext } from './TreeLevelContext';
 
 export interface TreeItemProps {
   itemType: 'leaf' | 'branch';
@@ -15,6 +16,7 @@ export const TreeItem = ({
   className = '',
 }: TreeItemProps) => {
   const { open: defaultOpen } = useRootTreeContext();
+  const { level } = useTreeLevelContext();
   const [isOpen, setIsOpen] = React.useState(defaultOpen ?? false);
 
   const handleToggle = React.useCallback(() => {
@@ -28,29 +30,29 @@ export const TreeItem = ({
       itemType,
       isOpen,
       onToggle: handleToggle,
+      level,
     }),
-    [itemType, isOpen, handleToggle]
+    [itemType, isOpen, handleToggle, level]
   );
 
   return (
     <TreeItemContext.Provider value={contextValue}>
       <div
         role="treeitem"
         aria-expanded={itemType === 'branch' ? isOpen : undefined}
-        className={className}
+        className={`tree-item ${className}`}
       >
-        {React.Children.map(children, (child, level) => {
-          if (level === 0) {
+        {React.Children.map(children, (child, childIndex) => {
+          if (childIndex === 0) {
             // 첫 번째 자식은 TreeItemLayout (노드 자체)
             return child;
-          } else if (level === 1 && itemType === 'branch') {
+          } else if (childIndex === 1 && itemType === 'branch') {
             // 두 번째 자식은 중첩된 Tree (자식들)
             return (
               <div
                 className="tree-item-subtree"
                 style={{
                   maxHeight: isOpen ? '2000px' : '0px',
-                  marginLeft: `${level * 1.5}rem`,
                 }}
               >
                 {child}

src/tree/TreeItemContext.tsx

@@ -4,6 +4,7 @@ export interface TreeItemContextValue {
   itemType: 'leaf' | 'branch';
   isOpen: boolean;
   onToggle: () => void;
+  level: number;
 }
 
 export const TreeItemContext = React.createContext<TreeItemContextValue | null>(

src/tree/TreeItemLayout.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useTreeItemContext } from './TreeItemContext';
 import './TreeItemLayout.css';
-import { useSubTreeContext } from './SubTreeContext';
+import { useRootTreeContext } from './RootTreeContext';
 
 export interface TreeItemLayoutProps
   extends React.HTMLAttributes<HTMLDivElement> {
@@ -14,8 +14,8 @@ export const TreeItemLayout = ({
   className = '',
   ...props
 }: TreeItemLayoutProps) => {
-  const { dropDownIcon } = useSubTreeContext();
-  const { itemType, isOpen, onToggle } = useTreeItemContext();
+  const { itemType, isOpen, onToggle, level } = useTreeItemContext();
+  const { dropDownIcon } = useRootTreeContext();
 
   return (
     <div
@@ -25,6 +25,8 @@ export const TreeItemLayout = ({
           : 'tree-item-layout-leaf'
       } ${className}`}
       onClick={itemType === 'branch' ? onToggle : undefined}
+      data-level={level}
+      style={{ paddingLeft: `${level * 1.5}rem` }}
       {...props}
     >
       {itemType === 'branch' && (

src/tree/TreeLevelContext.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+export interface TreeLevelContextValue {
+  level: number;
+}
+
+export const TreeLevelContext = React.createContext<TreeLevelContextValue>({
+  level: 0,
+});
+
+export const useTreeLevelContext = () => {
+  return React.useContext(TreeLevelContext);
+};
+
+TreeLevelContext.displayName = 'TreeLevelContext';

src/tree/index.ts

@@ -5,4 +5,4 @@ export * from './TreeWithJson';
 export * from './TreeItemContext';
 export * from './RootTreeContext';
 export * from './SubTreeContext';
-export * from './Tree';
+export * from './TreeLevelContext';