✂️ 분배된 이슈

상세정보 모달 구현

• 모달 기능 구현
• 현재 장소 상태 메시지 UI 출력
• 실시간 예상 인구수 UI 출력
• 북마크 버튼 UI 출력
• ‘내일 갈 거야’ 버튼 UI 출력
• 로딩 중일 경우 스켈레톤 UI 출력

🚩 구현 목표

• 상세정보 모달의 UI를 모두 구현
• 사용 브랜치 : feature/modal-ui

🍀 세부 목표

• 모달 관련 컴포넌트 분리
  • 레이아웃 → common 디렉터리
  • 내용물 → domain 디렉터리 / 하위 디렉터리
  • 디렉토리는 팀원들과 같이 구성하기로
• styled-component를 사용하여 UI 스타일 적용
• UI 관련 데이터를 어떻게 가져올까?
  • 하드 코딩
  • json 더미데이터를 기반으로 정보 출력
  • msw를 이용한 목업 서버 구축 (api 문서 작업 필요)
  • 우선 데이터 부분은 그대로 두기
• 2단계 모달 보여줄 때 애니메이션 적용
• 로딩 화면 구현하기 (스켈레톤 UI)

범용 모달 레이아웃 구현(#18)

• ModalLayout 컴포넌트 생성하기
• ModalLayout 컴포넌트 스타일링

1단계 상세정보 모달 UI 구현(#19)

• 상단 화살표
• 북마크
• 혼잡도 메시지
• 현재 인구 박스
• 내일 갈 거야 버튼

2단계 상세정보 모달 UI 구현(#20)

• 지난 24시간 인구 정보 그래프 박스
• 내일 갈 거야 순위 박스

🖥️ 구현 내용

범용 모달 레이아웃 구현(#18)

• 외부 라이브러리(react-modal) 고려
  • 모달을 열고 닫는 이벤트 등을 직접 구현하지 않아도 사용할 수 있음
  • mildo에서 총 3개의 모달을 만들어서 사용하는데 세세한 부분이 다름
    • 상세정보, 로그인, 사이드바가 각각 동작하는 이벤트가 다름
    • 로그인, 사이드바 같은 경우에는 회색 wrapper도 필요함
  • react-modal 서로 약간 다른 성격의 모달의 공통점을 쉽게 추상화할 수 있음
  • 그러나 참고 자료가 적어 types 설정에 어려움이 있음
  • 그냥 라이브러리 없이 구현하기로 결정
  • 참고 사이트
    • https://www.npmjs.com/package/react-modal

1단계 상세정보 모달 UI 구현(#19)

• figam에서 만들어 놓은 이미지를 png로 다운로드 받아 사용
• 내부에 저장하지 않고 사진 이미지를 외부 주소로 변경하여 사용
  • 사이트 : https://ifh.cc/i-6kHtyx
• #18, #19에서 커밋 너무 안날림…

2단계 상세정보 모달 UI 구현(#20)

• 1단계에서 2단계로 모달의 height가 커질 때 애니메이션을 적용
• 2단계 모달의 하위 UI는 레이아웃만 설정

📖 학습 내용

• transition의 동작 원리

🎸 기타

• 좌표 정보 예외 처리 필요함

  // navigator.geolocation.watchPosition(
    //   pos => {
    //     // 액세스 허용
    //     console.log(pos);
    //   },
    //   error => {
    //     // 액세스 거부
    //     if (error.code === error.PERMISSION_DENIED) {
    //       console.log('액세스 요청을 거부하였습니다.');
    //     }
    //   }
    // );