8arseint-javascript-project / 8arseint-marketkarly Goto Github PK

• 랜덤 한 문자값 (10자 이상) 을 생성 후 사용자의 Unique ID 값으로 넣기

• 해당 유저의 Unique ID를 확인 후 로그인

• 응답받은 Unique ID는 localStorage에 저장

• 다음 번에 로그인 시 Unique ID가 존재한다면 루트 경로로 리디렉션 시키기

• 어떤 경우든 Unique ID가 유효하지 않다면 사용자에게 알리고 로그인 페이지로 리디렉션 시키기

• 로그아웃은 클라이언트 단에서 localStorage에 저장된 Unique ID를 삭제하는 방식으로 구현

• 이메일 조건 : 최소 @, . 포함

• 비밀번호 조건 : 특수문자 포함 최소 6자 - 최대 16자

• 이메일과 비밀번호가 모두 입력되어 있고, 조건을 만족해야 제출 버튼이 활성화 되도록 구현

test

mainpage header 코드 구현 및 리팩토링

• click시 팝업창이 사라지는 이벤트 구현

• 전체선택 버튼 클릭시 상품 목록 선택 버튼 on/off
• 활성화된 상품 목록 버튼 비활성화시 전체선택 버튼 자동 비활성화

test

• data.js에서 data 가져와 뿌리기

사용자가 담은 항목 장바구니 페이지에 랜더링하기

• main page 장바구니 버튼 클릭시 상품 데이터 가져오기
• product-detail page 장바구니 버튼 클릭시 상품 데이터 가져오기
• 각 상품의 storageType 별로 구분하여 foodCategory 내에 항목 생성하기

기타 요구사항

• 수량 추가 및 빼기
• 수량에 맞게 금액 조절하기
• 토탈 금액 결제창에 랜더링
• deletButton 클릭시 항목 삭제

mainpage footer 코드 구현 및 리팩토링

사용자가 담은 항목 장바구니 페이지에 랜더링하기

• 사용자가 장바구니에 담은 상품 리스트 템플릿 생성
• main page 장바구니 버튼 클릭시 상품 데이터 가져오기
• product-detail page 장바구니 버튼 클릭시 상품 데이터 가져오기
• 각 상품의 storageType 별로 구분하여 foodCategory 내에 항목 생성하기

기타 요구사항

• 수량 추가 및 빼기
• 수량에 맞게 금액 조절하기
• 토탈 금액 결제창에 랜더링
• deletButton 클릭시 항목 삭제

• 각 슬라이드를 데이터로 받아 동적으로 렌더링

• 슬라이드의 prev, next 버튼 구현

• 키보드 키로도 작동되도록 구현

product-list 페이지 마크업 리팩터링 및 tailwind styling

장바구니 기능 구현

• 사용자가 장바구니에 항목을 담으면 장바구니 페이지에 랜더링되도록 구현

• tailwind, eslint, prettier 설치 및 설정
• assets 추가
• 마켓컬리 모든 페이지 마크업 구조 가져오기