- 서비스주소: www.leafylink.co.kr/
- 기획의도
- 식물이 단순한 상품이 아닌, 생명체이기 때문에 그 상태를 실시간으로 확인하는 것이 매우 중요하다는 점에서 출발한다.
- 일반 이커머스와 달리, 라이브커머스는 실시간 방송을 통해 판매자가 직접 식물의 현재 상태를 보여줄 수 있다.
-> 이를 통해, 고객은 식물의 생기, 건강상태, 크기 등을 눈으로 직접 확인할 수 있어 구매에 대한 신뢰를 높일 수 있다.
| 한예슬 | 강희진 | 손서영 | 한종섭 | 김경아 |
| 팀장 | 팀원 | 팀원 | 팀원 | 디자이너 |
 |
 |
 |
 |
 |
| 상품 상세페이지, 상품 등록페이지, 1:1 채팅 서비스 |
회원가입, 결제 및 장바구니, 라이브 스트리밍 |
메인 페이지, 헤더 및 푸터 |
구매자, 판매자 마이페이지 |
디자인 QA, 디자인시스템 UX/UI디자인 |
- 2024.07.16 ~ 2024.08.21
- 설명: 최종 프로젝트 버전을 배포하는 브랜치입니다.
- 설명: 개발 중인 기능과 수정 사항을 포함하는 브랜치입니다. 기능이 완성되면 이 브랜치를 통해
main브랜치로 병합하여 배포 준비를 합니다. 중간 단계의 통합 브랜치로 사용됩니다.
- 설명: 특정 기능 개발을 위해 개별적으로 생성되는 브랜치입니다. 기능이 완료되면
dev브랜치로 병합됩니다. - 규칙1: 각 기능 작업에 대해 이슈를 생성하여 작업 내용과 예상 완료일을 작성하고 팀원과 공유하여 소통합니다.
- 규칙2:
feature/#이슈번호,refactor/#이슈번호등을 따릅니다. - 규칙3: GitHub와 Discord를 연동하여 알림을 받고, 푸시, PR, 이슈를 관리하여 빠르게 피드백을 제공합니다.
Tanstack-Query
React 애플리케이션에서 서버 상태 관리를 쉽게 할 수 있도록 도와주는 라이브러리입니다. 데이터 페칭, 캐싱, 동기화, 오류 처리 등의 기능을 제공하여, 비동기 데이터를 효율적으로 관리할 수 있습니다.
Supabase
실시간 데이터베이스, 인증, 스토리지 등을 제공하는 백엔드 서비스입니다.
Tailwind CSS
Tailwind CSS를 선택한 이유는 효율적인 유틸리티 클래스 기반으로 빠르고 일관된 스타일링이 가능하며, 불필요한 CSS를 제거하여 성능을 최적화할 수 있기 때문입니다. 또한, 커스터마이징이 용이하며, 디자인 시스템 구축에 적합한 도구로 개발 속도를 크게 향상시킬 수 있습니다.
Next.js
SSR과 SSG를 지원하는 React 기반의 프레임워크입니다. SEO 최적화와 페이지 로딩 속도 개선을 도와주며, 동적 라우팅 등 고급 기능을 제공합니다.
Swiper
모던한 터치 슬라이더 라이브러리로, 모바일 및 웹 애플리케이션에서 터치 지원 슬라이드 기능을 구현할 수 있습니다. 다양한 애니메이션 효과와 커스터마이징 옵션을 제공합니다.
Quill
WYSIWYG 텍스트 편집기로, 사용자 친화적인 텍스트 편집 기능을 제공합니다.
DomPurify
HTML 및 DOM 요소를 정화하여 XSS 공격을 방지하는 자바스크립트 라이브러리입니다. 신뢰할 수 없는 입력 데이터를 안전하게 처리하여 보안을 강화할 수 있습니다.
Zustand
React 애플리케이션에서 상태 관리를 위한 경량 상태 관리 라이브러리입니다. 간단하고 직관적인 API를 제공하며, 복잡한 상태 관리도 쉽게 구현할 수 있습니다.
NPM
패키지 관리와 의존성 관리를 위한 도구입니다. Node.js 프로젝트에서 필요한 라이브러리 설치 및 버전 관리를 용이하게 합니다.
OpenWeatherAPI
기상 데이터를 제공하는 API 서비스입니다. 실시간 날씨 정보, 예보 데이터를 가져올 수 있어, 날씨 관련 기능 구현에 유용합니다.
- 실시간 날씨 정보: 상단에 사용자의 현재 위치를 기반으로 한 실시간 날씨 정보 제공
- 라이브 커머스: 판매자가 직접 진행하며 제품을 실시간으로 보여주고 판매할 수 있는 라이브 커머스 기능 제공
- 카테고리와 상품 진열: 아기자기한 카테고리로 나뉘며, 신제품, 식집사 필수템, 이달의 추천 식물, 베스트셀러 등 타이틀에 맞는 상품들을 진열
- 실시간 채팅 기능: 구매자가 실시간으로 판매자와 1:1 채팅을 통해 문의할 수 있는 기능 제공
- 구매자 리뷰: 상품 구매자만 남길 수 있는 리뷰 기능 제공
- 호버 기능: 메인 페이지에서 상품 카드에 호버 시, 장바구니와 결제 아이콘이 표시되며, 외각 클릭 시 상세 페이지로 이동
- 장바구니 기능: 상세 페이지에서도 장바구니에 담기와 결제가 가능
- 구매 내역 확인: 주문 내역을 확인할 수 있는 구매 내역 카테고리 제공
- 회원정보 수정: 회원정보(이름, 주소, 전화번호) 수정 가능
- 판매자 전환: 사업자 번호, 대표자 성명, 상호명, 개업일자를 입력하여 인증할 경우 판매자 계정으로 전환 가능
- 판매 관리: 주문 내역과 판매 중인 상품, 회원정보로 구성된 카테고리 제공
- 회원정보 수정: 회원정보(이름, 주소, 전화번호) 수정 가능
- 상품 관리: 판매중인상품에서 상품 등록과 수정 가능
- LeafyLink