Ground Rule

🔧 Stacks

기술 스택

• 메인 프레임워크 : React
• 언어 : Typescript
• CSS : Styled-components
• 패키지 매니저 : yarn
• 통신 : axios (tanstack 사용은 잠시 대기)
• 상태관리 : recoil
• 빌드 : vite
• eslint, prettier 적용 예정

💻 Github

Commit Message

• feat: 로그인 기능 구현 (#1)
• Body는 필요 시 사용

작업태그	내용
feat	새로운 기능 추가 / 일부 코드 추가 / 일부 코드 수정 (리팩토링과 구분) / 디자인 요소 수정
fix	버그 수정
refactor	코드 리팩토링
style	코드 의미에 영향을 주지 않는 변경사항 (코드 포맷팅, 오타 수정, 변수명 변경, 에셋 추가)
chore	빌드 부분 혹은 패키지 매니저 수정 사항 / 파일 이름 변경 및 위치 변경 / 파일 삭제
docs	문서 추가 및 수정
rename	패키지 혹은 폴더명, 클래스명 수정 (단독으로 시행하였을 시)
remove	패키지 혹은 폴더, 클래스를 삭제하였을 때 (단독으로 시행하였을 시)

Issue

• 템플릿 설정

  # ISSUE ✅ : FEATURE
  
  ## 📖 DESCRIPTION
  
  이슈를 간단히 요약해주세요
  
  <!-- REFACTOR의 경우 코드의 AS-IS, TO-BE를 작성해주세요. -->
  
  ## Figma View
  
  작업하시는 내용의 피그마 이미지를 첨부해주세요
  
  ## TODO
  
  - [ ] todo
  - [ ] todo
  
  ## ETC
  
  기타사항
  

• 이슈 제목 : [FEAT] 로그인 기능 구현

Branch

• Git flow
  • main/master
  • develop
  • feature / fix / hofix …
• Branch 명
  • feature/#1/login

Pull Request

• 템플릿 설정

## 1️⃣ 어떤 작업을 했나요? (Summary)

- 작업 내용을 입력해주세요.
- resolved #(issue_num)

### 기존 코드에 영향을 미치지 않는 변경사항

### 기존 코드에 영향을 미치는 변경사항

### 버그 픽스

## 2️⃣ 알아두시면 좋아요!

## 3️⃣ 추후 작업

## 4️⃣ 체크리스트 (Checklist)

- [ ] `develop` 브랜치의 최신 코드를 `pull` 받았나요?

• 코드 리뷰 & Approve
  • 코드 리뷰 하자!!
  • 팀원이 approve 해야 merge 가능하도록 설정
  • 리뷰어 설정 (메일로 알림 갈 수 있게)
    • 슬랙이나 카톡으로도 확인해달라고 하거나, 아니면 슬랙에 깃허브 봇

🗃️ Project

폴더구조

├── ...
├── .github
├── src
│   ├── apis/
│   ├── assets/
│   ├── components/
│   │   ├── common/ 
│   │   ├── (pages 폴더 구조 그대로)
│   │   |   ├── (각 페이지에 들어가는 컴포넌트들 넣기)
│   ├── hooks/
│   ├── pages/
│   │   ├── Mypage.tsx
│   │   ├── Login.tsx
│   ├── recoil/
│   │   ├── atoms/
│   │   │   ├── exampleAtom.ts
│   │   ├── selectors/
│   │   │   ├── exampleSelector.ts
│   ├── styles/
│   │   ├── GlobalStyle.ts
│   │   ├── ThemeProvider.ts
│   ├── types/
│   │   ├── Common.type.ts
│   ├── utils/
│   ├── App.tsx
│   ├── router.ts
│   └── index.tsx
└── .env

Naming Rule

• 컴포넌트명 (components)
  • 폴더명 ⇒ 컴포넌트랑 직접적인 폴더명은 PascalCase
  • 파일명 ⇒ PascalCase
• 함수명
  • camelCase
• 변수명
  • camelCase
• 상수명
  • SNAKE_CASE
• 타입명
  • PascalCase
• 이미지 파일명
  • camelCase

컴포넌트 생성

• const Login = () => {...}

💬 Communication

정기회의

• 시험 이후 이야기 해보는 거 어떨까요? ⇒ 좋습니다.

소통 방식

• 슬랙으로 이야기하자 (프론트 채널 만들어서 얘기하는거 어때요 - 일하고 있는 거 어필)
  • 밤이고 낮이고 상관없다.
• 모르는 거 있으면 바로 물어보자 (그래도 조금 서치하고)

🎯 Goal

정민이가 얻어가고 싶은 것

• 열심히 해서 완주하기👍

민하가 얻어가고 싶은 것

• 클린 코드 & 깔끔하게 코드 작성하기
• 모르는 기능, 라이브러리 왕창 배워가기 (쓸 일이 있다면)