[FE] 유저 플로우 차트 - 100-hours-a-week/KTB4-5th-wiki GitHub Wiki

유저 플로우

다먹자는 사용자가 냉장고 재고를 등록하고 관리하는 기본 흐름에서 시작하여, 유통기한 관리와 냉장고 공유, AI 요리 추천 기능으로 확장됩니다. 유저 플로우는 구현 범위에 따라 V1부터 V3까지 단계별로 구분했습니다.

V1 — 기본 재고 관리

서비스의 핵심 사용 흐름을 구현합니다.

  • 로그인 및 계정 생성 → 홈 진입
  • 재료 직접 입력 → 중복 및 등록 한도 확인 → 냉장고에 저장
  • 재고 목록 조회 → 검색·필터·정렬 → 상세 조회 및 수정·삭제
  • 유통기한 임박·만료 알림 확인 → 해당 재고 조회 및 만료 재료 정리

재고가 없는 경우에는 빈 화면에서 재료 등록으로 연결하며, 입력 오류나 등록 한도 초과 시 저장하지 않고 사용자에게 원인을 안내합니다.

V2 — 입력 방식과 협업 기능 확장

V1의 재고 관리 흐름을 유지하면서 인증과 등록 방식을 확장합니다.

  1. OAuth 로그인 → 신규 사용자 약관 동의 → 정보 입력 → 알림 설정
  2. 영수증 촬영 → OCR 분석 → 인식 결과 확인·수정 → 유통기한 입력 → 일괄 등록
  3. 마이페이지 → 개인·알림 설정 및 만료 재고 일괄 정리
  4. 냉장고 초대 코드 생성·입력 → 유효성 확인 → 공유 냉장고 참여 및 전환

OCR 결과가 없거나 잘못 인식된 경우에는 재촬영 또는 직접 입력으로 전환할 수 있으며, 공유 코드가 만료되거나 참여 조건을 충족하지 못하면 재입력을 안내합니다.

V3 — AI 추천 및 재고 연계

보유 재료를 활용한 요리 추천과 재고 차감 흐름을 추가합니다.

  • 실물 재료 촬영 → 이미지 인식 → 결과 확인·수정 → 재고 등록
  • 홈·추천 탭·알림 → 보유 재료 기반 AI 추천 생성 → 추천 목록 조회
  • 추천 요리 선택 → 필요 재료와 조리 과정 확인 → 차감 전후 수량 확인 → 재고 차감
  • 추천 결과 없음·생성 중·요청 실패·일일 생성 한도 도달 상태를 각각 구분하여 안내

요리 적용 후 재고와 통계 정보는 갱신하지만, AI 추천 목록은 즉시 다시 생성하지 않습니다. 변경된 재고를 기준으로 다음 추천 진입 시 갱신하여 불필요한 AI 호출과 일일 생성 횟수 소모를 줄입니다.


V1 — 기본 재고 관리

앱 실행 후 세션 확인과 로그인을 거쳐 홈으로 진입하고, 재료 등록·재고 관리·유통기한 알림·마이페이지로 이동하는 전체 흐름입니다. V1에서는 직접 입력을 통한 재고 등록과 개별 재고 관리에 집중합니다.

0. MVP 기능

  • 회원가입
    • 아이디 · 비밀번호만 입력
    • 아이디가 없으면 비밀번호를 입력해 로그인 시도 시 자동 회원가입
    • 아이디·비밀번호 찾기 기능 없음
    • 아이디가 닉네임이 됨
  • 금칙어는 slang.csv 참고
  • 재고 관리
    • 냉장고 이름은 아이디_냉장고
  • 식재료 등록 (최대 100종)
    • 직접 입력으로 재료 등록
  • 재고 목록 조회 (필터)
  • 재고 상세 · 수정
  • 알림
    • 유통기한 임박 재료 알림
    • 유통기한 만료 재료 알림
    • 알림 읽음 처리
    • 최대 99개 제한 → 오래된 것부터 삭제
  • 유통기한이 만료된 재료를 만료 버튼으로 냉장고에서 제거
  • 마이페이지
    • 로그아웃

1-1. 로그인 페이지 (AUTH)

아이디와 비밀번호의 형식을 검증한 후 기존 계정 여부를 확인합니다. 기존 계정은 비밀번호 확인 후 로그인하고, 처음 사용하는 아이디라면 계정과 개인 냉장고를 자동으로 생성한 뒤 홈으로 이동합니다.

