"당신의 감성을 흔드는 인테리어 꿀템이 가득한 꿀단집"

"특별한 감성을 담은 소품과 가구를 원하는 당신을 위한 꿀템이 가득!
저희 꿀단집에서 만나보세요.” 🍯🏠

https://www.honeytouse.com (AWS Free tier 만료 → 25년 3월부터 중단)

• 서비스 소개
  
• 프로젝트 개요
  
• 스토리보드
  
• 페이지 구성
  
• 주요 구현 내용
  
• 기능 설명
  
• 참고 링크
  

• 요약 : 기능성과 스타일을 모두 갖춘 인테리어 소품 및 생활용품을 판매하는 쇼핑몰

• 기획 의도 :

  • 1인가구의 증가와 워라벨에 대한 높아진 인식으로 집에 있는 시간이 늘어남에 따라 휴식공간인 집의 인테리어에도 많은 관심이 몰리고 있음.
  • 여성의 인테리어 관심도가 높기에 여성유저를 타겟으로 예쁜색상과 귀여운 디자인을 채택하여 접속하는 유저들의 머릿 속에 '인테리어 = 꿀단집'이라는 기억이 남을 수 있게 디자인한 쇼핑몰을 런칭함.

• 서비스 명칭 :

  • 꿀단집(HoneyTouse)
    • 꿀단지(HoneyPot) + 집(House)의 합성어
    • 꿀같은 휴식과 안락함을 즐길 수 있는 다양한 제품들을 제공하는 서비스의 이미지를 연상하도록 하며, 따뜻하고 아늑한 느낌을 줌.

• 페르소나 :

  • 권 나리 / 20대 여성 / 서울 거주 자취생 (1인가구)
    • 저렴하면서도 세련되게 자취방을 꾸밀 수 있는 아기자기한 감성 가구 및 소품을 원함.
    • 자취방에서 사용할 수 있는 심플한 생활용품 구매를 희망함.
    • 실용성이 뛰어나면서도 본인의 감성을 채워줄 물건을 찾고 있음.

• 진행 기간
  

  • 1차 : 기획 및 개발 (24.02.19 ~ 24.03.01) [2주]
    
  • 2차 : 리팩토링 (24.03.08 ~ ) [자율]
    
    • (주)엘리스가 보유하고 있는 프라이빗 GitLab 저장소에서 1차 개발을 마침.
      이후 개별적으로 Github Organization 생성하여 2차 리팩토링을 자율적으로 진행함.

• 진행 인원 및 역할
  

  • 7명 (프론트엔드 4명, 백엔드 3명)
    

    팀원 이름	FrontEnd	BackEnd	배포/발표/영상
    김지윤	• 상품 상세 페이지 • 장바구니 페이지	-	• 시연 영상 제작
    문채영	-	• Admin API(관리자 기능) • Order API (회원/비회원 주문 CRUD)	• PPT 제작
    신창건	• 마이페이지 프로필 관리 부분	-	• PPT 제작
    이가린	• 마이페이지 프로필 이미지 업로드 부분	• User API (로그인, 회원가입, 이메일 인증, 개인정보 CRUD)	• 발표 • 2차 배포 (AWS, Github Actions)
    이승철	• 메인페이지 • 로그인 및 회원가입 페이지	-	• PPT 제작 • 1차 배포(Nginx)
    이보미	• 주문 및 결제 페이지 • 마이페이지 주문내역 부분	-	• 시연영상 제작
    최정민	• 관리자 페이지	• Category API (카테고리 CRUD) • Product API (상품 CRUD)	• PPT 제작

• 관련 링크

  • 노션 페이지 : https://holy-mailbox-d99.notion.site/HONEY_TOUSE-3-24dfdd1b9bb64d00bac395e1a56c0093?pvs=4
    
  • 피그마 : https://www.figma.com/design/3Knu77CbkAbGge2jrBXQds/honey-touse?node-id=0-1&t=w161YF54HWFuTJ1F-1
  • 스웨거 API 명세서 : https://api.honeytouse.com/api-docs/
  • 포지션별 Github
    • 프론트엔드 : https://github.com/HoneyTouse/HoneyTouse_FE
    • 백엔드 : https://github.com/HoneyTouse/HoneyTouse_BE

• 기술 스택

  • 프론트엔드 : HTML, CSS, JavaScript, Vite
  • 백엔드 : Node.js, Express, MongoDB, JavaScript
  • 배포 : AWS S3, Route53, Cloudfront, EC2, Github actions appleboy/ssh-action

메인 페이지	카테고리별 페이지
상품별 상세 페이지	장바구니 페이지
주문/결제 페이지	주문내역 페이지
마이페이지	관리자 페이지
로그인 페이지	회원가입 페이지

• 귀여운 분위기의 사용자 친화적인 디자인
• 화면 상단에서 최신 입고된 상품 확인 가능
• 화면 하단에서 MD가 추천 상품을 카테고리별로 클릭하여 조회 가능
• 상품에 마우스를 올리면 상품 이미지가 확대되어 사용자의 시선을 주목시킴
• 최근 검색 내역을 저장하여 재방문시 검색 내역 확인 가능 (Local Storage)

• 상품별 옵션 지정 가능
• 옵션을 선택 시 장바구니 담기 및 바로구매 가능
• 상품 개수를 버튼으로 조절할 때마다 자동으로 주문금액이 계산되어 화면에 표시
• 개별 상품에 대한 상세 정보는 이미지로 확인 가능

• 회원 정보를 확인하고 프로필 관리(프로필 이미지, 비밀번호) 가능
• 배송 상태별 주문 수량을 확인 가능
• 최근 주문 정보 확인 가능

• 일반 사용자와 구분되는 관리자 계정을 이용하여 관리자 페이지로 접속 가능
• 모든 회원 정보와 상품 주문 내역 조회 가능
• 상품은 배송 상태별로 분류하여 조회 가능
• 상품 및 카테고리 관리 기능 (추가, 수정, 삭제)

• 장바구니에 상품 담아두기 가능 (Local Storage)
• 장바구니 리스트 중 선택적으로 구매 가능
• 비회원도 장바구니, 쇼핑 및 결제 가능
• 결제금액 확인, 개인정보 약관 동의해야만 주문 가능
• 회원은 가입 정보와 연동하여 결제 정보를 저장
• 비회원은 주문 시 입력한 정보를 기반으로 결제 정보를 저장

• 고유한 이메일 주소를 활용한 회원가입
• 회원정보(이메일, 비밀번호 등)에 대한 유효성 검사 실시
• 입력한 이메일로 인증번호 발송 및 확인 가능 (구글, 네이버 등) (Node mailer)
• 인증번호는 5분 이내에만 유효하도록 하여 보안 강화

• JSON Web Token 라이브러리를 이용하여 토큰 기반의 인증을 수행
• 구글 OAuth를 활용한 소셜 로그인 구현
  (액세스 토큰을 쿠키에 저장하고 SSL 인증을 처리함)

• 사이트 제작에 참고한 레퍼런스 사이트
  • KREAM 크림 : https://kream.co.kr/
  • 오늘의집 : https://ohou.se/
• Google Cloud API Console
  • OAuth를 활용한 소셜로그인 구현을 위함.
  • https://console.cloud.google.com/apis/dashboard?pli=1
• Google Cloud Search Console
  • 제작한 사이트의 구글 검색 노출을 위함.
  • https://search.google.com/search-console/about