첫번째 프로젝트를 시작한지 1주일차 🌝 설 연휴 🌝 를 맞이하게 되었다.
5주동안 열심히? 달려온 만큼 refresh하기 좋은 기간이다.
하지만 다시 봐야할 개념들과 코드들도 많고 이 연휴가 진행하고 있는 프로젝트를 보충하고 발전시킬 수 있는 좋은 기간이라 생각한다.
merge권한을 풀어주었다.
최소 한 건의 피어 리뷰
를 통해 PR을 머지. 컴포넌트 재사용에 대해서 더욱 배울 것!!!
헤더
및 최근 주문 정보 컴포넌트
렌더링모두 마치면 최근 본 상품
기능을 구현할 것이다.
다음은 배민문방구 사이트의 마이페이지이다.
컴포넌트는 크게 빨간색 테두리로 표기한 4가지 부분으로 나눌 수 있다.
진행중인 주문
은 지금 단계에선 백엔드와의 데이터 연동도 그렇고 구현하기가 현실적으로 어려운 부분이 있어 팀과 협의 후 안하기로 했다.
최근 본 상품
은 메인페이지의 아이템 컴포넌트를 재사용하여 리스트로 묶어주는 컴포넌트를 사용하기로 정했다.
먼저 최근 주문 정보 컴포넌트 렌더링부터 진행한다.
현재 만든 컴포넌트는 다음과 같다.
추후 만들 컴포넌트는
// MEMBER_DATA.json
{
"id": "john9674",
"password": "dlacogus74!",
"nickname": "채봉이",
"email": "klqwrx7004@naver.com",
"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%"
}
]