MYCOLOR PROJECT

react로 퍼스널 컬러 쇼핑몰 만들기

깃허브 : mycolor github

1. 프로젝트 소개 ✨

react로 퍼스널 컬러 쇼핑몰 만들기

쇼핑몰의 주요 기능들을 구현해보는 것을 목표로 한다.

2. 개발 기간

• 22.04.01 - 22.05.18

3. 기술 스택 🛠

React

SCSS

JSON

FIREBASE

REDUX

4. 주요 기능 📌

회원가입

• 약관 전체 동의, 선택 동의 가능
• 필수 약관을 동의하지 않을 시 다음 페이지로 이동하지 못함, 선택 약관은 가능
• firebase를 사용하여 회원가입 기능 구현
• 유효성 검사

로그인

• firebase를 사용하여 로그인 기능 구현
• 유효성 검사 및 그에 따라 로그인 버튼 색상 변경
• 로그인 상태를 redux를 사용해 저장

메인 페이지

• 캐러샐
• 퍼스널 컬러 페이지와 연결된 UI구현
• 랜덤으로 상품을 추천하는 기능

퍼스널 컬러 페이지

• 퍼스널 컬러에 대한 정보를 제공
• 하단에 background를 이용해 만든 퍼스널 컬러 테스트를 해 볼 수 있음

상품 리스트 페이지

• 상품 데이터를 받아와 봄, 여름, 가을, 겨울 카테고리에 따른 상품 보여주기
• 카테고리 상품을 높은 가격, 낮은 가격, 최신 등록순으로 필터링
• 상품의 총 개수 보여주기
• 상품을 클릭하면 해당 상품의 상세페이지로 이동하기

상품 상세 페이지

• 데이터를 받아와 각 상품에 대한 정보를 보여줌
• 상품 개수 조정해서 장바구니에 담기
  

장바구니 페이지

• 장바구니에 담은 상품들을 보여주기
• 상품 개수 변경
• 상품 삭제 기능

검색 페이지

• nav에 검색어 입력시 해당 검색어를 포함한 상품을 보여준다.
• 검색한 상품이 없을 경우 검색결과가 없다고 보여준다.

NAV

• 검색 기능, 로그인 상태에 따라 보여지는 UI 다르게 구현

FOOTER

• 카테고리 리스트, 로그인 링크, 개발자 소개 등 FOOTER 구현

잘한점

📍포기 하지 않고 모든 페이지 구현 도전한 것
사진도 무료 사이트에서 직접 선별하고,
처음에는 세션으로 로그인 기능을 구현했다가 reudx로 수정하고
퍼스널 컬러 내용 조사 등등 혼자하려니 프로젝트 기간이 길어졌지만
혼자서 프로젝트 한 개를 완주해보고 싶다는 목표는 이뤘다.
중요한건 꺾이지 않는 마음.. 🍀

📍redux 로그인 상태(with firebase), 장바구니 관리한 것!

hyestagram때는 세션스토리지를 이용했었는데,
세션스토리지는 로그인 하고 재접속 했을 때는 로그인 상태가 사라진다.
하지만 redux는 로그아웃하지 않고 재접속했을 때도 로그인 상태가 유지되어서
처음에 세션스토리지로 작업했다가 코드를 엎었다.

로그인 시 firebase uid로 저장을 해서 보안성을 높이고 로그인 된 값을 redux에 전달하고 nav바 상태관리(장바구니 접속 가능 여부 및 ui변경)도 했어야했다.

장바구니도 상품상세페이지에서 장바구니 버튼을 누르면 해당 상품의 정보와 양을 받아와서 장바구니에 넣어주는 것, 그리고 장바구니 데이터를 제거하는 것을 redux로 관리했다.

redux와 조금은 친해지게 된 것 같아 기뻤다. 하지만 여전히 어렵다.

개선해야 할 점

📍 추가기능 구현
유저의 아이디와 장바구니 데이터를 함께 저장해서
다시 로그인 했을 때 불러오는 기능을 구현해보고 싶다.

📍 커밋 규칙, className 규칙 초반 부터 잘 정하기
초반에 커밋 규칙을 정해놓지 않으니 헷갈려 후반부터 반영하기 시작했는데,
어떤 기능을 구현/수정한 것인지 훨씬 한눈에 잘 들어왔다.

---

마무리하며 🍀

긴 프로젝트 고생한 나에게 칭찬 박수를 보낸다..
하지만 아직 해야할 것이 많으니 또 열심히 해보자