/wanted-codestates-project-4-2

πŸ’‘ νŒ€ κΈ°μ—…κ³Όμ œ 3 : λ„₯μŠ¨μ½”λ¦¬μ•„

Primary LanguageJavaScript

πŸš— wanted-codestates-project-4-2

카트 OpenAPIλ₯Ό μ΄μš©ν•œ 전적 검색 및 λž­ν‚Ή 확인 μ‚¬μ΄νŠΈλ₯Ό κ΅¬ν˜„ν•œ ν”„λ‘œμ νŠΈμž…λ‹ˆλ‹€.

πŸ“Œ  Team4의 과제 ν™•μΈν•˜λŸ¬ κ°€κΈ°


πŸš— View

개인 전적 쑰회 νŽ˜μ΄μ§€
ᄀᅒ안 α„Œα…₯α†«α„Œα…₯ᆨ α„Œα…₯α„’α…¬


쑰회 νŽ˜μ΄μ§€
ᄅᅒᆼ캉 α„‘α…¦α„‹α…΅α„Œα…΅


πŸš— Implement

Stack

Javascript React Styled-Components

Features

βœ… 개인 전적 쑰회, λž­ν‚Ή νŽ˜μ΄μ§€

  • λ‹‰λ„€μž„ 검색을 ν†΅ν•œ 개인 전적 쑰회
  • κ³΅μœ ν•˜κΈ° 클립 볡사
  • 응원 ν•œλ§ˆλ””(μ‹€μ‹œκ°„ λŒ“κΈ€ 남기기)
  • Loading UI
  • νŠΈλž™, μΉ΄νŠΈλ³„ 전적 및 기둝 리슀트
  • 개인 전적 리슀트(λ“±μˆ˜ 및 리아티어 ꡬ뢄)
  • νŒ€μ› 및 μˆœμœ„ μ •λ ¬

βœ… κ·Έλž˜ν”„

  • 개인 전적 νŽ˜μ΄μ§€ "μˆœμœ„λ³€λ™ 좔이" - Rechart 라이브러리의 Line μ»΄ν¬λ„ŒνŠΈλ₯Ό μ΄μš©ν•˜μ—¬ κ΅¬ν˜„
  • 개인 전적 νŽ˜μ΄μ§€ "μ’…ν•© 전적" & λž­ν‚Ή νŽ˜μ΄μ§€ "1~3λ“± 승λ₯ , λ¦¬μ•„ν‹°μ–΄μœ¨" - react-minimal-pie-chart 라이브러리λ₯Ό μ΄μš©ν•˜μ—¬ κ΅¬ν˜„

βœ… μ• λ‹ˆλ©”μ΄μ…˜

  • λ„€λΈŒλ°” "마우슀 μ˜€λ²„" - κ°€μƒμš”μ†Œ μ„ νƒμž 및 transition ease-in-out을 μ΄μš©ν•˜μ—¬ κ΅¬ν˜„
  • λ„€λΈŒλ°” "검색 마우슀 μ˜€λ²„" - hoverλ₯Ό μ΄μš©ν•œ μ΄μš©ν•œ 색 λ³€ν™” κ΅¬ν˜„
  • 개인 전적 νŽ˜μ΄μ§€ "맀칭 λ°°λ„ˆ" - keyframesλ₯Ό μ΄μš©ν•œ 배경색 λ³€ν™” κ΅¬ν˜„
  • 개인 전적 νŽ˜μ΄μ§€ "μ‹ κ³ ν•˜κΈ° λ²„νŠΌ" - hoverλ₯Ό μ΄μš©ν•œ 색 λ³€ν™” κ΅¬ν˜„
  • λž­ν‚Ή νŽ˜μ΄μ§€ "λŒ€μ‰¬λ³΄λ“œ νŒŒλ„" - keyframes의 background-position-x 속성을 μ΄μš©ν•˜μ—¬ λ™μΌν•œ μ• λ‹ˆλ©”μ΄μ…˜μ— 섀정값을 λ³€κ²½ν•˜μ—¬ κ΅¬ν˜„


πŸš— Directory

β”œβ”€β”€ public/
β”œβ”€β”€ src/
β”‚   β”œβ”€β”€ components/              - page components
β”‚   β”œβ”€β”€ data/                    - json(kart, track)
β”‚   β”œβ”€β”€ hooks/                   - custom hook(toggle, input)
β”‚   β”œβ”€β”€ pages/                   - routed pages
β”‚
β”œβ”€β”€ App.js                       - page routing
β”œβ”€β”€ index.js                     - entry point
β”œβ”€β”€ README.md                    - λ¦¬λ“œλ―Έ(프리뷰, 배포링크, μ½”λ“œμ»¨λ²€μ…˜)
└── package.json                 - μ‚¬μš© package λͺ©λ‘


πŸš— Code Convention

Getting Started

  1. clone the repository,
$ git clone "https://github.com/wanted-Team4/wanted-codestates-project-4-2.git"
  1. Install dependencies,
$ npm install
  1. .env environment variable,
REACT_APP_NEXON_KEY=
  1. start the project,
$ npm start
  1. Setting prettier,
$ npx prettier --write .

Commit Emoji

emoji commit message when to use it
πŸŽ‰ Start ν”„λ‘œμ νŠΈ μ‹œμž‘
✨ Feat μƒˆλ‘œμš΄ κΈ°λŠ₯ μΆ”κ°€
πŸ› Fix 버그 μˆ˜μ •
♻️ Refactor μ½”λ“œ λ¦¬νŒ©ν„°λ§
πŸ’„ Style μŠ€νƒ€μΌ μΆ”κ°€ 및 μ—…λ°μ΄νŠΈ
πŸ“¦ Chore νŒ¨ν‚€μ§€ μΆ”κ°€ 및 μ—…λ°μ΄νŠΈ
πŸ“š Docs κ·Έ μ™Έ λ¬Έμ„œ μΆ”κ°€ 및 μ—…λ°μ΄νŠΈ