두잇투게더 (Do it Together)

🔗 배포 링크

두잇투게더 바로가기

📱 프로젝트 소개

• 타겟 고객

  집안일을 공평하게 분담하고 관리하려는 공동 생활 공간의 사람들

• 제공 가치

  가사분담의 갈등을 해결하고, 집안일의 효율적인 관리와 협력적인 팀워크 촉진

• 프로젝트 구조

  

🛠 주요 기능

1. 집안일 관리

• 간편한 집안일 등록 및 관리
• 완료/미완료 체크 기능
• 그룹원 간 칭찬하기/찌르기 상호작용

2. AI 기반 선호도 분석

• 4가지 질문 기반 성향 분석
• OpenAI GPT 활용 키워드 도출
• 맞춤형 집안일 할당

3. 통계 시스템

• 주간/월간 통계 제공
• 4단계로 완료 단계 시각화
• 잔디를 통한 월간 현황 확인
• MVP 선정 시스템

4. 그룹 관리

• 편리한 그룹 초대 시스템
• 커스텀 가능한 프리셋 관리
• 체계적인 권한 관리

👥 팀원 소개

Frontend

박아영	고종원	육은별	이가은
ayoung26	Eugeeun	yookeunbyul	Commeci

Backend

민성훈	정예찬	허은정
shmin98	skfk286	eundeang

Design

송호윤	정다은
wozzzzzzz	danaray00

🔧 기술 스택

Frontend

Backend

담당 업무(프론트엔드)

• 온보딩(OpenAI GPT 기반 청소 성향 키워드 추출) 구현

  

  • 토스의 퍼널(Funnel) 패턴을 적용해 4단계 설문을 단일 페이지에서 지역 상태로 통합 관리

    • 분산된 페이지 흐름과 불필요한 전역 상태 관리 개선
    • 코드의 응집도와 유지보수성 향상

  • Framer-Motion 라이브러리를 활용한 컴포넌트 순차 등장 및 전환 애니메이션 구현

    • 부드러운 시각적 흐름 형성과 사용자의 몰입도 향상

  • Shadcn으로 공통 컴포넌트 제작 및 프로젝트 맞춤 커스터마이징

  • Storybook을 통한 UI 컴포넌트 문서화 및 시각화로 협업 효율성 향상

  • Lottiefiles의 dotlottie-react 라이브러리로 온보딩 UI에 애니메이션 구현

    • 디자이너와의 협업을 통해 직관적이고 매력적인 온보딩 경험 제공

• 집안일 추가 및 수정 구현

  

  • 집안일 수정 시 useEffect로 인한 UI 플래시 현상 발생

    • 전역 상태 관리를 통한 데이터 선행 로드로 UI 플레시 현상 제거 및 사용자 경험 개선
    • Zustand persist 미들웨어로 안정적인 상태 지속성 확보

  • useCallback, React.memo를 활용한 메모이제이션과 API 호출 최적화로 성능 개선

    • 페이지 진입 시 실제 렌더링 시간 1.6ms에서 0.4ms로 단축, 렌더링 횟수 3회에서 1회로 감소

• 검색엔진 최적화(SEO)

  

  • React-Helmet-Async를 활용한 동적 메타태그 관리로 페이지별 검색엔진 최적화
  • robots.txt와 sitemap.xml 구현으로 검색엔진 크롤링 효율 향상
    • Lighthouse SEO 점수 82점에서 100점으로 개선 및 웹 접근성 강화