원티드 클론 프로젝트 리뷰

프로젝트 로직 설계

내가 맡았던 Joblist page에서 category선택, filtering, sorting 이벤트가 일어날 때마다 URI변경, Joblist변경을 해줘야하서 미리 로직설계를 꼼꼼히 한 후 프로젝트를 진행했다. (그랬음에도 코드에서 스파게티냄새가 난다..ㅠㅠ)

또한 filtering state를 redux에서 관리하기 위해서 redux 데이터 설계도 미리 그려봤다.

1. 탐색페이지 - 카테고리 & JOb 리스트

카테고리

카테고리를 선택하면 카테고리 경로와 카테고리 슬라이드에 있는 data가 다시 fetch 되어야 한다.
1. 카테고리를 누르면 눌린 카테고리의 index를 URL로 전달
2. 선택된 카테고리를 제외한 카테고리들이 슬라이더에 보여짐
3. 선택된 카테고리의 경로가 보여짐

//카테고리 버튼을 눌렀을 때 URL경로를 바꿔준다
  const onCategoryClick = () => {
    changeCategories(true);
    dispatch(setUrlLoading(true));
    const pushURL = parentsId
      ? `/joblist/${parentsId}/${Id}`
      : `/joblist/${Id}`;
    history.push(`${pushURL}${location.search}`);
  };

//현재 선택된 카테고리의 index로 슬라이더에 들어갈 data를 얻기위해 filter 하는 함수
  const filterCategories = allCategories => {
    let currentCategories = [];
    if (sub)
      currentCategories = allCategories[main - 1].sub_category.filter(
        el => el.id !== +sub
      );
    else if (main) currentCategories = allCategories[main - 1].sub_category;
    else currentCategories = allCategories;
    setCategories(currentCategories);
  };

//현재 선택된 카테고리의 index로 카테고리 경로에 들어갈 data를 얻기위해 filter 하는 함수
  const getCategoryRoute = allCategories => {
    let currentCategoryRoute = [];
    main && currentCategoryRoute.push(allCategories[main - 1]);
    sub &&
      currentCategoryRoute.push(
        allCategories[main - 1].sub_category.filter(el => el.id === +sub)[0]
      );
    setRoute(currentCategoryRoute);
  };

Job list

카테고리 클릭 이벤트가 일어났을 때 URL에 있는 카테고리 index를 백엔드에 보내서 카테고리에 맞는 직업리스트를 가져와야한다.
1. 카테고리 num을 백엔드에 요청보내기 위한 query string으로 변환
2. 기존 URL에 카테고리 query를 더해서 API데이터 get요청

//query string으로 변환
  const objToQuery = () => {
    const jobCategoryQuery = main
      ? sub
        ? `&main=${main}&sub=${sub}`
        : `&main=${main}`
      : "";
    const currentQueryStr = location.search;
    return currentQueryStr + jobCategoryQuery;
  };

//jobLoading state가 변하면 BE 로 API요청
const query = objToQuery();
fetch(`${JOB_API}${query}`, option)
      .then(res => res.json())
      .then(res => {
        setJobData(res.job_list);
        dispatch(setJobLoading(false));
      });

2. 탐색페이지 - Filtering & Sorting

filtering & Sorting

태그 카테고리를 누르면 그에맞는 태그들이 나오게 하는 기능
태그를 다 정하고 확인을 누르면 태그가 포함된 Job list를 보여주는 기능
1. 태그 누를 때 마다 redux에 상태 저장
2. 확인 누르면 URL에 query로 넣어줌
3. query 이용해서 백엔드에 API 요청

-> sorting도 비슷한 로직으로 실행된다.

//redux에 선택한 태그 저장
  const setTagState = (id, name) => {
    const isHavingTag = userFilterState.tag.some(function (val) {
      return val.id === id;
    });
    if (!isHavingTag) {
      if (userFilterState.tag.length < 3) dispatch(addFilter({ id, name }));
      else alert("이런 욕심쟁이! 태그는 3개 까지만^.~");
    }
    if (isHavingTag)
      dispatch(deleteFilter(userFilterState.tag.filter(tag => tag.id !== id)));
  };

3. 탐색페이지 - 좋아요기능

좋아요 버튼 누르면 카드컴포넌트에 표시되고 좋아요한 기업 모아볼 수 있다.
1. 좋아요 버튼을 누르면 BE로 유저 좋아요 테이블에 넣을 수 있도록 요청보낸다
2. BE에서 이 유저의 Joblist를 다시 받아온다( 좋아요 표시된거 업데이트되도록)
3. 좋아요 리스트에서 유저가 좋아요한 기업리스트 보여준다.

  const onLike = () => {
    fetch(USER_LIKE_API, {
      method: "POST",
      headers: {
        Authorization: localStorage.getItem("token")
      },
      body: JSON.stringify({
        company_id: id
      })
    })
      .then(response => response.json())
      .then(result => {
        dispatch(setJobLoading(true));
      });
  };

  const goToDetail = id => {
    history.push(`/detail/${id}`);
  };

3. 이력서페이지 - 이력서 생성기능

이력서 작성 버튼 누르면 BE로 유저 토큰과 함께 이력서 생성요청보냄 보내고 난 후 유저의 이력서 리스트 다시 받아온다.

  const createResume = () => {
    fetch(RESUME_LIST_API, {
      method: "POST",
      headers: {
        Authorization: localStorage.getItem("token")
      }
    })
      .then(res => res.json())
      .then(res => {
        setIsLoading(true);
      });
  };