/react-wins

Primary LanguageTypeScript

πŸ† Wins πŸ†

image

λͺ©μ°¨

  1. ν”„λ‘œμ νŠΈ μ†Œκ°œ
  2. 개발 κΈ°κ°„
  3. μ£Όμš” κΈ°λŠ₯
  4. μ„€μΉ˜ 및 싀행방법
  5. λ°”λ‘œ κ°€κΈ°
  6. νŒ€μ› μ†Œκ°œ 및 개발 λ‚΄μš©
  7. 기술 μŠ€νƒ
  8. 디렉토리 ꡬ쑰
  9. μ»¨λ²€μ…˜
  10. FAQ

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

React-winsλŠ” κΈ°μ‘΄ Wiz μ •λ³΄μ œκ³΅ νŽ˜μ΄μ§€λ₯Ό κ°œμ„ ν•œ ν”„λ‘œμ νŠΈμž…λ‹ˆλ‹€.
μ‚¬μš©μžμ—κ²Œ μ›ν™œν•œ μ„œλΉ„μŠ€ μ œκ³΅μ„ μœ„ν•΄ UI/UXλ₯Ό κ°œμ„ ν•˜κ³ , μƒˆλ‘œμš΄ κΈ°λŠ₯을 μΆ”κ°€ν•˜μ˜€μŠ΅λ‹ˆλ‹€.

μƒˆλ‘œμ›Œμ§„ Wiz μ •λ³΄μ œκ³΅ νŽ˜μ΄μ§€λ₯Ό ν™•μΈν•΄λ³΄μ„Έμš”!


πŸ–₯️ 개발 κΈ°κ°„

2024.09.02 ~ 2024.09.27


✨ μ£Όμš” κΈ°λŠ₯


βš™οΈ μ„€μΉ˜ 및 싀행방법

ν”„λ‘œμ νŠΈ μ„€μΉ˜

npm install

ν”„λ‘œμ νŠΈ μ‹€ν–‰

npm run dev

πŸ–‡οΈ λ°”λ‘œ κ°€κΈ°


πŸ§‘πŸ»β€πŸ’» νŒ€μ› μ†Œκ°œ 및 개발 λ‚΄μš©

이승미 손지은 박지은 신동쀀
πŸ‘‘ 이승미
(Front-end)		 πŸ’΅ 손지은
(Front-end)		 박지은
(Front-end)		 신동쀀
(Front-end)
1. κΉƒν—ˆλΈŒ repo μ΄ˆκΈ°μ„ΈνŒ…
2. ν”„λ‘œμ νŠΈ μ΄ˆκΈ°μ„ΈνŒ…(ESLint, Prettier, ν•„μš” νŒ¨ν‚€μ§€ μ„€μΉ˜)
3. 초기 λΌμš°ν„° μ„€μ •
4. 곡톡 λ ˆμ΄μ•„μ›ƒ(Header, nav, footer, main, tab, breadcrumb, banner) 초기 섀계 및 λ§ˆν¬μ—…
5. Home 곡톡 μ»΄ν¬λ„ŒνŠΈ 섀계 및 λ§ˆν¬μ—…
6. [Home]-[gameSchedule] μ„Ήμ…˜ λ§ˆν¬μ—… 및 데이터 패칭
7. [kt wiz]-[kt wizλŠ”?] νŽ˜μ΄μ§€ λ§ˆν¬μ—…
8. Game 곡톡 μ»΄ν¬λ„ŒνŠΈ 섀계 및 λ§ˆν¬μ—…
9. [Game]-[경기일정], [κ΄€μ „ν¬μΈνŠΈ] νŽ˜μ΄μ§€ λ§ˆν¬μ—… 및 데이터 패칭
10. date-fns 라이브러리λ₯Ό ν™œμš©ν•˜μ—¬ μΊ˜λ¦°λ” κ΅¬ν˜„		 1. [Home]-[gallery] , [video] μ„Ήμ…˜ λ§ˆν¬μ—… 및 데이터 패칭
2. [Media]-[wizμ†Œμ‹], [wizλ³΄λ„μžλ£Œ] νŽ˜μ΄μ§€, μƒμ„ΈνŽ˜μ΄μ§€ λ§ˆν¬μ—… 및 데이터 패칭(νŽ˜μ΄μ§€λ„€μ΄μ…˜ κ΅¬ν˜„)
3. [Game]-[μˆœμœ„κΈ°λ‘]-[νŒ€μˆœμœ„] νŽ˜μ΄μ§€ λ§ˆν¬μ—… 및 데이터 패칭
4. λͺ©μ—…데이터 μ„ΈνŒ… 및 배포 진행
5. 곡톡 μ»΄ν¬λ„ŒνŠΈ 생성 및 λ¦¬νŒ©ν† λ§
6. λ„€λΉ„κ²Œμ΄μ…˜ μŠ€νƒ€μΌλ§ 및 λΌμš°ν„° λ¦¬νŒ©ν† λ§
7. 기타 νŽ˜μ΄μ§€ κ΅¬ν˜„ (νšŒμ›μ •μ±…, μž…μž₯ 및 μ’Œμ„μ •λ³΄)
8. 전체 μ½”λ“œ 정리 및 λ¦¬νŒ©ν† λ§		 1. [Wiz park]-[μˆ˜μ› kt wiz park] νŽ˜μ΄μ§€ λ§ˆν¬μ—…
2. [Player]-[응원단] νŽ˜μ΄μ§€ λ§ˆν¬μ—… 및 데이터 패칭
3. [game]-[μˆœμœ„κΈ°λ‘]-[κ΄€μ€‘ν˜„ν™©]νŽ˜μ΄μ§€ λ§ˆν¬μ—… 및 데이터 패칭
 1. [Wiz park]-[μ°Ύμ•„μ˜€κΈ°] , [읡산야ꡬμž₯] λ§ˆν¬μ—… 및 카카였 맡 apiκΈ°λŠ₯ κ΅¬ν˜„
