NextPederationPlugin 활용 가이드 1: 패키지 구성 및 기본 설정

{
	"name": "@amu/amu-ui-system",
	"version": "0.3.23",
	"description": "",
	"main": "dist/index.es.js",
	"types": "dist/index.d.ts",
	"author": "attrest medialab Co, Ltd.",
	"license": "ISC",
	"files": ["dist"],
	"scripts": {
		"preinstall": "npx only-allow pnpm",
		"dev": "vite",
		"build": "rm -rf dist && tsc -p ./tsconfig.build.json && vite build",
		"serve": "vite preview",
		"storybook": "storybook dev -p 6006",
		"build-storybook": "storybook build",
		"test": "vitest",
		"test:run": "vitest run --coverage"
	},
	"dependencies": {
		"typescript": "^4.5.2"
	},
	"peerDependencies": {
		"react": "^17.0.2",
		"react-dom": "^17.0.2",
		"styled-components": "^5.3.3"
	},
	"devDependencies": {
		"prettier": "^2.4.1",
		"storybook": "^6.4.0",
		"vite": "^2.6.4",
		"webpack": "^5.58.2"
	}
}

import React, { forwardRef, useRef } from 'react';
import styled from 'styled-components';
import { ButtonProps, ButtonSize } from './type';
import useRipple from '@/hooks/useRipple';

const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
	{
		children,
		size = 32,
		type = 'button',
		color = 'system1',
		variant = 'filled',
		startIcon,
		endIcon,
		width,
		...props
	}, 
	ref,
) {
	const innerRef = useRef<HTMLButtonElement | null>(null);
	const ripples = useRipple(innerRef);
	
	return (
		<StyledButton
			{...props}
			type={type}
			$size={size}
			$color={color}
			$variant={variant}
			$width={width}
			ref={(node) => {
				innerRef.current = node;
				if (typeof ref === 'function') {
					ref(node);
				} else if (ref) {
					ref.current = node;
				}
			}}
		>
			{startIcon}
			{children}
			<RippleContainer>{ripples}</RippleContainer>
			{endIcon}
		</StyledButton>
	);
});

const StyledButton = styled.button`
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	width: ${({ $width }) => $width ?? 'auto' };
	${({ $size }) => `
		height: ${$size}px;
		font-size: ${$size / 2}px;
	`}
	background-color: ${({ $color, theme }) => theme.color[$color]};
`;

export default Button;

const system1 = '#000000';
const primaryMain = '#1a73e8';

const color = {
	system1,
	primaryMain,
	// 다른 색상 정의
};

export default color;

import { createGlobalStyle } from 'styled-components';
import PoppinsR from './fonts/poppins-v19-latin-regular.woff';
import NotoSansB from './fonts/NotoSans-Bold.woff';

const GlobalStyle = createGlobalStyle`
	@font-face {
		font-family: 'Poppins';
		src: url(${PoppinsR}) format('woff');
		font-weight: 400;
	}
	@font-face {
		font-family: 'NotoSansKR';
		src: url(${NotoSansB}) format('woff');
		font-weight: 700;
	}
	body {
		font-family: 'Poppins', 'NotoSansKR', sans-serif;
	}
`;

export default GlobalStyle;