Skip to content

yeseul0809/LeafyLink

Repository files navigation

LeafyLink

  • 서비스주소: www.leafylink.co.kr/
  • 기획의도
  • 식물이 단순한 상품이 아닌, 생명체이기 때문에 그 상태를 실시간으로 확인하는 것이 매우 중요하다는 점에서 출발한다.
  • 일반 이커머스와 달리, 라이브커머스는 실시간 방송을 통해 판매자가 직접 식물의 현재 상태를 보여줄 수 있다.
    -> 이를 통해, 고객은 식물의 생기, 건강상태, 크기 등을 눈으로 직접 확인할 수 있어 구매에 대한 신뢰를 높일 수 있다.

0. 팀원 소개

한예슬 강희진 손서영 한종섭 김경아
팀장 팀원 팀원 팀원 디자이너
상품 상세페이지,
상품 등록페이지,
1:1 채팅 서비스
회원가입,
결제 및 장바구니,
라이브 스트리밍
메인 페이지,
헤더 및 푸터
구매자, 판매자
마이페이지
디자인 QA,
디자인시스템
UX/UI디자인

0-1. 프로젝트 진행 기간

  • 2024.07.16 ~ 2024.08.21

0-2. 사용 기술 스택

✔ 배포 및 서비스 백엔드 관련 기술

Vercel Supabase Supabase Cloudflare Stream

✔ 개발 관련 기술

Next.js React TypeScript Tailwind CSS React Query

✔ 협업 및 도구 관련 기술

GitHub NPM Figma Discord

0-3. 프로젝트 GitHub 전략

main branch

  • 설명: 최종 프로젝트 버전을 배포하는 브랜치입니다.

dev branch

  • 설명: 개발 중인 기능과 수정 사항을 포함하는 브랜치입니다. 기능이 완성되면 이 브랜치를 통해 main 브랜치로 병합하여 배포 준비를 합니다. 중간 단계의 통합 브랜치로 사용됩니다.

feature branch

  • 설명: 특정 기능 개발을 위해 개별적으로 생성되는 브랜치입니다. 기능이 완료되면 dev 브랜치로 병합됩니다.
  • 규칙1: 각 기능 작업에 대해 이슈를 생성하여 작업 내용과 예상 완료일을 작성하고 팀원과 공유하여 소통합니다.
  • 규칙2: feature/#이슈번호, refactor/#이슈번호 등을 따릅니다.
  • 규칙3: GitHub와 Discord를 연동하여 알림을 받고, 푸시, PR, 이슈를 관리하여 빠르게 피드백을 제공합니다.

1. 사용한 라이브러리

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 서비스입니다. 실시간 날씨 정보, 예보 데이터를 가져올 수 있어, 날씨 관련 기능 구현에 유용합니다.

2. 주요 화면

2.1 메인화면

  • 실시간 날씨 정보: 상단에 사용자의 현재 위치를 기반으로 한 실시간 날씨 정보 제공
  • 라이브 커머스: 판매자가 직접 진행하며 제품을 실시간으로 보여주고 판매할 수 있는 라이브 커머스 기능 제공
  • 카테고리와 상품 진열: 아기자기한 카테고리로 나뉘며, 신제품, 식집사 필수템, 이달의 추천 식물, 베스트셀러 등 타이틀에 맞는 상품들을 진열

메인 화면


2.2 상품 상세 화면

  • 실시간 채팅 기능: 구매자가 실시간으로 판매자와 1:1 채팅을 통해 문의할 수 있는 기능 제공
  • 구매자 리뷰: 상품 구매자만 남길 수 있는 리뷰 기능 제공

상품 상세 화면


2.3 장바구니 화면

  • 호버 기능: 메인 페이지에서 상품 카드에 호버 시, 장바구니와 결제 아이콘이 표시되며, 외각 클릭 시 상세 페이지로 이동
  • 장바구니 기능: 상세 페이지에서도 장바구니에 담기와 결제가 가능

장바구니 화면


2.4 구매자 마이페이지

  • 구매 내역 확인: 주문 내역을 확인할 수 있는 구매 내역 카테고리 제공
  • 회원정보 수정: 회원정보(이름, 주소, 전화번호) 수정 가능
  • 판매자 전환: 사업자 번호, 대표자 성명, 상호명, 개업일자를 입력하여 인증할 경우 판매자 계정으로 전환 가능

구매자 마이페이지

2.5 판매자 마이페이지

  • 판매 관리: 주문 내역과 판매 중인 상품, 회원정보로 구성된 카테고리 제공
  • 회원정보 수정: 회원정보(이름, 주소, 전화번호) 수정 가능
  • 상품 관리: 판매중인상품에서 상품 등록과 수정 가능

판매자 마이페이지

그 외 결제, 1:1채팅, 판매자 인증, 라이브 스트리밍등 추가적인 기능들이 있습니다

사이트 구경하시면 만나 볼 수 있습니다.

  • LeafyLink

About

내배캠 최종팀프로젝트

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •