5.3 수정 예정 🌳- 5.1 최종발표회   💻 프로젝트명  친환경 및 지속가능성을 추구하는 환경보호 커뮤니티🌏 SOOM Web Page내일배움캠프 React 4기 🌏지.지.마(지구를 지킬 마스터피스)개발 기간 : 2024.03.26 ~ 2024.04.30 (5주 간)🔗 배포주소 및 시연영상정식 배포 사이트 : https://www.soom-greenlife.com/테스트 ID/PW : test@gmail.com / test11!시연 영상 : https://youtu.be/KKf7HcJO1Gk🚩 프로젝트 소개"SOOM" - 친환경 및 지속가능성을 추구하는 플랫폼으로, 환경 보호를 위한 모임을 직접 만들고 인증샷을 공유할 수 있는 커뮤니티 사이트입니다.상세 소개사용자들이 친환경적이고 지속 가능한..

🙀 4.20 ❌ 문제 드디어 마지막으로 main 브랜치로 merge하고 배포사이트를 확인했는데, 반응형이나, 내가 넣은 주소 검색 기능 등 잘 작동되는 게 확인됐지만 ❗ 카카오 맵 api 부분에서 에러가 떴다. ❗ 카카오맵을 불러오는 모달창이나 페이지에서만 흰 화면과 함께 client side .. exception 이라면서 콘솔을 확인하라며 에러가 떴으며, 콘솔에서는 cannot read properties of undefined .. maps ? 이런 에러가 떴는데, 내가 카카오맵 api 를 사용할 때, new window.kakao.maps 이런 식으로 사용하고 있기 때문에 카카오맵 api 문제로 보였다. 또 결정적으로 개발자도구 network를 확인해보니 다음과 같았다. 카카오맵 api 사용 ur..

..

4.16 메인페이지 parallax scroll (어바웃페이지도 추가?) 구현 (근데 react-parallax 라이브러리는 사용이 잘 안돼서 포기 ..여툰 그걸 굳이 쓸 필요없긴했다) 카카오맵 지도 api 사용해보기 주소 검색 라이브러리 (daum) 사용 모두 처음으로 시도해본 거여서 좀 신기했다.

4.15 + 디자이너님과 회의 디자인 수정하기 튜터님 피드백 lighthouse 사용

4.12 다른 조원 분의 도움으로..!! 헤더를 하나로 합칠 수 있게되었다. ㅠ^ㅠ 나는 생각지 못한 방법이었는데 생각보다 쉬운거였다 뒷 배경 이미지를 적용하면서 투명한 헤더를 그 위에 덮으려면..꼭 헤더컴포넌트를 import해야되는 줄 알았다 layout 의 헤더로 그 위에 쌓이게하는게아니라. 근데 그럴필요가없었다 그냥 layout 의 헤더를 써도, 기존의 내용 배경이미지에 absolute top-0 ?? 속성을 주면 되었다 그럼 헤더와 배경이미지를 합칠 수 있음 그리고 laptop 반응형디자인 계속함 생각보다 너무너무 하드코딩이고 오래걸렸다 힘들었다 ..ㅠ 그래도 계속 남아있음. px단위로 일일히 하드코딩해야하니 힘들고 게다가 피그마 와이어프레임과 실제 사이트에서 보는건 차이가 있어서 사실 기존 디자..

4.10 선거날이었는데 오후부터 다시 코딩을 했따.. ㅎ_ㅎ 다른 글에 썼듯 메인페이지 헤더 전체페이지에 적용하도록 수정. div 배경이미지가아닌 image태그를 따로 두고 absolute 속성을 부여 해 같이 쓰도록 했다

🐰 4.9 프로필 이미지 업로드 삭제 문제 해결 ! - form 태그 안의 button이라 자동으로 닫히는 문제가 있었던 거 같다. 그렇다고 type="submit"을 준 것도 아니었는데.. - button에 type="reset"을 주고, 업로드한이미지 url 상태 초기값으로 기존 프로필 이미지를 넣어주는 식으로 해결 tailwind css 를 활용해 폰트 적용, div 에 배경이미지 적용함 - 이번에 쓴 글처럼 Tailwind css를 활용해 배경 이미지 적용하고 헤더 컴포넌트를 임포트해 같이 사용 폰트도 추가 tailwind 로 폰트적용법도 알게됨 헤더는 레이아웃 헤더와, 메인/어바웃 등 페이지에 적용될 컴포넌트 헤더를 분리시켜버렸다 2개의 헤더 인데.. 이게 맞을진 모르겠다 하나의 헤더로 합치고 ..

4.3 next ui select 태그를 사용했는데 aria-label 을 부여안한게 큰 문제였나보다 ! 확실친않은데 이거때문에 아예 데이터 조회가 안되었다 zustand - user_uid 가져오려고하는데 로그인직후에만 잠시 확인되고 새로고침 시 등 안뜨는 문제 발생 ㅠㅠ 마이페이지.. 이미지업로드 기능 같은거 뺴면 쉽게 봣는데 ㅠㅠ 할게많았다 생각보다.. 여러 리스트 조회 하는건 바로 끝냈지만 그뒤에 next ui활용해서 ui 구현하는것도 은근 오래걸리고 모집상태에 따른 분류나 등등.. 그리고생각보다 프로필수정이 잘 안됐다 게다가 로그인상태가 유지가 ? 안되는 문제로 더 오래걸려버렸다 ..ㅠㅠ

4.2 마이페이지 supabase 외래키 사용해 내가 생성한 캠페인 목록, 작성한 커뮤니티 글, 찜한 캠페인 목록 불러오기 외래키 활용 근데 찜한 캠페인 목록 가져올때 막혔는데, - bookmarks테이블에서 외래키 통해 캠페인 내용 green_action 가져올 수는 잇었으나 , 연결된 이미지(green_action_images) / 해당 글의 북마크수(bookmarks) 를 한번에 가져올 수 있는 방법이 없을까하다가 구글링을 통해 이중 ?! 외래 키 활용법을 알아버렸다 ㅎㅎ .. 와우 아래처럼! 이미 외래키로 연결했는데 거기서 연결된 외래키를 또 다시 활용해 가져오는 것 const fetchBookmarkedActions = async () => { try { const { data, error } ..