μ»€ν”Œμ•±πŸ‘©β€β€οΈβ€πŸ‘¨ [WE'SH] - [5] Calendar κ΅¬ν˜„ μ‹œλ„

eassyΒ·2020λ…„ 8μ›” 26일
0

[WE'SH]Couple-App

λͺ©λ‘ 보기
5/6
post-thumbnail

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둜 ν‘œμ‹œ
  • 색상은 전체적인 μ•± λΆ„μœ„κΈ°μ— λ§žμΆ°μ„œ μ„€μ •
profile
μ‰½κ²Œ μ‚¬λŠ”κ±΄ μž¬λ―Έκ°€ μ—†λ”κ΅°μš”, μƒˆλ‘œ μ‹œμž‘ν•©λ‹ˆλ‹€πŸ€“

0개의 λŒ“κΈ€