UI 기능 명세서
참고 자료
메인 페이지
메인 페이지 기능명세서
번호
UI명
기능
상세
비고
2
술장고 별 레시피 페이지로 이동
-
Hover Event:
- 영역 확장
- Click Event:
- 영역 최대 확장
- 페이지 설명
- 비로그인상태: 로그인 폼 표시
- 로그인상태: 페이지 이동 버튼 표시-
ContextAPI 로그인 여부 확인로그인 페이지
로그인 페이지 기능명세서
번호
UI명
기능
상세
비고
1
KaKao OAuth로 로그인
- 가입 유저시, 이전 페이지로 이동
- 미가입 유저시, 회원가입 페이지로 이동
- OAuth redirect path를 해당 페이지로 설정
- 해당 페이지에 접근시, Query String 값을 확인하여 Access Token 있는지 확인.
- Access Token이 있다면 서버로
POST login
- 서버로부터 로그인 성공 응답시, 페이지 이동
- 로그인 페이지 이전 페이지 Url session storage에 저장. 이전 페이지 이동시 활용회원가입 페이지
회원가입 페이지 기능명세서
번호
UI명
기능
상세
비고
테마별 추천 페이지
테마별 추천 페이지 기능명세서
번호
UI명
기능
상세
비고
1
대분류 선택
-
vertical carousel
- Scrollable
- 상/하 버튼으로 항목 변경 가능
- 이전/ 다음 카드: Text만 보이는 형태로 배치하여 다음 카드 암시
- 캐러셀 전환시 Text를 제외한 부분 비가시화. 전환 완료되면 가시화
- 대분류 카드 종류:
MBTI, Color, Music, Weather, Mood, Trending
- 전환시
animation
- Query String에 대분류 정보 받아와 initialValue 설정
- 항목 변경시 Query String 값 변경테마별 결과 페이지
테마별 결과 페이지 기능명세서
술장고 재료별 결과 페이지
술장고 재료별 결과 페이지 기능명세서
술장고 재료 수정 모달
술장고 재료 수정 모달 기능명세서
칵테일 상세정보 모달
칵테일 상세정보 모달 기능명세서
번호
UI 요소 명
기능
상세
비고
11
사용자 리뷰 리스트 형태로 표시
- 이미지, 별점, 한줄평 표시
- 이미지 클릭시, 좌측의 칵테일 이미지 해당 이미지로 전환
- sorting을 위해 리뷰에 대한 좋아요 기능 고려
재료 판매처 정보 페이지
재료 판매처 정보 페이지 기능명세서
마이 페이지
마이 페이지 기능명세서
검색 결과 페이지
검색 결과 페이지 기능명세서
404 페이지
404페이지 기능명세서