멋쟁이 사자처럼 프론트엔드 스쿨 8기 8조 나만 또E다영 프로젝트 저장소
노션 페이지 : notion
배포페이지 : 배포
| 조장 김다영(ryujinzz) | 조원 김경민(highballplz) | 조원 김소영(Lulurem) | 조원 이동훈(dlehdg) |
|---|---|---|---|
 |
 |
 |
 |
- 슬라이드가 필요한 ui에서는 swiper.js를 사용해주세요.
- 각 슬라이드를 데이터로 받아 동적으로 렌더링 되도록 만들어주세요.
- 슬라이드의
prev,next버튼도 구현해주세요. - 키보드 키로도 작동되도록 구현해주세요.
- localStorage를 사용하여 “최근 본 항목”의 UI를 구성해주세요.
- “마이크로 애니메이션”이 필요하다면 추가해주세요.
- “회원가입 기능”을 구현해주세요.
- 최소한 이메일, 비밀번호 입력 필드(
input), 제출 버튼(button)을 가지도록 구성해주세요.
- 최소한 이메일, 비밀번호 입력 필드(
- 이메일과 비밀번호의 유효성을 확인합니다.
- 이메일 조건 : 최소
@,.포함 - 비밀번호 조건 : 특수문자 포함 최소 6자 - 최대 16자
- 이메일과 비밀번호가 모두 입력되어 있고, 조건을 만족해야 제출 버튼이 활성화 되도록 구현해주세요.
- 이메일 조건 : 최소
- 회원가입을 통해 사용자(user)를 생성하고 관리합니다.
- 데이터 통신을 통해 유저를 생성하고 관리해주세요
- 유저의 회원을 탈퇴할 수 있는 기능을 구현해주세요
- 로그인된 유저를 인식하여 UI를 다르게 랜더링해주세요
- 로그인되지 않은 사용자면 회원가입 페이지로 리디렉션 시켜주세요
- 회원가입시 중복된 유저가 있는지 체크해주세요
- 장바구니 기능을 구현해 주세요
- 사용자가 장바구니에 항목을 담으면 장바구니 페이지에 랜더링이 되도록 구현해 주세요.
1. 포켓베이스 DB 상품정보를 페이지와 모달창에 출력 2. 카트 아이콘 클릭 시 장바구니 담기 모달창 보이기 3. 모달창 수량 * 단가 금액 합계 리렌더링 4. 모달창 취소 버튼, 모달창 외부 영역 클릭해서 닫기 5. 장바구니 담기 클릭 시 local storage에 클릭한 상품 정보 저장
1. 상품 보관 유형별 분류하여 렌더링 2. 선택한 상품만 합계 금액 리렌더링 (상품 개수 1개 기준) 3. 담긴 상품별 수량 * 단가 금액 합계 리렌더링 4. 전체선택 체크박스 제어 및 동기화
1. DB의 id값을 이용하여 페이지의 해당상품 정보만 출력 2. 찜하기, 재입고 알림 토글버튼 구현 3. 후기, 문의 버튼 클릭 시 게시판으로 스크롤 이동 4. ist 페이지 코드 재활용 - 할인율 0% 태그 제거 - 수량 선택 버튼 - 수량 * 단가 금액 리렌더링
1. 카테고리 및 다른 메뉴들 호버시 UI 바뀜 2. 배송지 추가 호버시 나타남 추가 등록 및 배송지 변경 가능 3. 찜하기 로그인 시 실제 마켓컬리 찜하기로 이동, 비로그인 시 찜하기 모달창 나타나서 로그인 페이지로 이동 4. 맨 위 쿠폰창을 누르면 회원가입 페이지로 이동, 닫기 버튼 누르면 다른 페이지로 이동해도 꺼짐 5. 베스트, 장바구니 클릭시에 각 페이지로 이동 6. 푸터에는 각 sns 페이지로 이동
📦src
┣ 📂api
┃ ┣ 📜defaultAuthData.js
┃ ┣ 📜defaultCartData.js
┃ ┣ 📜defaultImgData.js
┃ ┗ 📜pocketbase.js
┣ 📂components
┃ ┣ 📂css
┃ ┃ ┣ 📜components.css
┃ ┃ ┣ 📜reset.css
┃ ┃ ┗ 📜style.css
┃ ┣ 📂footer
┃ ┃ ┣ 📜footer.css
┃ ┃ ┗ 📜index.html
┃ ┣ 📂header
┃ ┃ ┣ 📜header.css
┃ ┃ ┣ 📜header.js
┃ ┃ ┗ 📜index.html
┃ ┗ 📜include.js
┣ 📂lib
┃ ┣ 📂animation
┃ ┃ ┣ 📜dice.js
┃ ┃ ┣ 📜index.js
┃ ┃ ┗ 📜shake.js
┃ ┣ 📂dom
┃ ┃ ┣ 📜attr.js
┃ ┃ ┣ 📜bindEvent.js
┃ ┃ ┣ 📜clear.js
┃ ┃ ┣ 📜css.js
┃ ┃ ┣ 📜endScroll.js
┃ ┃ ┣ 📜getNode.js
┃ ┃ ┣ 📜index.js
┃ ┃ ┣ 📜insert.js
┃ ┃ ┣ 📜showAlert.js
┃ ┃ ┗ 📜userList.js
┃ ┣ 📂error
┃ ┃ ┣ 📜index.js
┃ ┃ ┣ 📜refError.js
┃ ┃ ┣ 📜syntaxError.js
┃ ┃ ┗ 📜typeError.js
┃ ┣ 📂math
┃ ┃ ┣ 📜getRandom.js
┃ ┃ ┣ 📜getRandomMinMax.js
┃ ┃ ┣ 📜index.js
┃ ┃ ┣ 📜toDeg.js
┃ ┃ ┗ 📜toRadian.js
┃ ┣ 📂utils
┃ ┃ ┣ 📜color.js
┃ ┃ ┣ 📜comma.js
┃ ┃ ┣ 📜copy.js
┃ ┃ ┣ 📜delay.js
┃ ┃ ┣ 📜getPbImageURL.js
┃ ┃ ┣ 📜index.js
┃ ┃ ┣ 📜memo.js
┃ ┃ ┣ 📜setDocumentTitle.js
┃ ┃ ┣ 📜storage.js
┃ ┃ ┣ 📜tiger.js
┃ ┃ ┣ 📜typeOf.js
┃ ┃ ┣ 📜validation.js
┃ ┃ ┗ 📜xhr.js
┃ ┗ 📜index.js
┣ 📂pages
┃ ┣ 📂address
┃ ┃ ┣ 📜address.css
┃ ┃ ┣ 📜address.js
┃ ┃ ┗ 📜index.html
┃ ┣ 📂cart
┃ ┃ ┣ 📜cart.css
┃ ┃ ┣ 📜cart.js
┃ ┃ ┗ 📜index.html
┃ ┣ 📂detail
┃ ┃ ┣ 📜detail.css
┃ ┃ ┣ 📜detail.js
┃ ┃ ┗ 📜index.html
┃ ┣ 📂login
┃ ┃ ┣ 📜index.html
┃ ┃ ┣ 📜login.css
┃ ┃ ┗ 📜login.js
┃ ┣ 📂main
┃ ┃ ┣ 📜index.html
┃ ┃ ┣ 📜main.css
┃ ┃ ┗ 📜main.js
┃ ┣ 📂product
┃ ┃ ┣ 📜index.html
┃ ┃ ┣ 📜product.css
┃ ┃ ┗ 📜product.js
┃ ┗ 📂register
┃ ┃ ┣ 📜index.html
┃ ┃ ┣ 📜register.css
┃ ┃ ┗ 📜register.js
┗ 📂styles
┃ ┣ 📜base.css
┃ ┣ 📜reset.css
┃ ┗ 📜style.css
김다영 : 헤더에서 스크롤하면 달라지는 카테고리를 연동해서 구현하고 싶었지만 하지 못했다. 하지만 마크업 자체를 바꾸어서 구현하려고 노력했다. 연동되지 않아서 카테고리에 들어가는 기능 구현을 따로따로 고치도록 해야했지만 보이는 부분은 구현 할 수 있어서 뿌듯했다
김경민 : 데이터 통신을 통해 유저를 생성하고 관리할 수 있는 기능을 구현하고 싶었지만 하지 못했다. 접근성을 위해 모든 라디오버튼과 체크박스들에 키보드 포커싱이 가게 하는 데 시간을 많이 쓴 탓인데, 기존 마켓컬리에 비해 접근성을 개선했다는 점은 뿌듯하다.
김소영 : 시간이 부족해서 페이지별 기능을 다 만들지 못하고, 마지막 날 conflict 해결과 배포 과정에서의 오류로 인해 이미 구현한 기능을 배포 페이지에 포함시키지 못한 것이 아쉽다. 페이지 기능 구현하기에 급급해 깃허브 백로그와 마일스톤을 더 활용해 보지 못한 것도 아쉽고, 이번 프로젝트에서 아쉬웠던 경험이 파이널 프로젝트에 도움이 되었으면 한다.
이동훈 : 기능을 구현 할 때 너무 기능 구현에 집중한 나머지 코드를 다시 사용 할 수 있게 재사용성을 생각 하지 못했고 코드의 가독성을 고려하지 못해서 아쉬웠다, 하지만 코드 리팩토링 과정을 통해 몇몇 코드들을 재사용성 가능한 함수로 구현 하였고 또한 가독성 역시 불필요한 코드들을 수정하면서 기존의 코드보다는 가독성이 좋아지게 만들었고 이 과정을 통해 코드를 작성 할 때에는 그냥 작성하지 않고 설계하는 과정이 필요한다는 사실을 알았다
npm install
npm run dev
https://main--mellow-sprinkles-ffef0a.netlify.app/