jonghoske / fe-sprint-coz-shopping

솔로 프로젝트 fe-sprint-coz-shopping

앱 소개

상품 구매 홈페이지로 메인, 상품리스트, 북마크 세 가지 페이지가 나뉘어 있다.

페이지 별 기능 및 구현 현황

헤더 > 좌측 - 로고 회사명 --- 우측 - 드롭 다운 메뉴 [O] 풋터 > 기본적인 데이터 [O] 메인 페이지 > 랜덤한 상품과 북마크된 상품을 각 4개 총 8개를 출력하고 이미지를 누르면 모달창이 나온다. [X] 상품리스트 페이지 > 10개씩 상품이 출력되고 5개의 카테고리 별로 상품이 필터 됨. [X] 무한 스크롤 기능이 있어 스크롤이 내려가면 10개 씩 새로 랜더링 된다. [X] 북마크 페이지 > 상품리스트 페이지에서 북마크에 추가한 상품 리스트 들이 출력된다. [X]

구현한 기능 > 해더, 풋터, 메인페이지 일부 구현(4개 상품리스트, 모달) 미구현 기능 > 상품 페이지, 무한 스크롤, 북마크 페이지

실행 방법

프로젝트를 로컬에서 실행하려면 다음의 단계를 따르세요:

1. 이 레포지토리를 클론합니다.
2. my-app 폴더로 이동합니다.
3. 터미널에서 npm install 명령어를 실행하여 필요한 의존성을 설치합니다.
4. npm start 명령어를 실행하여 개발 서버를 시작합니다.
5. 웹 브라우저에서 http://localhost:3000 주소를 입력하여 웹사이트를 확인합니다.

fe-sprint-coz-shopping's Issues

헤더 만들기 3h

Header

1. 메인 로고 클릭 시 / 페이지(메인 페이지)로 이동해야 합니다. - [ v ]

2. 햄버거 버튼

   2-1. OOO님 안녕하세요! 부분에는 본인의 이름을 넣습니다. - [ v ]

   2-2. 상품리스트: 클릭하면 /products/list 페이지로 이동해야 합니다. - [ v ]

   2-3. 북마크 페이지: 클릭하면 /bookmark 페이지로 이동해야 합니다. - [ v ]

풋터 만들기 1h

Footer

1. 일련의 텍스트 정보들을 넣어줍니다. - [ v ]

북마크 페이지 만들기 8h

상품리스트 만들기 8h

상품 리스트 페이지

1. 서버에서 제공하는 상품 리스트들을 확인할 수 있는 페이지이며, 무한 스크롤을 통해 상품들을 계속 보여줄 수 있어야 합니다.

   • 무한 스크롤은 쿼리 파라미터를 통해 매번 API call을 하는 것이 아닌, 최초 1번의 API call을 통해 전체 데이터를 받아온 후 적용
     합니다.

2. 상품은 각 상품별로 타입이 존재합니다. (상품, 카테고리, 기획전, 브랜드)

3. 상단의 필터 버튼을 통해 상품을 타입 별로 조회해 보여줄 수 있어야 합니다.

4. 각 상품을 클릭하면 해당 상품의 사진을 보여주는 모달을 띄울 수 있어야 합니다.

5. 각 상품에 존재하는 북마크 버튼을 눌러 원하는 상품을 북마크 할 수 있어야 합니다.

6. 이미 북마크 된 상품의 경우, 북마크 버튼이 활성화 되어 있어야 합니다.

7. 활성화된 북마크 버튼을 클릭 시, 해당 상품이 북마크에서 삭제 되어야 합니다.

8. 북마크 버튼을 클릭하여 북마크에 추가할 때와 삭제할 때, 사용자에게 알림 토스트가 표시되어야 합니다.

메인 페이지 만들기 8h

메인페이지

1. 모든 타입의 상품 정보를 4개 보여줘야 합니다. (필터 기능은 구현하지 않습니다.)
   보이는 상품의 타입은 혼합되어 있어도 무방합니다. (상품, 카테고리, 기획전, 브랜드)

2. 모든 타입의 북마크 된 상품 정보를 4개 보여줘야 합니다. (필터 기능은 구현하지 않습니다.)
   보이는 상품의 타입은 혼합되어 있어도 무방합니다. (상품, 카테고리, 기획전, 브랜드)

3. 이미지 클릭 시 모달 창 만들기