🌈 페이지아이콘

페이지 아이콘은 navLink 입니다.

props로 페이지 이름을 받고 이에 맞는 아이콘 버튼을 표시합니다.

페이지 명은 현재 name: 'home' | 'work' | 'setting' 으로 구성되어있습니다.

<PageIcon to="/" name="home" exact={true} />

<PageIcon to="/user" name="work" />

• 다른 url과 겹칠 우려가 있는 경우 exact={true}를 입력해야 정상 작동합니다.
• navLink 이므로 to 를 이용하여 path를 입력합니다.
• 해당 path일 경우 자동으로 PageIcon 컴포넌트가 활성화됩니다.

☀️ 모달

모달 컴포넌트를 사용하는 페이지에서 useState를 이용해 modal의 visibility 상태를 만들어주고 이를 모달 컴포넌트의 visible props로 넣어주면 됩니다.

onClose 프로퍼티에는 모달을 닫을 때 발생하는 이벤트 핸들러를 전달합니다.

• x 버튼이나, 모달 외부의 어두운 영역을 눌렀을 때 해당 이벤트가 trigger 됩니다.
• 즉 모달을 닫아주기 위한 함수를 전달하면 됩니다.

확인/취소가 가능한 모달일 때

• 확인버튼을 누를 시 onClickOk 에 전달한 핸들러가 먼저 실행되고, 그 다음 onClose에 전달한 핸들러가 실행됩니다.