[섞어마셔] 프로젝트 3일차 - Header, Card 컴포넌트 제작

프로젝트의 초기세팅이 마무리되었고 이제는 본격적으로 개발을 할 차례입니다.

제 담당인 Header와 Card 컴포넌트의 제작에 들어갔습니다. 

 

1. Header

---

처음으로 헤더를 MUI를 통해서 제작을 해보았습니다.

MUI 공식문서에서 App bar를 기반으로 만들었으며 만들기는 편했지만 프론트엔드 취업을 준비하는 사람 입장에서는 bootstrap이나 MUI를 사용하는게 꺼려지기는 했습니다. 하지만 일주일이라는 시간동안 프로젝트를 완성하기 위해서는 어쩔 수 없는 선택이였습니다.

 

 

Header는 반응형으로 만들었습니다.

1) 넓은 화면

넓은 화면에서는 메뉴가 탭형태로 보이고 서치기능도 가능하도록 하였습니다. 그리고 로그인 유뮤에 따라 "LOGIN" 또는 프로필 이미지가 뜨도록 만들었습니다. 

2) 작은 화면

작은 화면에서는 로고가 중앙으로 가도록 제작을 하였으며 메뉴가 탭형태가 아닌 메뉴리스트 형태로 보이도록 하였습니다. 또한 서치기능은 숨겼는데 그 이유는 어차피 SEACH 메뉴로 가게된다면 검색을 할 수 있기 때문입니다. 

 

 

2. Card 컴포넌트

---

 

Card 컴포넌트는 칵테일 이미지와 태그, 찜(like), 제목, 상세설명 이런식으로 구성되어있으며 hover시에는 알콜유무와 들어가는 재료를 넣었습니다. 

특히 찜부분은 백엔드에 도움이 없어서 로컬스토리지를 이용해서 사용자가 새로고침을 해도 변하지 않도록 만들었습니다.

 

3. 마무리하며

팀원들이 github사용법을 몰라서 가르치고 있는데 몇몇분이 명령조로 그냥 해달라고 이야기를 하셔서 조금 맘이 상하지만 참고있습니다.. 이럴때는 어떻게 현명하게 대처를 해야하는지 찾아보아야겠네요