Nike motive coding
나이키는 각 스포츠 용품 판매와, 마케팅을 통해 도전에 대한 가치를 사용자들에게 일깨워주고 Just Do It 으로 대표되는 슬로건으로 사용자에게 도전에 대한 긍정적인 자극을 주는데 그 가치가 있다고 생각하였습니다.
따라서 저희 나위키 팀도 나이키의 제품적 가치를 생각하면서 프로젝트를 진행하고자 하였습니다.
프로젝트 진행 기간은 약 2주로, 필수 기능 구현 작업을 우선적으로 진행했습니다.
| 필수 기능 구현 목록 | |||||
|---|---|---|---|---|---|
| 1)로그인/회원가입 | 2)메인페이지 | 3)상세페이지 | 4)제품 필터링 | 5)장바구니 | 6)매장안내 |
📆 2023.02.06 - 2023.02.17 (약 2주)
| 팀원 | 구현 기능 | GitHub |
|---|---|---|
| 신혜린 (Project Manager) | 로그인, 회원가입, 장바구니 |  |
| 성은정 | 제품목록, 결제페이지, Nav |  |
| 이유진 | 메인, 제품상세, Footer |  |
| 팀원 | 구현 기능 | GitHub |
|---|---|---|
| 이한재 (Product Manager) | 회원가입, 제품목록 API |  |
| 강신혜 | 로그인, 제품상세, 장바구니 API |  |
-
-
-
-
#42기-나이키-1차팀프로젝트 -
NaWeKi Notion -
1차 팀프로젝트 - [FE]성은정, 신혜린, 이유진 [BE]강신혜, 이한재 -
커뮤니케이션 방법
- 매일 오전 10시 10분 Agile 프로세스 기반으로 미팅 진행
- 미팅간 작업 진행상황 공유, Blocker 및 Blocker 해결방안 공유, 당일 진행할 작업 내용 공유
| JavaScript | React.js | SASS | esLint | Prettier |
|---|---|---|---|---|
 |
 |
 |
 |
 |
| JavaScript | Node.js | rest API | mySQL |
|---|---|---|---|
|
 |
 |
 |
[nav]
- mouse enter 시 드롭다운 메뉴 보여주기
- 메뉴리스트와 아이콘 클릭 시 해당 페이지로 이동
- 검색창에 키워드 입력 시 일치하는 제품 데이터 최대 5개까지 노출
- 로그인 시와 비로그인 시 nav 문구 다르게 노출
[main page]
- 배너 이미지 또는 텍스트, 구매하기 버튼 클릭 시 제품 목록 페이지 이동
- 하단 카테고리 컴포넌트를 활용한 드롭다운 구현
- 추천 상품 리스트 캐러셀 구현
[footer]
- 상수 데이터와 map 메서드를 활용한 footer 구현
- 도움말, ABOUT NIKE 하단 카테고리들 및 이용약관, 하단 밑줄 표시 텍스트 마우스 오버 시 흰색 하이라이팅
- 서버에 존재하는 데이터일 시 비밀번호 입력창으로 이동하여 올바른 비밀번호를 입력 시 토큰이 발급되어 Local storage에 저장
- 로그인 이메일 Input값에 입력한 정보가 '비밀번호를 입력하세요' 밑에 나타나도록 구현
- 서버에 존재하지 않는 데이터일 시 회원가입 창으로 이동하여 회원가입을 유도
- 각각의 Input값이 유효성을 통과하면 계정 만들기가 성공적으로 이루어지도록 구현
- 로그인 이메일 Input값에 입력한 정보가 '이제 나이키 멤버가 되어볼까요?' 밑에 나타나도록 구현
- 서버에 제품 데이터 불러오기
- 제품 카테고리에 맞는 데이터 필터링하기
- 한 페이지에 3개의 상품만 보여주고 버튼을 통해 이동할 수 있도록 페이지네이션 구현
- 화살표 아이콘 클릭 시 드롭다운 메뉴 접기 펼치기 기능 구현
- 필터 숨기기 버튼 클릭 시 사이드바 사라짐
- 상품의 id값에 해당하는 데이터 전달받아 페이지 렌더링
- 선택한 사이즈 제품 장바구니 담기 버튼 클릭 시 백엔드로 데이터 전달
- '무료 배송 및 반품' 버튼 클릭 시 요소 보이기/숨기기
- 위시리스트 버튼 클릭 시 하트 색상 변화
- 서버에 담긴 장바구니 데이터 불러오기
- 사이즈 및 수량 select 버튼
- 삭제 버튼 클릭 시 서버 및 클라이언트에서 해당 데이터 삭제
- 장바구니에 담긴 상품들 금액 합산
- '상품 금액' 옆 '?' 모달창 구현
- 서버에 담긴 장바구니 데이터 불러오기
- input 창에 입력한 데이터 다음 컴포넌트에 노출하기
- 버튼 클릭 시 다음 컴포넌트로 이동하고 현재 컴포넌트는 숨기기
- 입력한 배송 정보 데이터 한꺼번에 모아서 백엔드에 전달하기
- '상품 금액' 옆 '?' 모달창 구현
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent