🛒 Bmart

소개

Bmart 프로젝트는 배달의 민족의 Bmart 모바일 앱 서비스를 반응형 모바일 웹으로 클론하면서 사용자에게 앱과 유사한 경험을 제공하며 재사용성이 높은 컴포넌트와 안정적인 상태 관리를 목표로 하고 있습니다.

배포

배포 링크

프로젝트 구조

|-- github
    |-- workflows // github actions
|-- client
    |-- public
        |-- aseets // images
        index.html
    |-- src
        |-- apis
        |-- commons
            constants.ts
            svgs.tsx
        |-- components // UI Components
            |-- large
            |-- medium
            |-- small
        |-- contexts
            |-- user // user context
        |-- hooks // custom hooks
        |-- libs // libraries
        |-- pages // page components
        |-- styles // common & global styles
        |-- tyles // common types
        |-- utils // util functions..
	App.tsx
|-- scripts // deploy scripts
|-- server
    |-- bin // www
    |-- controllers
    |-- lib
    |-- middlewares // express middlewares
    |-- models // sequelize models
    |-- routes // routing
    |-- seeder // dummy data
    |-- utils // constants & utils functions
    app.js

재사용성 높은 UI 컴포넌트

Atomic Design Pattern을 참고하여 지금 프로젝트에서의 재사용성에 초점을 둔 3개의 계층을 가진 컴포넌트 구조를 만들었습니다.

small: 하위에 있는 컴포넌트가 현재 프로젝트에서 재사용될 여지가 없는 컴포넌트

medium: small 혹은 medium 컴포넌트를 조합한 컴포넌트

large: small, medium을 조합해서 만든 컴포넌트

페이지 단위 상태 관리 및 상품 관리 CustomHook

각 페이지에 필요한 데이터와 상태 관리는 page에서 이루어지고 컴포넌트는 받은 데이터를 렌더링하는 역할을 수행합니다. 특히 페이지마다 다른 종류의 상품 리스트가 필요하기 때문에 이를 요청하고 관리할 수 있는 useProducts customHook을 구현하여 각 페이지에서 사용했습니다.

  const [{ products, status }, productDispatch] = useProducts({ categoryId: params.categoryId });

설치 가이드

프로젝트 가져오기

git clone https://github.com/woowa-techcamp-2020/bmart-6.git

클라이언트 코드 빌드하기

cd client
npm install
npm run build

서버 코드 실행하기

⚠️ server/.env에 다음 환경 변수가 등록되어야 합니다.
IS_DEMO를 true로 설정하면 실행할 때 마다 테이터베이스가 초기화되고 준비된 데이터가 추가됩니다.

PORT=3000
IS_DEMO=true
DB_HOST={데이터베이스 주소}
DB_USER={데이터베이스 사용자}
DB_PW={데이터베이스 사용자 비밀번호}
DB_NAME={데이터베이스 이름}
JWT_SECRET={임의의 JWT SECRET KEY}

cd server
npm install
npm start

서버가 실행됐다면 http://localhost:3000 에서 확인하실 수 있습니다.

협업 내용

다음과 같은 규칙과 디자인에 따라 협업을 진행했습니다.

팀원

이관형 @wudys
정진혁 @zoomkoding
홍동욱 @doonguk

eunbin20/bmart-6