팀명 : rgb .
Product Manager: 윤해찬(B)
Project Manager: 이수빈(F)
Teammates: 탁호진(B), 이원준(F), 문유현(F), 김수정(F), 이경진(F)
- 개발기간: 2023.05.01 ~ 2023.05.12 (총 2주)
- 프로젝트 목적과 소개
- MZ세대(25~40세)를 타겟으로 매달 초청된 아티스트의 그림과 굿즈를 로테이션으로 판매하는 사이트 개발
- 요즘 세대의 예술 작품에 대한 많은 수요를 배경으로 제품 이미지 중심의 이솝 사이트 레이아웃을 참조하여 rgb 만의
큐레이팅 아트 사이트를 기획 하였습니다. rgb 는 매달 새로운 아티스트를 선정하여 작품과 굿즈를 한정판으로 판매하며,
그림에 대한 희소성을 부여하고 rgb 의 소비자들은 매달 새로운 아티스트들의 작품과 철학을 즐길 수 있도록 구현하였습니다.
- 매일 오전 stand-up meeting에서 trello 툴로 작업 진행상황 및 해결 방안 공유
- 기획 초반 노션으로 기획의도, 전체적인 컨벤션 정리
- 피그마 툴로 레이아웃을 미리 기획/구상 하여 프로젝트 진행
메인 둘러보기 -> 상품리스트/ 상세페이지 둘러보기 -> 원하는 상품 선택 -> 장바구니 담기 버튼 누름과 동시에 로그인 창 뜸 -> 비회원의 경우 회원가입 하기 -> 원하는 상품 담기 -> 주문/결제하기 -> 인보이스 내역 확인하기
bc5691d5-b4ef-48df-867f-6da5bf63c22d.mp4
main.mp4
- 전면에 영상을 배치하여 사이트를 처음 방문하는 사용자의 관심도를 높임
- 2개의 Art / Goods Carousel UI 으로 다양한 콘텐츠를 한눈에 볼 수 있게 구현
=> 사이트 내부를 적극적으로 홍보할 수 있도록 기획/구현 - next button이 슬라이더 끝에 도달하면 사라지게 구현 / pre button 누르면 다시 생성
- Carousel 밑의 indicator를 배치하여 사용자에게 현재 위치를 알 수 있게 구현
- api 로 이미지를 받아와 데이터 효율적 관리
- 유효성 검사 조건 불충족 경우, 실시간으로 입력창 하단에 안내 메세지 출력
- 필수 입력 사항 미 입력시 가입하기 버튼 비활성화
- 약관 정보 전체 선택 체크박스 구현
- 회원 가입 안내창 실행 후 화면 클릭 시 자동 로그인 구현
- 회원이 아닐 경우 회원가입으로 이어질 수 있는 모달 형식 플로우 구현
- 카테고라이징으로 전체보기, 가격순, abc 순으로 sorting 기능 구현
- 상품 디테일 페이지 안의 이미지 수도 캐러셀 구현
- 상세페이지 안의 상세설명 페이지 슬라이드 애니메이션 효과 구현
- 로그인 여부에 따른 카트 추가 버튼 생성 기능
- 재고 수량 sold out 시 수량 선택 버튼 블락 처리
ezgif.com-video-cutter.mp4
- 장바구니 수량 추가/ 총 가격 실시간 카운트 / 상품 리스트 삭제 기능
- 상품 수에 따른 레이아웃 동적 조정 구현
- 장바구니 GET, PATCH, DELETE API로 상품 효율적 관리
- 수량 변경시 마우스 이벤트로 수량확인 버튼 나타나게 구현
- 조건부 렌더링으로 담긴 상품이 0일 때, 빈 장바구니 페이지 렌더링 구현
- 배송기사님께 요청사항 옵션 표현 기능
- 유효성 검사 및 필수 약관 전체 동의 완료 시, 버튼 활성화 기능
- 기본 배송지로 저장 및 기존 이력 불러오기 기능 구현
- 결제 API transaction 기능 구현
- 현재 보유 포인트와 사용 포인트 확인 가능
- 전체 동의하기 선택 체크박스 구현
- 데이터를 받아와 주문자 정보와 주문 내역 확인 가능하게 기능 구현
- 보유 포인트와 사용 포인트 내역 확인 가능
- 직관적인 디자인으로 현재 사용자의 포인트를 바로 확인할 수 있도록 구현
- 장바구니에 상품이 담길 때마다 실시간으로 수량 확인 가능하게 구현
- 로그인과 로그아웃 버튼의 스타일 반전으로 사용자가 보다 직관적으로 현재 상태 알 수 있게 구현
- 페이지 이동 없이 로그인 버튼을 누르면 로그인 창에서 회원가입까지 바로 가능하게 구현
- 푸터 - 클릭한 탭에 언더라인을 피드백과 탭에 따른 다른 정보 표시 기능 구현
COLOR
MAIN COLOR: #252525, #333333, #FFFEF2, #F5F5E6POINT COLOR: #FF0000
BACKGROUND COLOR: #FFFEF2
DROPDOWN COLOR: #252525
NAV/FOOTER BACKGROUND COLOR: #333333
FONT
영문 폰트: Noto Sans KR한글 폰트: Noto Sans KR
NAV FONT SIZE / NAV FONT WEIGHT: 18px
FOOTER FONT SIZE / FONT WEIGHT: 12px
TITLE FONT SIZE / FONT WEIGHT: 37px
SUB TITLE FONT SIZE / FONT WEIGHT: 21px
DETAIL FONT SIZE / FONT WEIGHT: 14px
CHECK BOX ⇒ icon
TOGGLE ⇒ icon
BUTTON
BIG BUTTON SIZE (로그인, 가입하기, 결제하기):Width: 400px
Height: 45px
Font Size: 16px
뒤로가기, 창 닫기 ⇒ icon
슬라이드 옆으로 넘기기 ⇒ icon
제품 상세, 장바구니, 결제하기 +- 버튼 ⇒ icon
BUTTON COLOR ⇒ main color
BUTTON FONT SIZE
BUTTON FONT COLOR ⇒ main color
BUTTON NO BORDER RADIUS
MARGIN/PADDING
Input height: 80px장바구니 height: 100px
MOUSE EVENT
MOUSE HOVERImage size up
Shadow
LINE
LengthColor: main color
Thickness: 3px, 4px