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.

Sign up for GitHub

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

Jump to bottom

[Task] 모달 컴포넌트 추상화 #56

Merged
merged 5 commits into from
Dec 9, 2023
Merged

[Task] 모달 컴포넌트 추상화 #56

merged 5 commits into from
Dec 9, 2023

Conversation

JUNOSHON
Copy link
Member

@JUNOSHON JUNOSHON commented Dec 7, 2023

🤔 해결하려는 문제가 무엇인가요?

  • Modal 컴포넌트 추상화

🎉 변경 사항

  • react-portal로 문서의 body에 Modal.tsx를 렌더링 하도록 추가했습니다.
  • Modal.tsx를 조작하기 위한 로직을 재사용하기 위한 useModal.tsx를 추가했습니다.

🙏 여기는 꼭 봐주세요!

사용 방법

      <Button onClick={openModal}>모달 열기</Button>

      <Modal isOpen={isOpen} onClose={closeModal}>
        <p>미션을 끝내시겠어요?</p>
        <Button onClick={closeModal}>끝내기</Button>
        <Button onClick={closeModal}>다시시작하기</Button>
      </Modal>

useModal에서 불러온 openModal, closeModal을 원하는 곳에서 호출합니다.

🌄 스크린샷

image

📚 참고

@JUNOSHON
➕ React-portal dependency 추가
cf45c7e 
react-portal dependency 추가
@JUNOSHON
✨ Modal.tsx 추가
b37e6eb 
Modal.tsx 추가
@JUNOSHON
♻️ UseModal Hook 추가
17538bf 
useModal.tsx 추가
@JUNOSHON JUNOSHON linked an issue Dec 7, 2023 that may be closed by this pull request
[Task] 모달 컴포넌트 추상화 #30
Closed
2 tasks
@vercel Vercel
Copy link

vercel bot commented Dec 7, 2023 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
10mm-client-web ✅ Ready (Inspect) Visit Preview 💬 Add feedback Dec 9, 2023 5:31am

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Dec 7, 2023

🚀storybook: https://656f59f07b8e48bf741b98e6-qqswgdgfzt.chromatic.com/

woobottle
woobottle reviewed Dec 9, 2023
View reviewed changes
src/hooks/useModal.tsx
}

const useModal = ({ initialOpen = false }: UseModalProps = {}) => {
const [isOpen, setIsOpen] = useState(initialOpen);
Copy link
Collaborator

Choose a reason for hiding this comment

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

👍🏻

src/components/Modal.tsx Outdated
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
zIndex: '9999',
Copy link
Collaborator

Choose a reason for hiding this comment

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

zIndex 값 매직넘버로 관리되면 좋을것 같은데 의견이 궁금해요~

Copy link
Member Author

Choose a reason for hiding this comment

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

수정해보겠습니다!

wade3420
wade3420 approved these changes Dec 9, 2023
View reviewed changes
Copy link
Collaborator

@wade3420 wade3420 left a comment

Choose a reason for hiding this comment

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

감사합니다! 모달 디자인 고도화되면 같이 고도화해봐유

@JUNOSHON
💄 ModalConstant.ts 추가
069a2a3 
modalConstant.ts 추가
@JUNOSHON
➖ 미사용 라이브러리 제거
3161578 
react-portal 라이브러리 제거
@JUNOSHON JUNOSHON merged commit 6b82d38 into develop Dec 9, 2023
2 checks passed
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Dec 9, 2023

🚀storybook: https://656f59f07b8e48bf741b98e6-pmzoxtdtwt.chromatic.com/

@sumi-0011 sumi-0011 deleted the feat/modal branch December 22, 2023 09:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@woobottle woobottle woobottle left review comments

@wade3420 wade3420 wade3420 approved these changes

@sumi-0011 sumi-0011 Awaiting requested review from sumi-0011 sumi-0011 is a code owner

Assignees

@JUNOSHON JUNOSHON

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Task] 모달 컴포넌트 추상화
3 participants
@JUNOSHON @woobottle @wade3420