What To Do

첫번째 프로젝트를 시작한지 1주일차 🌝 설 연휴 🌝 를 맞이하게 되었다.
5주동안 열심히? 달려온 만큼 refresh하기 좋은 기간이다.
하지만 다시 봐야할 개념들과 코드들도 많고 이 연휴가 진행하고 있는 프로젝트를 보충하고 발전시킬 수 있는 좋은 기간이라 생각한다.

Guideline

• merge권한을 풀어주었다.

  • 최소 한 건의 피어 리뷰를 통해 PR을 머지.
  • 자체 리뷰를 거치는 만큼 우리 팀의 코드 베이스에 합쳐지는 팀원의 코드가 어떤 내용인지 함께 꼼꼼하게 검토

• 컴포넌트 재사용에 대해서 더욱 배울 것!!!

ToDoList

프로젝트(배민서바이벌) 마이페이지(MyPage) 구현목표

• 마이페이지 레이아웃
• 컴포넌트 사용
• Mock Data를 활용한 헤더 및 최근 주문 정보 컴포넌트 렌더링
• Data가 없을 시와 있을 시를 구분하여 다른 컴포넌트를 렌더하는 조건부 렌더링

모두 마치면 최근 본 상품 기능을 구현할 것이다.

Components

다음은 배민문방구 사이트의 마이페이지이다.
컴포넌트는 크게 빨간색 테두리로 표기한 4가지 부분으로 나눌 수 있다.
진행중인 주문은 지금 단계에선 백엔드와의 데이터 연동도 그렇고 구현하기가 현실적으로 어려운 부분이 있어 팀과 협의 후 안하기로 했다.
최근 본 상품은 메인페이지의 아이템 컴포넌트를 재사용하여 리스트로 묶어주는 컴포넌트를 사용하기로 정했다.
먼저 최근 주문 정보 컴포넌트 렌더링부터 진행한다.

현재 만든 컴포넌트는 다음과 같다.

• MyPage
• MyPageHeader (회원의 정보)
• RecentOrder (최근 주문 정보)
• RecentOrderList (최근 주문 정보 리스트)
• NoDataOrder (최근 주문 정보가 없을 때 보여줄 컴포넌트)
• NoDataProduct (최근 본 상품이 없을 때 보여줄 컴포넌트)

추후 만들 컴포넌트는

• RecentProductList (최근 본 상품 리스트)

Mock Data

• Mock data는 3가지이다.
  • MEMBER_DATA.json (회원정보를 담은 데이터)
  • ORDER_DATA.json (주문 정보를 담은 데이터)
  • RECENT_PRODUCT.json (최근 본 상품 정보를 담은 데이터)
• Mock data는 백엔드 API 기능 정의서를 참고하였다.

 // MEMBER_DATA.json
 {
  "id": "john9674",
  "password": "dlacogus74!",
  "nickname": "채봉이",
  "email": "[email protected]",
  "phone": "01094768945",
  "point": "100000"
}

// ORDER_DATA.json
[
  {
    "id": 1,
    "date": "2022.02.04",
    "order_number": "1238903589",
    "name": "돈봉투. 골드에디션 효도",
    "image_url": "/images/MyPage/money.png",
    "option": "",
    "price": "2,450",
    "quantity": 1,
    "order_state": "결제완료(택배)"
  },

  {
    "id": 2,
    "date": "2022.02.04",
    "order_number": "1238903589",
    "name": "돈봉투. 골드에디션 효도",
    "image_url": "/images/MyPage/money.png",
    "option": "",
    "price": "2,450",
    "quantity": 1,
    "order_state": "결제완료(택배)"
  }
]

// RECENT_PRODUCT_DATA.json

[
  {
    "id": 1,
    "name": "돈봉투. 골드에디션 효도",
    "image_url": "https://store.baemin.com/data/goods/19/10/43/196/196_detail_08.png",
    "shipping": "2,500",
    "price": "3,500",
    "is_green": false,
    "is_sale": true,
    "category_id": 230,
    "stock": 750,
    "discount_price": "2,450",
    "discount_rate": "30%"
  }
]