Skip to content

ohj1su/43-1st-MG-frontend

 
 

Repository files navigation

Team Mg

ProductManager : 장지원(B)
ProjectManager : 김진평(F)
Teammate: 문은빈(F), 오지수(F), 윤수빈(B)

header

💊 Weekly

위클리 소개

wisely는 포장비, 광고비와 같은 불필요한 비용은 줄이고 높은 품질을 사용자에게 제공하고자 하는 브랜드 스토리와 같이 웹사이트도 간결한 디자인과 높은 가독성을 위하여 UI와 기능이 구현되어있습니다.

저희는 그 중 신생아부터 2,30대를 타겟으로 하는 영양제를 주력 상품으로 선정하여 이에 맞게 UI 및 기능을 구현하였습니다.


프로젝트 정보

프로젝트 기간

2023/03/06 ~ 2023/03/17 (약 2주)

Front-end

김진평 문은빈 오지수

Github Repository


기술 스택

Front-End :

Common :

Communication :

주요 기능 미리보기

회원가입

683993729929553242wecode-team-mg.MOV

로그인

683993729929553242wecode-team-mg.1.MOV

메인페이지

-8167622613710843537683993729929553242wecode-team-mg.MOV
-8167622613710843537683993729929553242wecode-team-mg.1.MOV

장바구니

683993729929553242wecode-team-mg.3.MOV
683993729929553242wecode-team-mg.4.MOV

상세페이지

683993729929553242wecode-team-mg.5.MOV
683993729929553242wecode-team-mg.6.MOV

🖥️ Front-end

skill content name
Main Page Nav: 스크롤 이동해도 현재 위치에 고정, 로컬스토리지의 로그인 토큰 여부에 따라 로그인, 로그아웃 버튼 동적 구현, 장바구니에 상품 추가시 장바구니 아이콘에 숫자 카운팅, 상품 검색 기능 구현
Main Page : 카테고리별 상품 리스팅, 무한 스크롤 구현, 배너 이미지 슬라이딩 구현, 리스팅된 각각의 상품에 장바구니 아이콘 클릭하면 모달창 나타나며 수량 선택하여 장바구니 담기 가능
Footer : 로컬스토리지의 로그인 토큰 여부에 따라 로그인, 로그아웃 버튼 동적 구현
Kim, Jinpyeong
SignUp - 각각 입력 창에 유효성 검사 기능을 추가하여 사용자가 입력 값을 작성함과 동시에 유효성 검사가 실행되어 번거로움을 줄일 수 있도록 기능 구현
- 이용약관의 체크 박스에 필수 사항만을 남겨두고 전체 선택 체크 박스 기능으로 각각의 체크 박스를 제어 가능하게 기능 구현
- 필수 정보들이 빠짐없이 입력되어 있고 입력 값이 유효성 검사에 통과한 경우에 회원가입 버튼 활성화 기능 구현
Moon, Eunbin
Cart - 장바구니 상품 리스트 각각에 삭제 및 상품수량 변경 버튼을 통해 메인 또는 상품상세 페이지에 돌아가지 않고 장바구니에서 수량 변경 및 삭제가 가능하게 기능 구현
- 장바구니 상품 각각의 체크박스를 제어하는 전체 체크박스를 구현하여 상품 리스트 전체삭제 기능 구현
- 상품리스트 중 체크 된 상품의 가격 계산 기능을 구현하여 장바구니 내에서 선택하여 상품을 구매 할 수 있도록 기능 구현
Moon, Eunbin
Login - 사용자가 본인의 이메일, 패스워드 정보 입력시 해당 이메일양식 및 비밀번호양식 에 맞춰 입력한 경우에만 로그인 버튼이 활성화
- 사용자가 번거롭게 로그인 버튼을 누른 후에 유효성 여부를 알 수 있는 상황을 최대한 방지
Oh, Jisu
Detail - 상품 상세페이지에 슬롯 창을 이용하여 수량 선택 및 수량에 따른 할인률 적용 및 상품별로 [상품설명, 가격, 상품명, 상품사진]이 바뀌도록 구현
- 사용자가 구매하고자 하는 상품의 수량을 선택 후 장바구니까지 담을 수 있도록하여, 구매의 편리성을 높히도록 구현
Oh, Jisu

About

김진평, 문은빈, 오지수

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 66.7%
  • SCSS 32.7%
  • HTML 0.6%