Teamble-Web: A TypeScript repository from yunaasi

서로 다른 색의 우리가 만나는 공간, 팀블 💜

# 우리_팀블하자!

Teamble : 서로 다른 색의 우리가 만나는 공간, 팀블

협업성향테스트 기반 IT 사이드 프로젝트 팀 매칭 서비스

22.01.02 ~ 22.01.22 - SOPT 29th APPJAM

Developers

박건영	정세연	김연이
Tekiter	n0eyes	YounYi

Role

이름	역할
박건영	초기 환경 세팅, API 추상화, 수정상황 대응
정세연	컴포넌트 구현, 레이아웃 및 API 연결, 수정사항 대응
김연이	컴포넌트 구현, 레이아웃 및 API 연결, 수정사항 대응

스택

next.js
typescript
recoil
styled-components
husky
storybook

서비스의 핵심 기능

1. Main View - Landing Page

랜딩페이지를 통해, 협업 성향 테스트 버튼을 통해 팀블에서 제공하는 첫번째 핵심 기능인 협업 성향 테스트 페이지로 이동합니다.

2. 협업 성향 테스트

팀블에서 제공하는 협업 성향 테스트는 DISC 성격 유형 검사 기반으로 제작되었으며, 3단계 해당하는 테스트를 거치게 되면 8가지 종류의 결과값 중, 유저에게 해당하는 결과를 보여줍니다.

3. 프로젝트 팀 찾기

기존의 줄글로만 작성되어 필터 검색이나, 정확한 정보를 확인하기 어려웠던 문제를 해결하고자, 프로젝트 예상 기간, 모집 포지션별 인원, 목표, 협업 선호 성향과 더불어 프로젝트 분야를 선택하게 합니다.

4. 프로젝트 팀 생성

예상 기간, 모집 포지션별 인원, 목표, 협업 선호 성향과 더불어 프로젝트 분야를 선택하게 합니다. 또한, 프로젝트 팀에 이미 구성원이 있다면, 하단에 이메일 입력을 통해, 팀원 정보를 입력할 수 있습니다.

5. 콕 찌르기

콕 찌르기 기능은, Z세대들이 팀블을 통해 부담없이 연락하고, 프로젝트에 지원할 수 있도록 돕습니다. 콕 찌르기를 누르면, 내 마이 프로필 정보가 찌른 상대에게 보내지며 ‘지원’이라는 무거운 과정이 아닌, 부담없이 연락하되 확실히 본인의 관심 의사를 전달할 수 있게 합니다.

IA

Git Workflow

`main` ← `develop` ← `feat/issue`

Click!

main은 모든 작업이 끝난 후 develop에서 Merge 시킨다.

—————————————————————————

main - 초기 세팅 존재
develop - local 작업 완료 후 Merge 브랜치
feat/issue - 각자의 기능 추가 브랜치

ex) feat/atom

—————————————————————————

각 기능이 추가될 때마다 Issue 및 Branch 생성
local - feat/atom 에서 각자 기능 작업
작업 완료 후 remote - develop 에 Pull Request
코드 리뷰 후 Confirm 받고 Merge
remote - develop 에 Merge 될 때 마다 모든 팀원 remote - develop pull 받아 최신 상태 유지

Commit Message Convention

Click!

태그	설명
[INIT]	작업 세팅 커밋
[CHORE]	코드 수정, 내부 파일 수정
[FEAT]	새로운 기능 구현
[STYLE]	기능에 영향을 주지 않는 커밋, 코드 순서 등의 포맷에 관한 커밋
[HOTFIX]	issue나, QA에서 급한 버그 수정에 사용
[FIX]	버그, 오류 해결
[DOCS]	README나 WIKI 등의 문서 개정
[RENAME]	파일 이름 변경이 있을 때 사용
[REFACTOR]	전면 수정이 있을 때 사용
[MERGE]	다른 브랜치를 Merge 할 때 사용
[BUILD]	빌드 관련 파일 수정

Coding Convention

Click!

명명규칙(Naming Conventions)

이름으로부터 의도가 읽혀질 수 있게 쓴다.

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() {}

styled-components 사용시 첫 번째 wrapper의 이름은 컴포넌트 이름과 동일하게 작성한다.

ex)

// bad
function CopyModal(options) {
  return <StyledModal />
}

const StyledModal = styled.div``

// good
function CopyModal(options) {
  return <StyledCopyModal />
}

