Skip to content

πŸ“ μ›ν‹°λ“œ 프리 μ˜¨λ³΄λ”© 2μ£Όμ°¨ 과제 - 견적 μš”μ²­ νŽ˜μ΄μ§€

Notifications You must be signed in to change notification settings

2201infinity/request_a_quote

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸ“ μ›ν‹°λ“œ 프리 μ˜¨λ³΄λ”© 2μ£Όμ°¨ 과제 - 견적 μš”μ²­ νŽ˜μ΄μ§€

μ—μ΄νŒ€λ²€μ²˜μŠ€ - 견적 μš”μ²­ νŽ˜μ΄μ§€ κ΅¬ν˜„

μ—μ΄νŒ€λ²€μ²˜μŠ€

πŸ“Œλ°°ν¬ 링크

πŸ“Œν”„λ‘œμ νŠΈ μ†Œκ°œ

  • μ—μ΄νŒ€λ²€μ²˜μŠ€μ˜ νŒŒνŠΈλ„ˆμŠ€ 견적 μš”μ²­μ„ ν™•μΈν•˜λŠ” νŽ˜μ΄μ§€ κ΅¬ν˜„

  • mock dataλ₯Ό json server둜 연동 및 배포

  • 곡용 μ»΄ν¬λ„ŒνŠΈ μ‚¬μš©μ„ ν†΅ν•œ μ½”λ“œ μž¬μ‚¬μš©μ„±κ³Ό μž‘μ—… νš¨μœ¨μ„± ν–₯상

πŸ“ŒνŒ€μ› μ†Œκ°œ

μž„ν–₯수 (νŒ€μž₯) κΉ€κΈ°μ˜ μ΄λ„ν˜„ μ‘°μ˜ˆμ§€
FE Developer FE Developer FE Developer FE Developer

πŸ“Œν”„λ‘œμ νŠΈ κ³Όμ • μ†Œκ°œ

πŸ¦Έβ€β™‚οΈνŒ€μ› κ°„ μ½”λ“œ 리뷰λ₯Ό ν†΅ν•œ μ†Œν†΅πŸ¦Έβ€β™€οΈ πŸ¦Έβ€β™‚οΈνŒ€μ› κ°„ μ½”λ“œ 리뷰λ₯Ό ν†΅ν•œ μ†Œν†΅πŸ¦Έβ€β™€οΈ
image-20220208215522546 image-20220208215601863
μ½”λ”© μ»¨λ²€μ…˜ 약속을 ν†΅ν•œ μ½”λ“œ 톡일성 Git 컀밋 μ»¨λ²€μ…˜ μ •μ˜
image-20220129152127586 image-20220129151957567

πŸ“ŒκΈ°λŠ₯ λͺ©λ‘ λͺ…μ„Έ

βœ” λ‹΄λ‹Ήμž : κΉ€κΈ°μ˜

  • 곡용 μ»΄ν¬λ„ŒνŠΈ λ²„νŠΌ, ν† κΈ€ κ΅¬ν˜„
    • width, height propsλ₯Ό μž…λ ₯ λ°›μ•„μ„œ 크기 쑰절 κ°€λŠ₯ -> μž¬μ‚¬μš©μ„± 증가
  • 견적 μš”μ²­ μΉ΄λ“œ μ»΄ν¬λ„ŒνŠΈ κ΅¬ν˜„
  • λŒ€μ‹œλ³΄λ“œ κ΅¬ν˜„

βœ” λ‹΄λ‹Ήμž : μ΄λ„ν˜„

  • λ°˜μ‘ν˜• λ””μžμΈμ„ μœ„ν•œ Media query μ„ΈνŒ… 및 breakPoint μƒμˆ˜ν™”
  • μ„ νƒν•œ 가곡방식과 재료 선택에 λ”°λ₯Έ 견적 μš”μ²­ 필터링 κΈ°λŠ₯ κ΅¬ν˜„
  • json server와 ν•¨κ»˜ λ°°ν¬ν•˜κΈ° μœ„ν•œ 배포 ν™˜κ²½ μ„€μ •

