1. 프로젝트 소개
목표 웹사이트
클래스101 (https://class101.net/)
클래스101은 유료로 취미부터 투자, 직무 등 다양한 클래스를 온라인으로 수강할 수 있는 서비스이다. 개인이 클래스를 개설하여 수강생들을 모을 수 있으며, 현재 다양한 분야의 유명인들이 클래스를 개설하여 정보를 제공하고 있다.
팀 소개
팀명 : Class404✨
HTTP 상태 코드 중 제일 잘 알려진 코드이기도 하고, not found에서 착안한 '좀처럼 찾아볼 수 없는 팀'이라는 의미로 Class404로 팀명을 정하게 되었다🤣
팀원 구성 : Front-end 3명, Back-end 4명
프로젝트 기간
2021.03.02 - 2021.03.11
기술 스택
Front-end
React (Functional Component) / Styled Components / CRA / React Router DOM / RESTful API
Back-end
Python / Django / bycyrpt / pyjwt / RESTful API / Aquery Tool / MySQL / CORS header
협업 툴
Notion / Slack / Trello / Git / GitHub / Figma
이번 프로젝트에서는 필요한 카테고리와 해당 카테고리 id 값, 정렬을 위한 sort 쿼리스트링 등을 모두 노션에 정리하여 소통하였다.
사실 프로젝트 진행하면서 클래스101 사이트에서 좀 특이하고 헷갈렸던 부분이 있었다… 바로 컴퓨터에 따라 네비게이션 등에 보여지는 카테고리 순서와 개수, 명칭이 달랐다는 점이다.
짧은 기간 내에 구현을 해야 하는 상황인데 통신 시 주고 받아야 하는 중요한 정보들이 헷갈리는 일이 자주 생겨서, 이후에는 노션에 모든 데이터 정보들을 정리해놓고 사이트에 보여지는 것과 관계없이 무조건 노션 정보만을 이용해 구현하기로 프론트, 백이 합의하였다.
그리고 클래스101 사이트 전체적으로 같은 내용이라도 다양한 방식으로 보여주는 등 데이터나 유저플로우가 많고 복잡했기 때문에, Figma에 페이지를 모두 캡쳐하여 현재 사이트를 한 눈에 파악하고, 기간 내에 불가능한 부분을 과감히 정리하여 구현 범위를 정했다.
2. 구현 범위 & Flowchart
구현 범위
구현 범위는 크게
- 메인 페이지 ❤️
- 회원가입
- 로그인 (카카오 소셜로그인)
- 클래스 상세 페이지
- 클래스 생성 페이지
- 마이 페이지 ❤️
6개의 페이지로 정리하였다.
그 중에서 나는 메인 페이지, 마이 페이지를 맡게 되었다.
내가 맡게 된 메인 페이지의 경우 여러 프로모션과 그에 따른 클래스 모음들이 여러 형태의 카드 컴포넌트 형태로 길게 나열되어 있었다. 그래서 실제 메인 페이지를 그대로 구현하지 않고, 클래스 리스트를 보여주고 filter, sort 기능을 모달로 사용할 수 있는 비슷한 페이지에 검색 기능을 추가하는 방식으로 간추려 구현하였다.
Flowchart
유저의 플로우가 막히지 않도록 한 사이클을 만들어 다음과 같이 플로우차트로 정리하였다.
플로우는 로그인 여부에 따라 두가지의 경우로 나뉜다. 먼저 비로그인 유저의 경우 빨간 라인의 흐름대로 플로우가 이어진다. 메인 페이지에서 클래스 상세 페이지와 비디오 시청 페이지의 샘플 영상까지 확인이 가능하나 클래스 생성, 마이 페이지, 리뷰 작성 페이지의 경우 접근이 불가능하다. 또한 메인 페이지 등에 있는 클래스 카드에서 찜하기 기능을 클릭 시 로그인 유저만 가능하다는 알림창이 뜨게 된다.
3. 구현한 페이지
메인 페이지
1. 카테고리 필터 / 정렬 모달 query string
여러 카테고리 중 원하는 것들만 중복으로 선택하여 필터가 가능하며, 3가지 정렬 방식 중 원하는 방식으로 선택하면 정렬 기준에 따라 순서가 바뀌게 된다. 모달에서 선택한 카테고리들을 선별해 배열에 넣어 해당 배열로 query string을 만드는 방식으로 구현하였다.
2. 로그인 / 로그아웃 따른 flow
로그아웃 상태의 유저들도 상세 페이지에 들어올 수는 있으나 '찜하기' 나 상품 결제는 로그인 유저만 가능한 기능임으로 로그인 여부를 확인하여 권한에 따라 다른 플로우로 흐를 수 있도록 하였다.
3. 검색 기능
필터를 통해 받은 데이터들 중 카테고리나 클래스 생성한 유저의 닉네임, 클래스 명을 검색할 수 있도록 인풋 value값을 렌더 리스트에 연결해놓았다.
마이 페이지
유저가 찜하기를 클릭하거나, 클래스를 개설하는 등 사이트 내에서 활동한 모든 기록과 개인 정보들을 보고 수정할 수 있는 페이지이다.
1. 마이 페이지 찜한 클래스, 생성한 클래스 리스트
메인 페이지의 카드 컴포넌트에서 찜하기를 클릭하면 하트 갯수가 증가되며, 해당 계정의 마이 페이지에서 찜한 클래스 리스트로 볼 수 있도록 구현하였다.
생성한 클래스 또한 내가 만든 클래스의 카드 리스트로 보여주도록 구현하였다.
2. 프로필 이미지 수정
프로필 클릭 시 수정할 수 있는 input이 보여지며, 인풋으로 바꿀 파일을 선택하면 즉시 통신이 이루어져 네비게이션과 마이페이지의 이미지가 수정되도록 구현하였다. 코드로 보자면 다음과 같다.
const inputImg = (e) => {
const img = e.target.files[0];
const formData = new FormData();
formData.append("fileName", img);
fetch(`${MYPAGE_API}/image`, {
method: "POST",
headers: { Authorization: localStorage.getItem("access_token") },
body: formData,
})
.then((res) => res.json())
.then((res) => setUserProfile(res.file_url));
setIsEditorOn(!isEditorOn);
};통신할 때 formData를 body에 담아 보내면 백엔드에서 s3를 이용해 해당 파일을 저장하여 파일의 url 주소를 보내준다. 그럼 받은 url을 userProfile 상태에 담아 렌더하는 방식으로 동작된다.
4. 배운 점
프로젝트 초반부터 통신 데이터를 문서화해야 소통이 수월하다.
통신 시 주고 받아야 하는 데이터의 키값, id, 타입 등은 모두가 같은 하나의 문서를 보고 파악해야 한다.
이번 프로젝트를 하면서 카테고리만 해도 20여개의 데이터 타입을 다루다보니 싱크 맞추는 것만으로도 시간이 많이 소요됐다. 그러다보니 그런 틀을 누군가가 나서서 정리하지 않으면 끝까지 헤매다가 프로젝트가 끝날 것 같아 내가 정리를 하고 팀원분들께 보기에 불편하진 않은지 피드백을 받아 정리해서 나중에는 그 최종본을 바탕으로 소통했다. 하고 나니 소통이 원활해져서 좋았지만, 좀 더 미리 나서서 했으면 좋았겠다는 아쉬움도 들었다.
기획 및 유저 플로우의 흐름을 명확히 하고 개발하자.
기획을 아무리 완벽하게 한다고 해도 항상 예상치 못한 부분들은 발견된다. 하지만 그렇다 할 지라도 기획은 구체적으로 문서화를 하고 함께 보며 소통해야하는 것 같다.
큰 틀과 그 안의 흐름을 명확히 하지 않고 시작을 하게 되면, 매일 미팅해도 결국 서로 다르게 이해하고 일을 시작하게 되기 때문에 이런 부분은 항상 프로젝트 초반부터 짜임새있게 맞춰놔야 하는 것 같다. 그렇지 않은 상태로 계속 프로젝트를 진행하다보면... 귀중한 시간은 흐르는데 일은 들인 시간과 노력 대비 진행되지 않고 있을 것이다.
내가 불편하다면 남도 불편할 수 있다.
프로젝트를 하면서 헷갈리거나 불편한 점들이 있어도, '나만 그런건 아닐까?' 라는 생각으로 눈치를 보며 의견을 나서서 말하지 못한 경우가 종종 있었다. 그런데 이제는 '내가 불편하다면 남도 불편할 수 있다'는 생각으로 바뀌었고, 이젠 내가 나서서 방법을 고민하고 해결하려고 노력한다. 문제가 해결되서 모두가 편해진다면 내 시간과 노력을 들이는 것은 전혀 아깝지가 않다.
2차 프로젝트는 아무래도 함수형 컴포넌트나 Styled Components를 처음 써보는 프로젝트이기도 하고 기업협업을 위해 이력서와 자기소개서를 써야하다보니, 1차에 비해 너무나도 짧다는 느낌을 많이 받았다. 그렇다보니 그만큼 조급하기도 했지만, 결과적으로 1차와는 다른 페이지를 맡아 새로운 기능을 구현해보는 것도 재미있었고, 목표했던 한 사이클을 모두 만들어내어 뿌듯했다.
