프로젝트 소개

총 2주간에 걸쳐 쿡잇이라는 밀키트 사이트를 참고하여 필수/추가 구현을 하여 진행한다.
현재 3명의 FE와 2명의 BE로 이루어진 우리 팀, '꾸깃(Ggugit:다양한 기능을 꾸깃꾸깃 넣겠다!)'이 진행하는 쿡잇 사이트에 대해 설명해보겠다.

쿡잇?
쿡잇은 다양한 음식을 집에서 쉽고 편하게 즐길 수 있는 밀키트 배송사이트로
테마별 필터링을 통해 메뉴를 추천하고 조리시간과 난이도를 명시하며
리뷰를 제공하여 사람들이 구매할때 참고할 수 있게되어 있다.

필수 기능 구현?

1. 로그인, 회원가입, 메인 페이지
2. 메뉴 페이지
3. 메뉴 상세페이지

상페 페이지 구현 진행 사항

내가 현재 맡은 페이지는 메뉴 페이지에 있는 음식을 클릭하면 연결되는 상세 페이지이다. 현재 레이아웃은 완성되었지만 아직 리뷰 요청중에 있고, 내일 새벽에 학원을 가면 추가적으로 만든 컴포넌트로 다시 올려야 할 것 같다.

상단 페이지에 주황색으로 표시된 '한정수량/NEW' 부분은 데이터 값이 false로 들어오면 사라지게 되어있다.
하단의 수량의 경우, 30개 미만의 경우가 남았을 때는 수량을 보여주지 않고
'마감임박!'으로 구매자들의 심장을 두!근!두!근 뛰게끔 만들어 보았다.

다만, '총 0원'이라고 표시된 노란 부분은 아직 홀드이다.
맨처음에는 판매가를 넣으면 된다고 생각했는데 생각해보니 저 부분은
총 가격 = 판매가-할인가+배송비(3,000원)이었다.
저 부분을 내가 미처 생각하지 못해서 BE쪽에 추가 요청을 한 상태이다.(만약 된다면 진행할 계획!)

하단 페이지는 밀키트 상세 설명과 오른쪽 스티키 바가 있다.
(맨 처음에 스티키바에 height를 따로 주지 않아서 저 친구는 이리저리 옮겨다녔는데 동우님이 알려주셔서 겨우 오른쪽으로 진정시켜 놓을 수 있었다 😂)

2주차 계획

말그대로 '죽지뭐~' 라는 심정으로 더 열심히 달려보고자 한다. 😊
오해 마시길.

개인적으로는 이번 프로젝트를 진행하면서 나 스스로에게 속상했던 부분이 많았다. 개념을 알지만 적용/응용하지 못하고 하면 할수록 기초가 많이 부족하다는 것을 알게되었다. 메워지지 않은 틈을 위해 다음 한주동안은 다시 새벽기상으로 기초를 더 틈틈히 공부하고 적용하려고 한다.

개인적 바램과 계획으로는, 다음주 수요일까지는

• 메인페이지와 상세페이지의 연결
• 상세페이지 Data BE와 통신해서 받아보기
• 로직 구현
  을 할 생각이다.

어려움 겪었던 것

• 이전에도 계속해서 매번 다른 팀원과 팀으로 일하는 것에 익숙해서 '소통'은 자신있다고 생각했지만.. 역시 다른 영역이다 보니, BE에 대한 지식이 없어서 BE개발자분들과 어떻게 소통해야 하는지 몰라서 소극적이었던 것 같다. (덧붙여 개인적으로 내가 맡은 파트의 레이아웃을 바쁘게 진행하다 보니 더 그랬던 것 같!다.
  그래서 삼일째가 되는 날, 내 페이지에서 받아야 할 데이터들에 대해 BE분들과 체크하고 내가 받을 수 있는 부분들을 체크하면서 레이아웃에도 반영하고 mockdata로 만들부분/상수데이터로 만들 부분을 파악 할 수 있었다.!
  
  상단의 페이지를 캡쳐한 부분인데, 노란색으로 표시된 곳을 기준으로 모두 컴포넌트 하려고 했다. 또한 체크 된 곳이 내가 BE로 부터 받아올 수 있는 데이터!

• 전체적인 그림을 그리고 레이아웃보다는 기능구현에 시간을 보내지 못한게 아쉽다. 사실 cs부분이 부족해서 통신부분은 더 그려지지 않았고, 그것을 만회하기 위해 관련 동영상도 결제했지만 직접 해봐야 할 것 같다는 생각이 든다.

• 최대한 간결하고 가독성 높은 코딩!
  한정수량/NEW부분을 구현할 때도, 스타일로 visibility를 hidden 이나 visible로 주면 된다고 생각했는데 해보니 그냥 삼항 연산자로 더 쉽고 간결하게 칠 수 있었다.
  이런 상황들이 많았는데 여기까지만 하고 싶다.
  (물론 개인적으로는 실수노트를 만들어서 되새김질 하고 있다. 소처럼 말이다.)

마무리

좋은 팀원들을 만났으니 더 좋은 시너지를 발휘할 수 있도록 더 최선을 다해야 겠다.
내일 봅시다 !