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

# 우리_팀블하자!

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

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

1. 각 기능이 추가될 때마다 Issue 및 Branch 생성
2. local - feat/atom 에서 각자 기능 작업
3. 작업 완료 후 remote - develop 에 Pull Request
4. 코드 리뷰 후 Confirm 받고 Merge
5. 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)

---

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

• ex)

  // bad
  function q() {
    // ...stuff...
  }
  
  // good
  function query() {
    // ..stuff..
  }

  
  

2. 오브젝트, 함수, 그리고 인스턴스에는 camelCase를 사용한다.

• ex)

  // bad
  const OBJEcttsssss = {};
  const this_is_my_object = {};
  function c() {}
  
  // good
  const thisIsMyObject = {};
  function thisIsMyFunction() {}

  
  

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

• ex)

  // bad
  function CopyModal(options) {
    return <StyledModal />
  }
  
  const StyledModal = styled.div``
  
  // good
  function CopyModal(options) {
    return <StyledCopyModal />
  }
  
  const StyledCopyModal = styled.div``

  
  

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

   ex) postUserInformation( )

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

참조(References)

---

1. 모든 참조는 const를 사용하고, var는 사용하지 않는다.

2. 참조를 재할당 해야한다면 var대신 let을 사용한다.

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

블록(Blocks)

---

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

• ex)

  // bad
  if (test)
    return false;
  
  // good
  if (test) return false;
  
  // good
  if (test) {
    return false;
  }
  
  // bad
  function() { return false; }
  
  // good
  function() {
    return false;
  }

  
  

2. 복수행 블록의 if 와 else 를 이용하는 경우 else 는 if 블록 끝의 중괄호(})와 같은 행에 위치시킨다.

• ex)

  // bad
  if (test) {
    thing1();
    thing2();
  }
  else {
    thing3();
  }
  
  // good
  if (test) {
    thing1();
    thing2();
  } else {
    thing3();
  }

  
  

코멘트(Comments)

---

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

• ex)

  // good
  /**
   * @param {String} tag
   * @return {Element} element
   */
  function make(tag) {
  
    // ...stuff...
  
    return element;
  }

  
  

2. 단일행의 코멘트에는 // 을 사용하고 코멘트를 추가하고 싶은 코드의 상부에 배치한다. 그리고 코멘트의 앞에 빈행을 넣는다.

• 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. 주요 중괄호({}) 앞에는 스페이스 1개를 넣는다.

• ex)

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

  
  

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

• ex)

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

  
  

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

• ex)

  // bad
  const x=y+5;
  
  // good
  const x = y + 5;

  
  

콤마(Commas)

---

1. 선두의 콤마 BAD

• ex)

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

  
  

2. 끝의 콤마 GOOD

• ex)

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

  
  

세미콜론(Seminolons)

---

1. 세미콜론을 사용한다.

• ex)

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

  
  

문자열(Strings)

---

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

• ex)

  // bad
  const name = "Capt. Janeway";
  
  // good
  const name = 'Capt. Janeway';

2. 프로그램에서 문자열을 생성하는 경우는 문자열 연결이 아닌 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)

---

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

• 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

2. 그 외에는 함수 선언을 이용한다.

• ex)

  // bad
  const foo = function () {
  };
  
  // good
  function foo() {
  }

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

---

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

2. 단축형을 사용한다.

• ex)

  // bad
  if (name !== '') {
    // ...stuff...
  }
  
  // good
  if (name) {
    // ...stuff...
  }
  
  // bad
  if (collection.length > 0) {
    // ...stuff...
  }
  
  // good
  if (collection.length) {
    // ...stuff...
  }

3. 비동기 함수를 사용할 때 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