📄

UI 기능 명세서 2차

UI 기능 명세서

참고 자료

화면설계서 (Wireframe)와 기능명세서 (Functional Specification)

메인 페이지

로그인 페이지

회원가입 페이지

테마별 추천 페이지

테마별 결과 페이지

술장고 재료별 결과 페이지

술장고 재료 수정 모달

칵테일 상세정보 모달

재료 판매처 정보 페이지

마이 페이지

검색 결과 페이지

404 페이지

Tags

UI

Status

UI

메인 페이지 기능명세서

번호

UI명

기능

상세

비고

1

테마 별 레시피 컨테이너

테마 별 레시피 페이지로 이동

- Hover Event: - 영역 확장 - Click Event: - 영역 최대 확장 - 페이지 설명 및 이동 버튼 표시

2

술장고 별 레시피 컨테이너

술장고 별 레시피 페이지로 이동

- Hover Event: - 영역 확장 - Click Event: - 영역 최대 확장 - 페이지 설명 - 비로그인상태: 로그인 폼 표시 - 로그인상태: 페이지 이동 버튼 표시

- ContextAPI 로그인 여부 확인

3

돌아가기 버튼

영역 확장 이전으로 복귀

로그인 페이지 기능명세서

번호

UI명

기능

상세

비고

1

KaKao 로그인

KaKao OAuth로 로그인

- 가입 유저시, 이전 페이지로 이동 - 미가입 유저시, 회원가입 페이지로 이동

- OAuth redirect path를 해당 페이지로 설정 - 해당 페이지에 접근시, Query String 값을 확인하여 Access Token 있는지 확인. - Access Token이 있다면 서버로 POST login - 서버로부터 로그인 성공 응답시, 페이지 이동 - 로그인 페이지 이전 페이지 Url session storage에 저장. 이전 페이지 이동시 활용

2

Google 로그인

Google OAuth로 로그인

- 위와 상동

3

메인 로고 버튼

메인 페이지로 이동

회원가입 페이지 기능명세서

번호

UI명

기능

상세

비고

1

닉네임 Input

닉네임 입력

- 닉네임 중복 validation 체크

- API

2

성별 Input

남 / 녀 선택

- 중복 선택 불가

- radio

3

나이 Input

나이 입력

- 20세 ~150세 나이 제한

- validation

4

MBTI Input

MBTI 입력

- 중복 선택 불가 MBTI 종류

- select

5

완료 버튼

회원가입 정보 전달

- 진행 상태 4단계 시 활성화

- API

6

취소 버튼

이전 페이지 이동

-

7

메인 로고 버튼

메인 페이지 이동

-

회원가입 진행 상태

회원 정보 기입 여보 상태 표시

- 잔에 물이 차오르는 4단계의 형태로 진행 상태 표시

테마별 추천 페이지 기능명세서

번호

UI명

기능

상세

비고

헤더

상동

1

대분류 캐러셀

대분류 선택

- vertical carousel - Scrollable - 상/하 버튼으로 항목 변경 가능 - 이전/ 다음 카드: Text만 보이는 형태로 배치하여 다음 카드 암시 - 캐러셀 전환시 Text를 제외한 부분 비가시화. 전환 완료되면 가시화 - 대분류 카드 종류: MBTI, Color, Music, Weather, Mood, Trending

- 전환시 animation - Query String에 대분류 정보 받아와 initialValue 설정 - 항목 변경시 Query String 값 변경

2

소분류 캐러셀

소분류 선택

- 대분류에 따라 소분류 종류 변경

- 위와 상동

3

다음 버튼

테마별 결과 페이지로 이동

- 현재 선택 상태 값 결과 페이지에 전달

- 이동시 Query String에 대분류 소분류 정보 포함

4