Skip to content

OWN-SIZE/onsize-website

Repository files navigation

OWN SIZE

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

💭 About

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

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

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

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

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


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

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

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

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

✨ OUR TEAM

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

서영

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

서현

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

은형

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

현수

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

🛠 Tech Stack

WEB

EXTENSION

📚 Library

Recoil Recoil React Query React Hook Form

🗂 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. 복수행 블록의 ifelse 를 이용하는 경우 elseif 블록 끝의 중괄호( } )와 같은 행에 위치시킨다.
  • 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. 구글 로그인 뷰

image

  • 튜토리얼 안내 및 구글 계정으로 로그인 기능
  • @react-oauth/google 라이브러리를 이용하여 구현

2. 사용자 실측치 입력 뷰

image

  • 사이즈 추천을 위해 사용자가 평소에 자주 입는 사이즈 실측치를 작성하는 뷰
  • @react-hook-form 라이브러리로 유효성 검사 및 폼 작성 구현

3. (메인 뷰) 나의 옷장

image

  • 익스텐션을 통해 저장한 의류 및 추천 사이즈 정보를 한 눈에 확인할 수 있는 뷰
  • 아카이브 내 의류 관련 정보 디스플레이/카테고리 추가/고정/수정/삭제 및 의류 상세페이지 랜딩 기능

4. (메인 뷰) 카테고리 뷰

image

  • 나의 옷장에 저장된 의류들을 나만의 분류로 카테고리화하여 확인할 수 있는 뷰
  • 카테고리 관련 정보 디스플레이/추가/고정/수정/삭제 및 카테고리 내부 랜딩 기능

5. 마이페이지 뷰

image

  • 개인정보, 의류 아카이빙 히스토리 및 기타 정보들을 확인할 수 있는 뷰
  • 가입한 구글 로그인 계정 확인, 의류 아카이빙 히스토리 확인, 기타 페이지 랜딩 및 탈퇴/로그아웃 기능

🐾 Branch Strategy

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

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •  

Languages