쿠팡이츠 클론하면서 1

개인 프로젝트로 쿠팡이츠 클론을 하고있는데 지금은 로그인/회원가입 페이지를 만들고 기본 메인페이지

를 만들고있다.

 

일단 로그인/회원가입 state관리는 redux로 reducers 폴더안에 user.js 파일에서 관리해주고있다. 비동기 작업은 추후에 

redux-saga로 해줄 것 이다. 

 

메인 페이지에 컴포넌트들은 가장 기본적으로 상점 카드가 있고 이건 지금 간단하게 해줬다. 

그리고 음식의 종류 ex) 1인분, 한식, 중식, 치킨, 분식 등등에 따라 상점 카드들을 모아주는 것 이건 react-slick으로 옆으로 넘겨주는 애니메이션을 구현할지 아니면 직접 만들지는 고민이다. 

비슷한 것 으로는 또 하단메뉴에 추천순과 최소주문금액이 낮은순 배달비가 낮은순으로 상점카드들을 분류해주는 메뉴바도 있는데 위에 음식 종류에 따라 분류해주는 기능을 만들면 재활용하면 될 것 같다. 

 

현재 제일 신경 쓰이는 부분은 데이터 테이블을 잡는 것 이다. 현재 머릿속에는 

 

상점카드는 일단 더미데이터로 만들어 줄건데 

 

Cards란 배열에 객체로 담아 줄 거고 한 객체 마다 카드 id, 상점이름, 주소, 배달비, 대표이미지 배열, 리뷰 배열, 메뉴배열을 넣어줄 것 이고 여기서 복잡한게 리뷰 배열이랑 메뉴배열인데 

 

메뉴배열엔 또 객체로 나눠주는데그 객체안에는 메뉴종류 ex) 세트메뉴, 면류, 밥류 등, 메뉴 가격, 메뉴 정보, 메뉴 이미지 등이다. 

 

리뷰 배열엔 이건 주문한 사람만 적을수 있게 해줄 것임으로 user.id와, 상점id, 주문시 발급되는 토큰?이나 아니면 redux로 주문시 고유 id를 줄 것이다. 

평점과 코멘트 정도다. 

 

또 기능을 생각하자면 엄청 많다. 예를 들어 어떤 메뉴가 가장 인기 있는지 주문 누를 때 세트 메뉴시 카트에 무얼 얼만큼 담을지 (이 것들은 추후에 생각하자) 

 

CSS같은 경우엔 antd와 쿠팡이츠 어플을 참고해서 만들어서 크게 어렵진 않은데 데이터 구조를 잡는게 상당히 복잡한 것 같다. 또 서버쪽은 아직 크게 공부를 안해서 서버개발자를 구해서 2인으로 할지 그냥 내가 공부해서 할지 아마도 내가 공부해서 할 가능성이 크다. 어차피 풀스택 개발자를 지향함으로 근데 너무 복잡해서 서버개발자를 구하고싶은데 일단 남는게 시간이라 되는데 까진 해보자 ㅇㅇ 

 

현재 상태 상점카드 컴포넌트만 만들어준 상태다. 배열에 지금 객체가 3개가 들어있는데 3번째 배열엔 이미지를 안넣었고 첫번째엔 3개 두번째엔 1개 넣었다. 이미지가 3개 미만이면 이미지 배열 0번째 항목만 width 100%를 주고 3개 이상이면 첫번째 카드처럼 3개의 이미지를 나눠서 보여준다.