1-2. 홈페이지 (MAIN)

세션이 유효하면 홈으로 진입하며, 냉장고에 등록된 재고가 있는지에 따라 기본 화면과 빈 상태 화면으로 구분됩니다. 빈 상태의 등록 버튼과 기본 화면의 등록 탭은 모두 재고 등록 방식 선택 화면으로 연결됩니다.

1-3. 재고 등록 (REG)

사용자가 재료명·수량·단위·유통기한을 직접 입력합니다. 중복 재료는 기존 재고와의 합산 여부를 확인하고, 재고 종류가 100개를 초과하지 않는 경우 저장한 뒤 냉장고 목록으로 이동합니다.

1-4. 냉장고 관리 · 재고 상세 (STOCK)

냉장고에 등록된 재고를 검색·필터·정렬하여 조회하고, 항목을 선택하면 상세 정보를 확인할 수 있습니다. 상세 화면에서는 재고 수정·삭제·만료 처리를 수행하며, 처리 후 최신 재고 목록을 다시 반영합니다.

1-5. 유통기한 및 알림 (NOTI)

시스템이 정해진 시각에 재고의 유통기한을 확인하여 새로운 임박·만료 상태가 발생한 경우 알림을 생성합니다. 사용자는 알림에서 관련 재고 목록으로 이동하여 임박 재료를 확인하거나 만료 재료를 정리할 수 있습니다.


V2 — 입력 방식과 협업 기능 확장

2-0. 변경사항 체크

V2에서는 기존 인증 방식이 OAuth 인증과 온보딩으로 교체됩니다. 또한 영수증 OCR 등록, 재료 검색, 만료 재고 일괄 정리, 개인 설정과 냉장고 공유 기능이 추가됩니다.

  • 로그인 OAUTH 기능
    • Kakao, Google (카카오 우선순위)
  • 카테고리, 재료 검색 기능
  • 영수증(OCR 처리)로 재고 등록
  • 알림 페이지 내 만료된 재료들 리스트 처리해주는 기능
  • 마이페이지 설정
    • 냉장고 공유 기능
    • 개인 설정
    • 알림 상세 설정

2-1. 로그인 페이지 (AUTH)

카카오 또는 구글 OAuth 인증 후 신규 사용자와 기존 사용자를 구분합니다. 기존 사용자는 바로 홈으로 이동하고, 신규 사용자는 약관 동의·닉네임 입력·알림 설정을 완료한 뒤 계정과 냉장고를 생성합니다.

2-2. 홈 (MAIN)

재고 유무에 따라 빈 상태와 기본 상태를 구분하고, 탭과 등록 버튼을 통해 주요 기능으로 이동합니다. V2에서는 홈에 만료 재고 요약 정보가 추가되며, 추천 기능은 아직 제공하지 않습니다.

2-3. 재고 등록 (REG)

등록 가능한 품목 수를 먼저 확인한 뒤 직접 입력 또는 영수증 촬영 방식을 선택합니다. 영수증을 촬영하면 OCR 분석 결과를 확인·수정하고 유통기한을 입력한 뒤 여러 재료를 일괄 등록합니다.

OCR 결과가 없으면 재촬영하거나 직접 입력으로 전환할 수 있으며, 작성 중 이탈할 경우 입력 내용을 유지할지 폐기할지 확인합니다.

이때, AI가 실패하거나 인식 / AI 예상(식재료는 식별했지만 날짜가 이미지에 없어 MySQL의 검증된 보관기간 자료로 기간을 추정함) / 확인 필요(일부 값 누락, 낮은 화질, 모델 간 충돌, 비정상 날짜 등으로 자동 확정할 수 없음) / 미인식(입력 유형 또는 식재료를 식별할 근거를 찾지 못함) 등 다양한 상태들을 확인해줘야합니다.

2-4. 냉장고 관리 · 재고 상세 (STOCK)

V1의 재고 조회·수정·삭제 흐름을 유지하면서 카테고리 검색과 필터 기능을 확장합니다. 재고 변경 후에는 서버 데이터를 다시 조회하여 유통기한과 D-day 상태를 최신 정보로 표시합니다.

2-5. 유통기한 · 알림 (NOTI)

