반려식물에 관한 정보를 공유할 수 있는 SNS 플랫폼
📌 배포 링크
📌 깃허브 링크
FEDC2_GreenButler_Off
prgrms-fe-devcourse • Updated Jul 5, 2023
📌 회고 링크
📌 최종 발표 영상
☘️ 기획 배경 & 주요 기능
주제
- 초록 집사(Green Butler)
- 반려 식물에 관한 정보를 공유할 수 있는 SNS 플랫폼
선정 배경
- 반려 식물이란 '사람이 정서적으로 의지하고자 가까이 두고 기르는 식물'을 뜻하는 신조어다. 장기화된 팬데믹으로 집에 있는 시간이 늘자 반려식물을 키우는 이들이 늘고 있다. 최근 조사에 따르면, 팬데믹 이후 반려식물에 관심이 늘었다는 의견이 51.1%나 된 것으로 나타났다(농촌진흥청, 2022).
- 반려 식물은 종류에 따라 양육 방식이 다양하다. 정보가 부족한 초심자가 기르는 데는 적지 않은 어려움이 따른다. 이에 반려 식물을 기르는 데 체계적인 관리를 제공하고, 다른 이들과 정보를 공유할 수 있는 서비스에 대한 요구가 존재한다.
- 반려 식물 정보 공유 서비스는 이미 존재하나, 일부 서비스는 기능 및 UX에 대한 불만이 꾸준히 제기되고 있다. 예를 들어, '플랜트그램'은 식물의 종류가 적어 검색이 불편하고, 메뉴를 선택하는 방식이 복잡하다는 불만이 제기되고 있다. 이에 더욱 편리한 UX를 갖춘 서비스에 대한 요구가 존재한다.
타겟 사용자
- 반려식물을 기르는 사람들
- 양육 초보자 + 경험 많은 애호가
주요 기능
- 반려식물 포스트: 사진과 글이 포함된 포스트를 볼 수 있고, 직접 작성할 수 있다.
관심 있는 포스트에 좋아요를 누를 수 있고, 댓글을 작성할 수 있다.
- 태그 검색: 태그를 기반으로 포스트 검색을 할 수 있다.
- 팔로우: 팔로우를 통해 다른 유저와 친분을 맺을 수 있다. 해당 유저의 정보를 볼 수 있다.
- 활동 점수: 활동 점수에 따라 유저에게 등급이 부여된다.
☘️ 사용 기술
☘️ 나의 역할 & 담당 기능
- 팀장 역할
- 일정 관리, 회의 진행, 발표 등
- 앱의 구조 설계
- 컴포넌트 다이어그램 제작
- axios를 통해 API 요청 메서드 구현
- 메인 페이지 담당
- 무한 스크롤, 가상 스크롤, 좋아요 등
- 게시물 상세 페이지 담당
- 댓글 추가 및 삭제, 게시물 삭제 등
- 라우터 설정 & 페이지 접근 관리
🛠 앱의 구조 설계
팀장으로서 앱의 구조를 설계하여 팀원들에게 제시해 줄 필요가 있다고 생각했습니다.
컴포넌트 다이어그램을 통해 프로젝트의 청사진을 그렸고,
이를 바탕으로 팀원들에게 적절한 역할을 배분했습니다.
🛠 API 요청 메서드 구현
axios를 사용하여 API를 요청하는 메서드를 구현했습니다.
- common: axios 인스턴스 설정 및 응답 처리
- postApi: 게시물 조회, 생성, 수정, 삭제 등 API 요청
- useApi: 로그인, 회원가입, 인증 확인 등 API 요청

🛠 메인 페이지 구현
🛠 게시물 상세 페이지 구현
🛠 라우터 설정 & 페이지 접근 관리
☘️ 주요 기술 이슈
무한스크롤에서 Intersection Observer가 중복 생성되는 문제페이지 뒤로가기 시 스크롤 복원하기무한스크롤을 가상스크롤(virtual scroll)로 교체하여 렌더링 최적화 JWT 관리 - 로컬 VS 세션 스토리지로그인 / 비로그인 여부에 따라 페이지 접근 관리하기커스텀 훅은 무언가를 꼭 리턴해야 할까?
☘️ 팀워크 & 관리 이슈
악마의 대변인 팀원문서화의 부족경험 부족으로 인한 일정 계획의 어려움