스크랩을 통해 사용자의 취향을 도출하고, 매거진 생성 및 공유를 통해 퍼스널 브랜딩을 돕는 서비스

Github

기간

인원

사용기술

https://github.com/Kusitms-26th-Ohttention/pickRAP-FE

2022.12 - 2023.02 (3개월)

PM 1명, 기획 2명, 디자인 1명, FE 2명, BE 3명

• Typescript, React, emotion
• Recoil, React-Query
• Github actions, Storybook

역할

✔️ 전체적인 삭제 기능

[다중 선택]

const pickSet = useRef(new Set<number>());

const selectPageItems = useCallback(
    (id: number) => {
      pickSet.current.has(id) ? pickSet.current.delete(id) : pickSet.current.add(id);
      setPageItems(Array.from(pickSet.current));
    },
  [pickSet, setPageItems],
);

• Number 형식만 취급하는 Set 자료구조를 useRef 객체로 생성합니다.
• 인자로 받아올 게시글의 Id 값과 Set 자료구조 내부의 Id 값들을 비교하여 선택 및 취소 기능 추가합니다.
• useCallback을 통해 매번 다중 선택 시 해당 함수가 불필요하게 생성되어 불러오는 것을 방지하도록 했습니다.

[useMutation을 이용한 삭제, invalidQueries로 데이터 무효화]

• useMutation과 DELETE API 연결 - 삭제 팝업창 버튼을 통해 콘텐츠를 삭제합니다.
• 다시 리스트 페이지로 돌아와 데이터를 불러올 때, 변경 사항이 반영된 리스트를 요청하기 위해 InvalidQueries로 다시 가져오고자 하는 쿼리키를 지정하여 결과가 바로 보여질 수 있도록 제작했습니다.

✔️ 분석 페이지 스타일링 및 도넛 차트로 데이터 시각화

• react-chartjs-2 패키지 사용

  다운로드 횟수와 레퍼런스의 개수, 다양한 시각화 기능을 제공한다는 이점을 보고 해당 패키지를 선택하여 도넛 차트를 추가했습니다.

const { allAnalysis } = useGetAnalysis();
const hashTags = allAnalysis.hashtags;

const chartColor = ['#F6D936', '#2A2E34', '#ABA9A6', '#EAE9E4'];
const dataSetsName: string[] = [];
const dataSetsRate: number[] = [];
  hashTags.forEach((item) => (dataSetsName.push(item.hashtag_name), dataSetsRate.push(item.hashtag_rate)));

const DefaultTagData = {
  labels: dataSetsName,
  datasets: [
    {
        data: dataSetsRate,
        backgroundColor: chartColor,
        borderWidth: 0,
    },
  ],
};

• 도넛차트의 해시태그 키워드가 포함된 게시글 모아보기

  도넛차트 클릭 시 해시태그 키워드를 받아와 /scrap/params 값으로 보내 검색어로 API를 요청할 수 있도록 하였으며, UI상에서도 해당 검색어로 검색된 것처럼 보여주도록 구현했습니다.

✔️ QA 이슈 해결

• 수정하기에서 기존 데이터가 아닌 빈 값으로 보이는 현상 defaultValue를 수정하여 해결했습니다.
• 매거진 수정하기 페이지에서 표지 안보이는 현상 recoil 전역 상태 관리를 통해 표지값을 넘겨 해결했습니다.