🎱 loffle-front

📌 로플(Loffle): 로또(Lotto) + 래플(Raffle) 의 합성어로 래플 서비스에 로또 추첨 방식을 도입한 웹 서비스

🔗 https://loffle.netlify.app/

(ID: test@test.com / PW: test1234)

🎨 Demo

시작 페이지	로그인	응모권 구매
응모하기	게시물 검색	게시물 작성
당첨 후기 게시판	공지사항	QnA

🛠️ Stacks

• React - 컴포넌트개발 라이브러리
• Tailwind CSS - 마크업
• JavaScript (ES6 +)
• eslint, prettier - 소스 품질관리
• Webpack - 빌드 자동화 및 최적화
• Figma - UI 설계/디자인

💬 Descriptions

• 모바일 환경을 우선(Mobile First)으로 구현했습니다.
• Intersection Observer를 사용하여 Infinite Scroll을 구현했습니다.
• Debounce를 이용해서 커뮤니티의 제목/내용 검색 기능을 최적화했습니다.
• 회원가입 여부에 따른 로그인/회원가입 프로세스로 UX를 개선했습니다.
• 로딩시 Skeleton Component를 사용하여 UX를 개선했습니다.
• Git-flow 전략 사용과 커밋 메시지 컨벤션을 통해서 협업했습니다.
• 데일리 스크럼, 스프린트등 애자일 방법을 통해서 협업했습니다.
• Figma를 활용해서 로고 및 전체 페이지 프로토타입을 직접 디자인했습니다.

💡 All Features

Last Updated on: October 29, 2021

• 응모권

  • 응모권 수량 확인 / 구매
  • 익명 사용자는 로그인 후 사용가능

• 응모하기

  • 실시간 응모중인 raffle 리스트 확인 (load-more button)
  • 제품 사진 리스트 Carousel Slider 적용
  • 응모 종료까지 실시간 카운트 다운
  • 실시간 응모 현황 보기 (Pagination)
    • 본인이 몇번째로 응모했는지 확인하는 버튼
  • 응모 상태(대기, 진행, 취소, 실패) 마다 달라지는 theme

• INDEX

  • 제품 이미지 슬라이드 (auto play carousel banner)
  • 실시간 응모 바로가기 버튼
  • 자유 게시판, 당첨 후기 게시판, 공지사항
  • 좌우 슬라이드가 가능한 당첨 후기 게시판 썸네일 카드

• 자유게시판

  • 게시물
    • 작성, 읽기(Paginiation), 수정, 삭제 + 좋아요
  • 댓글
    • 작성, 읽기(Infinity Scroll), 삭제
  • 검색 (제목, 내용, 댓글)
  • 정렬 (최신순, 과거순)
  • 공유 (URL, Email, SNS)
  • 익명 사용자는 읽기만 가능

• 당첨 후기 게시판

  • 게시물
    • 작성, 읽기(Infinity Scroll), 수정, 삭제 + 좋아요
  • 댓글
    • 작성, 읽기(Infinity Scroll), 수정, 삭제
  • 검색 (내용, 댓글)
  • 정렬 (최신순, 과거순)
  • 공유 (URL, Email, SNS)
  • 익명 사용자는 읽기만 가능

• 공지사항

  • 게시물
    • 읽기 (Infiniry Scroll, Accordion)

• QnA

  • 질문
    • 작성, 읽기(Infinity Scroll), 수정, 삭제
  • 답변
    • 작성, 읽기(Infinity Scroll), 수정, 삭제
  • 익명 사용자는 읽기만 가능

• 로그인 / 회원가입

  • react-hook-form을 활용한 validation 체크
  • 회원가입 유무에 따라 진행되는 로그인/회원가입 프로세스
  • 이메일, 닉네임, 전화번호 입력시 자동 중복 확인
    • check-{information} API 활용
  • localStorage를 사용하여 유저별 token 발급 및 로그인 상태 유지

• 마이페이지

  • 응모권 상세 내역 조회(구매 내역, 사용 내역, 반환 내역)
  • 회원 정보 조회
  • 로그아웃

• 📓 Wiki (예정)