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을 위해 리뷰에 대한 좋아요 기능 고려
