OWN SIZE

내 몸에 맞는 옷을 매장 방문 없이 집에서 간편하게 모아보기!

💭 About

내가 구매하고 싶은 옷들은 이곳저곳에 다양하게 있는데 모두 확인해보자니 탭을 여러번 드나들며 정리 해야했죠.

그렇게 해서 고르게 된 옷의 사이즈는 어떤가요? 온라인으로 구매했는데 내 몸에 맞지 않으면 환불을 하거나 교환을 신청하고 반송까지 보내야하니 번거롭기 짝이 없고요.

그래서 우리는 실패없이 사이즈를 선택하기 위해 수많은 정보들을 참고하는 ‘불편함을 감수’하며 ‘신중히’ 사이즈를 골라야했어요.

❓그런데 온라인 쇼핑, 편하라고 사용하는거 아닌가요?

❓온라인 쇼핑이 지금보다 더 편리해질 수는 없을까요?

온사이즈는 온라인 패션 쇼핑이 가진 ‘다양한 불편함들’을 해결하기 위해 탄생했습니다.

나에게 가장 잘 맞는 옷의 사이즈를 입력한 뒤, 쇼핑몰에서 발견한 마음에 드는 옷의 사이즈를 추천받아보세요.

굳이 사이즈 추천을 받지 않아도 찜한 옷들을 저장하고 분류하여 한 눈에 확인할 수 있어요.

이제 ‘쇼핑 편의성 툴’ 온사이즈와 함께 똑똑하고 편리한 온라인 패션 쇼핑을 경험해보세요🥰

✨ OUR TEAM

서영(리드)	서현	은형	현수
@leeseooo	@seobbang	@ilmerry	@borimong

서영

익스텐션 사이즈표 , 익스텐션 추천 로딩 및 결과 뷰, 익스텐션 위시리스트 저장하기

서현

웹사이트 아카이빙 뷰 , 웹사이트 디렉터리 상세 뷰, 웹사이트 헤더, 웹사이트 메뉴바, 웹사이트 푸터

은형

익스텐션 상하의 선택 뷰 , 익스텐션 수동입력 뷰, 웹사이트 로그인, 웹사이트 튜토리얼

현수

웹사이트 마이사이즈 히스토리 뷰 , 웹사이트 디렉터리 뷰, 웹사이트 모달, 웹사이트 토스트, 웹사이트 마이사이즈 뷰 데이터 패칭

🛠 Tech Stack

WEB

EXTENSION

📚 Library

🗂 Folder Architecture

Extension

📦 
├─ .babelrc
├─ .eslintrc
├─ .gitignore
├─ .prettierrc
├─ .vscode
├─ LICENSE
├─ README.md
├─ apis          // api 요청 관련 코드
├─ package-lock.json
├─ package.json
├─ src
│  ├─ assets
│  │  └─ img
│  ├─ components
│  │  └─ common
│  ├─ hooks
│  │  ├─ business    // 비즈니스 로직 작성
│  │  ├─ common      // 공통으로 사용할 hook
│  │  ├─ queries     // 각 페이지별 hook
│  │  └─ ui          // UI 관련 로직 분리
│  ├─ manifest.json
│  └─ pages
│     ├─ Background  // 이벤트 핸들러 및 chrome API 사용할 코드
│     ├─ Content    // DOM 제어할 코드
│     ├─ Options    // 옵션 세팅 코드
│     └─ Popup      // 팝업 뷰 관련 코드
├─ svg.d.ts
├─ tsconfig.json
├─ utils
│  ├─ build.js
│  ├─ env.js
│  └─ webserver.js
└─ webpack.config.js

Website

📦
├─ .eslintrc.json
├─ .gitignore
├─ .prettierrc
├─ README.md
├─ apis          // api 요청 관련 코드
├─ components
│  └─ common
├─ hooks
│  ├─ business   // 비즈니스 로직 작성
│  ├─ common     // 공통으로 사용할 hook
│  ├─ queries    // 각 페이지별 hook
│  └─ ui         // UI 관련 로직 분리
├─ next.config.js
├─ package-lock.json
├─ package.json
├─ pages
│  ├─ _app.tsx
│  ├─ _document.tsx
│  └─ index.tsx
├─ public
├─ styles
├─ svg.d.ts
└─ tsconfig.json

🕹 Convention

✏️ Coding Convention

Airbnb React Style guide

명명규칙(Naming Conventions)

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

• ex)

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

1. 오브젝트, 함수, 그리고 인스턴스에는 camelCase를 사용한다. 카멜케이스 중에서도 맨 앞 글자 빼고 첫 글자는 대문자로 작성하는 lowerCamelCase 를 사용한다.

• ex)

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

1. 클래스나 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',
  });

1. 함수 이름은 동사 + 명사 형태로 작성한다. ex) postUserInformation( )
2. 약어 사용은 최대한 지양한다.
3. 이름에 네 단어 이상이 들어가면 팀원과 상의를 거친 후 사용한다

블록(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;
  }

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

• ex)

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

```

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

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

문자열(Strings)

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

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

// good
const name = 'Capt. Janeway';
```

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

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

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

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

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

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

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

스타일 컴포넌트

1. 페이지 내 가장 바깥을 감싸는 태그는 `Root` 를 사용한다.

• ex)

  <Styled.Root>
  		// ...contents
  </Styled.Root>

1. Styled 객체를 사용해서 스타일을 작성한다.

• ex)

  const Styled = {
    Root: styled.div`
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 0 40px;
      height: calc(var(--vh, 1vh) * 100);
    `,
    BrandName: styled.h1`
      font-size: 20px;
      font-weight: bold;
      margin-left: 16px;
      ${({ theme }) => css`
        color: ${theme.colors.primary_400};
      `}
    `,
  }

서비스 핵심 기능

1. 상하의 선택 뷰

• 사이즈 추천 전, 상의와 하의 중 어떤 옷에 대한 사이즈를 추천받을 것인지 선택하는 뷰
• 사이즈 추천을 받지 않아도 '저장'을 통해 아카이빙 기능 이용 가능

2. 사이즈 추천 결과 뷰

• 사이즈 추천 결과를 확인할 수 있는 뷰

• 알맞은 사이즈가 없을 경우 보여주는 뷰

3. 사이즈를 불러올 수 없어요 뷰

4. 나의 옷장에 저장했어요 뷰

5. 비교할 수 있는 사이즈가 없어요 및 내 사이즈 확인하기 뷰

6. 수동입력 뷰

7. 내 사이즈와 비교하기 뷰

🐾 Branch Strategy

• github flow 사용
• 작업 전에 이슈 생성
• 이슈 번호로 브랜치를 파서 작업
• 작업이 다 끝나면 feat 브랜치에서 main 브랜치로 Pull Request 작성
• 같은 팀원 최소 1인의 Approve를 받아야 main 브랜치에 머지 가능