1. 패키지 구성 개요
NextPederationPlugin을 사용하여 여러 모듈을 연동하고, 각각의 기능을 독립적으로 개발할 수 있습니다. 이 가이드에서는 ui-system 패키지, flight 모듈, hotel 모듈, 그리고 이들을 통합하는 app-front 애플리케이션을 구성하는 방법을 단계별로 설명합니다. 각 패키지와 모듈은 고유한 역할을 가지고 있으며, 이들을 유기적으로 연결하여 하나의 통합 시스템을 만들 수 있습니다.
2. UI 시스템 패키지 구성 (`ui-system`)
1. package.json과 주요 스크립트
`ui-system` 패키지는 공통 UI 컴포넌트를 제공하는 패키지로, 이 패키지의 `package.json` 파일은 다음과 같이 구성합니다:
{
"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"
}
}- preinstall: `pnpm` 패키지 매니저만을 사용하도록 강제합니다.
- dev: `vite` 개발 서버를 실행합니다.
- build: `dist` 디렉토리를 삭제하고, TypeScript 컴파일 및 `vite` 빌드를 실행합니다.
- storybook: 스토리북 개발 서버를 실행합니다.
2. 주요 디펜더시 설정
- dependencies: 타입스크립트를 포함하여 프로젝트에서 사용할 주요 패키지들입니다.
- peerDependencies: React, React-DOM, Styled-Components와 같은 패키지는 프로젝트에서 동일한 버전을 사용하도록 설정합니다.
- devDependencies: 개발 환경에서 사용할 도구들입니다.
3. UI 컴포넌트 개발 및 빌드
1. `Button` 컴포넌트 만들기
UI 시스템 구성을 위한 `Button` 컴포넌트는 다음과 같이 정의됩니다:
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;2. 테마 설정 (컬러, 폰트 등)
`color.ts` 파일에서 테마 색상을 정의합니다:
const system1 = '#000000';
const primaryMain = '#1a73e8';
const color = {
system1,
primaryMain,
// 다른 색상 정의
};
export default color;3. 글로벌 스타일 설정 및 적용
`globalStyle.ts` 파일에서 글로벌 스타일을 정의합니다:
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;결론
이 글에서는 ui-system 패키지를 구성하고, 주요 설정 및 UI 컴포넌트를 개발하는 방법을 다루었습니다. 다음 글에서는 flight 및 hotel 모듈 애플리케이션을 구성하고, 이를 통해 실제 기능을 구현하는 방법을 알아보겠습니다.