회의주제: 협업 준비
팀명: ???
프로젝트명
- 리액트 나무지기
- 리액트 하루 한 스푼
- 데일리 리액트
- 응애 나 애기 리엑트...
기획
10월 14일 회의록 참고
로고
컨셉 - 나무
색상: 녹색(색상값 필요)
세부적인 기술스택 선정 및 전체적인 아키텍처 구조
라이브러리: React,
컴포넌트관리: StoryBook
스타일: Styled-Component (이슈 발생 시 외부 css 파일을 두는 식으로 보완),
상태관리: ContextApi
Bundler: 따로 사용하지 않아도 됨 (이슈 발생 시 )
배포: Netlify
코드 스타일 합의 (Eslint, Prettier),
기존 룰에서 취사선택하여 우리 팀에 맞는 룰만 취사선택
네이밍 컨벤션
Component 는 Pascal Case (ex. Divider)
그 외에는 Camel Case (ex. useForm)
변수명은 Camel Case
- .으로 세 번 이상 depth 로 진입해서 접근하는 경우는 별도의 변수 선언하기
- 상수 변수는 대문자 (ex. ROOT_URL, API_KEY)
함수명은 동사+목적어 (ex. useForm, displayHeader)
깃 관련 협의 (commit, PR 규칙)
전반적인 협업
Git Hub 레포 내 Projects 칸반 보드 활용
이슈 기반의 개발 → 브랜치명도
- projects: New Issue, To do, In Progress, Done
이슈 라벨
- feature: 기능 개발
- question: 프로젝트 진행 중, 질문 사항 (비동기적으로)
- discussion: 합의사항
- etc. Github Projects 라벨 내용 참고
Branch 관리
Git flow 방식: main-develop-issue_based_branch
Comit 메시지 관리
커밋메시지 컨벤션 차용: [링크] https://doublesprogramming.tistory.com/256
Commitzen 사용은 이번 프로젝트에서는 진행하지 않는다.
PR 관리
Pull Request 템플릿 작성하여 .github 폴더에 탑재
PR 내용:
규칙: 오류 발생 코드는 PR하지 않기!
- Title: 간략한 설명
- Description
- 수정/추가한 내용
- 스크린샷
코드리뷰
- PR 이후 24시간 내 수행
- 엣지 케이스, 개선사항 제안 및
요구사항 기능 스펙 고도화
페이지 - 컴포넌트 - 기능 (API)
Page: Intro(login)
- Components
- SignInLogo
- SignInHeader
- SignInBody
- SignInFooter
- SignInModal
- SignUpHeader
- SignUpBody
- SignUpFooter
- 기능
- 사용 API: 인증
- 회원가입
- 로그인
- 로그아웃
Page: Main
- Components
- Header
- Icon
- Logo
- NavChannel
- 사용 API: 채널
- Button
- NavSocial
- 사용 API: 유저
- Avatar
- Badge
- Friend
- ContentsContainer
- Question
- Answers (조건부렌더링 필요)
- MyAnswer
- UserAnswer
Page: MyTree
- Components
- ContentsContainer
- UnitContainer
- Unit1
- Logo
- Title
- Items
- Item
- Unit2 ...
Page: MyInfo
- Components
- ContentsContainer
- 기능
- 사용API: 설정
- 인증확인 및 내정보
- 마이 페이지(설정과 내정보) 필요
- 내 정보 변경
- 비밀번호 변경
유저
- 메인의 오른쪽 Nav Bar
채널
- 메인의 오른쪽 Nav Bar
좋아요, 댓글 , 팔로우
검색 -
와이어프레임 (컴포넌트)
Figma 를 사용한 와이어 프레임 제작
컴포넌트 구조
* ├── src │ ├── App.js │ ├── Components │ │ ├── base │ │ │ ├── AddFriend │ │ │ ├── Avatar │ │ │ ├── Badge │ │ │ ├── Button │ │ │ ├── Friend (Avatar + badge + username) │ │ │ ├── Header │ │ │ ├── Icon │ │ │ ├── Logo │ │ │ ├── Image │ │ │ ├── NavSocial │ │ │ ├── NavChannel │ │ │ ├── Node │ │ │ ├── Question │ │ │ ├── Search │ │ │ ├── Title │ │ ├── Answers │ │ ├── ContentsContainer │ │ ├── FriendsGroup │ │ ├── MainInfo │ │ ├── MyAnswer │ │ ├── MyInfoContainer │ │ ├── SiginFooter │ │ ├── SiginInBody │ │ ├── SignInHeader │ │ ├── SignUpBody │ │ ├── SignUpHeader │ │ ├── SignupFooter │ │ ├── SubInfo │ │ ├── TreeContainer │ │ ├── UnitContainer │ │ └── UserAnswer │ ├── hooks │ ├── Pages │ │ ├── MainPage │ │ │ ├── ContentsContainer │ │ │ │ ├── Answers │ │ │ │ │ ├── MyAnswer │ │ │ │ │ └── UserAnswer │ │ │ │ └── Question │ │ │ ├── Header │ │ │ │ ├── Icon │ │ │ │ ├── Logo │ │ │ │ └── Search │ │ │ ├── NavChannel │ │ │ │ ├── Avatar │ │ │ │ ├── Badge │ │ │ │ └── Button │ │ │ └── NavSocial │ │ │ └── FriendGroup │ │ │ └── Friend │ │ │ ├── Avatar │ │ │ └── Badge │ │ ├── MyTreePage │ │ │ ├── ContentsContainer │ │ │ │ └── UnitContainer │ │ │ │ ├── Unit1 │ │ │ │ │ ├── Logo │ │ │ │ │ ├── NodeContainer │ │ │ │ │ │ └── Node │ │ │ │ │ └── Title │ │ │ │ ├── Unit2 │ │ │ │ │ ├── Logo │ │ │ │ │ ├── NodeContainer │ │ │ │ │ │ └── Node │ │ │ │ │ └── Title │ │ │ │ └── Unit3 │ │ │ │ ├── Logo │ │ │ │ ├── NodeContainer │ │ │ │ │ └── Node │ │ │ │ └── Title │ │ │ ├── Header │ │ │ └── NavChannel │ │ ├── SettingPage │ │ │ ├── Header │ │ │ └── MyInfoContainer │ │ │ ├── MainInfo │ │ │ └── SubInfo │ │ ├── SignInPage │ │ │ ├── SignInFooter │ │ │ ├── SignInHeader │ │ │ │ ├── Logo │ │ │ │ └── Title │ │ │ └── SigninBody │ │ └── SignUpPage │ │ ├── SignUpBody │ │ ├── SignUpFooter │ │ │ └── Button │ │ └── SignUpHeader │ │ └── Title