캠핑은 많은 사람들이 자연과의 소통과 모험을 즐기는 인기 있는 활동입니다. 하지만 캠핑은 혼자서 즐기는 것이 아니라 다른 사람들과 함께 공유하는 것이 더욱 즐거운 경험이라고 생각합니다.
모닥불이 캠핑지에서 사람들을 모아 따뜻한 분위기를 조성하는 것처럼, '모닥불' 플랫폼을 통해 사용자들이 모여서 자연과 캠핑에 관한 이야기를 나누며 따뜻한 분위기를 형성할 수 있는 공간을 마련하고자 했습니다.
TwoPlusOne 팀의 첫 토이 프로젝트이자, 자연과 소통하는 캠핑 경험을 사진 및 지도 위치 공유 기능을 통해 업로드하고 서로 소통할 수 있는 플랫폼 '모닥불'을 소개드리고자 합니다.

📆 2023.05.01 - 2023.05.31

프로젝트 진행 기간은 약 한 달로, 주된 기능은 다음과 같습니다.

FrontEnd	FrontEnd	BackEnd
신혜린🌴	이종혁🎸	박준우🤖

TypeScript	React.ts	Eslint	Prettier	Styled-components

TypeScript	Nodejs	MySql	Rest	jest	aws

(+ α)

• 커뮤니케이션 방법
  • 매일 오전 10:30 Agile 프로세스 기반으로 10-20분간 미팅 진행
  • 미팅간 작업 진행상황 공유, Blocker 및 Blocker 해결방안 공유, 당일 진행할 작업 내용 공유
  • Postman을 통해 백엔드 명세서 공유

❗️영상

❗️구현사항

• 소셜로그인 기능을 구현하였으며 구글로그인 API를 이용하여 진행하였습니다.
• 구글로그인 구현시 @react-oauth/google 라이브러리를 사용하여 구현하였습니다.
• 구글로그인 버튼을 커스터마이징 하여 구현하였습니다.
• 구글로그인을 통해 받은 token을 백엔드로 POST하여 token형식으로 jwt 로그인 방식으로 구현하였습니다.

❗️영상

❗️구현사항

• 로그인이 되었을 때와 로그아웃 되었을 때의 UI가 다르도록 구현했습니다.
  • 로그인이 되었을 시에만 mypage 및 posting 페이지로 넘어갈 수 있는 버튼 표시
  • 로그인을 한 유저만 마이페이지 및 게시글 작성 페이지에 접근할 수 있도록 하기 위함
• nav의 메뉴는 map, campsites, about 세 가지로, map은 추후에 추가될 기능입니다. (현재 사용X) campsites 메뉴가 메인화면으로 유저들의 게시글을 표시하는 메뉴입니다. about은 홈페이지에 대한 간단소개글을 작성한 곳입니다.
• 좌측 modakbul 로고를 클릭하면 메인화면으로 넘어가도록 구현했습니다.

❗️영상

❗️구현사항

• 메인페이지의 campsites 메뉴가 홈페이지 메인 메뉴로, 유저들이 작성한 게시글의 정보가 대표 사진 한장과 제목 및 유저명을 표시하므로써 필수 정보를 한눈에 파악할 수 있도록 했습니다.
• 해당 게시글의 좋아요 수, 스크랩 수, 그리고 댓글 수를 표시하므로써 각각 게시글의 인기도를 나타내고자 하였습니다.
  • 이를 통해 유저들로 하여금 게시글 내용에 대한 궁금증을 유발시켜 클릭을 유도할 수 있도록 하기 위함입니다.
• 게시글 위에 마우스를 hover 하게 되면 게시글을 감싸고 있는 박스의 색을 변경시켜 해당 게시글에 조금 더 주목시킬 수 있도록 했습니다.

❗️영상

❗️구현사항

