KODA 메인 페이지 구현

 

 

 

 

 

👆 메인 페이지 구현 움짤 

 

 

 

 

KODA

 

 

 

 

총 4명이서 구성된 Team Koda ( FE : 2, BE : 2 ) 제작

그 중 맡았던 메인 페이지(FE)를 기록합니다

 

메인 페이지 (FE) 편

 

 

 

 

---

 

구현한 기능

 

 

 

• 서베이 불러오기 (해당하는 서베이 없을 시 안내 문구), 페이지 네이션
• 서베이 서치 기능, 필터
• 서베이 삭제(데이터 베이스에서 삭제), 강제 종료 기능

 

---

 

 

 

맡았던 페이지 중에 가장 공들였던 메인 페이지!

페이지네이션을 처음으로 구현했는데 관련된 다양한 라이브러리가 있다는 점도 알게 되어 여러모로 뿌듯한 작업이었다.

 

모든 페이지와 연결되는 메인 페이지인만큼 기획 단계부터 유저 플로우를 최대한 신경써서 기획 - 작업했는데

 

 

 

 

 

이렇듯 기획자님과 계속 소통하며 팀원과 1차 2차 초안을 만들어 작업했다.

기획 후엔 와이어 프레임 / 기능 명세서를 토대로 작업했고

 

 

 

👆  메인 페이지 스크린샷

 

 

이렇게 나왔다 :)

 

 

 

 

 

 

해당 서베이 타이틀을 클릭하면 링크 페이지 (응답자가 설문을 기입하는 링크를 보여주고 복사 가능)로 이동할 수 있게끔 했고

결과 버튼을 누르면 통계 페이지, 강제 종료 버튼을 누르면 진행중인 상태를 완료로 바꾸는 fetch, 휴지통 버튼을 누르면 데이터 베이스에서 삭제 되는 delete method를 사용했다.

 

이번 프로젝트에선 기획자님과 두어번 정도 회의를 거쳤는데 강제 종료 기능과 삭제 기능에 대해서 피드백 해주셔서 사용자 입장에서 기능을 살펴볼 수 있는 좋은 경험이 되었다 느꼈다

 

관련해서 기능 구현 후 받은 피드백으론 해당 서베이 응답자 수를 나타내는 부분이 버튼이 아님에도 버튼처럼 보인다는 점이었는데 이는 최대한 깔끔하게 구현하고자 UI만 집중해 나온 실수라 생각한다 🥲 아예 title 앞으로 빼서 응답자 수를 좀 더 크게 보여줬더라면 하는 아쉬움이 남는다.

 

 

 

---

 

 

 

 

 

👆  메인 페이지 State 목록, 컴포넌트 구조

 

 

 

 

가장 힘들었던 페이지네이션과 서치, 필터 기능!

 

 

 

 

 

 

👇 페이지 네이션 코드

 

 

 

페이지 네이션이 이렇게 힘든 기능인가 싶으면서도 넘버링 관련해선 이런 방향이 맞는 것인가 하는 의문이 들었던 작업이었다 🥲

limit = 10 을 주어 10개씩 잘라서 받았고 페이지 네이션 넘버링을 위해 유저가 가지고 있는 서베이 갯수(mainPageCount)도 같이 데이터로 받았다.

 

처음에 서베이를 받아올 때뿐만 아니라 서치 - 필터 기능이 사용될 때마다 데이터를 받아와야했는데 이를 위해 처음에 각각 썼던 url을 백엔드 팀원과 상의 후 긴 객체를 넣어도 화면이 나온다는 점을 이용해 하나로 합쳤다.

 

필터 관련해서는 모달을 사용했는데 onClick 시 모달을 불러오게 했고 useRef를 이용해 화면 밖을 누르면 모달이 꺼지도록 했다.

이와 관련해서는 모달을 불러올 때만 화면 밖을 눌렀을 때 모달이 꺼지는 이벤트가 발생하도록 했는데

 

 

 

이렇게 onClick 이벤트 자체를 outside라는 변수 안에 빼내어 썼다

 

 

 

 

 

 

그리고 자바스크립트로 구현한 페이지 네이션 넘버링

5개씩 잘라서 보여주었고 첫번째 페이지, 마지막 페이지에선 넘어가지 못하게 구현했다. 페이지 네이션 1, 2, 3 번 해당 값들을 배열 형태로 state에 담았고 또 5개씩 잘라서 보여줘야했기 때문에 이를 인덱스로 관리하기 위해 다시 배열에 담았다.

 

이를 위해 길어진 코드를 보며 과연 이 방향이 맞는 것인가 🥲 하는 의문이 많이 들었는데 계속 공부하고 찾아보았지만 결국 라이브러리를 사용하는 것 외엔 배열에 담아서 자르는 방법 말곤 찾아내지 못했다. 

 

이와 같이 메인 페이지는 아쉬운 점이 남는 작업이었는데,  state 를 너무 많이 사용했다는 점과 리액트 쿼리를 사용하지 못한 점 또한 아쉽다. 기능 구현하기에 급급해 학습엔 크게 중점을 두지 못했는데 관련해선 공부하기 좋은 결과물이기 때문에 팀원과 함께 리팩토링을 진행하기로 했다 

 

 

 

 

 

 

 

 

 

 

 

👇 KODA Project 회고록 링크

 

https://0119eunji.tistory.com/57?category=1055529 

KODA Project 회고록 및 위코드 수료 회고록