harrysimodal v0.0.7

harrysimodal Get Started

설치하기

npm install harrysimodal

사용예시

import React, { useState } from “react”;

import { Modal } from “harrysimodal”;

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const openModal = () => setIsModalOpen(true);

  const closeModal = () => setIsModalOpen(false);

  return (
    <>
      <button onClick={openModal}>click me, open modal!</button>

      <Modal isOpen={isModalOpen} onClose={closeModal} position="center" device="mobile">
        <Modal.ModalContent size="large">
          <Modal.ModalHeader>
            <Modal.ModalTitle text="your title" />
            <Modal.ModalCloseButton onCloseButtonClick={closeModal} />
          </Modal.ModalHeader>
          <YourContent /> 😊
          <Modal.ModalFooter direction="row" justify="between">
            <Modal.ModalButton theme="dark">button text</Modal.ModalButton>
            <Modal.ModalButton onClick={closeModal}>button text</Modal.ModalButton>
          </Modal.ModalFooter>
        </Modal.ModalContent>
      </Modal>
    </>
  );
}

• Modal

• Modal.ModalContent

• Modal.Header

• Modal.ModalFooter

ModalFooter 커스텀하기

return (
  <>
    <button onClick={openModal}>click me, open modal!</button>
    <Modal isOpen={isOpen} onClose={closeModal}>
      {/* your JSX using harrysimodal library */}
      <Modal.ModalFooter>
        <Modal.ModalButton theme="dark">취소</Modal.ModalButton>
        <Modal.ModalButton onClick={closeModal}>확인</Modal.ModalButton>
      </Modal.ModalFooter>
    </Modal>
  </>
);

기본적으로 direction은 row, justify는 end이기 때문에 위 이미지와 같은 구성으로 UI가 표현됩니다.

<Modal.ModalFooter direction="column">
  <Modal.ModalButton theme="dark">취소</Modal.ModalButton>
  <Modal.ModalButton onClick={closeModal}>확인</Modal.ModalButton>
</Modal.ModalFooter>

만약, 버튼의 정렬 방향을 변경하고 싶은 경우 props를 다르게 전달해서 UI 구성을 변경할 수 있습니다.

• Modal.ModalButton

ModalButton 커스텀하기

기본적으로 theme는 white, size는 medium, width는 full이기 떄문에 위 이미지와 같은 UI로 표현됩니다.

<Modal.ModalButton theme="dark" size="large" width="fixed">
  취소
</Modal.ModalButton>

만약, 버튼의 width를 줄이거나 색을 변경하고 싶은 경우, props를 다르게 전달해서 UI 구성을 변경할 수 있습니다.

Use Case

AlertModal

사용자에게 경고 모달을 보여줄 수 있는 AlertModal을 제공합니다.

function App() {
  const [isOpen, setIsOpen] = useState(false);

  const openModal = () => setIsOpen(true);

  const closeModal = () => setIsOpen(false);

  return (
    <>
      <button onClick={openModal}>open modal</button>
      <AlertModal isOpen={isOpen} onClose={closeModal} title="아이디를 입력해 주세요" alertText="아이디는 필수로 입력해야 합니다" />
    </>
  );

title, alertText를 전달하면 사용자에게 경고 메시지를 전달할 수 있는 모달을 생성할 수 있습니다.

ConfirmModal

사용자에게 확인 여부, 선택 여부를 다시 한 번 물을 수 있는 ConfirmModal을 제공합니다.

function App() {
  const [isOpen, setIsOpen] = useState(false);

  const openModal = () => setIsOpen(true);

  const closeModal = () => setIsOpen(false);

  return (
    <>
      <button onClick={openModal}>open modal</button>
      <ConfirmModal
        isOpen={isOpen}
        onClose={closeModal}
        title="카드를 삭제하시겠습니까?"
        confirmText="삭제하면 복구하실 수 없습니다."
        onConfirm={closeModal}
      />
    </>
  );
}

title, confirmText, onConfirm를 전달하면 사용자에게 경고 메시지를 전달할 수 있는 모달을 생성할 수 있습니다.

PromptModal

모달을 사용해서 사용자에게 특정 입력값을 받을 수 있도록 PromptModal을 제공합니다.

function App() {
  const [isOpen, setIsOpen] = useState(false);
  const [value, setValue] = useState("");

  const openModal = () => setIsOpen(true);

  const closeModal = () => setIsOpen(false);

  return (
    <>
      <button onClick={openModal}>open modal</button>
      <PromptModal
        isOpen={isOpen}
        onClose={closeModal}
        title="쿠폰번호를 입력해 주세요."
        inputValue={value}
        onInputChange={(e) => setValue(e.target.value)}
        onSubmit={closeModal}
      />
    </>
  );
}

title, inputValue, onInputChange, onSubmit를 전달하면 사용자에게 경고 메시지를 전달할 수 있는 모달을 생성할 수 있습니다. 만약 인풋을 여러개 배치하고 싶은 경우, 다음과 같이 ModalForm, ModalInput을 활용해서 UI 구성을 커스텀할 수도 있습니다.

return (
  <Modal isOpen={isOpen} onClose={onClose}>
    <Modal.ModalContent size={size}>
      <Modal.ModalHeader>
        <Modal.ModalTitle text="쿠폰 번호를 입력해 주세요." />
      </Modal.ModalHeader>
      <Modal.ModalForm direction="column">
        <Modal.ModalInput />
        <Modal.ModalInput />
      </Modal.ModalForm>
      <Modal.ModalFooter direction={direction} justify="end">
        <Modal.ModalButton theme="white" size="medium" width="fixed">
          취소
        </Modal.ModalButton>
        <Modal.ModalButton theme="dark" size="medium" width="fixed">
          확인
        </Modal.ModalButton>
      </Modal.ModalFooter>
    </Modal.ModalContent>
  </Modal>
);

고려한 점

• 예측 가능한 영역과, 그렇지 않은 영역 구분하기

우선 라이브러리의 사용자는 개발자이므로 어떻게 하면 개발자가 유연하게 사용할 수 있을지에 대해서 고민했습니다. 따라서, 예측 가능한 영역과 그렇지 않은 영역을 구분하고 예측이 불가능 한 영역 즉, Content와 같은 매번 달라질 수 있는 UI 영역을 children으로만 받을 수 있도록 하여 재사용성을 높였습니다.