FE 요구사항 분석

FE 요구사항 분석

요구사항

• 앞선 기획서의 내용대로 개발한다.
• TABUI(베스트반찬)은 선택기능이다. 필수로 개발하지 않는다. (기획서 6페이지)
• 로그인UI는 만들지 않는다. 하지만 메인 화면 접속시 하드코딩된 id/pw정보를 넘겨주고 서버에서 인증처리가 되도록 한다.

프로그래밍 요구사항

• React framework 기반으로 개발한다.
• CRA(Create React App) 을 사용해서 기본 개발 환경을 구성한다. (짜잔~ 웹팩설정이 필요 없다)
• 상태 관리가 필요한 경우 useState 를 사용해서 관리한다.
• 모든 React 컴포넌트 형태는 클래스 형태가 아니고, 함수 형태로 개발한다.(functional component)
• React기반 스타일링은 emotion과 같은 'css in js' 방식의 라이브러리를 사용한다. 가장 인기있는 라이브러리를 찾아서 사용한다.
• Slide 기능은 라이브러리를 사용할 수 있다.
• 3가지 반찬 종류의 슬라이드 UI를 구성하기 위해서 서버에 3개의 API요청을 병렬로 각각 보내야 한다.

선택 요구사항

• React slide 컴포넌트 제작
• React에서 동작가능한, slide component를 직접 개발한다.
• 개발한 코드를 NPM으로 등록해본다.

상세 기능 요구사항

#	기능	상세
13	개발환경 구축	- CRA(Create React App) 을 사용해서 기본 개발 환경을 구성한다. - React기반 스타일링은 emotion과 같은 'css in js' 방식의 라이브러리를 사용한다. 가장 인기있는 라이브러리를 찾아서 사용한다.
18	컴포넌트 계층 구조 나누기	- 메인 페이지, 상세 페이지의 요소들을 컴포넌트 계층 구조로 나누기
19	메인 페이지 HTML 마크업	- 스타일 제외, 마크업 구조만 jsx 문법을 사용해 계층 구조를 기반으로 구현해보기
20	상세 페이지 HTML 마크업	- 스타일 제외, 마크업 구조만 jsx 문법을 사용해 계층 구조를 기반으로 구현해보기
21	메뉴 레이어 CSS-IN-JS 스타일링	- 메뉴(밑반찬,국찌개..)에 마우스를 올리면 레이어가 노출된다. - 각 메뉴의 하위 텍스트(이유식 초기/중기)에 마우스를 올리면 해당 텍스트 색깔이 변경되고 밑줄이 생긴다. - 마우스가 메뉴 영역을 벗어나면 노출된 레이어가 사라진다.
22	슬라이더 CSS-IN-JS 스타일링	- 동그란 메뉴에(1번) 마우스를 올리면 새벽배송/전국택배라는 글자를 노출한다. 동시에 배경에 있는 이미지는 검은색으로 처리되어 글자가 더 잘 보이도록 한다. - 가격정보는 할인전 가격이 있으면 함께 표시해야 한다. 할인이 아닐 경우, 정상 가격만 표시한다. - 이벤트 배지가 있는 경우 이를 노출한다.
23	상세 페이지 CSS-IN-JS 스타일링	- 메인화면에 노출된 각 반찬을 클릭하면, 상세페이지가 화면 가운데 노출된다. - 상세페이지는 별도의 페이지가 아닌, 현재 페이지에서 추가레이어 노출된다. - 상세페이지의 모든 내용은 데이터요청을 통해서 노출해야 한다.
24	메인 페이지 State 설정	- 애플리케이션에서 필요로 하는 변경 가능한 state의 최소 집합을 생각해보기
25	상세 페이지 State 설정	- 애플리케이션에서 필요로 하는 변경 가능한 state의 최소 집합을 생각해보기
26	메인 페이지 슬라이딩 효과 구현	- 좌/우버튼을 누르면 애니메이션이 되면서 좌/우로 화면이 이동되며 새로운 메뉴 4개가 노출된다. 메뉴 갯수가 4의 배수로 떨어지지 않을때는 4칸씩 이동하는 방식에서 예를들어 1칸씩 이동으로 동작될 수 있어야 한다.
27	(선택) 베스트 반찬 노출 TAB UI 개발	- 베스트반찬은 TAB UI로 만든다. - 처음에는 랜덤하게 특정메뉴가 선택되어져서 보여진다. - 모든 화면에 필요한 데이터는, 로딩 이후에 Ajax를 통해서 가져와서 노출한다.