planbiz-component v0.0.0-watch

PlanbizComponent

플랜비즈 프로젝트에서 사용하는 재사용성 컴포넌트, 디렉티브등을 관리하는 모듈입니다.

1. 만약 git pull을 받았는데 planbiz-component 의 내용이 수정되었다고 하면
2. 터미널에 프로젝트 root경로에서 ng build planbiz-component 입력

사용법

사용하고자하는 페이지, 컨테이너등의 컴포넌트에서 다음과 같이 import

import { ... } from 'planbiz-component';

내부에 사용이 가능한 컴포넌트를 꺼내서 쓰면됩니다.

핵심 디자인 시스템

외부에서 제공될 컴포넌트들은 public-api.ts 파일에 명시되어있습니다. 그중에서도 컴포넌트들의 디자인에 영향을 주는 요소들이 있습니다.

variable.scss

/** Primary **/
$biz-color-primary: #4F46E5; 
$biz-color-primary-tint: #6366F1; 
$biz-color-primary-contrast: #ffffff;

/** Secondary **/
$biz-color-secondary: #2563EB; 
$biz-color-secondary-tint: #DBEAFE; 
$biz-color-secondary-contrast: #ffffff;

/** tertiary **/
$biz-color-tertiary: #DC2626; 
$biz-color-tertiary-tint: #FEE2E2; 
$biz-color-tertiary-contrast: #ffffff;

/** medium **/
$biz-color-medium:#4B5563;
$biz-color-medium-tint:#E5E7EB; 
$biz-color-medium-contrast: #ffffff;

/** light **/
$biz-color-light:#E5E7EB;
$biz-color-light-tint:#F9FAFB; 
$biz-color-light-contrast: #4B5563;

플랜비즈에서 사용되는 컬러값들을 정의해놓은 곳입니다. 변수정의에 대한 방법들은 추후에도 변경될 가능성이 높습니다.

컴포넌트는 해당하는 variable.scss 파일의 변수들을 직접 사용합니다.

테마 시스템 디렉티브

import { Directive, HostBinding, Input } from "@angular/core";

export type ColorKit = 'primary'|'secondary'|'tertiary'|'medium'|'light';

export type AppearanceType = 'solid'|'outline'|'clear';

@Directive({
  selector: '[bizThemeSystem]',
  standalone: true
})
export class ThemeSystemDirective {

  @Input() color: ColorKit = 'primary';

  @Input() fill: AppearanceType = 'solid';

  @Input() rounded: boolean = true;
  @Input() degree: 'sm'|'md'|'lg' = 'md';

  @HostBinding('class')
  protected get computedHostClasses() {
    return { 
      [`biz-${this.color}`]: true,
      [`biz-${this.fill}`]: true,
      ['biz-rounded']: this.rounded ? true : false,
      [`biz-rounded-${this.degree}`]: this.rounded ? true : false
    };
  }
}

대부분의 컴포넌트의 모양은 테마시스템 디렉티브를 통해 디자인을 컨트롤합니다.

단순히 인풋값에 따라 호스트 컴포넌트에 클래스를 추가해주는 역할을 합니다.

컴포넌트 scss

@mixin base($bg-color, $border-color, $text-color) {  
  background-color: $bg-color;
  border-color: $border-color;
  color: $text-color;

  @if ($border-color == none) {
    border: none;
  }
}

:host {
  box-sizing: border-box;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: auto;
  box-sizing: content-box;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  text-decoration: none;
  transition: border-radius 0.2s;
  border-width: 1.5px;

  &:hover {
    opacity: 0.9;
    cursor: pointer;
  }
  /** Theme system **/
  &.biz-primary.biz-solid {
    @include base($biz-color-primary, $biz-color-primary, $biz-color-primary-contrast);
  }
  &.biz-primary.biz-outline {
    @include base(none, $biz-color-primary, $biz-color-primary);
  }
  &.biz-primary.biz-clear {
    @include base(none, none, $biz-color-primary);
  }
}

대부분의 컴포넌트들은 위와 같이 기본적인 스타일을 정의하고

컴포넌트의 현재 태마와 모양의 유무등을 조합하여 mixin 함수를 통해 디자인을 변경합니다.