📖

Update |

🔍 How To Use

import {  } from "mcm-js";
    
export default function ExamplePage() {
  return (
    children: "Hello",
  );
}

📝 Example

기본 (Basic)

  return (
    ,
  );

종료 시간 설정

  return (
    children: "10초 후 종료됩니다.",
          ,
  );

스타일 지정

  return (
    children: "웹과 모바일에 스타일이 적용됩니다.",
          
  );

  return (
    children: "웹에만 스타일이 적용됩니다.",
          
  );

  return (
    children: "모바일에만 스타일이 적용됩니다.",
          
  );

수동 종료 (+ 스와이프)

  return (
    children: "Click Me!",
          closeDelayTime: 10000,
          , 
  );

  return (
    children: "Swipe Me!",
          closeDelayTime: 10000,
          , 
  );

컨셉 (concept)

  return (
    children: "물의 표준 끓는점은 99.61° 입니다.",
          ,
  );

  return (
    children: "결제가 완료되었습니다.",
          ,
  );

  return (
    children: "Each child in a list should have a unique "key" prop.",
          ,
  );

  return (
    children: "귀하의 뛰어난 역량에도 불구하고...",
          ,
  );

  return (
    children: "커스텀 된 컨셉입니다.",
          
  );

중복 실행 방지

  return (
    children: "이 Alert은 한번만 오픈됩니다.",
          
  );

종료되지 않는 Alert

  return (
    children: "이 Alert은 무한하게 실행됩니다.",
          ,
          useCloseMode: true
  );

실행 & 종료 후 함수 실행

  return (
    children: "Hello",
          
  );

  return (
    children: "Hello",
          
  );

🏷 Functional

.openAlert()

Alert을 실행하는 함수입니다.

- 📤 Props

본문과 동일한 props 입니다. 를 확인해주세요.

- 📝 Example

  return (
    <button
      onClick={() => 
        ({
          children: "Hello"
        })
      }
    >
      Open Alert
    </button>
  );

.closeAlert()

현재 실행되고 있던 Alert의 순서 또는 아이디 및 클래스를 입력하면 해당 Alert을 종료시킬 수 있습니다.

- 📤 Props

Props List
이름	설명	기본값 (Type)
sequence	기입한 순서에 실행된 Alert을 종료시킵니다. (ex : 1 -> 1번째로 실행된 Alert 종료)	0 (Number)
className	해당 클래스 선택자 값으로 실행된 Alert을 모두 종료합니다.	{ className : "" } (Object)
id	해당 아이디 선택자 값으로 실행된 Alert 한개를 종료합니다.	{ id : "" } (Object)

- 📝 Example

Alert 오픈

Alert 종료

  return (
    <button
      onClick={() => 
        ({
          className: "Test", // 화면 전체의 "Test" ClassName을 가지는 모든 Alert을 종료합니다.
        })
      }
    >
      Close with "Test" className Alert
    </button>
  );

- 💡 사용시 주의사항

순서를 지정해 종료할 때는 숫자 타입의 데이터를, 선택자를 이용해 종료할 때는 객체 타입의 데이터로 전달해야 합니다.
지정된 순서의 Alert이 이미 종료되었다면 초기화 이전까지는 작동하지 않습니다.
선택자 (아이디, 클래스)는 둘 중 하나만 전달해야 하며, 두개의 선택자가 전달되면 아이디 선택자가 우선순위를 가집니다.

.clearAlert()

실행되어 있는 모든 Alert을 조건에 상관없이 모두 종료합니다.

- 📝 Example

Alert 오픈

Alert 초기화

  return (
    <button
      onClick={() => 
        ( )
      }
    >
      Clear Alert
    </button>
  );

📤 Props List

필수 Props

Props List
이름	설명	기본값 (Type)
children	지정된 문자열로 Alert 메세지를 출력합니다.	"" (String)
id	모듈에 id 선택자 값을 지정합니다. id는 wrapper 태그에 적용됩니다.	"" (String)
className	모듈에 class 선택자 값을 지정합니다. className은 wrapper 태그에 적용됩니다.	"" (String)
closeDelayTime	Alert이 종료되는 시간을 설정합니다. 숫자 타입을 전달하면 기입된 숫자로 종료 시간이 설정할 수 있습니다. (1초 = 1/1000ms) 문자열 타입인 "infinite"를 전달하면 종료되지 않는 Alert이 설정됩니다.	3000 (Number \| String)
alertStyles	웹, 모바일에 동일하게 적용되는 Alert 스타일을 설정합니다.	{} (Object)
alertResponsiveStyles	웹(768px 이상)과 모바일(767px 이하)에 스타일을 각각 설정할 수 있습니다. alertStyles props 보다 더 우선적으로 스타일이 적용됩니다.	{ web : {}, mobile : {} } (Object)
alertConcept	Alert의 사용 용도에 맞게 컨셉을 지정할 수 있습니다. type : Alert의 컨셉 타입을 지정합니다. ("success", "info", "warning", "error", "custom") custom { color : Alert의 이모지 및 테두리의 전체의 색상을 설정합니다. icon { src : 설정된 컨셉의 이모지로 변경합니다. size : 이모지의 크기를 조절합니다. color : 이모지의 색상을 변경합니다. text { color : 메세지 색상을 설정합니다. size : 메세지 크기를 설정합니다. weight : 메세지 굵기를 설정합니다.	{ type : "", custom : { color : "", icons : { src : "", size : 10, color : "", }, text : { color : "", size : 16, weight : 300 }, } } (Object)
useCloseMode	Alert을 수동으로 종료할 수 있는 모드를 설정합니다. Boolean 타입인 true를 전달하면 Alert를 클릭해서 종료할 수 있게 됩니다. 객체 타입으로 "useSwipeMode" key 값을 true로 전달하면 스와이프 모드를 추가로 사용할 수 있습니다.	false (Boolean \| {Boolean})
onAfterAlertOpen	Alert이 실행될 때 함께 실행될 함수입니다.	( ) => { } (Function)
onAfterAlertClose	Alert이 종료될 때 함께 실행될 함수입니다.	( ) => { } (Function)

📂 Module Tree

태그를 클릭해보세요.