const StyledCopyModal = styled.div``

함수 이름은 동사 - 명사 형태로 작성한다.

ex) postUserInformation( )

약어 사용은 최대한 지양한다.

참조(References)

모든 참조는 const를 사용하고, var는 사용하지 않는다.
참조를 재할당 해야한다면 var대신 let을 사용한다.

이때, const와 let은 블록스코프임을 유의

블록(Blocks)

복수행의 블록에는 중괄호({})를 사용한다.

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();
}

코멘트(Comments)

복수형의 코멘트는 /** ... */ 를 사용한다.

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;
}

공백(Whitespace)

주요 중괄호({}) 앞에는 스페이스 1개를 넣는다.

ex)

// bad
function test(){
  console.log('test');
}

// good
function test() {
  console.log('test');
}

제어구문 (if 문이나 while 문 등) 의 소괄호 (()) 앞에는 스페이스를 1개 넣고 함수 선언이나 함수 호출시 인수 리스트의 앞에는 스페이스를 넣지 않는다.

ex)

// bad
if(isJedi) {
  fight ();
}

// good
if (isJedi) {
  fight();
}

// bad
function fight () {
  console.log ('Swooosh!');
}

// good
function fight() {
  console.log('Swooosh!');
}

연산자 사이에는 스페이스를 넣는다.

ex)

// bad
const x=y+5;

// good
const x = y + 5;

콤마(Commas)

선두의 콤마 BAD

ex)

// bad
const story = [
    once
  , upon
  , aTime
];

// good
const story = [
  once,
  upon,
  aTime,
];

끝의 콤마 GOOD

ex)

// bad
const hero = {
  firstName: 'Dana',
  lastName: 'Scully'
};

// good
const hero = {
  firstName: 'Dana',
  lastName: 'Scully',
};

세미콜론(Seminolons)

세미콜론을 사용한다.

ex)

// bad
(function() {
  const name = 'Skywalker'
  return name
})()

// good
(() => {
  const name = 'Skywalker';
  return name;
})();

문자열(Strings)

문자열에는 싱크쿼트 '' 를 사용한다.

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}?`;
}

함수(Functions)

콜백 함수는 화살표 함수를 사용한다.

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
const foo = function () {
};

// good
function foo() {
}

조건식과 등가식(Comparison Operators & Equality)

== 이나 != 보다 === 와 !== 을 사용한다.

단축형을 사용한다.

ex)

// bad
if (name !== '') {
  // ...stuff...
}

// good
if (name) {
  // ...stuff...
}

// bad
if (collection.length > 0) {
  // ...stuff...
}

// good
if (collection.length) {
  // ...stuff...
}

비동기 함수를 사용할 때 Promise함수의 사용은 지양하고 async, await를 쓰도록 한다.

Foldering

|-📋 .gitignore
|-📁 .storybook
|-📁 styles_
|-📁 utils_
|-📁 pages_
|-📁 components_
               |- 📁 atom_
               |         |- 📁 button_
               |                     |- 📋 Button.tsx
               |                     |- 📋 Button.stories.tsx
               |
               |- 📁 molecule_
               |             |- 📁 entryField_
               |                             |- 📋 EntryField.tsx
               |                             |- 📋 EntryField.stories.t
               |- 📁 organism_
               |             |- 📁 recruitPostion_
               |                                  |- 📋 RecruitPostion.tsx
               |                                  |- 📋 RecruitPostion.stories.tsx

yunaasi/Teamble-Web

서로 다른 색의 우리가 만나는 공간, 팀블 💜

Teamble : 서로 다른 색의 우리가 만나는 공간, 팀블

협업성향테스트 기반 IT 사이드 프로젝트 팀 매칭 서비스

Developers

Role

스택

서비스의 핵심 기능

1. Main View - Landing Page

2. 협업 성향 테스트

3. 프로젝트 팀 찾기

4. 프로젝트 팀 생성

5. 콕 찌르기

IA

Git Workflow

main ← develop ← feat/issue

Commit Message Convention

Coding Convention

명명규칙(Naming Conventions)

참조(References)

블록(Blocks)

코멘트(Comments)

공백(Whitespace)

콤마(Commas)

세미콜론(Seminolons)

문자열(Strings)

함수(Functions)

조건식과 등가식(Comparison Operators & Equality)

Foldering

`main` ← `develop` ← `feat/issue`