Home

🥄 HanSpoon

spoonacular 사이트 문제점을 분석하고 개선하는 프로젝트에 대한 기록입니다.

🎓 팀 소개

팀장	팀원	팀원	팀원
박태준	서혜연	이한결	이효원

✨ HanSpoon 프로젝트를 시작한 이유

1. 관리되지 않은 느낌을 주는 허술한 디자인의 기존 spoonacular 사이트
   🌟 디자인을 개선해서 생동감을 주는 사이트로 바꿔보자
2. 동작하지 않는 기능들이 있어서 전반적인 사이트 신뢰성이 떨어졌다.
   🌟 기능을 정상 작동하게 하여 사이트 신뢰성을 올려보자

📝 비즈니스 요구사항

목표

• 다양한 집밥 레시피에 대한 관심과 요구의 증대에 따라, 자세한 레시피를 제공하는 사이트를 만든다.
• spoonacular API를 사용하여, 사용자에게 더 필요한 기능과 재미요소를 부여한 사이트로 개편한다.
• 기존 spoonacular 사이트에서 동작하지 않는 기능과 디자인을 개선한다.

기대 효과

• 정상적으로 동작하는 기능으로 사이트 신뢰성을 제공한다.
• 사용자에게 눈이 즐거운 경험을 주면서 페이지에 머무는 시간을 늘려 사용성을 개선한다.

🖥 기능 요구사항

• 멀티페이지로 로드되는 사이트를 부드러운 화면전환을 위한 SPA로 만든다.
• 기존 제공되는 new recipe 대신 가장 좋아요 수가 많은 recipe를 메인 페이지에 노출한다.

메인페이지

• 헤더(고정레이아웃): 홈, 검색, 로그인(로그인되어있는 경우 로그아웃), 내 레시피, 카트

  • 홈 로고를 누르면 메인 페이지로 이동해야 한다.
  • 공백이 아닌 검색어를 입력하면 해당 검색어에 관련된 레시피가 목록으로 제공되어야 한다.
  • 로그인 버튼이나 로그인이 필요한 기능 버튼을 누르면 로그인 모달 창이 떠야 한다.
  • 로그인 버튼은 로그인 되어있는 상태에서는 로그아웃 버튼으로 변경되어야 한다.

• 메인

  • 랜덤 레시피 1개의 사진과 제목, summary가 노출되며, REROLL 버튼을 누르면 새로운 랜덤 레시피로 변경되어야 한다.
  • likes가 많은 Recipes를 목록으로 제공해야 한다(API 찾는다면)

• 푸터(고정레이아웃)

  • About
  • Contact
  • SNS
  • Donate

상세페이지

• 홈, 검색, 내 레시피 등에서 레시피 링크를 클릭한 경우 모달창으로 상세페이지가 열려야 한다.
• 상세 페이지 모달창은 우상단의 닫기 버튼으로 닫을 수 있으며 키보드 트랩이 되어야 한다.
• 하단의 버튼을 통해 내 레시피에 추가할 수 있어야 한다.
• 각 재료 우측의 +버튼을 클릭하면 카트에 재료를 담을 수 있어야 한다.(옵셔널)
• 상세 페이지는 다음과 같은 정보를 포함해야 한다.
  • 레시피 제목
  • 레시피 사진
  • 요리 타입(vegetarian, healthy 등)
  • 좋아요 숫자(컬렉션에 추가한 횟수)
  • 요리가 완료되는 시간
  • 요약 설명
  • 와인 페어링
  • 재료, 필요한 장비
  • 요리 순서
  • 영양소 정보(표)
  • 비슷한 요리

검색 결과 페이지

• 헤더에서 검색어를 입력하면 레시피 검색 결과가 카드 형태로 노출되어야 한다.
• 페이지네이션을 구현한다.

카트 페이지 (필요 재료 목록, ToDoList처럼)

• 로그인된 유저는 카트에 담은 재료 정보가 저장되어야 한다.
• 로그인하지 않은 유저도 카트에 담은 재료 정보가 보여야 한다(로컬스토리지 이용).
  • 페이지를 벗어나면 정보가 삭제된다.
  • 페이지를 벗어나기 전 로그인하면 유저의 기존 카트에 더해진다.
• 카트에는 재료의 개수를 counter로 지정할 수 있고, 이에 따라 예상 금액이 산출되도록 한다.
• 재료는 삭제, 구입완료, 구입완료제품삭제 등으로 관리할 수 있어야 한다.

마이 레시피 컬렉션 페이지 (레시피)

• 로그인한 유저의 찜한 레시피가 저장되도록 한다.
• 레시피를 삭제할 수 있다.

컴포넌트

• 헤더
  • 로고
  • 검색
  • 햄버거
• 레시피 카드
• 랜덤 레시피
• 버튼
• 상세 모달
  • 아코디언
  • 뱃지
• 로그인/회원가입 모달
• 푸터
• dim

업무분장

1. 로그인/회원가입(한결)
2. 상세 모달(혜연)
3. 헤더, dim(효원)
4. 레시피 카드, 버튼, 푸터, 랜덤 레시피(태준)

프로토타입

프로토타입 바로가기

🌍 UseCase

UseCase 확인하기

📚 사용 기술

🛠 권장사양

• IE를 지원하지 않으며 크롬 브라우저 사용을 권장합니다.

🪄 컨벤션

• 컨벤션 문서

📅 전체일정

Sprint1(1/10 ~ 1/14)

• 전역 상태 관리가 필요없는 기본 API호출만 홈, 검색결과, 상세 페이지만 구현

Sprint2(1/17 ~ 1/21)

• 인증관련 구현으로 접근 가능한 곳, 불가능 한 곳을 나누고 DB연결

Sprint3(1/24 ~ 1/28)

• 오류 검수, 추가 기능 구현, 리팩토링

🎯 데일리 스크럼

애자일 프로세스

• 오전(10시~12시)
  • 각자의 바이오리듬에 맞게 휴식 또는 공부
• 오후(13시~18시)
  • 티타임 - 스터디, 개발 내용 공유, 이슈 공유, 코드 리뷰
  • 이슈 생성 후 집중 코딩 시간
  • 저녁 시간 전 PR
• 저녁(19시~22시)
  • 데일리 스크럼(15분) - 백로그 관리, 오늘/내일 한 일 정리 및 반성
  • Wiki 스크럼 기록
  • 집 가기전에 PR