[Project] 다시 쓰는 프로젝트 : Tango_Plate (ver 1.0.0)

최근에 위코드에서 작업 했었던 1차 프로젝트가 돌아가는지 궁금해서 clone 받고 확인해 봤는데

아니나다를까 첫 페이지 부터 보이지 않는 에러를 마주하게 되었다.

그냥 두고 볼 수는 없을 것 같아서 기존 기능들을 프론트 단에서 구현 할 수 있는 수준으로 일단 구성을 해 놓은 뒤,

차후 백엔드 API를 만들 수 있는 수준이 될 경우, 백엔드 통신도 함께 구현해서 적용해 볼 예정이다.

 

다시 구현하는 Tango Plate는 헬창들을 위한 단백질 충만한 맛집을 추천하는 페이지로 변모할 예정

 

 

Flow Chart

 

ver 1.0.0 에서의 Flow Chart는 간단하다.

Main 페이지에서 List 페이지로 이동하고 Detail 페이지로 이동할 수 있다. (어떠한 분기처리도 없음)

앞으로 버전 업과 API 통신을 통해 분기처리를 진행할 예정

 

 

Function

 

 

로그인 / 회원가입

- 페이지 이동없이 모달창으로 로그인 / 회원가입 UI 변환

- 모달창 바깥 영역 클릭시 모달창 닫힘

 

메인 페이지

- 검색창 애니메이션 구현

- 로컬 추천 맛집 & 지역 맛집 밀키트 영역 레이아웃

- 캐러셀 기능 (react-slick 라이브러리 사용)

 

리스트 페이지

- 가게 이미지 hover시 가게 평점 보이도록 구현

- 가장 최근에 작성된 리뷰 말줄임표로 구현

 

상세 페이지

- 리뷰 평점순, 최신순 버튼으로 정렬

- 리뷰 달기 버튼 클릭시 리뷰 작성창 보이도록 구현

- 리뷰 기능 중 CR 까지 구현

 

---

추가 기능 구현 내역

- 로그인 / 회원가입 기능

  - 로그인 기능 (API 나오기 전까지 localStorage 이용 예정)

  - 회원가입 기능 (API 나오기 전까지 localStorage 이용 예정)

  -> 회원가입을 통해 localStorage에 닉네임, 아이디, 비밀번호를 저장

  -> 로그인을 통해 localStorage에 저장된 아이디와 비밀번호 비교해서 로그인 기능 구현

  -> 차후 이름에 작성한 부분은 리뷰 작성시 닉네임으로 활용

 

- 검색 기능

  - 지역 검색을 통해 검색한 지역에 해당하는 가게 리스트 구현 (API 나오기 전까지 mock 데이터로 데이터 구현 예정)

 

- 리스트 페이지

  - 정렬 기능 구현 (평점 / 리뷰 / 좋아요)

 

- 상세 페이지

  - 리뷰 달기 버튼 클릭시 로그인 하지 않았다면 로그인 모달창 오픈

  - 리뷰 삭제 기능 구현

  - 리뷰 수정 기능 구현

 

---

 

Ver 1.0.0에는 아직 별다른 기능은 없이 거의 UI 작업과 간단한 라우팅 기능만 구현한 상태다.

위의 추가 기능 구현으로 작성한 부분이 1차 프로젝트 때 했었던 내용인데,

우선적으로 저 기능들을 구현한 뒤, 차후 이런 저런 기능들을 붙여볼 예정이다.