기록일지

1. 랜딩페이지 CSS 마무리 미로로 랜딩페이지를 약간 엎어서 디자인을 새로 했다. 그리고 각자 다시 수정을 한 후 현수님과 줌으로 만나서 진행했는데 새벽까지 했다...처음 만들었을 때보다 너무 깔끔하고 이뻐서 만족스럽게 마무리했다. 가장 많이 바꾼 부분은 랜딩페이지의 맨 위 부분이었던 것 같다. 처음엔 이미지로 시작했는데 지도 GIF를 넣고 글씨를 옆에 띄우는 걸로 바꾸었다. 2. 스크롤 애니메이션 랜딩페이지에 애니메이션이 없다보니 밋밋하다는 생각이 들어서 스크롤을 내리면 대상객체가 나타나도록 하고 싶었다. 그러던 중 검색을 통해 AOS라는 라이브러리를 알게 되어 사용했다. 아래 사이트인데 쉽게 사용할 수 있어서 좋았다. https://michalsnik.github.io/aos/ 우선 라이브러리 설치..

1. ReadMe 수정 개인적으로 깃헙 위키나 ReadMe 파일을 꾸미는 게 재밌어서 ReadMe 파일에 글이랑 구조를 수정해서 마무리했다. ReadMe 파일을 쓰니까 정말 거의 끝났구나 싶었다... 2. 지도페이지 반응형 지도페이지 반응형이 사실 어떻게 할지 좀 막막했던 것 같다. 우선 내비게이션 바 반응형으로 위에 부분이 좀 잘려서 그 부분을 가장 먼저 수정했다. 대부분 반응형은 아래와 같이 max-width를 설정해서 했다. @media screen and (max-width: 1023px) { // 내용 } 검색 부분은 왼쪽에 치우쳐 있고 내용을 입력하지 않으면 리스트가 뜨지 않아서 반응형에 큰 문제가 없었는데 상세정보 창이 가장 고민이었다. 최대한 간단하면서 깔끔하게 하고 싶어서 일단 이미지가 ..

1. DB 수정 DB에 CafeInfo 테이블이 있는데 지도페이지에서 마커를 클릭했을 때 나오는 상세정보 창의 내용이 담겨있다. 여러 필드가 존재하는데 그 중 이미지 부분에서 문제가 있었다. 카페 사진이다 보니 검색을 해서 이미지 주소를 넣은 것이었는데 일부 이미지 파일은 보이지 않았다. 문제가 생긴 이미지들을 확인해보니 특정 사이트에서 검색하고 그 이미지의 원본 주소를 가져오지 않고 검색한 결과 이미지 주소를 가져와서 생긴 문제인 것 같았다. 그래서 이미지를 검색하고 원본 링크로 들어가서 그 이미지의 원래 주소를 가져오거나 다른 사이트에서 검색해서 모두 바꾸는 작업을 했다. 그리고 아무래도 직접 정보를 넣다보니 50~60개 정도 카페 정보가 있었는데 좀 더 전국적으로 보여지고 싶어서 100까지 노가다를..

1. 오버레이 닫기 버튼 추가 오버레이에 마우스, 클릭 효과를 모두 주도록 수정했는데, 마우스 효과는 마우스를 옮기면 알아서 닫히도록 했으니 문제가 없었다. 그런데 클릭 효과는 닫는 버튼을 만들어 주어야 해서 아이콘을 넣고 닫히도록 바꾸어주었다. 2. 오버레이 수정하고 싶은 것 지금은 클릭을 하면 하나씩이 아니라 전부 누를 수 있는데 이미 한 개가 눌려있으면 다른 걸 눌렀을 때 기존 오버레이가 닫히도록 수정하고 싶다.

1. 지도 오버레이로 코드 수정 기존에는 카카오 API 중 인포윈도우로 카페명을 표시했었는데 디자인도 어렵고 클릭이벤트, 마우스이벤트를 동시에 주고 싶어서 오버레이로 코드를 수정하기 시작했다. 오버레이 이벤트 주는 코드만 첨부하면 아래처럼 썼는데 mouseover, click은 되는데 mouseout 이벤트 때문에 클릭 이벤트는 작동이 안 되는 것 같아 보였다. window.kakao.maps.event.addListener(marker, 'mouseover', function () { overlay.setMap(map); }); window.kakao.maps.event.addListener(marker, 'mouseout', function () { overlay.setMap(null); }); wi..

1. 검색 카테고리 수정 DB를 정리하면서 카테고리를 수정했다. etc는 정보가 많지 않아서 빼기로 했고, 카페명, 할인금액, 가게분류만 남았다. 각 카테고리에 맞게 placeholder 값을 수정했다. 2. 배포 처음에는 서버에서 정보를 받아오는데 undefined/~~이런 식이여서 심지어 서버 도메인도 아니었다. 뭐가 문제지 했는데 env 파일 설정을 vercel에서 어디서 해야하는지 몰라서 따로 안 했던 게 문제였다. 검색하다가 따로 설정하는 부분이 있는 걸 알게 돼서 수정하니까 SSL 오류로 변했다ㅠㅠ 꽤 오래 배포를 붙들고 있었는데 아직 상점페이지도 남았고 CSS도 남아서 시간을 더 끌 수 없었기에 내 위치를 포기하고 http로 배포하기로 했다. 리팩토링 하면서는 https로 배포하고 싶다.ᐟ.ᐟ

1. Nav 수정 기존엔 비로그인 상태일 때 마이페이지 버튼이 아예 안 보이게 했었다. 개인적으로 나는 비회원이어도 마이페이지 존재(?)는 알아야 한다고 생각해서 회의 때 얘기를 했고 다들 동의해주어서 마이페이지 버튼도 보이게 수정했다. 대신 비회원일 때는 누르면 로그인 모달이 뜨도록 했다. 2. 배포 내 위치 기능 때문에 이번에 백엔드를 맡으신 분들이 계속 https 배포를 시도했는데 SSL 오류부터 시작해서 다양한 오류들로 안 됐다ㅠㅠ 타임아웃 에러도 나고...나도 저번에 백엔드였어서 같이 얘기를 하다가 시도하게 됐는데 일단 클라이언트는 vercel로 배포했다. 그리고 서버도 배포를 다 했는데 비슷한 에러들로 막혔다ㅠㅠ

회원가입에 성공하고 나면 성공했다는 모달창이 뜨면 좋을 것 같아 만들었는데 사용자가 그 모달을 또 끄려면 귀찮을 것 같다고 생각했다. 그래서 setTimeout을 이용해 일정 시간이 지나면 알아서 닫히도록 만들었다. handleCloseSignUp을 전달해 준 후에 아래와 같이 코드를 추가했다. setTimeout(() => { history.push('/intro'); handleCloseSignUp(); }, 1000);

탄소저감량 500, 900, 2000, 3500, 5000g에 따라 나누어서 5개가 있는데, 각 사용자의 탄소저감량이 계속 변하니까 그 변하는 양에 따라 뱃지가 보이고 안 보이고 바뀌어야 했다. 그래서 className으로 나누었는데 badgeHide라는 클래스명을 지정해두고 조건을 달성하면 classList.remove로 지워줬다. 그리고 CSS에서 badgeHide를 흐리게 설정해두었다. DOM으로 접근해야 해서 약간 낯설긴 했는데 잘 실행돼서 뿌듯했다.

우선 각 뱃지가 선택된 건지 확인해야 해서 selectedBadgeId라고 상태관리를 했다. 그리고 filter로 badge의 Id가 selectedBadgeId와 일치하는지 확인한 후 map으로 모달을 띄웠다. 뱃지 구현이 머리로도 잘 정돈되지 않아 처음에 좀 힘들었던 것 같다. 탄소저감량에 따라 나눠야 한다는 걸 알고나서 코드 수정을 좀 많이 한 것 같다. + 모달 정보를 받아오는데 해결이 안 돼서 서버코드를 봤더니 서버 코드가 수정되어야 할 부분이 있어서 회의하고 다시 진행할 수 있었다. 분기하는 코드가 안 맞아서 서버 뱃지 부분을 그냥 전체로 보내주는 걸로 수정했다.