Teamble-Web

KO | EN

gitlite — search

#javascript #hacktoberfest #react #typescript #llm #machine-learning #deep-learning #macos #nodejs #windows #vue #pytorch #openai #mcp

(★ 9)

💙💙러블리한 웹 팀블러💙💙

Teamble-Web 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# <img src="https://user-images.githubusercontent.com/78714820/148996218-1fbfd13b-f5e2-48e9-874e-3b38c2106f7e.png" width="180">

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

&#35; 우리_팀블하자!

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

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

>22.01.02 ~ 22.01.22 - SOPT 29th APPJAM

## <img src="https://user-images.githubusercontent.com/78714820/148998323-df8997b1-ec90-433a-bc2f-340adcd31984.png" width="25"> Developers
| 박건영 | 정세연 | 김연이 |
| :-----: | :-----: | :-----: |
| [Tekiter](https://github.com/Tekiter) | [n0eyes](https://github.com/n0eyes) | [YounYi](https://github.com/YounYi) |

## <img src="https://user-images.githubusercontent.com/78714820/148998323-df8997b1-ec90-433a-bc2f-340adcd31984.png" width="25"> Role
| 이름 | 역할 |
| :-----: | :-----: |
| 박건영 | 초기 환경 세팅, API 추상화, 수정상황 대응 |
| 정세연 | 컴포넌트 구현, 레이아웃 및 API 연결, 수정사항 대응 |
| 김연이 | 컴포넌트 구현, 레이아웃 및 API 연결, 수정사항 대응 |

## <img src="https://user-images.githubusercontent.com/78714820/148998323-df8997b1-ec90-433a-bc2f-340adcd31984.png" width="25"> 스택

- next.js
- typescript
- recoil
- styled-components
- husky
- storybook

## 서비스의 핵심 기능

### 1. Main View - Landing Page

- 랜딩페이지를 통해, **협업 성향 테스트** 버튼을 통해 팀블에서 제공하는 첫번째 핵심 기능인 협업 성향 테스트 페이지로 이동합니다.
![스크린샷 2022-01-21 오후 8 41 14](https://user-images.githubusercontent.com/73516688/150525741-897f9027-7010-4eaf-96e1-9bd802d31145.png)
![스크린샷 2022-01-21 오후 8 41 21](https://user-images.githubusercontent.com/73516688/150525754-900ae9c1-d3fb-4cac-8e7f-7aa786817b14.png)
![스크린샷 2022-01-21 오후 8 41 34](https://user-images.githubusercontent.com/73516688/150525756-15f0fd98-a359-4d5f-b6a5-60342cd17de1.png)
![스크린샷 2022-01-21 오후 8 41 56](https://user-images.githubusercontent.com/73516688/150525768-4cfa6bdd-7bb0-4b67-ac0b-b9dc1d6c3bea.png)

### 2. 협업 성향 테스트

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

![localhost_3000_project (5)](https://user-images.githubusercontent.com/73516688/150539986-2f6269f5-a09f-48e9-8b52-d8c16c1ba300.png)
![localhost_3000_project (6)](https://user-images.githubusercontent.com/73516688/150539999-d0694b31-60df-4d02-9cbf-0d33215db213.png)
![localhost_3000_project (7)](https://user-images.githubusercontent.com/73516688/150540003-e69c3991-a48f-43b1-bd03-3425ad70dfe6.png)

### 3. 프로젝트 팀 찾기

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

![localhost_3000_project (1)](https://user-images.githubusercontent.com/73516688/150525878-fa19d01f-eecc-4c60-a5c0-075def090ff0.png)

### 4. 프로젝트 팀 생성

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

![localhost_3000_project (3)](https://user-images.githubusercontent.com/73516688/150525894-5e8338d7-9a40-4690-a9e3-86f1f9231e5f.png)

### 5. 콕 찌르기

- 콕 찌르기 기능은, Z세대들이 팀블을 통해 부담없이 연락하고, 프로젝트에 지원할 수 있도록 돕습니다. 콕 찌르기를 누르면, 내 마이 프로필 정보가 찌른 상대에게 보내지며 ‘지원’이라는 무거운 과정이 아닌, 부담없이 연락하되 확실히 본인의 관심 의사를 전달할 수 있게 합니다.
![localhost_3000_project (4)](https://user-images.githubusercontent.com/73516688/150525942-3943abad-6022-4c5b-a827-14d7ee00d32b.png)

![localhost_3000_poke_1](https://user-images.githubusercontent.com/73516688/150525959-ac9ec884-e564-4e0d-b30c-f8d409f43162.png)

## <img src="https://user-images.githubusercontent.com/78714820/148998323-df8997b1-ec90-433a-bc2f-340adcd31984.png" width="25"> IA 
![워너비팀 IA](https://user-images.githubusercontent.com/78714820/148944831-7cca8c67-8afc-4135-8998-acecf48df0c1.png)

## <img src="https://user-images.githubusercontent.com/78714820/148998323-df8997b1-ec90-433a-bc2f-340adcd31984.png" width="25"> Git Workflow
### `main` ← `develop` ← `feat/issue`

<details>
<summary>Click!</summary>
<div markdown="1">
 
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`** 받아 최신 상태 유지

</div>
</details>

## <img src="https://user-images.githubusercontent.com/78714820/148998323-df8997b1-ec90-433a-bc2f-340adcd31984.png" width="25"> Commit Message Convention

## <img src="https://user-images.githubusercontent.com/78714820/148998323-df8997b1-ec90-433a-bc2f-340adcd31984.png" width="25"> Coding Convention

<details>
<summary>Click!</summary>
<div markdown="1">
 
 
### 명명규칙(Naming Conventions)

---

1. 이름으로부터 의도가 읽혀질 수 있게 쓴다.
- ex)
 
 ```jsx
 // bad
 function q() {
 // ...stuff...
 }
 
 // good
 function query() {
 // ..stuff..
 }
 ```
 
 
2. 오브젝트, 함수, 그리고 인스턴스에는 `camelCase`를 사용한다.
- ex)
 
 ```jsx
 // bad
 const OBJEcttsssss = {};
 const this_is_my_object = {};
 function c() {}
 
 // good
 const thisIsMyObject = {};
 function thisIsMyFunction() {}
 ```
 
 
3. styled-components 사용시 첫 번째 wrapper의 이름은 컴포넌트 이름과 동일하게 작성한다.
- ex)
 
 ```jsx
 // 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)
 
 ```jsx
 // 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)
 
 ```jsx
 // bad
 if (test) {
 thing1();
 thing2();
 }
 else {
 thing3();
 }
 
 // good
 if (test) {
 thing1();
 thing2();
 } else {
 thing3();
 }
 ```

### 코멘트(Comments)

---

1. 복수형의 코멘트는 `/** ... */` 를 사용한다.
- ex)
 
 ```jsx
 // good
 /**
 * @param {String} tag
 * @return {Element} element
 */
 function make(tag) {
 
 // ...stuff...
 
 return element;
 }
 ```
 
 
2. 단일행의 코멘트에는 `//` 을 사용하고 코멘트를 추가하고 싶은 코드의 상부에 배치한다. 그리고 코멘트의 앞에 빈행을 넣는다.
- ex)
 
 ```jsx
 // 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)
 
 ```jsx
 // bad
 function test(){
 console.log('test');
 }
 
 // good
 function test() {
 console.log('test');
 }
 ```
 
 
2. 제어구문 (`if` 문이나 `while` 문 등) 의 소괄호 (()) 앞에는 스페이스를 1개 넣고 함수 선언이나 함수 호출시 인수 리스트의 앞에는 스페이스를 넣지 않는다.
- ex)
 
 ```jsx
 // bad
 if(isJedi) {
 fight ();
 }
 
 // good
 if (isJedi) {
 fight();
 }
 
 // bad
 function fight () {
 console.log ('Swooosh!');
 }
 
 // good
 function fight() {
 console.log('Swooosh!');
 }
 ```
 
 
3. 연산자 사이에는 스페이스를 넣는다.
- ex)
 
 ```jsx
 // bad
 const x=y+5;
 
 // good
 const x = y + 5;
 ```

### 콤마(Commas)

---

1. 선두의 콤마 **BAD**
- ex)
 
 ```jsx
 // bad
 const story = [
 once
 , upon
 , aTime
 ];
 
 // good
 const story = [
 once,
 upon,
 aTime,
 ];
 ```
 
 
2. 끝의 콤마 **GOOD**
- ex)
 
 ```jsx
 // bad
 const hero = {
 firstName: 'Dana',
 lastName: 'Scully'
 };
 
 // good
 const hero = {
 firstName: 'Dana',
 lastName: 'Scully',
 };
 ```

### 세미콜론(Seminolons)

---

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

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

### 문자열(Strings)

---

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

```jsx
      // bad
      const name = "Capt. Janeway";

// good
 const name = 'Capt. Janeway';
 ```
 
 
2. 프로그램에서 문자열을 생성하는 경우는 문자열 연결이 아닌 `template strings`를 이용한다.
 - ex)

```jsx
      // 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)

```jsx
      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)

```jsx
      // bad
      const foo = function () {
      };

// good
 function foo() {
 }
 ```

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

---

1. `==` 이나 `!=` 보다 `===` 와 `!==` 을 사용한다.
 
 
 
2. 단축형을 사용한다.
 - ex)

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

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

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

// good
 if (collection.length) {
 // ...stuff...
 }
 ```
 
 
3. 비동기 함수를 사용할 때 `Promise`함수의 사용은 지양하고 `async`, `await`를 쓰도록 한다.
 
</div>
</details>

```

Teamble-Web

Teamble-Web 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Teamble-Web

Teamble-Web 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README