넘블 싸이월드

henry·2022년 11월 3일

참가 대상인 0~1년 차 프론트엔드 개발자로 주어진, GraphQLAPI와 Next.js로 구현하는 챌린지에 참가하여 프로젝트를 시작했다.

프로젝트에서 요구하는 것은 간단한 레이아웃과 게시판 CRUD기능 정도라 프로젝트를 시작한 지4일 만에 기능을 거의 구현했다. 주어진 프로젝트 기간은 3주였고 4만원 내고 신청한 챌린지라서 할 수 있는 부분은 더 구현해 보자 해서 디스코드 질문 게시판에 질문을 남기고 답변을 받았다

Q. 요구사항에서 추가로 기능을 구현해서 제공한 피그마와 디자인이 달라지면 평가에서 마이너스가 있을까요?

답변

답변을 받고 싸이월드 앱을 설치해서 싸이월드에는 어떤 기능들이 있고 어떤 기능들을 추가로 구현할 수 있는지 GraphQL Playground에서 제공되는 쿼리들을 확인하며 추가로 구현할 기능을 결정했다.

1. 새로운 게시글 표시기능

현재 싸이월드 앱에서는 게시글을 새로 작성된 글/ 총 게시글 형식으로 표시하고, 새로 작성된 글이 있으면 옆에 N 배지를 표시한다.

싸이월드에서는 7일 이내로 작성된 게시글이면 N 배지가 나타나는데 챌린지 기간에 다른 몇십명의 참가자들이 게시글을 작성하거나 수정할 텐데 새로운 게시글의 기준을 7일로 계획하면 N 배지가 무조건 나타날 거 같다고 판단해서 24시간 이내로 작성된 게시글이 있으면 새로운 게시글 로 분류해서 왼쪽에 나타내고 N배지가 나타나게 구현을 했다.

작성한 코드

게시글(다이어리) 데이터 타입 (작성한 게시글의 시:분:초 까지 받아온다)
게시글의 createdAt값과 어제 날짜와 비교해서 24시간 이내로 작성된 게시글 수를 return 하는 함수를 구현

const newDateCount = (diaryList: DiaryType[]): number => {
    const today = new Date();
    const day = today.getDate();
    const yesterday = new Date(new Date().setDate(day - 1)).toISOString();
    let count = 0;
    
    diaryList.forEach((date) => {
      yesterday < date.createdAt && count++;
    });

    return count;
  };

테스트 결과

1. 새로 작성된 게시글이 있을 경우 왼쪽에 5개 숫자와 [N] 배지 표시

2. 새로 작성된 게시글이 없을 경우

const yesterday = new Date(
     new Date("2023-12-18").setDate(day - 1)
   ).toISOString(); // 비교할 날짜를 먼 미래로 설정
// 날짜를 임의로 설정해서 yesterday와 게시글 생성일의 차이는 
// 60일 정도라서 왼쪽에 표시가 나타나지 않고 N 배지도 나타나지 않는다

위의 코드로 구현했지만 한번 데이터를 받아올 때 데이터 개수는 10개씩 받아와서 새로 작성된 게시글이 10개 이상이어도 10개까지 표시가 된다. 10개 모두 새로운 게시글이면 page+1 하고 데이터 패칭해서 계산할 수 있겠지만 이건 비 효율적이라 생각해서 약간의 이슈를 남긴 상태로 구현

2. 방명록 페이지 구현

요구사항에 없었던 Product관련 쿼리들이 playground에 있는 것을 확인하고 추가로 방명록 페이지를 구현하였다.

Product 관련 스키마를 확인해 보면 product관련 쿼리라 그런지 seller, price등 판매에 필요한 값도 있었지만 graphql을 사용해서 필요한 데이터(name, detail)값만 가져와서 방명록 페이지를 만들 수 있었다.

방명록 페이지는 디자인은 포기하고 구현했다....

방명록에도 24시간 이내로 작성된 글이면 N배지 표시

+ 다이어리 리스트 페이지와 다이어리 상세 페이지에도 적용

다이어리 리스트
다이어리 상세

3. 페이지 네이션 구현 (PR)

피그마에는 페이지 네이션 구현 없이 최신 게시글을 5개만 보여지게 하면 된다고 되어있었지만 이 기능은 기본으로 구현해야 한다고 생각했다.

다이어리 페이지와 방명록 페이지에서 공통으로 사용이 가능해 보여서
< 1 > 페이지 상태와 버튼 기능을 하는 Pagination 컴포넌트와
이전 페이지, 다음 페이지로 이동이 가능한지 계산하고 이동하는usePagination 커스텀 훅을 구현해서 2개의 페이지에서 재사용 했다.

전체 페이지 개수와 현재까지 받아온 페이지 개수를 비교해서 page 값은 state로 관리하면 새로고침 시 유지가 안 되어서 query string으로 구현

// usePagination.ts

// 마지막 페이지인지 확인 ()
  const isEndPage: boolean =
    totalCount - ((beforePage - 1) * defaultSize + defaultSize) <= 0;


  const handlePrevPage = (): void => {
    if (beforePage === 1) {
      return;
    }
    setPage(beforePage - 1);
    router.push(`${router.pathname}?page=${beforePage - 1}`);
  };

  const handleNextPage = (): void => {
    setPage(beforePage + 1);
    router.push(`${router.pathname}?page=${beforePage + 1}`);
  };

  return [page, isEndPage, handlePrevPage, handleNextPage] as const;
};