🐜 Mine μ• ν”Œλ¦¬μΌ€μ΄μ…˜ ν”„λ‘œμ νŠΈ - 상단 νƒ­

DarleneΒ·2021λ…„ 7μ›” 26일
0

Mine ν”„λ‘œμ νŠΈ

λͺ©λ‘ 보기
5/12

ν™ˆ 화면을 λ§Œλ“€κ³  λ‚˜μ„œ κ·Έ λ‹€μŒ λ‹¨κ³„λ‘œ 쑰금 더 μ‰¬μ›Œλ³΄μ΄λŠ” 'μ˜ˆμ‚° 화면을 λ§Œλ“€μ–΄λ³΄μž' μ˜€μŠ΅λ‹ˆλ‹€.
μ²˜μŒμ—λŠ” μ˜ˆμ‚° ν™”λ©΄κ³Ό 달λ ₯ ν™”λ©΄ μ΄λ ‡κ²Œ λ‹¨μˆœν•˜κ²Œ 각 νŽ˜μ΄μ§€λΌκ³ λ§Œ μƒκ°ν•˜μ˜€μŠ΅λ‹ˆλ‹€. 그림을 μžμ„Ένžˆ λ³΄λ‹ˆ κ³΅ν†΅λ˜λŠ” 뢀뢄이 λ³΄μ˜€κ³ , μ½”λ“œμˆ¨μ—μ„œ κ·Έλ™μ•ˆ λ¦¬μ•‘νŠΈλ‘œ 관심사 뢄리λ₯Ό ν–ˆμ—ˆλŠ”λ°, 관심사 뢄리λ₯Ό ν•˜κ³  κ³΅ν†΅λ˜λŠ” μ»΄ν¬λ„ŒνŠΈλ₯Ό μž¬μ‚¬μš©ν•˜λ©΄ 쒋을 것 κ°™λ‹€λŠ” 생각을 ν•˜μ˜€μŠ΅λ‹ˆλ‹€.

μ˜ˆμ‚° 화면은 <상단 νƒ­ /> + <μ˜ˆμ‚° /> + <ν•˜λ‹¨ νƒ­ />으둜 이루어져 μžˆλ‹€λŠ” 결둠을 내리고, μ»΄ν¬λ„ŒνŠΈ 넀이밍에 λŒ€ν•œ 고민을 μˆ˜λ„ 없이 ν–ˆμ—ˆμŠ΅λ‹ˆλ‹€.

상단 탭인데 무엇이라고 ν•΄μ•Ό μ μ ˆν• κΉŒ?
μ²˜μŒμ— MonthlyBudgetContainer라고 μƒκ°ν•΄λƒˆμŠ΅λ‹ˆλ‹€.
μ§κ΄€μ μœΌλ‘œ 넀이밍을 ν–ˆλŠ”λ° λ¨Όκ°€ λ§ˆμŒμ— 썩 λ“€μ§€λŠ” μ•Šμ•˜μŠ΅λ‹ˆλ‹€.
보톡 μ•± ν™”λ©΄μ—μ„œ 상단 νƒ­, μƒνƒœ λ°”, λ„€λΉ„κ²Œμ΄μ…˜ λ°” λ“±λ“± μ“°λŠ” μš©μ–΄κ°€ μžˆμ§€ μ•Šμ„κΉŒ ν•˜κ³  ꡬ글링을 ν•˜λ©΄μ„œ κ³ λ―Ό 끝에 StateBarCard라고 넀이밍을 ν•˜μ˜€μŠ΅λ‹ˆλ‹€.

μ»΄ν¬λ„ŒνŠΈ 넀이밍 ν•œ 번 μ •ν•˜κΈ°λ„ 힘이 λ“œλ„€μš”!

이제 본격적으둜 StateBarCard μ»΄ν¬λ„ŒνŠΈλ₯Ό λ§Œλ“€μ–΄ 보도둝 ν•˜κ² μŠ΅λ‹ˆλ‹€.

export default function StateBarCard() {
  return (
    <>
    // Todo...
    </>
  );
}

μ—¬κΈ°μ„œ 또 관심사 뢄리λ₯Ό ν•  수 μžˆκ² λ„€μš”.

  • μ›” μ΄λ™ν•˜λŠ” μ»΄ν¬λ„ŒνŠΈ

  • μˆ˜μž…κ³Ό μ§€μΆœ κ±°λž˜λ‚΄μ—­μ„ λ³΄μ—¬μ£ΌλŠ” μ»΄ν¬λ„ŒνŠΈ

μ•„λž˜μ™€ 같이 μ»¨ν…Œμ΄λ„ˆ μ»΄ν¬λ„ŒνŠΈλ‘œ 각각 관심사 뢄리λ₯Ό ν•΄μ£Όμ—ˆμŠ΅λ‹ˆλ‹€.

export default function StateBarCard() {
  return (
    <>
      <MonthSwiperContainer />
      <BreakDownContainer />
    </>
  );
}
πŸ™‹ μ™œ μ»¨ν…Œμ΄λ„ˆ μ»΄ν¬λ„ŒνŠΈλ₯Ό μ‚¬μš©ν–ˆλ‚˜μš”?

μ»¨ν…Œμ΄λ„ˆ μ»΄ν¬λ„ŒνŠΈμ™€ ν”„λ ˆμ  ν…Œμ΄μ…˜ μ»΄ν¬λ„ŒνŠΈμ— λŒ€ν•΄ μ•Œκ³  κ³„μ‹ κ°€μš”?
Presentationalμ»΄ν¬λ„ŒνŠΈμ™€ Containerμ»΄ν¬λ„ŒνŠΈ 편

μ΄μ œλΆ€ν„° 본격적인 κΈ°λŠ₯ 개발이 ν•„μš”ν•œ λΆ€λΆ„λ“€μ΄μ˜ˆμš”.

각각의 μƒνƒœμ™€ λ™μž‘(μ•‘μ…˜)이 ν•„μš”ν•œ λΆ€λΆ„μž…λ‹ˆλ‹€.
μ €λŠ” 이번 ν”„λ‘œμ νŠΈμ—μ„œ λŒ€λΆ€λΆ„μ˜ μƒνƒœμ™€ λ™μž‘μ„ λ¦¬λ•μŠ€λ₯Ό μ‚¬μš©ν•˜λ €κ³  ν•˜κΈ° λ•Œλ¬Έμ— μ΄λΆ€λΆ„μ—μ„œ 데이터 처리 λŠ₯λ ₯을 ν•˜λŠ” μ»΄ν¬λ„ŒνŠΈλ‘œ λ§Œλ“€μ˜ˆμ •μ΄λΌμ„œ μ»¨ν…Œμ΄λ„ˆ μ»΄ν¬λ„ŒνŠΈλΌκ³  넀이밍을 ν–ˆμŠ΅λ‹ˆλ‹€.

πŸ“ Requirements

βœ”οΈ λ¦¬λ•μŠ€μ— μ •μ˜ν•΄μ•Ό ν•  데이터 μŠ€ν‚€λ§ˆ

  • μ›” μ΄λ™ν•˜λŠ” μ»΄ν¬λ„ŒνŠΈ
    year, month
  • μˆ˜μž…κ³Ό μ§€μΆœ κ±°λž˜λ‚΄μ—­μ„ λ³΄μ—¬μ£ΌλŠ” μ»΄ν¬λ„ŒνŠΈ
    income, expense

0개의 λŒ“κΈ€