Skip to content

Comments

feat: useModal#54

Open
Beomtae wants to merge 7 commits intodevfrom
feat/useModal
Open

feat: useModal#54
Beomtae wants to merge 7 commits intodevfrom
feat/useModal

Conversation

@Beomtae
Copy link
Collaborator

@Beomtae Beomtae commented Aug 11, 2025

#53

📝 훅 간단 사용 설명

어떤 훅인지 간단하게 설명해주세요! (docs 내용 기반)

  • 모달 닫기와 스크롤 방지를 간단하게 처리할 수 있는 커스텀 React Hook입니다.
  • 모달 바깥 영역 클릭 시, esc 키를 누를 시 모달이 닫힙니다.
  • 모달 바깥 영역 스크롤이 방지됩니다.

@vercel
Copy link

vercel bot commented Aug 11, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
2025-fe-hookdle-docs Ready Ready Preview Comment Sep 2, 2025 5:30am

onClose();
}
},
[onClose]
Copy link
Collaborator

Choose a reason for hiding this comment

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

onclose를 ref로 관리하기

onClose: () => void;
}

function useModal({ onClose }: UseModalProps) {
Copy link
Collaborator

Choose a reason for hiding this comment

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

ref를 인자로 받고, return 값으로 modal에 대한 상태, 동작(함수~~)을 return한다.

@hoyyChoi hoyyChoi added the 훅 개발 New feature or request label Aug 11, 2025
@Beomtae
Copy link
Collaborator Author

Beomtae commented Sep 2, 2025

반영 완료했습니다!
반환값으로 다음과 같은 모달의 상태와 동작을 설정해주었습니다.

이름 타입 설명
isOpen boolean 모달이 열려 있는지 여부
openModal () => void 모달을 열고 이벤트 리스너를 등록
closeModal () => void 모달을 닫고 이벤트 리스너를 해제

Base automatically changed from dev to main September 21, 2025 10:20
@hoyyChoi hoyyChoi changed the base branch from main to dev September 22, 2025 04:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

훅 개발 New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants