Skip to content

πŸ› οΈ λ©”μΈνŽ˜μ΄μ§€ κ΄€λ ¨ μ‚¬μ΄λ“œλ°” κ΅¬ν˜„ μš”μ²­Β #22

@revy7289

Description

@revy7289

πŸ“Œ 핡심 μš”κ΅¬ 사항 1

λ©”μΈνŽ˜μ΄μ§€μ˜ μ‚¬μ΄λ“œλ°”λ₯Ό 톡해 ν”„λ‘œμ νŠΈ, νŒ€, λ‹΄λ‹Ήμž 등을 선택할 수 있고 μ„ νƒν•œ 값에 따라 ν•„ν„°λ˜μ–΄μ•Ό ν•©λ‹ˆλ‹€.

  • ν”„λ‘œμ νŠΈ, νŒ€, λ‹΄λ‹Ήμž λ¦¬μŠ€νŠΈλŠ” ν•˜λ“œμ½”λ”©ν•œ 배열을 μ‚¬μš©ν•  μˆ˜λ„ μžˆμœΌλ‚˜, 가급적 TS둜 μ •μ˜λ˜μ–΄ μž¬μ‚¬μš©μ΄ κ°€λŠ₯ν•΄μ•Ό ν•©λ‹ˆλ‹€.
  • μ‚¬μš©μžκ°€ μ„ νƒν•œ 값에 따라 ν•΄λ‹Ήν•˜λŠ” 칸반만 UI에 λ…ΈμΆœλ˜μ–΄μ•Ό ν•©λ‹ˆλ‹€.
  • 검색에 따라 λ‹΄λ‹Ήμžλ₯Ό 검색할 수 μžˆμ–΄μ•Ό ν•˜κ³ , λ‹΄λ‹Ήμžλ₯Ό ν¬ν•¨ν•˜λŠ” 칸반만 UI에 λ…ΈμΆœλ˜μ–΄μ•Ό ν•©λ‹ˆλ‹€.

πŸ›  μž‘μ—… 상세 λ‚΄μš©

μ²΄ν¬λ°•μŠ€λŠ” μš°μ„ λ„κ°€ λ†’μ•„ λ³΄μ΄λŠ” μž‘μ—…μœΌλ‘œ 가급적 λ¨Όμ € ν•΄κ²°λ˜μ—ˆμœΌλ©΄ μ’‹κ² μŠ΅λ‹ˆλ‹€.
λΆˆλ¦ΏμΌ€μ΄μŠ€λŠ” κ·Έ λ‹€μŒ μž‘μ—…μœΌλ‘œ μ˜ˆμƒλ˜λŠ” μ§€μ μž…λ‹ˆλ‹€.
ν•˜μ§€λ§Œ μœ μ—°ν•˜κ²Œ νŒλ‹¨ν•˜μ—¬ λΆˆλ¦ΏμΌ€μ΄μŠ€ λ¨Όμ € μž‘μ—…ν•΄μ£Όμ…”λ„ 상관 μ—†μŠ΅λ‹ˆλ‹€.

UI/UX

λ°˜λ³΅λ˜λŠ” UIνŒ¨ν„΄μ΄ λ§ŽμŠ΅λ‹ˆλ‹€. μž¬μ‚¬μš©μ„±μ„ μ΅œλŒ€ν•œ μƒκ°ν•˜μ—¬ μž‘μ—…ν•΄ λ΄…μ‹œλ‹€.

  • ν”„λ‘œμ νŠΈ, νŒ€, λ‹΄λ‹Ήμž 등을 λ¦¬μŠ€νŒ…ν•˜λŠ” 배열을 κ΅¬μΆ•ν•©λ‹ˆλ‹€. ( TS ν™œμš© ꢌμž₯ )
  • μ‚¬μ΄λ“œλ°”λ₯Ό μ„Ήμ…˜λ³„λ‘œ κ΅¬λΆ„μ§“λŠ” wrapper uiλ₯Ό κ΅¬μΆ•ν•˜κ³ , ν•΄λ‹Ήν•˜λŠ” 배열을 props으둜 λ‚΄λ €μ€λ‹ˆλ‹€.
  • props으둜 전달받은 dataν™œμš©, checkbox둜 선택할 수 μžˆλŠ” uiλ₯Ό map으둜 λΏŒλ €μ€λ‹ˆλ‹€.
    • 전체 UIλ₯Ό κ°μ‹ΈλŠ” side-bar Componentλ₯Ό λͺ¨λ°”일 λ°˜μ‘μ„±μ„ κ³ λ €ν•˜μ—¬ μ™„μ„±ν•©λ‹ˆλ‹€.

FEATURE

  • checkboxλ‚˜ button으둜 μ„ νƒν•œ 값에 따라 νŠΉμ •ν•œ λ°μ΄ν„°λ§Œ ν¬ν•¨ν•˜λ„λ‘ 배열을 ν•„ν„° ν•©λ‹ˆλ‹€.
  • μ„ νƒλœ 값에 따라 ν•΄λ‹Ήν•˜λŠ” 칸반만 UI에 ν‘œν˜„λ˜μ–΄μ•Ό ν•©λ‹ˆλ‹€. (ν”„λ‘œμ νŠΈ, νŒ€, λ‹΄λ‹Ήμž λ“±)
  • 검색을 톡해 νŠΉμ •ν•œ 값을 ν¬ν•¨ν•˜λŠ” 칸반만 UI에 ν‘œν˜„λ˜μ–΄μ•Ό ν•©λ‹ˆλ‹€.
    • κ³Όλ„ν•œ λ Œλ”κ°€ λ°œμƒν•˜μ§€ μ•Šλ„λ‘ μŠ€λ‘œν‹€λ§μ„ μ μš©ν•©λ‹ˆλ‹€.

πŸ”— μ°Έκ³ ν• λ§Œν•œ 자료 (선택)

κ΄€λ ¨ λ¬Έμ„œ, 링크 등을 첨뢀해 μ£Όμ„Έμš”.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions