/frontend

최근 20~30대 고객층들이 미용에 대한 관심도가 높아져 기에 향수에 대한 정보와 커뮤니티를 진행할 수 있는 온라인 사이트를 제작하고자 기획 및 개발 (개인 리드미 작성용 저장소)

Primary LanguageTypeScript

Perfume Community - Read- A Perfume

프로젝트 소개

  • 향수 애호가들을 위한 온라인 커뮤니티 플랫폼입니다. 사용자들이 다양한 향수에 대한 리뷰를 작성하고, 향기 노트와 성분 정보를 교환하며,
  • 서로의 향수 취향을 공유할 수 있도록 설계되었습니다.
  • 또한, 추천 알고리즘을 통해 사용자가 선호할 만한 향수를 제안하고, 유사한 향기를 찾을 수 있는 기능을 제공합니다.


Perfume Community 메인 화면

개발 환경

React TypeScript Vite Material-UI React-Query

제가 담당한 핵심 개발 기능 (Features)

1. 향수 리뷰 작성

  • 사용자가 직접 리뷰를 작성하고 다른 유저가 작성한 리뷰를 검색할 수 있는 기능 제공

향수 리뷰 작성
사용자가 향수 리뷰를 작성하는 화면


2. 향수 리뷰 보기

  • 다른 사용자가 작성한 리뷰를 한눈에 확인할 수 있는 인터페이스 제공

향수 리뷰 보기
다른 사용자가 작성한 리뷰 보기 화면


3. 회원가입

  • 아이디 중복 확인, 이메일 인증, 인증 코드 확인 절차를 통한 안전한 가입 절차 구현
  • 실시간 폼 유효성 검사를 통해 잘못된 입력 차단
  • 각 인증 단계에서 오류 없이 안정적인 사용자 경험 제공

회원가입
회원가입 페이지


4. 로그인

  • 사용자가 쉽게 로그인할 수 있는 페이지 제공

로그인
로그인 페이지


5. 공통 컴포넌트 및 스토리북을 통한 UI 문서화

  • 스토리북을 활용하여 독립적인 UI 컴포넌트 개발 및 테스트
  • 컴포넌트의 다양한 상태와 조합을 시각적으로 확인하여 의존성을 최소화
  • 자동 생성된 문서를 통해 팀원 간 효율적인 소통과 협업 지원

스토리북
UI 문서화를 위한 스토리북


팀 프로젝트 저장소 링크

GitHub 저장소 링크

이 저장소는 리드미를 개인화하기 위해 포크한 저장소입니다. 팀 저장소를 확인하고 싶다면 위 링크를 눌러주세요. ``