4. 스타일링

☝🏽 todo

• 아이콘 배치
• native, nav 완성
• 저금통 box 구성 완료 & 추가 동작 설정(미완료)
• 날짜 최신일(->오늘)과 두번째일(->어제) 글자 변경(미완료)
• 소비리스트 지출 합산 출력
• 계좌 옆으로 넘기기

아이콘 배치

figma 에 디자인 되어 있는 png 를 export 하여 사용!

native, nav 구성 완료

native 부분 완료.

nav 는 position으로 강제로 아래에 배치

money_box 구성완료 & 동작 미완료

가로로 스크롤 되도록 작성

밖에 div로 감싸고 overflow: hidden 주고

안에 div에 display: flex로 가로 배치

ul 로 했을때 마지막 버튼이 공간을 차지 하지 못하고 세로로 늘어지는 현상 발생

해결 ) flex-shrink 값을 0으로 주어 공간을 충분히 갖을수 있게 해야한다.

하지만 ul을 굳이 사용할 필요가 없다고 생각하여 그냥 div로 전부 주고

새로 생성되는 money_box 는 기준요소.before(생성요소)를 통해 기준요소 바로 앞에 생성하도록 한다.

기준요소는 money_box 생성 버튼.

동작은 계좌 변경 슬라이드 구현 이후 구현.

날짜 최신일(->오늘)과 두번째일(->어제) 글자 변경(미완료)

json 으로 데이터를 받아와 처리 한다.

데이터에 history 는 아래로 쌓이기 때문에

history 배열을 reverse() 로 뒤집고

가장 앞이 오늘 날짜가 된다.

배열 0번째를 날짜를 출력할 때 '오늘' 로 출력하고

배열 1번째를 날짜를 출력할 때 '어제' 로 출력하면

매번 json을 최신으로 받아오면 알맞게 표시된다.

소비리스트 지출 합산 출력

간단하게 해당 날짜의 li 를 출력할때 price 중 income 값이 out 인 것만 지출 변수에 - 해준다.

지출 변수를 날짜 출력할때 span에 textContent로 넣어 출력.

이후 css 로 위치 조절.

계좌 옆으로 슬라이드하여 변경하기

계좌 슬라이드는 처음 마크업때부터 고려하여 작성하였다.

main 에 여러 계좌의 section을 두는 것으로 결정하였다.

우선 여러 section을 생성하여 사용하기 때문에

기본적으로 querySelectorAll('section') 을 통해 관리한다.

추가로 계속 생겨도 컨트롤 할 수 있다.

기본적으로 슬라이드를 설정하기 위해 eventListener로 touchstart와 touchend 사용

기준점이 중요하다 아래에 가로 스크롤이 있고 contents 확장도 touch로 이루어지기 때문에

계좌 자리에 기준점을 두고,

slide 동작을 위한 pageX값의 차이를 충분히 두어 확실하게 필요할때 동작 시킬 수 있도록 한다.