(1) 자기소개

안녕하세요, 비전공자로 대학교 시절 여러가지 재미있는 웹 서비스를 만들고자 니꼬쌤 강의로 코딩에 입문했고 시간이 흘러 현재 프론트엔드 개발자로 일하고 있습니다. 서비스를 기획하고 이것저것 만들어 보는 것을 좋아했는데 회사에서 일을 하다 보니 좋아했던 코딩에 대한 흥미가 떨어지는 와중에 챌린지를 알게 되어 다시 공부도 하고 기획 했던 것을 만들어 보고 싶어 클론 컨테스트에 지원하게 되었습니다.

(2) 서비스 소개

서비스 이름은 Z Review 입니다. X 클론을 베이스로 하여 사용자가 맛집, 카페, 영화 등 음식점과 장소를 방문하거나 특정 컨텐츠를 이용하고 나서 간단하게 그것에 대한 후기를 타임라인에 공유할 수 있는 서비스를 만들어보려고 합니다. 개발을 하다보니 맛집, 카페, 영화 등 정보를 오픈 API 등을 통해서 가져와야 하기 때문에, 여러가지 카테고리를 추가하고 싶었지만 영화와 애니, 드라마 등 만 우선적으로 추가하게 되었습니다.

서비스 URL : https://z-review-fd79f.web.app/

(3) 사용 기술 스택

트위터 클론 강의 기술 스택인 React, vite, firebase 를 사용했고, 상태관리는 zustand 를 사용했습니다. 사용해본 상태관리 툴 중 제일 편한 것 같습니다.

(4) 구현 기능

회원가입 및 로그인 화면입니다. 소셜 로그인을 더 추가하고 싶었으나 시간 관계로 추가하지 못했습니다.

메인 화면 입니다. 오른쪽 사이드바 기능은 레이아웃만 있고 동작은 하지 않습니다.

프로필 페이지 입니다. 프로필 이름을 바꿀 수 있고, 내가 작성한 리뷰를 확인할 수 있습니다.

북마크 페이지입니다. 북마크를 할 수 있는데, 북마크의 경우 파이어베이스 데이터 구조를 서브 콜렉션으로 사용했는데, 규칙 지정이 어려워서 현재는 본인이 작성한 글만 북마크 할 수 있도록 되어있습니다,,

리뷰 작성 버튼을 누르면 먼저 카테고리 컴포넌트를 노출합니다. 여기에서 작성할 리뷰의 카테고리를 고를 수 있습니다.

영화로 들어왔다면, 영화 검색을 통해 어떤 컨텐츠를 리뷰할 것인지 고를 수 있습니다.

어벤져스를 검색하여 나온 첫번째 포스터를 클릭하여 해당 영화에 대한 리뷰를 작성할 수 있습니다.

마지막으로 리뷰 삭제나 로그아웃 등에 소소하게 커스텀 컨펌을 적용시켰습니다.

(5) 정리

처음 기획했을 때는 정말 여러가지 기능을 구현하고 싶었는데 2주 안에 다 하지 못해 아쉽습니다. 생각보다 레이아웃을 짜는데 시간이 많이 걸렸던 것 같고 구현하지 못한 많은 기능들은 조금씩 지속적으로 추가해서 제대로 된 서비스를 만들어보고 싶습니다. CSS 마스터 클래스 챌린지를 함께 진행했는데, 그리드를 배우고 그리드를 클론 콘테스트 작업 레이아웃에 많이 써봤는데 뿌듯합니다.

클론 코딩 컨테스트를 진행하면서 개인적으로 많이 부족하고 더 열심히 공부해야겠다고 생각했고, 정말 큰 도움이 된 것 같아서 감사하다는 말씀 드리고 싶습니다! 모두 고생하셨습니다!