diff --git a/src/shared/ui/Box/Box.tsx b/src/shared/ui/Box/Box.tsx new file mode 100644 index 0000000..94b2cb8 --- /dev/null +++ b/src/shared/ui/Box/Box.tsx @@ -0,0 +1,48 @@ +import { Sprinkles, sprinkles } from '@/app/sprinkle/sprinkle.css' +import { AllHTMLAttributes, ElementType, forwardRef } from 'react' + +export interface BoxProps +extends Omit, 'as' | 'color'>, Sprinkles { + children?: React.ReactNode // 하위 React 노드 + className?: string // 클래스 이름 + as?: ElementType // HTML 엘리먼트 타입 (기본값: div) +} + +/** + * Box 컴포넌트는 shared UI 컴포넌트 중 가장 기본이 되는 컴포넌트입니다. + * @param as HTML 엘리먼트 타입 (기본값: div) + * @param children 하위 React 노드 + * @param className 클래스 이름 + * @param props Sprinkles 속성 및 기타 속성 + * @returns Box 컴포넌트 + */ +export const Box = forwardRef( + ( + { + as: Element = 'div', // 기본값: div + children, + className, + ...props + }, + ref + ) => { + const atomProps: Record = {} // Sprinkles 속성 포함 객체 + const nativeProps: Record = {} // 그 외 객체 + + for (const key in props) { + if (sprinkles.properties.has(key as keyof Sprinkles)) + // sprinkles 포함 여부 판단 + atomProps[key] = props[key as keyof typeof props] + else nativeProps[key] = props[key as keyof typeof props] + } + return ( + + {children} + + ) + } +) diff --git a/src/shared/ui/Box/index.ts b/src/shared/ui/Box/index.ts new file mode 100644 index 0000000..ba426ca --- /dev/null +++ b/src/shared/ui/Box/index.ts @@ -0,0 +1 @@ +export * from './Box' \ No newline at end of file diff --git a/src/shared/ui/index.ts b/src/shared/ui/index.ts deleted file mode 100644 index e69de29..0000000