[팀프로젝트] 1인 가구를 위한 배달/포장 식당 추천 사이트 만들기!!

2021.04.23TIL

제가 그리고 팀원 서재원님이 정리해주신 팀 프로젝트입니다.  처음으로 아이디어 구상을 할 때

• ㅅ재환님은 맛집 데이터를 크롤링해 지도 API 위에 마크업해주는 사이트를,
• ㅁ지혜님은 영수증으로 진짜 인증된 맛집 리뷰만 모아 지도 API로 그려주는 사이트를
• ㅅ주현님은 크롬 북마크(즐겨찾기탭) 일목요연하게 보여주는 서비스를 제안하셨다.
• 저는 예전에 아웃백에서 일할때 기억도 나고, 요즘 ㅁㅁ 알바생이 알려주는 ㅁㅁ 알짜꿀팁 이런 글 자주 보는 편이라 처음 가는 맛집(or 프랜차이즈) 맛있게 즐기는 팁 공유하기 사이트를 제안했어요

각자 두개씩은 제안한 것 같은데 하나씩만 공개해야겠다..ㅎㅎ 아이디어는 소중하니깐

이러저러한 토의를 하면서 자료조사도 하고 하다보니 시간이 금방 갔네요. 본격적으로 역할 담당은 하지 못했는데 재환님과 지혜님은 코딩 기능 구현에는 자신이 없으시다며 전체 레이아웃을 맡아주시겠다고 하셨어요. 저는 그래도 스파르타에서 미니튜터링을 하면서 웹사이트 기능 구현에는 자신이 있었어서 주현님한테 아이디 없는 사이트에서 접속한 사용자 구분하는 방법(feat. uuid)을 검색해서 구현해달라 부탁드리고 나머지 로직을 짰습니다. 생각보다 금방 api 소스를 찾아서 기능 구현 자체는 어렵지 않았어요. 근데 팀장이라 팀 공유용 리포지토리 관리하고 각자 구현한 내용 충돌나지 않게 머지하는 것도 생각보다 에너지 소모가 큰 작업이더라는.... 일주일 만에 할 수 있을까요....?

2021.04.24 TIL

재환님이 구현해주신 카드섹션 뷰 구성과, 지혜님이 구현해주신 헤더 부분의 뷰, 그리고 제가 구현한 api로 기본적인 뷰가 이렇게 나왔습니다. 주현님은 uuid를 부탁드렸었는데, 파이썬의 uuid 모듈을 알아보고 연습까지 해 오셔서, 로컬 스토리지에서 사용자의 기존 접속 여부를 알아내는 방식이 번거로워질 것 같아 제가 따로 uuidv4 CDN을 구해서 자바스크립트에서 마저 구현을 해버렸습니다.. 그리고 시간이 좀 남아서, 각 식당별 카테고리를 해시태그 형태로 버튼으로 뿌려줬습니다...만 색상이 너무 밝아서 글씨가 잘 안보이네요. 훔.. 즐겨찾기 기능은 일단은 구현을 해서 DB로 저장을 하는데, 기존에 해당 식당이 해당 유저의 이름으로 저장되어 있는지 등을 체크를 안해서 더 수정해봐야 알 것 같네요.

2021.04.25 TIL

3일 차 쯤 되니까 각자 욕심이 나는 기능을 마구 넣어서 그런지 머지하자마자 뷰가 뻑나버려서 결국 제가 쓴 코드 베이스에 다른 분들이 구현한 기능들 선택적으로 넣는 것으로 마무리했습니다. cherrypick 과 fetch apply 를 적절히 쓴 것 같은데 코드는 산을 오르고 있더라구요.. 일단 재환님이 마우스오버 애니메이션을 구현해주셔서 카드에 마우스를 올리면 슬그머니 카드가 움직이고, 이미지에 커서를 대면 살짝 확대가 됩니다. 거기에 지혜님이 헤어영역에 배경 넣는 부분이랑 즐겨찾기 리스트를 사이드바에 구현하는 아이디어를 주셔서 position: sticky로 구현을 했고, 그러고보니 식당 카드들보다 즐겨찾기 리스트가 더 빨리 로드되는 부분이 너무 거슬려서 1.5초 후에 오른쪽에서 즐겨찾기 탭이 날아와서 제자리에 안착하도록 조정했습니다. 각 해시태그를 클릭하면 텍스트가 같은 해시태그들이 모두 불이 들어오는 기능도 만들었고, 좋아요를 클릭하면 바로 즐겨찾기 목록에 해당 식당이 리스트업되고, 삭제버튼을 누르면 리스트에서 빠지는 것 까지 구현했습니다. 또 위의 검색창에 현 위치가 아닌 상세주소를 입력하면 국내 어디던간에 그 지역 주변의 배달 식당 리스트가 나타나게 했습니다. 그때 왼쪽의 지도 모양 버튼을 누르면 다시 사용자가 접속한 컴퓨터 위치로 다시 검색됩니다. 또 api에 랭킹순, 별점순 등 sort 방식을 정할 수 있게 해서 더 다양한 기준으로 맛집을 고를 수 있도록 조정했고, 카드섹션에 드러나는 정보도 더 다양하고 풍부한 정보가 나오게끔 조정했습니다. 이만하면 저도 한번은 써볼 법한 사이트가 되어가는 것 같네요.