Main screen 수정작업 ⚙️

아직 작업효율이 좀 떨어지다보니...
Main screen에서 부족한 부분들이 자꾸 눈에 밟혀서 조금이라도 더 완성도를 높히고자
이미지와 디데이가 표시될 곳의 위치를 조금씩 수정했다.

main screen에서 이미지를 background-image로 설정하고 싶었는데
왜때문인지 자꾸 작동이 안되서... 그냥 이미지로 넣고 불투명도를 높인 후,
위쪽 빈 공간을 배경색을 따와서 넣어주었더니 감쪽같아졌따(나만그런가🤔)
간단하게 아이콘도 추가해서 우선 결과물은

상단의 stack위치?에는 배경색과 글씨색상을 투명으로 지정하긴 했지만
구역이 아예 나뉘어져 있어서 ... 숨기는 방법은 아직 못찾았다.
작업하다가 알게되면 다시 수정해야지 :)

Calendar 화면🗓 구현 시도

앨범작업을 moon이 맡기로 했으니, 나는 calendar screen 작업을 맡기로 했다.
생각보다 간단해보였는데, 패키지를 설치하고 나서도
자잘하게 설정해주고, 바꿔주어야 하는 부분들을 일일이 찾다 보니
꽤나 어려운 작업인 듯 하다.

📌 react-native-calendars 설치

https://github.com/wix/react-native-calendars

react 작업때 처럼 내가 일일이 작업해주면 좋겠지만, 아직 react-native는 너무 미숙해서
패키지들을 열심히 사용해서 구현하는데에 집중하기로 했다.

찾다보니 제일 많이 쓰이는게 react-native-calendars인 듯 했다.
설치해서 그냥 코드를 붙혀넣기만 했는데

뭔가 달력처럼 나오긴 했는데.... 뭐가 이러지....? 저 31을 넘어가는 회색숫자들은 뭐지...
싶어서 이것저것 코드를 뒤적뒤적이다 보니
맨 왼쪽에 있는 31~36까지의 숫자는 주 수를 나타내는 숫자였고,
하늘색 숫자는 오늘 날짜를 나타내는 것이었다.

Calendar.js

<Calendar
  // 처음으로 선택되어질 날짜(현재날짜), Default = Date()
  current={'2020-08-25'}
  // 선택이 가능한 최소 날짜, 이 날짜 이전은 회색날짜로 표시됨, Default = undefined
  minDate={'2020-08-01'}
  // 선택이 가능한 최대 날짜, 이 날짜 이후는 회색날짜로 표시됨, Default = undefined
  maxDate={'2020-08-31'}
  // 날짜를 눌렀을 때 실행되는 함수, Default = undefined
  onDayPress={(day) => {console.log('selected day', day)}}
  // 날짜를 길게 눌렀을 때 실행되는 함수, Default = undefined
  onDayLongPress={(day) => {console.log('selected day', day)}}
  // 달력 제목에 표시될 월 형식, Formatting values: http://arshaw.com/xdate/#Formatting
  monthFormat={'yyyy MM'}
  // 달력에서 보이는 월이 바뀔때 실행되는 함수, Default = undefined
  onMonthChange={(month) => {console.log('month changed', month)}}
  // 달 이동 화살표 숨기기, Default = false
  hideArrows={true}
  // 기본 화살표를 커스텀화살표로 대체 (방향은 '왼쪽'이나 '오른쪽')
  renderArrow={(direction) => (<Arrow/>)}
  // 이번 달 페이지에 다른 달 숫자를 보이지 않게 함, Default = false
  hideExtraDays={true}
  // day from another month that is visible in calendar page. Default = false
  disableMonthChange={true}
  // If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.
  firstDay={7}
  // Hide day names. Default = false
  hideDayNames={false}
  // Show week numbers to the left. Default = false
  showWeekNumbers={false}
  // Handler which gets executed when press arrow icon left. It receive a callback can go back month
  onPressArrowLeft={subtractMonth => subtractMonth()}
  // Handler which gets executed when press arrow icon right. It receive a callback can go next month
  onPressArrowRight={addMonth => addMonth()}
  disableArrowLeft={true}
  disableArrowRight={true}
  // Disable all touch events for disabled days. can be override with disableTouchEvent in markedDates
  disableAllTouchEventsForDisabledDays={true}
  /** 기본 월 및 연도 제목을 사용자 지정 제목으로 바꿈. 함수는 매개변수로 day를 받는다. */
  // 이 부분을 주석처리 해주었더니 달력이 보여졌다. 이유는 아직도 모르겠다,,
  renderHeader={(date) => {/*Return JSX*/}}
