커스텀 키보드 구매 사이트 Keydeuk

🎞 Duration

2024.05.18 ~ 2024.06.26

☀️ Project Topic

복잡한 커스텀키보드 편리하게 구매 할 수 있도록 돕는 커머스사이트

💻 Site

https://keydeuk.com (현재 서버 관리 비용문제로 배포 중단 되었습니다.)

⌨️ keydeuk 소개

키득(Keydeuk)은 '키보드 득템'의 줄임말로, 키보드뿐만 아니라 키캡, 스위치 등 다양한 부품을 쉽고 편리하게 구매할 수 있는 커머스 사이트입니다. "커스텀 키보드에 대해 잘 모르는 사람들도 쉽게 접근할 수 있는 사이트를 만들자"는 아이디어에서 출발하여, 기획부터 디자인, 개발까지 quad-8 팀의 협업으로 완성된 프로젝트입니다. 특히 초보자들의 진입 장벽을 낮추고, 커스텀 키보드의 매력을 느낄 수 있도록 Three.js를 활용해 3D 커스터마이징 기능을 구현하며 키득만의 차별화를 더했습니다.

🎯 프로젝트 목표

키득의 핵심 목표는 팀원들이 실제 서비스를 운영할 수 있는 역량을 강화하면서, 사용자 중심의 커머스 환경을 설계하고 구현하는 것이었습니다.
검색, 커스터마이징, 장바구니, 결제 흐름 등 실제 커머스 서비스와 유사한 기능을 개발하며, 사용자들에게 직관적이고 편리한 경험을 제공하고자 했습니다.
이 과정에서 단순히 기능 구현에 그치지 않고, 실질적인 서비스 개발 경험과 협업 능력을 강화하며, 실제 운영 가능성을 염두에 둔 완성도 높은 결과물을 목표로 삼았습니다.

🔗 협업 관련 링크

좀 더 자세한 개발 과정과 디자인소스가 궁금하다면 아래 링크를 클릭해 확인해주세요!

Notion	Figma

프론트엔드 소개

김예진	김영은	김민정	김보경	이도원

기술 스택

Development

Communication

주요 기능 소개 및 시연 영상

페이지별 주요 기능

페이지	기능
회원가입, 로그인	OAuth2.0을 통한 소셜 로그인 Access Token + Refresh Token
마이 페이지	닉네임, 소개, 프로필 이미지 변경 장바구니 상품 리스트 모아보기 찜한 상품의 리스트 모아보기 커뮤니티 작성 글 모아보기 구매내역 모아보기 리뷰 보기 리뷰 작성하기
메인 페이지	인기순 제품 리스트 확인 이벤트 정보 확인 추천 제품 리스트 확인
상품 목록 페이지	검색 기능 필터 기능 (최신순, 인기순(판매량 순), 조회수, 가격 낮은순, 높은순) 상품 상세 페이지 (부품, 완제품) 제품에 접근할 때마다 조회수 증가 제품 정보 확인 (이미지, 이름, 카테고리 등) 제품에 관한 리뷰 개수, 평균 별점, 찜 개수 확인 가능 제품을 찜할 수 있음 리뷰 목록 확인 가능 리뷰 남긴 사람의 아이디, 리뷰 내용 제품 구매 장바구니
키보드 커스텀 페이지	배열, 키캡, 외관 색 시뮬레이션 스위치, 하우징 재질, 추가 옵션 선택 선택된 옵션들 장바구니에 추가
커스텀 자랑 게시판	글 목록 보기 글 작성 자신과 타인의 프로필 정보 확인 댓글 달기 좋아요 달기
이벤트 페이지	회원가입 쿠폰 (가입 시 1회 발급 가능) 룰렛 돌려서 랜덤 쿠폰 받기 (1일 1회 참여 가능)

유저플로우

ERD

1. 홈페이지

메인 페이지	2024-12-16.15-26-29.mp4
회원가입 페이지	2024-12-16.15-46-30.mp4
로그인 페이지	2024-12-16.15-50-18.mp4

2. 상품 페이지

상품 목록 페이지	2024-12-16.15-53-32.mp4
상품 상세 및 리뷰 페이지	2024-12-16.15-56-21.mp4

3. 키보드 3D 커스터마이징 페이지 🌟

커스텀 키보드 만들기 페이지

2024-12-16.17-25-33.mp4

4. 커뮤니티 페이지

커뮤니티 페이지

2024-12-16.17-34-39.mp4

5. 마이 페이지

내 정보 수정	2024-12-21.17-04-19.mp4
배송지 관리	2024-12-21.17-01-10.mp4
장바구니	2024-12-21.17-09-19.mp4
주문 및 결제	2024-12-21.17-11-44.mp4

6. 이벤트 페이지 (추가기능)

이벤트 페이지

2024-12-16.22-17-55.mp4

7. 알림 (추가기능)

쿠폰발급 및 구매 완료 알림 기능

2024-12-16.22-29-52.mp4