쓰담쓰담 : 돌봄케어 서비스 매칭플랫폼

언제 어디서든 편하게 돌봄받자

팀원 소개

이름	역할	링크
박제성	팀장, 프론트엔드	깃허브
이선우	프론트엔드	깃허브
이지원	프론트엔드	깃허브
신다원	프론트엔드	깃허브
박현규	프론트엔드	깃허브
허은리	백엔드	깃허브

기술 스택

Frontend

Backend

주요 기능

배포 링크

메인페이지	서비스소개 & 404
회원가입	로그인
게시글 작성, 조회	게시글 수정 및 삭제
전체 게시글 - 필터	전체 게시글 - 검색
마이페이지-회원정보	마이페이지-게시글리스트
신청하기 Form & 채팅창 -돌봄유저	채팅창 -일반유저

기획

1. 프론트 피그마 링크

2. API 명세서 링크

3. ERD

4. 프로젝트 구조

5. 폴더 구조

├── client
│   ├── routers
│   └── views
└── app.js

├── server
│   ├── models
│   ├── dtos
│   ├── routers
│   ├── controllers
│   ├── services
│   ├── repositories
│   ├── middlewares
│   └── utils
└── app.ts

담당 기능

Frontend

박제성

• 게시글 등록기능 구현
  • 돌봄 단기 정기에 따른 스케쥴 등록 React=Datepicker
  • 돌봄 신청 필요정보 (선호성별,연령,시급 및 기타 유의사항)
• 상세페이지 조회
• 게시글 수정, 삭제 구현
  • React-Query Mutate 와 UseQuery invalidate를 삭제 및 수정시 결과반영 실시간

이선우

• user 기능
  • 회원가입
  • 로그인, 로그아웃
  • 마이페이지
• 메시지 채팅방 기능
  • 새 알림 표시
  • 채팅
• 상태관리
  • 로그인
  • 유저 역할(role)

이지원

• MESSAGE(채팅) 파트 기획 및 전체 UI&UX 구현.
• 메시지함 버튼
  • 메시지함 버튼 컴포넌트 레이어 팝업 애니메이션 처리.
• 채팅 리스트
  • 채팅 리스트 UI&UX 구현.
  • (반응형) 브라우저 사이즈 별 채팅창 상하 사이즈 자동 조절 구현.
• 채팅방
  • API 연동 및 Data Mapping 작업.
  • 돌봄메이트 확정 기능.
  • 채팅창 내 확정 알림 메시지 띄우기 구현.
  • 메시지 전송(Send) 기능.(+ input창 초기화, Enter 이벤트, 정규표현식을 활용한 줄바꿈 시 빈내용 치환 등)
• 게시글 상세 페이지 내 신청하기 Form Modal 창.
  • API 연동 및 Data Mapping 작업.
  • 신청하기(Send) 기능. (+ 빈내용 보내기 방지, 100자 이내 입력 처리, 버튼 비활성화 등)

신다원

• 전체 게시글 기획 및 UI/UX
  • 케어 대상에 따른 필터 기능
  • 케어 기간에 따른 필터 기능
  • 타이틀 검색 기능
• 카드 형식의 게시글
  • 찜하기 토글 구현
  • 케어 대상에 따른 UI 처리

박현규

• 메인페이지 기획 및 UI/UX 디자인
  • 카드 클릭시 돌봄유저와 일반유저를 구분하여 라우팅
• 서비스소개 및 404페이지 기획
• MESSAGE 채팅방 나가기 기능 구현
  • 채팅방 나갔을때, 상대방에게 알림 기능 구현

---

Backend

허은리

• API 명세서, ERD, 프로젝트 구조, 폴더 구조 설계
• 라우터 및 서비스 로직 구현
• 회원가입, 로그인, 게시글, 채팅 기능 구현
• nodemailer, redis 활용 이메일 인증 구현
• jwt 토큰 쿠키에 저장하여 보안 설정
• s3 활용 이미지 업로드 구현
• 채팅 기능 롱폴링 방식으로 구현