/>

여기서 firstDay를 7로 수정해서 일요일이 맨 처음으로 오게 하고,
hideDayNames와showWeekNumbers를 false값으로 수정했더니

그나마 캘린더같게 보이게 나타나지기는 했으나....
달력의 width를 꽉 채워서 간격을 넓히고싶고,
월을 이동하는 화살표들도 다른사람들은 다 나오던데
왜 나는 아예 나오지도 않는건질 모르겠다...ㅠㅠㅠㅠ

그래서! 다른 패키지를 찾아서 다시 시도해보기로 했다.

📌 react-native-calendario 설치

https://github.com/maggialejandro/react-native-calendario

이전에 설치한 패키지가 딱 내 스타일이긴 했지만,
결과물이 마음에 들지 않아서... 계속된 리서치 끝에 새로운 패키지를 찾아보았다 ;)

이번에는 설치하고 코드를 넣자마자 이렇게 뙇! 구현이 되어버렸다.
자동으로 list처럼 생성이 되어서 스크롤을 밑으로 내리면 다음달로 이동할 수 있는데
아, 뭔가 자잘한 기능들이 맘에 들지 않았다.

저렇게 주르륵 달력이 표시되는 것도 사실 좀 맘에 안들었고,
나는 깔끔하게 이번달 날짜만 보여주고 싶었다ㅜㅜ

그렇게 이것저것 만져보다가 이전 패키지 주석을 풀고 다시 작동해보니
어? 해결되지 않던 문제들이 해결되어간다..>!

📌 시행착오

다시 처음에 설치했던 패키지를 사용하기로 했다.
그 패키지 스타일이 더 맘에 들었기 때문도 있고,
더 다양한 기능을 조금 손쉽게 사용할 수 있을 것 같아서가 이유.
(풀리지 않던 문제들이 해결됬으니 바로 다시 돌아오기ㅎ)

첫번째) calendar 전체 넓이 조절이 안되는 문제

처음에 설치해서 이것저것 작업해보았던 react-native-calendars에서
width를 설정했을 때 작동이 되지 않았던 것 같은데,
두번째로 작업을 시도했던 react-native-calendario를 설치해서 만지다가 알았다.
calendar를 감싸고 있는 container의 width로 넓이의 조절이 가능하다는 것을....
그래서 CalendarContainer의 width를 100%로 설정했더니 칸들이 넓어졌다!🤩

두번째) 다른 달로 이동하기 위한 화살표가 표시되지 않는 문제

기존 코드를 가져왔을 때 이동을 위한 화살표 관련 코드에서

<Calendar
  ...
  hideArrows={true}
  renderArrow={(direction) => <Arrow />}
  ...
/>

이렇게 되어있길래 아니 도대체 <Arrow /> 컴포넌트는 어디에 있다는거야..라는
생각에 사로잡혀서 멘붕이 왔었는데.......
코드를 이것저것 만져보고 고민하다가 renderArrow 위에 커서를 올려놓았더니
설명문? 같은게 떠서, 유레카!를 외치게 된 것 같다.

그렇게 검색을 통해서 사용법을 알게 되었고 결과적으로는
<AntDesign />의 아이콘을 사용해서 구현에 성공ㅜㅜ
코드는

renderArrow={(direction) => direction === "left" ? (
	<AntDesign name="left" size={20} color="#50cebb" />
    ) : (
	<AntDesign name="right" size={20} color="#50cebb" />
    )
}

조건문에 대해 좀 더 공부해야겠다는 생각이 들었다ㅠㅠ
왜이렇게 사용을 잘 못하는건지.... 이렇게 코드로 보면 바로 이해가 가지만
내가 생각해내는게 잘 안된다ㅠㅠ

---

📌 남은작업

며칠만에 여럿 시행착오를 통해 calendar 구현은 해냈지만,
아직 구현해야 할 기능들이 많다ㅠㅠ
우선은 좀 욕심을 부려서 넣고 싶은 기능들까지 정리를 해보자면,

• 간결한게 좋기 때문에,, 일정이 있는 날짜에는 dot로 표시
• 내 일정, moon의 일정, 둘 모두의 일정이나 기념일을 개별로 표시
  (dot 색상을 다르게 표시하기)
• 2일 이상의 일정에 대해서는 패키지 내에 있는 기능을 사용해서 period로 표시
• 색상은 전체적인 앱 분위기에 맞춰서 설정