[액션 메뉴] 액션 메뉴 만들기

[leegwae]

🤷‍♂️ Description

액션 메뉴 만들기

📝 Primary Commits

• [useOverlay] 백드롭, 위치 옵션, 모달 동작들을 제거한다 #241
• [액션 메뉴] 바텀 시트 형태가 기본인 ActionMenuController를 만든다. #243
• [액션 메뉴] 액션 메뉴를 여는 버튼의 위치에 따라 열리는 위치가 바뀌도록 한다. #245
• [액션 메뉴] 액션 메뉴가 viewport를 벗어나면 벗어나지 않도록 위치를 조정해준다
• [액션 메뉴] 640px 이하에서는 바텀 시트로 보여준다 #337
• [액션 메뉴] ActionMenuController 추상화 삭제하고 ActionMenuArea로 끌어올린다 #381

[leegwae]

가장 처음 생각한 인터페이스

<ContextMenuController content={<ContextMenuContent />}><button>열기</button></ContextMenuController>

대충 이런 인터페이스가 생각이 난다.

모달과 액션 메뉴의 구분

이건 모달이고

이건 액션 메뉴이다.

useOverlay를 사용해볼 순 없을까?

1. 오버레이가 백드롭 있는 거랑 없는 거 지원하고 있으므로 백드롭 없는 걸 기본으로 깔고 하면 액션 메뉴 만들 수 있음
2. 다만 현재 오버레이가 vertical이랑 horizontal 옵션 지원하고 있으므로 컨텍스트 메뉴 여는 버튼에 따라 위치 바꾸는 옵션 제공해야함

=> OverlayController에서 버튼에 따라 위치 정하는 옵션을 넣던가
=> OverlayController에서 위치 옵션을 전부 빼버리고 OverlayContent가 직접 설정하게 하던가 (그러면 ModalController랑 ContextMenuController 만들어서 위치 정하게 하는 Wrapper만들면 됨)

=> 화면이 너무 작아질 경우 ActionMene를 바텀 시트 형태로 제공해야하고 싶다. 이러면 OverlayController가 하는 것이 너무 많아진다.

결론

1. 기존의 OverlayController를 ModalController로 변경하고 ActionMenuController를 따로 만들도록 한다.
2. useOverlay는 전달받은 컨텐츠를 OverlayController로 감싸서 사용하지 않고 다만 전달받은 컨텐츠를 보여주기만 한다.
3. 앞으로 사용자는 컨텐츠를 ModalController나 ActionMenuController로 감싸 useOverlay의 open 메서드에 전달하도록 한다.

---

현재 진행 상황

1. OverlayController는 오버레이 기본 동작(오버레이 바깥 클릭 시 오버레이 언마운트)만 추가한다
2. ActionMenuController, ModalController, SheetController는 OverlayController를 사용하여 각각의 컴포넌트로서 기본적인 스타일링만 한다.
3. 모달, 시트는 백드롭을 기본으로 한다. 즉, 모달과 시트가 열리면 오버레이를 연 버튼과 상호작용할 필요가 없다.
4. 액션 메뉴는 백드롭이 없는 것이 기본이다. 즉, 액션 메뉴가 열리면 오버레이를 연 버튼과 상호작용할 필요가 있다. 버튼의 동작까지 관리해야하므로 이것은 로 관리한다.

아래의 이슈를 참고한다.

• [overlayController] 오버레이 컨트롤러 통일하기 #246
• [액션 메뉴] 액션 메뉴를 여는 버튼의 위치에 따라 열리는 위치가 바뀌도록 한다. #245