항해99_사전스터디_미니프로젝트_최종

* 미니프로젝트는 순수 HTML, CSS, 간단한 JS 로 제작하였습니다. *

 

항해99_3기 본 과정에 앞서 사전스터디 그룹에서 미니프로젝트를 시작하게 되었습니다.

 

미니프로젝트의 내용은 사전강의를 통해 배운 내용으로 간단한 커피리뷰 사이트를 제작해서 배포까지가 목표입니다.

 

제가 맡은 부분은 커피에 대한 상세 페이지 부분입니다.

 

1. 홈 화면

홈화면

홈 화면은 다른분이 작업 해주셨습니다.

 

최종컨셉때 헤더의 해당 체인점을 클릭하면 그 체인점의 인기메뉴 / 추천메뉴를 출력하는게 목표였습니다.

본 과정을 앞둔 시점에서 시간적 여유도 없고,

무엇보다 저희 실력이 아직은 너무 부족해서 여기서 마무리하게 되었습니다.

 

홈 화면의 상품들은 크롤링해서 만든 API 를 사용하지 않았더라구요....

그냥 다 하나하나 img와 name 값을 입력하셨습니다....

 

반응형도 페이지 사이즈에 따라 전체 사이즈가 줄어들게 되어있어서 구분이 어려워 따로 사진은 넣지 않았습니다.

2. 상세 페이지

1024 사이즈

상세 페이지에도 홈에서 사용하는 헤더를 그대로 가져와서 사용하였으나,

아직 반응형 작업을 안해두신 사이즈마다 페이지가 깨지는 상태라서 빼고 올렸습니다.

 

지금 없는 헤더에는 로고가 있고 로고를 누르면 홈으로 돌아가는 기능이 있습니다.

---

홈화면에서 해당 커피를 클릭해서 상세 페이지로 들어오면 그 커피의 name 값을 받아와서

api 에서 name 값과 같은 내용의 영양정보와 이미지url 을 출력 해줘야하는데,

 

홈에서 name 값을 넘겨받지 못해서 일단은 default 값으로 제가 임의로 테스트 해보기 위해

작성해놓은 name 값 벨벳 다크 모카 나이트로에 대한 영양정보와 이미지가 출력되고 있는 사진입니다.

 

그리고 상품의 하단부에 좋아요 133 보통이에요 222 별로에요 1 는 클릭해서 카운터 되는 것이 아니라

댓글을 작성할 때 댓글의 radio 값을 db에 저장해서 통계 내주어 출력합니다.

 

저 부분의 역할은,

사용자 입장에서는 리뷰/댓글의 글들을 읽어 보시기전에 간단하게라도 미리

아 이게 그래도 평이 좋네 또는 별로라네~ 사람마다 또는 케바케 같은데? 라고 생각을 할 수 있게하는 역할입니다.

지금보니 좀 크긴 하네요..

 

아직 db 설계가 안되있는 관계로 이 값도 임의로 입력한 default 값으로 입니다.

768 테블릿 + 이하 사이즈

768px 테블릿 + 테블릿 이하 사이즈 반응형 입니다.

최대한 정리해보려고 했으나,, 정리되지 않은 모습입니다.

 

미니프로젝트 해보면서 느낀점

 

협업측면에서는 저도 아직 제 git에 commit만 할 줄 알고 git 협업을 할 줄 모르는 상태였는데,

다른 분들도 git을 늦게 배우셔서 git 으로 협업 하지않고 프로젝트 파일 공유형식으로 진행되서 많이 아쉽고,

각자 역할에 대한 영역의 이해도??가 많이 없었습니다.

 

개인적으로는

아직 JS DOM 이나, css에 대해 많이 부족하다는 걸 느꼈고,

undefined와 null의 차이, DOM 구조나 CSS 부모/형제 관계 같은 이론적인 부분도 함께 같이 보충할 계획입니다.

 

+ 연습용이라도 꼭 리액트로 다시 만들어보고 싶은 사이트입니다.