βœ” λ‹΄λ‹Ήμž : μž„ν–₯수

  • color, font-size λ“± 전역적인 μŠ€νƒ€μΌλ§μ— ν™œμš©ν•  themeκ³Ό global style κ΅¬ν˜„

  • 상단 헀더 κ΅¬ν˜„

  • μ‚¬μ΄λ“œλ©”λ‰΄ κ΅¬ν˜„

    • ν—€λ”μ˜ hamburger λ²„νŠΌ ν΄λ¦­μ‹œ μ‚¬μ΄λ“œλ©”λ‰΄κ°€ 열리도둝 μ„€μ •
    • λ°±κ·ΈλΌμš΄λ“œ μ˜μ—­ ν΄λ¦­μ‹œ 메뉴가 λ‹«νžˆλ„λ‘ μ„€μ •

βœ” λ‹΄λ‹Ήμž : μ‘°μ˜ˆμ§€

  • json server μ…‹νŒ…
  • 비동기 데이터 처리λ₯Ό μœ„ν•œ μž¬μ‚¬μš© κ°€λŠ₯ μ»€μŠ€ν…€ hooks κ΅¬ν˜„
  • 쑰건에 μΌμΉ˜ν•˜λŠ” κ²¬μ μ„œ μ—†λŠ” 경우 쑰건 처리 -> νŽ˜μ΄μ§€ κ΅¬ν˜„

πŸ“Œκ΅¬ν˜„ 상세 λ‚΄μš©

1. ν•„ν„° κΈ°λŠ₯ πŸ‘‰ 가곡 방식과 재료 μ˜΅μ…˜μ„ μ œν•œ 없이 쀑볡 선택 κ°€λŠ₯ ν•˜λ„λ‘ κ΅¬ν˜„

  • figma 상세 이미지λ₯Ό μ°Έκ³ ν•˜μ—¬ μ˜΅μ…˜μ΄ 1개 이상 선택 κ°€λŠ₯ν•œ κ²ƒμœΌλ‘œ νŒλ‹¨ν•˜μ—¬ -> 쀑볡 선택 κ°€λŠ₯ν•˜κ²Œ 필터링함
  • 쀑볡 선택할 경우 μ‚¬μš©μž κ²½ν—˜μ„ κ³ λ €ν•˜μ—¬ 체크 된 쑰건을 λͺ¨λ‘ λ§Œμ‘±ν•˜λŠ” μš”μ²­μ„œλ₯Ό 보여주도둝 κ΅¬ν˜„

KakaoTalk_20220208_102526186

2. λ°˜μ‘ν˜• νŽ˜μ΄μ§€ κ΅¬ν˜„ πŸ‘‰ 데슀크 / νƒœλΈ”λ¦Ώ/ λͺ¨λ°”일 μ‚¬μ΄μ¦ˆμ— 따라 νŽ˜μ΄μ§€ λ³€ν™”

  • Media query μ‚¬μš©

ezgif.com-gif-maker


πŸ“Œμ΄μŠˆ ν•΄κ²° λͺ©λ‘

  • λͺ¨λ°”일 μ‚¬μ΄λ“œλ°” ν™œμ„±ν™” μ‹œ 슀크둀 막기
  • μ‚¬μ΄λ“œλ°” μ• λ‹ˆλ©”μ΄μ…˜ μΆ”κ°€
  • ν•„ν„° 리셋 λ²„νŠΌ 클릭 μ‹œ 토글도 같이 μ΄ˆκΈ°ν™”
  • λ°˜μ‘ν˜•μ— 따라 쀑앙 μ •λ ¬

πŸ“Œν”„λ‘œμ νŠΈ μ„€μΉ˜ 및 μ‹œμž‘

ν”„λ‘œμ νŠΈ 클둠

$ git clone https://github.com/2201infinity/request_a_quote.git

νŒ¨ν‚€μ§€ μ„€μΉ˜

$ yarn

μ„œλ²„ μ‹€ν–‰

$ yarn run dev

About

πŸ“ μ›ν‹°λ“œ 프리 μ˜¨λ³΄λ”© 2μ£Όμ°¨ 과제 - 견적 μš”μ²­ νŽ˜μ΄μ§€

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •