OpenStrategy

OpenStrategy 란 모달의 열리고 닫힐 때의 스타일(css) 처리를 합니다. 아래 예제에서 보듯이 많이 사용할 법한 몇가지 스타일은 기본적으로 제공하고 있습니다.

import { StackNormal, StackTop, StackBottom, StackLeft, StackRight } from '@jood/v-modal';

modalService.open({
  component: OpenModal,
  openStrategy: new StackBottom()
  // ...
});

직접 만들기

OpenStrategy 인터페이스를 구현하면 스타일링과 애니메이션 처리를 얼마든지 확장할 수 있습니다.

const modalService = useJdModalService();
const onOpen = () => {
  modalService.open({
    component: OpenModal,
    openStrategy: new SlideUpStrategy()
  });
}

아래 준비된 몇가지 예제 코드를 참고하세요.

SlideUpStrategy.ts

import { type OpenStrategy, StackNormal } from '@jood/v-modal';

export class SlideUpStrategy extends StackNormal implements OpenStrategy {
  base(duration?: number) {
    const timingOpacity = (duration || 240) * 0.85;
    return {
      pivot: {
        borderRadius: '0',
        transition: `transform ${duration}ms cubic-bezier(0.4, 0, 0.2, 1), opacity ${timingOpacity}ms`,
        transform: 'scale(0.2, 0.2) translateY(180px)',
        opacity: 0,
      },
    };
  }
}

SlideLeftStrategy.ts

import { type OpenStrategy, StackNormal } from '@jood/v-modal';

export class SlideLeftStrategy extends StackNormal implements OpenStrategy {
  base(duration?: number) {
    const timingOpacity = (duration || 240) * 0.85;
    return {
      pivot: {
        borderRadius: '0',
        transition: `transform ${duration}ms cubic-bezier(0.4, 0, 0.2, 1), opacity ${timingOpacity}ms`,
        transform: 'translateX(180px)',
        opacity: 0,
      },
    };
  }

  closing() {
    return {
      pivot: {
        transform: 'translateX(-80px)',
        opacity: 0,
      },
      overlay: {
        opacity: 0,
      },
    };
  }
}

FullContentStrategy.ts

import { type OpenStrategy } from '@jood/v-modal';

export class FullContentStrategy implements OpenStrategy {
  shadow() {
    return {
      pivot: { boxShadow: 'initial' },
    };
  }

  base(duration?: number) {
    const timingOpacity = (duration || 240) * 0.85;
    return {
      pivot: {
        width: '100vw',
        height: '100dvh',
        transition: `transform ${duration}ms cubic-bezier(0.4, 0, 0.2, 1), opacity ${timingOpacity}ms`,
        transform: 'translateY(20px)',
        opacity: 0,
      },
      content: { flex: 1 },
      overlay: { display: 'none' },
    };
  }

  opening() {
    return {
      pivot: { transform: 'initial', opacity: 1 },
      overlay: { display: 'none' },
    };
  }

  floatingOpening() {
    return [
      {
        pivot: { transform: 'initial', opacity: 1 },
        overlay: { opacity: 1 },
      },
    ];
  }

  opened() {
    return {};
  }

  closing() {
    return {
      pivot: { transform: 'translateY(20px)', opacity: 0 },
      overlay: { opacity: 0 },
    };
  }
}

NoneTransitionStrategy.ts

import { type OpenStrategy } from '@jood/v-modal';

export class NoneTransitionStrategy implements OpenStrategy {
  shadow() {
    return {
      pivot: { boxShadow: 'initial' },
    };
  }

  base() {
    return {
      pivot: {
        transition: 'initial',
        transform: 'initial',
      },
      overlay: {
        transition: 'initial',
        transform: 'initial',
      },
    };
  }

  opening() {
    return {
      pivot: {
        transform: 'initial',
        opacity: 1,
      },
      overlay: { opacity: 0.5 },
    };
  }

  floatingOpening() {
    return [
      {
        pivot: { transform: 'initial', opacity: 1 },
        overlay: { opacity: 0.05 },
      },
      {
        pivot: { transform: 'initial', opacity: 1 },
        overlay: { opacity: 0.5 },
      },
      {
        pivot: { transform: 'initial', opacity: 1 },
        overlay: { opacity: 0.5 },
      },
    ];
  }

  opened() {
    return {};
  }

  closing() {
    return {
      pivot: {
        transform: 'initial',
        opacity: 0,
      },
      overlay: { opacity: 0 },
    };
  }
}

EmptyEntryStrategy.ts

import { type OpenStrategy } from '@jood/v-modal';

export class EmptyEntryStrategy implements OpenStrategy {
  shadow() {
    return {
      pivot: { boxShadow: 'initial' },
    };
  }

  base() {
    return {
      pivot: {
        borderRadius: '0',
        background: 'transparent',
        boxShadow: 'initial',
      },
      overlay: {},
    };
  }

  opening() {
    return {
      pivot: {
        transform: 'initial',
        opacity: 1,
      },
      overlay: { opacity: 0.5 },
    };
  }

  floatingOpening() {
    return [
      {
        pivot: { transform: 'initial', opacity: 1 },
        overlay: { opacity: 0.05 },
      },
      {
        pivot: { transform: 'initial', opacity: 1 },
        overlay: { opacity: 0.5 },
      },
      {
        pivot: { transform: 'initial', opacity: 1 },
        overlay: { opacity: 0.5 },
      },
    ];
  }

  opened() {
    return {};
  }

  closing() {
    return {
      pivot: {
        transform: 'initial',
        opacity: 0,
      },
      overlay: { opacity: 0 },
    };
  }
}

defaultOpenStrategy

모달을 열 때마다 openStrategy 옵션을 지정해서 모달 마다 개별적인 적용이 가능하고, 기본 OpenStrategy 를 지정할 수도 있습니다.

modalService.setDefaultOpenStrategy(new SlideUpStrategy());

const modalService = useJdModalService();
const onOpen = () => {
  modalService.open({
    component: OpenModal,
    // openStrategy 를 지정하지 않아도 SlideUpStrategy 으로 열립니다.
  });
}