모달 썸네일형 리스트형 리액트 포탈을 활용해 모달 만들기 (Implement modal component using React Portals) 개요 널널팀에서 뭐라고 보내지 앱 개발을 시작했다. 모바일 웹 개발이 필요해 리액트로 구현하기로 결정했다. 가장 먼저 보이는 디자인 요구사항이 모달이여서 모달을 먼저 구현했다. 디자인 분석 우선 구조를 살펴보면 전체를 어둡게 덮고있는 모달 백그라운드와, 모달 내용을 담고있는 컨테이너로 나뉘고 있다. 그리고 컨테이너 내부는 제목, 디테일 내용, 버튼 등 들어가는 요소에 따라 모양이 바뀌게 된다. 따라서 다음과 같이 구조를 나눠보았다 Overlay: 어두운 뒷 배경 Container: 모달 컨텐츠를 담을 박스 기능 기능적으로 보면, 흔히 보든 모달과 같은 기능을 구현하고자 했다. 모달의 상태에 따라 바뀌어야 하는 기능을 적어보았다. 다만, 다른 모달과는 조금 다르게 최초 랜딩 시 웹에서 보기 버튼을 눌러야만.. 더보기 이전 1 다음
