project | React 팀플 쇼핑몰 구현 회고

👜사이트

• Github repo
• Demo
  • test16@test.com/12345678
• Notion

👜작업기간

2022.11.18 ~ 2023.01.02

👜팀원구성

프론트엔드 4인

👜기술스택

👜협업

fastcampus 과정 OT 때 종이뽑기로 형성된 팀이 있었다. 그 후로 줄곧 이야기도 잘하고 그룹스터디를 같이 하기도 했기에, 프로젝트를 같이 진행하기로 했다!

📍주제 및 툴

그래서 팀이름도 '5티'가 됐다. 주제는 주어진 api를 최대한 활용할 수 있는 의류 쇼핑몰로 결정!

역할분담을 했고 나는 상세페이지와 장바구니 페이지를 맡았다.

📍레이아웃

사진처럼 내가 맡은 페이지의 레이아웃을 짜서 공유했고, 이를 토대로 퍼블리싱을 진행했다. 그 이후로는 각자 개발한 뒤 일주일마다 공유하는 방식으로 진행됐다.

📍노션 활용

작업하다가 팀 내의 소통이 되지 않고 있다는 걸 깨달았고, 노션의 표 기능을 활용한 개개인의 진행상황 공유 페이지를 만들었다. 이를 보고 작업 양이 많거나 추가해야할 부분을 팀원에게 요청할 수 있었고, 개발 진도가 빨라졌다.

👜레이아웃

즐겨찾던 라룸 쇼핑몰, 29cm, 무신사를 참고하여 레이아웃을 짰다.

제품상세 페이지	장바구니 페이지

👜구현기능

📍상세페이지

• 전체 제품 목록에서 제품 클릭시, 제품 상세 정보 조회
• ADD TO CART 클릭시 확인창
  • 확인시 장바구니에 담기고(세션스토리지에 저장) 장바구니로 이동
  • 취소시 장바구니에 담기지만(세션스토리지에 저장) 이동 안함
• BUY NOW 클릭시 결제창으로 이동
• 전체 제품 목록에서 매진된 제품을 클릭했을 경우, 장바구니나 결제 버튼이 대신 sold out 문구 출력

📍장바구니 페이지

• 세션스토리지 정보로 장바구니 내역 출력
• 장바구니에 담은 것이 없을 경우, 문구(Oops! Your cart is empty) 및 메인 페이지로 이동 버튼 출력
• 수량 버튼
  • input 값이 2~9 일 때만 증가 및 감소 버튼 활성화
  • input 값이 2~9 가 아니면, 증가 및 감소 버튼 비활성화, input창 border 색 변경
  • input 입력 : 0이거나 null이면 값을 1로 임의변경, 숫자만 입력가능
  • 수량에 따라 제품별 총액과, order summery의 총액 변동
• 단일 삭제 버튼으로 목록에서 제품 제거
• 결제
  • 회원이면 결제 페이지로 이동
  • 비회원일 때 결제버튼을 클릭하면 로그인창으로 이동

위는 원래 기획했던 레이아웃이 변경된 것이다. 전체 선택과 개별선택이 있고, 선택삭제 버튼도 있었는데 시간관계상 위와 같이 변경됐다. 리액트를 처음 사용해보다보니 장바구니에서 기능구현하는 것이 너무 어려웠던 기억이 있다.

📍마이페이지 주문내역, 취소내역

• 마이페이지 레이아웃을 outlet으로 구성
• 주문내역 전체 목록, 상세내역 조회 가능 및 썸네일 클릭시 상품 구매페이지로 이동
• 구매확정 또는 취소요청 버튼을 눌러 구매 상태를 변경
• 취소요청한 것은 취소목록 조회

👜마무리

📍협업

개발 공부 후 처음으로 참여했던 프로젝트였다. 처음엔 내 역할이 뭔지 몰라 팀장이 리드하는대로 따라가기만 했다. 그러다 뒤늦게 팀으로 개발할 때는 적극적으로 공유하고 요청하는게 중요하다는 걸 알게 돼, 팀원들에게 필요성을 알리고 같이 적극적으로 커뮤니케이션하려고 노력했다. 노션의 표를 활용해 적극적으로 작업상황을 공유하거나 github pull request 주기를 일 1회로 정했고, 이를 통해 개발 속도를 높일 수 있었다.

📍Git

실제 개발시 git을 사용해보는 건 처음이었다. 내가 작업했던 게 나중에 보니 없어져 복구해야하는 작업도 했었고, github flow로 기능별로 branch를 처음 내보기도 했다.

📍React

react를 공부해본 적도 사용해본 적도 없는 상태에서 기능을 구현하려니 정말 힘들었다. 특히 수량을 늘리고 줄이는 것, 체크박스 기능 등 소소한 기능들이 정말 어려웠다. 구글링을 정말 많이 하면서 작업했다. 덕분에 구글링 능력이 조금 오른 것 같기도 하다. 이렇듯 단기간에 새로운 언어를 배워서 장바구니, 제품상세 조회, 마이페이지 레이아웃, 주문내역 조회, 취소내역 조회를 구현했다는 게 정말로 비약적인 성장이라고 생각한다! 리액트가 러닝커브가 높지 않아서 그럴 수도 있지만! 내게 새로운 언어를 금방 배워 적용할 수 있는 능력이 있다는 걸 알게 됐다. 그럼에도 앞으로 알아갈 것이 많다. 열심히 공부하자!