리액트 UI 컴포넌트 디자인 패턴 익히기

결제 정보를 입력받는 화면을 Modal interface로 구현해주세요. 이때 사용하는 Modal UI 컴포넌트는 리액트의 대표적인 디자인 패턴인 “Compound component” 패턴을 적용해 구현해주세요. 사용 예시:


import Modal from './myModal.tsx'

const Page = () =>{

return (
        <Modal>
          <Modal.Header>
                <Modal.Close>
                        X               
                <Modal.Clost
          </Modal.Header>
          <Modal.Body>
            Are you sure?
          </Modal.Body>
          <Modal.Footer>
            <button onClick={handleConfirm}>Confirm</button>
          </Modal.Footer>
        </Modal>
    )
}

export default Page

Dolphin-PC / Commerce

리액트 UI 컴포넌트 디자인 패턴 익히기 #65