Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: useModal 훅 구현 #24

Merged
merged 10 commits into from
Jun 11, 2024
Merged

feat: useModal 훅 구현 #24

merged 10 commits into from
Jun 11, 2024

Conversation

d0422
Copy link
Member

@d0422 d0422 commented Jun 7, 2024

  • useModal 기능 추가
  • 테스트코드 작성
  • Storybook&Docs 추가
useModal.mov

portal에 애니메이션을 적용한 modal을 간편하게 렌더링할 수 있는 useModal을 추가하였습니다.
useAnimation을 의존성으로 갖습니다.

함수 인자

modalProps객체를 받습니다. 해당 객체는 아래와 같이 구성됩니다.

interface UseModalProps {
  modalRoot?: ModalRoot;
  overlayClose?: boolean;
  overlayAnimation?: {
    showClassName?: string;
    hideClassName?: string;
  };
  modalAnimation?: {
    showClassName?: string;
    hideClassName?: string;
  };
}

modalRoot: 모달을 렌더링할 HTMLElement입니다. default는 document.body입니다.
overlayClose: overlay를 눌러 modal을 닫을지를 설정합니다. default는 true입니다.
overlayAnimation: Overlay에 적용될 애니메이션 className입니다. showClassNamehideClassName 두 가지 key-value를 받을 수 있습니다.
modalAnimation: Modal에 적용될 애니메이션 className입니다. showClassNamehideClassName 두 가지 key-value를 받을 수 있습니다.

반환값

Modal: 컴포넌트로,해당 컴포넌트로 감싸진 children이 지정한 root에 portal을 통해 렌더링 됩니다.
show: 모달을 엽니다.
hide: 모달을 닫습니다.
isShow: 모달이 열려있는지 상태를 나타냅니다.

사용 예시

import { ModalContainer, Overlay, hideStyle, overlayHide, overlayShow, showStyle } from './Modal.css';

function Modal() {
  const { Modal, show, isShow, hide } = useModal({
    modalAnimation: {
      showClassName: showStyle,
      hideClassName: hideStyle,
    },
    overlayAnimation: {
      showClassName: overlayShow,
      hideClassName: overlayHide,
    },
  });

  const handleClick = () => {
    if (isShow) hide();
    show();
  };

  return (
    <div>
      <button onClick={handleClick}>{isShow ? 'hide' : 'show'}</button>
      <Modal overlayClassName={Overlay} modalClassName={ModalContainer}>
        <div>모달!</div>
        <button onClick={hide}>닫기</button>
      </Modal>
    </div>
  );
}

@d0422 d0422 requested a review from HBSPS June 7, 2024 10:44
@d0422 d0422 added the feature label Jun 7, 2024
@d0422 d0422 self-assigned this Jun 7, 2024
@d0422 d0422 changed the title feat: useModal feat: useModal 훅 구현 Jun 7, 2024
Copy link
Contributor

@HBSPS HBSPS left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

수고하셨습니다!

Comment on lines 6 to 27
export type UseModalAnimations = {
overlayAnimation?: {
showClassName?: string;
hideClassName?: string;
};
modalAnimation?: {
showClassName?: string;
hideClassName?: string;
};
};

interface UseModalProps extends UseModalAnimations {
modalRoot?: ModalRoot;
overlayClose?: boolean;
}

interface ModalProps {
overlayClassName?: string;
modalClassName?: string;
style?: CSSProperties;
children: ReactNode;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

UseModalAnimations은 type으로 선언하고 나머지는 interface로 선언하신 이유가 있나요??

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

헉 중간에 변경했었는데 type으로 남아있네요.
interface로 변경하도록 하겠습니다!

@d0422 d0422 merged commit 34dac06 into Rapiders:main Jun 11, 2024
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants