250922 컴포넌트 컨벤션

// Box 컴포넌트: 단순 컨테이너

import type { ComponentProps } from "react"; import { View } from "react-native"; import styles, { type UiBoxVariants } from "./ui-box.style";

// 박스 프롭스: RN View 프롭스 + variants(별도 중첩) export interface UiBoxProps extends ComponentProps { // 스타일 변형 묶음(패딩/간격 등) variants?: UiBoxVariants; }

const UiBox = (props: UiBoxProps) => { // variants만 분리, style은 rest에 포함 const { variants, ...restViewProps } = props;

// initProps: RN 컴포넌트 기본값 (명시 타입) const initProps: ComponentProps = {};

// mergedProps: RN 프롭스 기준 얕은 병합 const mergedProps: ComponentProps = { ...initProps, ...restViewProps, };

// variants 기본/병합: 기본값 강제 없음 const initVariants: UiBoxVariants = {}; const mergedVariants: UiBoxVariants = { ...initVariants, ...variants, };

// 변형 선택(필수: v3) - 정의된 키만 적용됨 styles.useVariants(mergedVariants);

// base 스타일 + 사용자 style 병합(배열 순서 보장) return <View style={[styles.root, mergedProps.style]} {...mergedProps} />; };

export default UiBox;