내 몸에 맞는 옷을 매장 방문 없이 집에서 간편하게 모아보기!
내가 구매하고 싶은 옷들은 이곳저곳에 다양하게 있는데 모두 확인해보자니 탭을 여러번 드나들며 정리 해야했죠.
그렇게 해서 고르게 된 옷의 사이즈는 어떤가요? 온라인으로 구매했는데 내 몸에 맞지 않으면 환불을 하거나 교환을 신청하고 반송까지 보내야하니 번거롭기 짝이 없고요.
그래서 우리는 실패없이 사이즈를 선택하기 위해 수많은 정보들을 참고하는 ‘불편함을 감수’하며 ‘신중히’ 사이즈를 골라야했어요.
❓그런데 온라인 쇼핑, 편하라고 사용하는거 아닌가요?
❓온라인 쇼핑이 지금보다 더 편리해질 수는 없을까요?
온사이즈는 온라인 패션 쇼핑이 가진 ‘다양한 불편함들’을 해결하기 위해 탄생했습니다.
나에게 가장 잘 맞는 옷의 사이즈를 입력한 뒤, 쇼핑몰에서 발견한 마음에 드는 옷의 사이즈를 추천받아보세요.
굳이 사이즈 추천을 받지 않아도 찜한 옷들을 저장하고 분류하여 한 눈에 확인할 수 있어요.
이제 ‘쇼핑 편의성 툴’ 온사이즈와 함께 똑똑하고 편리한 온라인 패션 쇼핑을 경험해보세요🥰
 |
 |
 |
 |
|---|---|---|---|
서영(리드) |
서현 |
은형 |
현수 |
| @leeseooo | @seobbang | @ilmerry | @borimong |
익스텐션 사이즈표 , 익스텐션 추천 로딩 및 결과 뷰, 익스텐션 위시리스트 저장하기
웹사이트 아카이빙 뷰 , 웹사이트 디렉터리 상세 뷰, 웹사이트 헤더, 웹사이트 메뉴바, 웹사이트 푸터
익스텐션 상하의 선택 뷰 , 익스텐션 수동입력 뷰, 웹사이트 로그인, 웹사이트 튜토리얼
웹사이트 마이사이즈 히스토리 뷰 , 웹사이트 디렉터리 뷰, 웹사이트 모달, 웹사이트 토스트, 웹사이트 마이사이즈 뷰 데이터 패칭
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
Airbnb React Style guide
명명규칙(Naming Conventions)
- 이름으로부터 의도가 읽혀질 수 있게 쓴다.
-
ex)
// bad function q() { // ...stuff... } // good function query() { // ..stuff.. }
- 오브젝트, 함수, 그리고 인스턴스에는
camelCase를 사용한다. 카멜케이스 중에서도 맨 앞 글자 빼고 첫 글자는 대문자로 작성하는lowerCamelCase를 사용한다.
-
ex)
// bad const OBJEcttsssss = {}; const this_is_my_object = {}; function c() {} // good const thisIsMyObject = {}; function thisIsMyFunction() {}
- 클래스나 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', });
- 함수 이름은 동사 + 명사 형태로 작성한다.
ex)
postUserInformation( ) - 약어 사용은 최대한 지양한다.
- 이름에 네 단어 이상이 들어가면 팀원과 상의를 거친 후 사용한다
블록(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)
1. 복수형의 코멘트는 `/** ... */` 를 사용한다. - ex)```jsx
// 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; }
문자열(Strings)
1. 문자열에는 싱글쿼트 `''` 를 사용한다. - ex)```jsx
// 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)
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...
}
```
- 비동기 함수를 사용할 때
Promise함수의 사용은 지양하고async,await를 쓰도록 한다
스타일 컴포넌트
1. 페이지 내 가장 바깥을 감싸는 태그는 `Root` 를 사용한다.-
ex)
<Styled.Root> // ...contents </Styled.Root>
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}; `} `, }
- 튜토리얼 안내 및 구글 계정으로 로그인 기능
@react-oauth/google라이브러리를 이용하여 구현
- 사이즈 추천을 위해 사용자가 평소에 자주 입는 사이즈 실측치를 작성하는 뷰
@react-hook-form라이브러리로 유효성 검사 및 폼 작성 구현
- 익스텐션을 통해 저장한 의류 및 추천 사이즈 정보를 한 눈에 확인할 수 있는 뷰
- 아카이브 내 의류 관련 정보 디스플레이/카테고리 추가/고정/수정/삭제 및 의류 상세페이지 랜딩 기능
- 나의 옷장에 저장된 의류들을 나만의 분류로 카테고리화하여 확인할 수 있는 뷰
- 카테고리 관련 정보 디스플레이/추가/고정/수정/삭제 및 카테고리 내부 랜딩 기능
- 개인정보, 의류 아카이빙 히스토리 및 기타 정보들을 확인할 수 있는 뷰
- 가입한 구글 로그인 계정 확인, 의류 아카이빙 히스토리 확인, 기타 페이지 랜딩 및 탈퇴/로그아웃 기능
- github flow 사용
- 작업 전에 이슈 생성
- 이슈 번호로 브랜치를 파서 작업
- 작업이 다 끝나면 feat 브랜치에서 main 브랜치로 Pull Request 작성
- 같은 팀원 최소 1인의 Approve를 받아야 main 브랜치에 머지 가능