목차

목표 정산

이번 주에 목표로 둔 사항들은 아래와 같다.

• 폰트, 공용 색상 등 선정
  • 곧 머지않아 정해지면 이제 디자인에도 반영할 수 있을 듯 하다.
• 관리자 페이지 내 기능 구현
  • 오히려 이쪽 구현에 시간을 다 썼다. 조금만 더 하면 전반적인 적용이 완료될 거 같다.
• 디자인 변경
  • figma에 아직 수정하지 못 한 페이지까지 전반적으로 디자인을 수정하고 싶다.
• [희망 사항] 디자인 변경 사항에 맞춰 페이지 변경
  • 여기까지 가기에는 이번 주는 무리일 거 같지만, 일단 희망사항이니까!

어느 정도 진행을 다 할 수 있겠지-라고 생각했더니 기능 구현에 많은 시행착오가 있었다. 그로 인해 진도가 많이 나가진 않았지만, 그 대신 이번에 쓸 내용들은 많은 것 같다.

기존 Modal창을 Chakra UI의 Modal창 컴포넌트로 전환

Modal창을 만들 때는 항상 useState를 이용해서 return 안에서 삼항연산자를 통해 Modal 상태가 적용됐는지를 물어보고 반영됐으면 모달 컴포넌트 내용을, 아니면 빈 fragments를 붙이는 것으로 만들곤 했었다.

const WaitingFormContainer: React.FC = () => {
	const [modalState, setModalState] = useState(false);
	
	return (
		{modalState === true ? (
		  <CheckDataModal userInfo={userData} close={setModalState} />
		) : (
		  <></>
		)}
	)
}

그러나 저 삼항연산자로 매번 Modal창을 저렇게 처리하는 것은 좋지 않아보였고, 아울러 Modal창에 적용할 Overlay나 Animation 등을 생각하면 Modal 동작에 구현할 것들이 너무 많다고 생각했다.

지금은 직접 구현을 하기 보다는 이런저런 라이브러리를 적극적으로 활용하기로 마음을 먹었기 때문에 이와 관련해서 고민하다가 Chakra UI에서 Modal 기능을 지원해주는 것을 보고 사용해보기로 했다.

Modal

Chakra UI의 Modal 기능은 Animation이나 Overlay 등이 다 적용되어 있으며, Modal에 Prop를 부여함으로서 편하게 열고 닫는 기능이나 상태를 확인할 수 있게 해놨다.