명지대학교 구성원들의 건의사항만을 취급할 수 있도록 편한 작업을 제공해주는 신문고 서비스

Github

기간

인원

사용기술

https://github.com/harksu/SW-Competition-FrontEnd

2022.09 - 2022.10 (1개월)

FE 4명, BE 2명

• Javascript, React, styled-components
• Recoil

역할

✔️ UXUI 디자인 및 메인페이지/로딩페이지 퍼블리싱

✔️ 메인페이지 기능 개발

게시글 조회 API를 호출하여 Grid css 속성을 통해 리스트 표로 보이도록 제작

원하는 글 클릭 시 useNavigate의 state값으로 게시글 Id를 넘겨 상세 조회가 가능하도록 했습니다.

• 페이지네이션
  1. 한 페이지 당 10개의 게시글을 보여줄 예정이었기에 총 게시글 개수 / 10으로 페이지네이션에 사용할 총 페이지의 개수를 결정했습니다.
  2. 페이지네이션 버튼 표시를 위해 이중 중첩 배열 형식으로 offset 제작했습니다.

성장 경험

팀원들과 급히 기획하여 디자인을 하고, 개발에 들어가서 마감 날짜에 맞춰 제출하였기에 조금은 정신이 없었습니다. 그래서인지 코드의 깔끔함에 대해선 만족도가 많이 떨어지는 아쉬운 프로젝트이기도 합니다.

그러나 css grid 속성에 대해 헷갈리는 점을 해당 메인 페이지 리스트를 만들어보면서 해소할 수 있기도 했으며,

페이지네이션을 직접 구현해 본 첫 프로젝트였기에 배운 점도 많았습니다.

라이브러리를 사용하지 않고 페이지네이션을 만들 때, 모든 글의 개수를 불러와 제작을 하였는데 이 방법은 글의 개수가 많아지는 경우엔 굉장히 비효율적이라는 생각이 들기도 하여 고민을 하기도 했습니다.

이는 추후 다른 프로젝트(사자 마켓, 서울산책)에 개선하여 반영하는 계기가 되었습니다.

프로젝트 사진

메인페이지

상세 글 조회

로그인

회원가입