2021년 10월 21일 updated.

toast UI 참고해서 작성해보기

🛠 [FE] 기술 스택

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

💡 [FE] 주요 기능

• INDEX 2021년 10월 21일

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

• 자유게시판

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

• 당첨 후기 게시판

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

• 공지사항

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

• QnA

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

• 로그인 / 회원가입

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

• 마이페이지 2021년 10월 21일

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

• 응모권

  • 응모권 수량 확인 / 구매
  • 익명 사용자는 로그인 후 사용가능 2021년 10월 16일

• 응모하기 2021년 10월 10일

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