2. [Player]-[μ½”μΉ­μŠ€ν…], [투수], [νƒ€μž] νŽ˜μ΄μ§€, μƒμ„ΈνŽ˜μ΄μ§€ λ§ˆν¬μ—… 및 데이터 패칭
3. [Game]-[λ°•μŠ€μŠ€μ½”μ–΄] νŽ˜μ΄μ§€ λ§ˆν¬μ—… 및 데이터 패칭
4. Vercel μžλ™ 배포 진행
5. Player 곡톡 μ»΄ν¬λ„ŒνŠΈ 생성 및 λ¦¬νŒ©ν† λ§, 차트 κ΅¬ν˜„
6. api λͺ¨λ“ˆ 섀계
7. TanStack Table κΈ°λ³Έ 둜직 섀계
8. TanStack Query 적용 및 λ¦¬νŒ©ν† λ§

πŸ› οΈ 기술 μŠ€νƒ

κΈ°μˆ μŠ€νƒ

Front-end Cooperation Tool Deploy
TypeScript Vite React Styled-components Zustand Axios Echarts Tanstack-table Tanstack-query Swiper React-router KaKaomap API Slack Discord ESLint Prettier Git Github Notion Figma Postman Github Vercel

πŸ“‚ 디렉토리 ꡬ쑰

react-wins
    β”œβ”€ public
    β”‚  β””─ favicon.svg
    β”œβ”€ src
    β”‚  β”œβ”€ api
    β”‚  β”‚  β””─ api.ts
    β”‚  β”œβ”€ assets
    β”‚  β”‚  β”œβ”€ icons
    β”‚  β”‚  β””─ images
    β”‚  β”œβ”€ components
    β”‚  β”œβ”€ data
    β”‚  β”œβ”€ hooks
    β”‚  β”œβ”€ layouts
    β”‚  β”œβ”€ pages
    β”‚  β”œβ”€ router
    β”‚  β”œβ”€ store
    β”‚  β”‚  β”œβ”€ actions
    β”‚  β”‚  β””─ types
    β”‚  β”œβ”€ styles
    β”‚  β”œβ”€ types
    β”‚  β”œβ”€ utils
    β”‚  β”œβ”€ main.tsx
    β”‚  β””─ vite-env.d.ts
    β”œβ”€ README.md
    β”œβ”€ eslint.config.js
    β”œβ”€ index.html
    β”œβ”€ package-lock.json
    β”œβ”€ package.json
    β”œβ”€ tsconfig.app.json
    β”œβ”€ tsconfig.json
    β”œβ”€ tsconfig.node.json
    └─ vite.config.ts

πŸ“Œ μ»¨λ²€μ…˜

1. Commit