현재 선택한 냉장고의 임박·만료 재고를 기준으로 알림과 요약 정보를 제공합니다. 사용자는 알림 목록에서 임박·만료 재고로 이동하고, 여러 만료 재료를 한 번에 정리할 수 있습니다.

2-6. 마이페이지 · 냉장고 공유 (MY)

마이페이지에서 닉네임·프로필 사진·알림 설정을 변경하고 이번 달 만료 재고를 확인할 수 있습니다. 냉장고 방장은 초대 코드를 생성하고, 참여자는 코드를 입력하여 공유 냉장고에 참여합니다.

냉장고를 전환하면 이후 재고 조회·등록·알림은 현재 선택된 냉장고를 기준으로 처리됩니다.


V3 — AI 추천 및 재고 연계

3-0. 변경사항 체크

  • AI 품질 개선
  • 미구현 기능 개발
  • 오류 검증
  • 보유 재료 기반 AI 추천
    • 임박 재료 우선 추천
    • 레시피 선택하면 레시피에 들어가는 재료 냉장고에서 제거
    • AI 오류·결과 없음 처리
    • 요리 상세 조회
  • 실물 사진으로 재고 등록
  • 알림에서 요리 추천 페이지로 가는 기능

3-1. 인증 · 온보딩 (AUTH)

V2에서 구성한 OAuth 인증과 신규 사용자 온보딩 흐름을 유지합니다. 기존 사용자는 인증 후 홈으로 이동하고, 신규 사용자만 약관·정보 입력·알림 설정 단계를 진행합니다.

3-2. 홈 (MAIN)

기존 재고 상태와 만료 요약 정보에 AI 추천 요약 영역이 추가됩니다. 사용자는 홈의 추천 카드 또는 추천 탭을 통해 전체 추천 목록과 요리 상세 화면으로 이동할 수 있습니다.

3-3. 재고 등록 (REG)

직접 입력과 영수증 촬영 외에 식재료 실물 사진 촬영 방식이 추가됩니다. 사진 분석 후 인식 결과를 확인·수정하고 유통기한을 지정하는 과정은 기존 OCR 등록 화면을 공통으로 사용합니다.

3-4. 냉장고 관리 · 재고 상세 (STOCK)

기존 재고 관리 기능을 유지하면서 실물 사진으로 등록한 재료와 요리 적용으로 변경된 재고까지 함께 관리합니다. 수정·삭제·차감 후에는 재고 목록과 관련 통계에 최신 상태를 반영합니다.

3-5. 유통기한 · 알림 (NOTI)

임박·만료 재고는 서비스 내부 알림으로 제공하고, 추천 요리 알림은 휴대전화 푸시 알림으로 구분합니다. 임박 알림에서는 재료 상세뿐 아니라 해당 재료를 활용할 수 있는 추천 요리로도 이동할 수 있습니다.

3-6. 마이페이지 · 냉장고 공유 (MY)

V2의 개인 설정과 냉장고 공유 흐름을 유지합니다. 공유 냉장고에서 발생한 재고 등록·수정·차감은 현재 선택된 냉장고를 기준으로 모든 참여자에게 반영됩니다.

3-7. AI 추천 목록 (REC)

추천 탭·홈 추천 영역·추천 알림을 통해 추천 목록으로 진입합니다. 기존 추천 결과와 재고 변경 여부, 냉장고별 일일 생성 한도를 확인한 뒤 필요한 경우에만 새로운 AI 추천을 생성합니다.

추천 결과는 준비 중·조회 성공·결과 없음·조회 실패·생성 한도 초과 상태로 구분합니다. 정상 결과는 임박 재료 사용 수, 보유 재료 활용도와 부족 재료 수를 기준으로 정렬하여 제공합니다.

3-8. 요리 상세 · 재료 차감 (REC-002 / REC-002-1)

요리 상세에서 필요한 재료의 보유 여부와 조리 과정을 확인한 뒤 해당 요리를 적용할 수 있습니다. 차감 전 확인 화면에서 각 재료의 차감 전후 수량과 삭제 예정 항목을 안내하고, 사용자 확인 후 냉장고 재고에 반영합니다.

일부 재료의 차감에 실패하면 성공한 항목은 유지하고 실패한 항목과 원인을 안내합니다. 차감 후 재고와 통계는 갱신하지만 추천 목록은 즉시 다시 생성하지 않습니다.