🐶 댕글 🐾

LG 유플러스 유레카 SW 교육과정 1기 최종 융합 프로젝트 최우수상 🏆 수상

댕글 🐾 은 반려견을 위한 견적 매칭 플랫폼입니다.
반려견 미용 서비스✂️ 와 동물병원🏥 가격비교 및 예약 서비스를 제공합니다.

서비스 이용해 보기 🔗

Type	URL
🐾 일반 사용자	www.daengle.com (서비스 종료)
✂️ 미용사	https://groomer.daengle.com (서비스 종료)
🏥 동물병원	https://vet.daengle.com (서비스 종료)
📖 Storybook	https://ddog-org.github.io/daengle-client

서비스 소개

Daengle 주요 기능

로그인 및 회원가입(온보딩)

• 카카오톡으로 회원 가입 및 로그인을 진행할 수 있습니다.
• 이용약관을 통해 서비스 정책과 유의 사항을 확인할 수 있습니다.
• 온보딩 시 사용자의 기본적인 정보와 반려견 프로필을 등록합니다.
• 유효성 검사를 통해 올바른 형식의 정보를 입력했는지 확인할 수 있습니다.

사용자 및 반려견 프로필 관리

• 사용자의 닉네임을 변경할 수 있습니다.
• 반려견의 프로필을 등록 / 수정 / 삭제 할 수 있습니다.
• 반려견의 탄생년도, 성별, 중성화 여부, 품종, 몸무게, 특이사항 등을 입력하여 편리하게 견적서를 작성할 수 있습니다.

견적서 작성 및 요청

• 사용자는 등록한 반려견의 프로필을 통해 견적서를 작성할 수 있습니다.
• 희망 예약 날짜 및 시간, 원하는 미용 스타일 또는 증상을 입력하여 견적서를 요청할 수 있습니다.

견적서 조회 및 카카오톡 알림 기능

• 새로운 견적서를 받은 경우 카카오톡 알림을 받을 수 있습니다.
• 받은 견적서 목록을 확인할 수 있습니다.
• 상세 내용을 확인할 수 있습니다.

미용샵 / 병원 목록 조회 및 검색

• 메인 화면에서 주변의 미용샵 및 병원 목록을 조회할 수 있습니다.
• 마음에 드는 곳을 선택하여 견적서를 전송할 수 있습니다.
• 미용샵 또는 병원 이름을 키워드로 검색할 수 있습니다.

미용샵 / 병원 상세 조회

• 미용샵 또는 병원의 상세 정보를 조회할 수 있습니다.

예약금 결제 & 예약 확정

• 여러 견적서를 확인하고 예약을 진행할 수 있습니다.
• 예약 일시와 금액, 예약자 정보를 확인한 후 포트원 모듈을 통해 실제 결제를 진행할 수 있습니다.

예약 내역 조회 및 상세 조회

• 사용자는 미용샵 및 병원 예약 내역을 조회할 수 있습니다.
• 각 예약의 상세 내용 및 견적서를 확인할 수 있습니다.

1:1 채팅

• 원하는 미용사 및 병원과 1:1 채팅을 진행할 수 있습니다.
• 지정 예약시 예약 관련 내용을 직접 논의할 수 있습니다.

리뷰 관리

• 사용자는 예약 진행 후 리뷰를 작성할 수 있습니다.
• 리뷰 작성 시 별점과 키워드를 선택하고 이미지를 첨부하거나 텍스트를 작성할 수 있습니다.
• 사용자는 자신이 작성한 리뷰 목록을 조회할 수 있습니다.
• 기존에 작성한 리뷰를 수정하거나 삭제할 수 있습니다.

결제 및 내역 관리

• 사용자는 결제 내역과 상세 내역을 확인할 수 있습니다.

미용샵 / 병원 주요 기능

로그인 및 가입 인증

• 카카오톡으로 회원 가입 및 로그인을 진행할 수 있습니다.
• 미용사는 이름, 휴대폰 번호, 매장명, 매장 위치를 입력하고 자격증을 첨부하여 가입 승인을 기다립니다.
• 병원은 병원명, 병원 위치, 전화번호를 입력하고 사업자등록증 또는 근로소득증명서를 첨부하여 가입 승인을 기다립니다.
• 가입 승인 후 서비스를 이용할 수 있습니다.

받은 견적서 목록 조회 및 상세 조회

• 미용사 및 병원은 전체 견적서와 지정 견적서로 나누어 견적서 목록을 조회할 수 있습니다.
• 전체 견적서 탭에서는 동네 기반으로 작성된 견적서 목록을 조회할 수 있습니다.
• 지정 견적서 탭에서는 본인에게 지정된 견적서 목록을 조회할 수 있습니다.

프로필 관리

• 미용사와 병원은 상세 정보를 등록하거나 수정할 수 있습니다.

리뷰 관리

• 미용사와 병원은 받은 리뷰 목록을 조회할 수 있습니다.
• 받은 리뷰 목록에서 리뷰를 선택해 신고할 수 있습니다.

예약 관리

• 하단의 예약 탭에서 날짜별 예약 목록을 확인할 수 있습니다.
• 예약 상세 내역 및 견적서 상세 내용을 확인할 수 있습니다.

기술 스택

• Turborepo
• Next.js, React
• emotion
• Zustand, Tanstack-query
• Storybook

프론트엔드 아키텍처

협업 과정

• 프론트엔드 컨벤션
• Git 컨벤션

프로젝트 구조

.
├── README.md
├── apps
│   ├── daengle
│   ├── groomer
│   ├── storybook
│   └── vet
├── packages
│   ├── core
│   │   ├── design-system
│   │   ├── eslint-config
│   │   ├── stylelint-config
│   │   └── typescript-config
│   └── services
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
└── turbo.json

패키지 설명

• apps/daengle 일반 사용자들이 이용하는 서비스입니다.
• apps/groomer 미용사들이 이용하는 서비스입니다.
• apps/vet 동물병원이 이용하는 서비스입니다.
• packages/core/design-system 프로젝트 공통으로 사용되는 디자인 컴포넌트 패키지입니다.
• packages/core/eslint-config 프로젝트 공통으로 사용되는 ESLint 설정 관련 패키지입니다.
• packages/core/stylelint-config 프로젝트 공통으로 사용되는 Stylelint 설정 관련 패키지입니다.
• packages/core/typescript-config 프로젝트 공통으로 사용되는 TypeScript 설정 관련 패키지입니다.
• packages/services 프로젝트 공통으로 사용되는 서비스 코드를 모아놓은 패키지입니다.

로컬 실행 방법

• 본 프로젝트에서는 20.17.0 버전을 사용하므로 nvm을 이용하여 노드 버전을 맞춰 주세요!

  node --version

  • 만약 버전이 다르다면 nvm을 이용하여 node 버전을 변경합니다.
• 아래 코드는 클론 후 최초 1번만 실행합니다.

  npm install -g [email protected]
  pnpm install

• 서버를 실행합니다.
  • 모든 서비스가 각각 다른 포트번호로 실행됩니다.

    pnpm dev

  • 사용자 서비스(daengle)를 실행합니다.

    pnpm daengle

  • 미용사 서비스(groomer)를 실행합니다.

    pnpm groomer

  • 병원 서비스(vet)를 실행합니다.

    pnpm vet

프론트엔드 팀원 정보

김주현	고윤정	김윤일	문소연