κΈ°λ³Έ ꡬ쑰 : [type]: 컀밋 λ‚΄μš©

  • κ°μžκ°€ 맑은 Taskκ°€ ꡬ체적으둜 μ •λ¦¬λ˜μ–΄μžˆμ–΄μ•Ό ν•œλ‹€.
  • κ°œλ°œμ„ ν•˜λ‹€ κ²ͺ은 λ¬Έμ œλ“€μ΄ Github Issue둜 잘 μ •λ¦¬λ˜μ–΄μžˆμ–΄μ•Ό ν•œλ‹€.
  • ν•œ commitλ‹Ή ν•˜λ‚˜μ˜ κΈ°λŠ₯ κ΅¬ν˜„λ§Œ ν•΄μ•Όν•œλ‹€.
[type]

feat: κΈ°λŠ₯ (feature)
fix: 버그 μˆ˜μ •
docs: λ¬Έμ„œ μž‘μ—… (documentation)
style: ν¬λ§·νŒ…, μ„Έλ―Έμ½œλ‘  λˆ„λ½, ꡬ뢄지을 νƒ€μž…μ΄ 없을 λ•Œ λ“±.
refactor: λ¦¬νŒ©ν† λ§ μ½”λ“œ
test: ν…ŒμŠ€νŠΈ
chore: 관리(maintain), νŒ¨ν‚€μ§€ μ„€μΉ˜, 핡심 λ‚΄μš©μ€ μ•„λ‹Œ 작일 λ“±
design: μŠ€νƒ€μΌλ§ 및 λ§ˆν¬μ—…

2. Branch

Github-flow μ „λž΅μ„ 기반으둜 ν•œλ‹€.
[main], [development] λΈŒλžœμΉ˜μ™€ 각 κΈ°λŠ₯별 [feature] 보쑰 브랜치λ₯Ό 운용

  • main : 배포 λ‹¨κ³„μ—μ„œ μ‚¬μš©ν•˜λŠ” 메인 브랜치
  • development : 개발 λ‹¨κ³„μ—μ„œ 각 κΈ°λŠ₯을 λ³‘ν•©ν•˜λŠ” 브랜치
  • feature : κΈ°λŠ₯ λ‹¨μœ„λ‘œ 독립적인 개발 ν™˜κ²½μ„ μœ„ν•΄ μ‚¬μš©ν•˜λŠ” 브랜치

3. Pull Request, Issue

Code Review ν›„ approve μƒνƒœλ‘œ μ „ν™˜λ˜μ—ˆμ„ λ•Œ, μƒμœ„ 브랜치둜 λ³‘ν•©ν•œλ‹€.
정해진 λ˜λŠ” μ•Œλ§žμ€ ν…œν”Œλ¦Ώμ„ μ‚¬μš©ν•˜μ—¬ 양식에 맞게 μž‘μ„±ν•œλ‹€.

4. Code, Style, Type

Code

  • eslint, prettier 섀정을 톡해 μ½”λ“œ μ»¨λ²€μ…˜μ„ μ •ν•œλ‹€.
  • 정해진 κ·œμΉ™μ— 따라 μžλ™μ μœΌλ‘œ μ½”λ“œ μŠ€νƒ€μΌμ„ μ •λ¦¬ν•˜μ—¬ 일관성을 μœ μ§€ν•œλ‹€.
  • μ½”λ“œ ν’ˆμ§ˆ κ΄€λ¦¬λŠ” eslint, μ½”λ“œ ν¬λ§·νŒ…μ€ prettier에 μΌμž„ν•˜μ—¬ μ‚¬μš©ν•œλ‹€.
  • μ˜ˆμ™Έ κ·œμΉ™μ€ νŒ€μ›κ³Όμ˜ λ…Όμ˜λ₯Ό 톡해 μ •ν•œλ‹€.
  • ν˜‘μ—… μ‹œ λΉ λ₯΄κ²Œ κ°œλ°œν•˜λŠ”λ°μ— λͺ©μ μ„ λ‘”λ‹€.

ν•¨μˆ˜ μ •μ˜

const Sample = () => {
 return (
   <>
     <h1>Sample Component</h1>
   </>
 );
}
export default Sample

μŠ€νƒ€μΌ μ½”λ“œ, νƒ€μž… μ •μ˜

  • μ½”λ“œμ˜ μœ„μΉ˜λŠ” μ»΄ν¬λ„ŒνŠΈ μ„ μ–Έ 상단에 μœ„μΉ˜ν•œλ‹€. (νƒ€μž… μ •μ˜ - μŠ€νƒ€μΌ μ½”λ“œ - μ»΄ν¬λ„ŒνŠΈ μ„ μ–Έ 순)
  • 정해진 넀이밍 κ·œμΉ™μ„ λ”°λ₯Έλ‹€.

❓ FAQ