행동대장

프로젝트 개요

행복한 동네를 위한 대화의 장소(2023.08 ~ 2023.09_6주, DE:1, FE:3, BE: 3 )

동네 사건, 사고와 문제에 보다 쉽게 접근하고 공유하는 커뮤니티 서비스

 

만들 계 된 계기

아파트 놀이터에서 발생한 그네 사고로 12살 초등생이 사망한 뉴스를 접하게 되었던 계기로, 우리 동네 사건과 문제를 더 쉽게 이해하고 공유할 수 있는 사이트를 만들기로 하였다

사이트를 통해 사건과 문제에 대한 정보와 위치를 직관적으로 제공하고, 동네 주민들 간에 소통과 공동참여를 촉진하여, 안전과 예방에 대한 인식을 높일 수 있는 플랫폼을 구축하고자 했다

 

기술스택

React, JS, TS, Recoil, Styled-Component, Axios, React-Query v4, Kakao Map Api

 

프로젝트 내용

설명

지도상에서 직관적으로 주변의 불편사항들을 컨트롤러, 마커, 클러스터러를 활용하여 한눈에 파악할 수 있습니다

자신이 느낀 동네의 불편사항에 대해 게시글과 댓글을 작상하며 나도 불편해요/ 해결됐어요 기능을 통해 서로 정보를 공유할 수 있습니다

 

기능

자세한 설명은 이쪽으로

• 불편사항 공유
  • 게시물 작성
  • 댓글 작성
  • 나도 불편해요 / 해결됐어요 기능
• 주소 검색 후 지도 이동
• 지도로 보는 동네의 불편사항
  • 마커
  • 클러스터러
  • 영역 범위 안에 게시물에 대한 정보를 옆쪽에 보여줌
• 마이페이지
  • 개인정보 관리/
  • 사용자의 작성게시물, 응원한 게시물, 댓글작성 게시물 확인
• 실시간 알림 기능
• 로그인 회원가입 기능
  • 일반 로그인
  • 카카오 로그인

 

후기 

트러블 슈팅 기록

불필요한 요소 제거하기

현재 보는 지도 줌레벨과 좌표

검색 구현 기록

지속적인 개선

 

기록은 없지만 생각나는 다른 트러블 슈팅은 이 프로젝트는 기종(핸드폰, 태블릿, PC)에 따른 반응형 웹을 구현했는데 그중 컴퓨터에서 개발자모드로 개발했을 때는 문제없던 부분이 실제 기기에서는 내가 생각한 대로 안 나오고 잘리는 등에 문제가 발생했다 실제 내 핸드폰 기종은 S23 울트라로 실제 핸드폰에서 볼 때도 문제가 없었는데 팀원분들이 테스트를 하는 중 아이폰에서 밑에 바로 인해 가려져서 웹페이지가 잘린다는 사실을 알게 되었다 문제는 사이드바가 위로 올리는 식으로 구현했는데 그 부분이 잘리다 보니 사이드바를 볼 수가 없었다 팀원분들의 캡처해 주신 이미지와 머릿속으로 css 구현하며 구현했다 원인은 transition을 사용하면서 px를 기준으로 맞추다 보니 기종에 따라 문제가 발생한 것이었다 전에 문제가 되는 부분의 코드를 없애고 전체를 덮고 일부분을 보여주는 식으로 변경하여 수정했다

 

아쉬웠던 점

처음에 디자이너님 변경 및 리더님이 사라지는 등 다산 다난한 이슈가 많이 발생하여 초반에 팀이 우왕좌왕했다 팀에 어수선한 분위기가 정돈되고 난 후 기획을 시작했고 기획단계에서도 시간을 많이 보내 개발하는 시간이 다른 팀들에 비해 적어 너무 아쉬웠다 그리고 아직 구조를 잘 정리하지 못하고 로직을 분리했으나 자주 사용하는 로직이나 컴포넌트를 재사용하는 등은 아직 많이 모자란 것 같다 다음번에는 이런 부분을 좀 더 신경 써서 클린 한 코드를 작성할 수 있도록 노력하고 재사용성에 대해 깊은 고민을 해보아야 할 것 같다

 

느낀 점

초반 이슈가 있어 개발 시간이 적었지만 제한된 시간 안에 팀이 한마음으로 열심히 노력해 주어 완성할 수 있었다고 생각한다 초반에 이슈가 발생했을 때 나조차도 확실히 집중을 못하고 우울감에서 헤어 나올 수가 없었다 왜 우리 팀에게만 이런 일이 발생할까라는 생각을 벗어날 수 없었다 하지만 지나간 일을 돌릴 수 없고 현재 상황에서 최선을 다해야 했다 스스로 마음을 다잡으려 노력했다 그 당시 프런트 리더가 나갔기 때문에 공백을 채우기 위해서 남은 사람들 중 한 명이 리더자리를 채워야 해서 그 자리를 나가 매꾸게 되었다 그러면서 모두 함께 노력하여 이 상황을 이겨나가자라는 마음으로 회의를 주도하며 분위기를 좋게 만들기 위해 노력했다 노력덕분인지 팀분위기도 나날히 좋아지고 개발에도 속도가 붙었다 현재 상황이 내가 생각한데로 안되고 문제가 발생해도 내 스스로 마음을 다잡으며 노력한다면 결과를 얻을 수 있다는 것을 이번 프로젝트 때 느끼게 되었다 

그리고 역시 협업의 중요성을 다시 한번 느끼게 되었는데 디자이너, 프론트엔드, 백엔드로 팀을 구성하여 프로젝트를 만들게 되니 프론트엔드는 디자이너님과 디자인 관련 UX로 소통하고 백엔드와 기능문제로 소통을 하게 되니 가운데에서 원활한 소통으로 팀원들과 협업하여 문제를 해결해야 됨을 알게 되었다 이번 프로젝트를 하면서 어떻게 하면 원활한 소통 속에 협업을 할수 있는지 알아가게 된듯 하다(확실히 원활한 소통속 협업을 하니 문제를 해결하고 기능을 만들고 UX를 향상하는 등이 매우 편안하게 진행되었다)