우리의 일상 속에서 혼자, 때로는 함께 챙겨야 하는 짐의 목록을 편리하게 작성하고, 놓치지 않게 도와주고, 챙김이 여정 속 즐겁고 손쉬운 행위가 될 수 있도록 도와주는 서비스 Packman 입니다.
| 정세연 @n0eyes | 김연이 @younyikim | 이서영 @leeseooo | 정윤선 @yunsun99 |
|---|---|---|---|
 |
 |
 |
 |
|
|
|
|
(JavaScript / TypeScript / React.js / Next.js / React Query / MSW)
.
├── utils
├── mocks 🗂 목 데이터 저장
├── package.json 📦 설치된 패키지를 관리하는 파일
├── component
│ │ ├── common 🗂 공통으로 쓰일 컴포넌트 저장
│ │ │ ├── Footer
│ │ │ ├── Header
│ │ │ └── assets
│ │ ├── home 🗂 main 페이지에 쓰일 컴포넌트 저장
│ │ └── together 🗂 together 페이지에 쓰일 컴포넌트 저장
└── pages
├── _app.tsx ✡️ 앱의 라우팅과 글로벌 스타일 지정
├── index.tsx
├── together.tsx
└── together/pack/[id].tsx
- 소셜 로그인을 통해 유저가 빠르게 회원가입과 로그인을 할 수 있도록 합니다. 구글 로그인과 카카오 로그인 두가지 소셜 로그인을 이용할 수 있습니다. (구글은 구현 진행 중)
- 패킹 리스트 작성을 유도하는 CTA 버튼이 있는 화면입니다.
- 사용자가 폴더를 1개 이상 생성하면 해당 버튼이 +모양의 플로팅 액션 버튼으로 바뀌며, 해당 버튼을 통해 혼자 및 함께 리스트를 추가 및 폴터 추가할 수 있습니다.
- 폴더 안 패킹 리스트 목록을 확인할 수 있는 화면입니다.
- 해당 화면은 함께, 혼자에 따라 구분된 폴더에 알맞게 리스트가 소속되게 하며, 폴더 우측 초록색 토글을 통해 폴더간 이동을 가능하게 합니다.
- 유저는 리스트 뷰에서 손쉽게 카테고리와 리스트를 생성, 수정할 수 있습니다.
- 함께 패킹 리스트를 생성하면, 초대 링크를 복사할 수 있는 모달이 뜹니다.
- 초대 링크를 통해 일행에서 리스트를 공유할 수 있습니다. 초대된 일행이 들어오면, 일행도 리스트를 작성, 수정할 수 있습니다.
- 해당 뷰에서 사용자는 새로운 짐 추가 및 수정, 카테고리 및 리스트 수정, 짐 챙길 사람(담당자) 배정 등의 기능을 이용할 수 있습니다.
코딩 컨벤션 : Airbnb React Style guide
- 이름으로부터 의도가 읽혀질 수 있게 쓴다.
-
ex)
// bad function q() { // ...stuff... } // good function query() { // ..stuff.. }
- 오브젝트, 함수, 그리고 인스턴스에는
camelCase를 사용한다.
-
ex)
// bad const OBJEcttsssss = {}; const this_is_my_object = {}; function c() {} // good const thisIsMyObject = {}; function thisIsMyFunction() {}
- 클래스나 constructor에는
PascalCase를 사용한다.
-
ex)
// bad function user(options) { this.name = options.name; } const bad = new user({ name: 'nope', }); // good class User { constructor(options) { this.name = options.name; } } const good = new User({ name: 'yup', });
- 함수 이름은 동사 + 명사 형태로 작성한다.
ex)
postUserInformation( ) - 약어 사용은 최대한 지양한다.
- 이름에 네 단어 이상이 들어가면 팀원과 상의를 거친 후 사용한다
- 복수행의 블록에는 중괄호({})를 사용한다.
-
ex)
// bad if (test) return false; // good if (test) return false; // good if (test) { return false; } // bad function() { return false; } // good function() { return false; }
- 복수행 블록의
if와else를 이용하는 경우else는if블록 끝의 중괄호( } )와 같은 행에 위치시킨다.
-
ex)
// bad if (test) { thing1(); thing2(); } else { thing3(); } // good if (test) { thing1(); thing2(); } else { thing3(); }
- 복수형의 코멘트는
/** ... */를 사용한다.
-
ex)
// good /** * @param {String} tag * @return {Element} element */ function make(tag) { // ...stuff... return element; }
- 단일 행의 코멘트에는
//을 사용하고 코멘트를 추가하고 싶은 코드의 상부에 배치한다. 그리고 코멘트의 앞에 빈 행을 넣는다.
-
ex)
// bad const active = true; // is current tab // good // is current tab const active = true; // good function getType() { console.log('fetching type...'); // set the default type to 'no type' const type = this._type || 'no type'; return type; }
- 문자열에는 싱크쿼트
''를 사용한다.
-
ex)
// bad const name = "Capt. Janeway"; // good const name = 'Capt. Janeway';
- 프로그램에서 문자열을 생성하는 경우는 문자열 연결이 아닌
template strings를 이용한다.
-
ex)
// bad function sayHi(name) { return 'How are you, ' + name + '?'; } // bad function sayHi(name) { return ['How are you, ', name, '?'].join(); } // good function sayHi(name) { return `How are you, ${name}?`; }
- 화살표 함수를 사용한다.
-
ex)
var arr1 = [1, 2, 3]; var pow1 = arr.map(function (x) { // ES5 Not Good return x * x; }); const arr2 = [1, 2, 3]; const pow2 = arr.map(x => x * x); // ES6 Good
==이나!=보다===와!==을 사용한다.- 단축형을 사용한다.
-
ex)
// bad if (name !== '') { // ...stuff... } // good if (name) { // ...stuff... }
- 비동기 함수를 사용할 때
Promise함수의 사용은 지양하고async,await를 쓰도록 한다
- 단위 : rem, em 사용
commit message 컨벤션 & 브랜치 전략
- option : [gitmoji](https://gitmoji.dev/) - 안쓰면 커밋 컨벤션 대표적인거만 지키자~## 브랜치 전략 (ex. git flow)
- github flow 사용
- 작업 전에 jira 이슈 생성
- 이슈 번호로 브랜치를 파서 작업
- 작업이 다 끝나면 피쳐 브랜치에서 develop 브랜치로 Pull Request 작성
- 같은 팀원 3인의 Approve를 받아야 main 브랜치에 머지 가능