• react-quill 라이브러리를 사용하여 게시글 편집기 기능을 구현했습니다.
• 제목, 내용, 사진, 그리고 지도를 첨부할 수 있도록 하였으며, 유저들의 편의성을 위해 최대한 단순하게 UI를 구성하고자 노력했습니다.
  • 캠핑 경험 공유에 있어서 캠핑지에 대한 위치 공유도 중요한 요소라고 판단하여 초기 기획 때부터 지도 기능을 필수로 넣는 것이 좋을 것이라고 판단했습니다.
  • 본인의 경험을 공유하는 데 있어서 최대한 단순하게 UI를 구성하여 어디에 무엇이 들어가는지 파악하는 피로도를 줄이고자 했습니다.
  • 사진은 최대 10장까지만 첨부할 수 있도록 하였으며, 10장 이상 넘어갈 시에 최초로 선택한 10장만 자동으로 선택되고 나머지는 선택이 해제되게끔 구현했습니다.
  • 유저가 사진을 업로드하기에 앞서 무슨 사진을 업로드하고자 했는지 미리 볼 수 있도록 미리보기 기능을 구현했습니다.

❗️영상

❗️구현사항

• 단순히 사진과 글만 포스팅하는것이 아닌 캠핑장소도 함께 공유함으로써 다양하게 커뮤니티를 형성할 수 있도록 구현하였습니다.
• 지도는 naver map api를 이용하여 구현하였으며 첫화면 지도 렌더링 위치는 현위치의 좌표를 가져오게 하였습니다.
• 마커버튼을 찍어 위치를 공유할 수 있게 하였으며 마커버튼은 한 개만 찍을 수 있게 구현하였습니다.
• 찍은 마커버튼의 위도, 경도값은 게시물 포스팅시 데이터베이스로 전달 됩니다.

❗️영상

• 1번 영상

• 2번 영상

❗️구현사항

• 비회원의 경우 게시물은 확인할 수 있으나 그 외의 기능은 할 수 없게 구현하였습니다.
• 좋아요, 스크랩 버튼을 구현하여 mypage에서 스크랩 혹은 좋아요를한 게시물을 확인할 수 있게 구현하였습니다.
• 게시물 이미지의 경우 여러장을 나열하는것이 아닌 slick라이브러리를 이용하여 넘기면서 볼수 있게 구현하여 UI/UX적인 부분을 강조하였습니다.
• slick으로 구현한 캐러샐 기능의 경우 다른 페이지에서도 쉽게 사용할 수 있게 컴포넌트화 시켜서 관리하였습니다.
• 댓글 리스트영영의 경우 댓글 데이터가 없는경우 user가 댓글이 있는지의 여부를 바로 판단할 수 있게 UI를 구성함으로서 댓글 작성에 대한 유도를 하였습니다.
• 댓글입력시간 기준으로 방금 전, ...분 전, ...시간 전, ...일 전, ...주 전, ...개월 전, ...년 전 으로 출력될 수 있게 구현하였습니다.
• 댓글리스트의 경우 data 렌더링 효율성을 위해 무한스크롤로 구현하였으며 구현시 Intersection Observer API를 사용하여 구현하였습니다.
• 댓글 삭제기능의 경우 본인이 입력한 댓글에 대해서만 삭제버튼이 노출되게 구현하였습니다.
• 캠핑장소를 공유하는 항목을 추가하여 user들이 더욱 다양하게 소통할 수 있게 layout을 구성하였습니다.
• 캠핑장소는 단순히 글로 소통하는것이 아닌 user가 더욱 쉽고 빠르게 이해할 수 있도록 naver map api를 이용하여 해당 위치를 확인할 수 있게 하였습니다.

❗️영상

❗️구현사항

• 로그인한 user의 정보가 출력되도록 구현하였습니다.
• 스크랩, 좋아요, 포스팅 게시물의 항목에 대해서는 상수데이터로 작성하였습니다.
• 각각의 리스트 항목의 layout이 모두 같고 내용만 다르다는점을 이용해 컴포넌트 재사용을 활용하여 구현하였습니다.
• 컴포넌트 재사용시 중첩삼항연산자를 사용하여 구현하였습니다.
• 리스트에 표출되는 항목들을 클릭시 해당 게시물로 이동할 수 있게 구현하였습니다.
• 리스트에 출력할 게시물내용이 없을시 user가 게시물을 작성 혹은 스크랩을 유도할 수 있게 UI를 구성하였습니다.
• 빈 리스트의 아이콘을 클릭시 해당 내용과 연관된 페이지로 각각 Link를 걸어놔 user가 조금 더 쉽고 적극적이게 이용할 수 있게 구성하였습니다.