🍰 [230120 TIL]

꼬로로록

https://github.com/codestates-seb/seb41_main_033/pull/163

https://github.com/codestates-seb/seb41_main_033/pull/171

🍑 오늘 작업 내용

• Profile Content List에서 매칭글 클릭 시 작성한 매칭글의 게임 아이콘이 표시되도록 변경

눈에 안띄지만 암튼 게임 아이콘 맞음..

• Profile Content List 컴포넌트에 각 게시물 상세보기로 넘어갈 수 있도록 url 연결

• Profile Card 컴포넌트의 프로필, 닉네임, 아이디 부분을 Single Profile Wrap 컴포넌트로 변경
• Profile Content 컴포넌트 페이지네이션

https://velog.io/@ahsy92/React-Pagination-구현하기 여러 코드들을 참고해서.. 나한테 필요한 정보 값만 사용해서 구현해보았다. 우리 서버의 경우 API 자체에서 totalPages를 보내주기 때문에 참고한 코드처럼 전체 페이지 값을 구하거나 할 필요가 없었다. 총 페이지가 5페이지 이내일 경우, 숫자 양 옆의 < > 모양이 표시되지 않도록 설정했다. 총 페이지가 6개 이상이면 아마 보이게 되지 않을까…? (테스트 필요) 또 최대 페이지 이상의 페이지는 출력되지 않도록 작성!

• Header 컴포넌트 로그인 여부에 따라 나타나는 화면 달라지게 설정 & API 연결해서 내 프로필 확인할 수 있도록 (링크 연결까지)

🍒 트러블 슈팅

• 우리 서비스 페이지네이션의 특이점..!!! 한 컴포넌트에서 탭으로 보여지는 값이 달라지고, 각 탭마다 페이지네이션이 들어가야 했기 때문에 useState로 선언한 변수가 아주 많아졌다(…) 매칭글과 스토리 탭의 page를 공유하게 될 경우, 매칭글에서 2페이지를 클릭했다면 스토리에서도 똑같이 2페이지가 보여지기 때문에 변수의 분리가 필요했다 🥹 또, 현재 클릭한 버튼에 css를 주기 위해 또 상태값을 사용해야 했고.. (이건 더 줄일 수 있는데 내가 멍청해서 방법을 모르는 걸지도), 해당 상태가 매칭글, 스토리 모두에게 공유되는 값이라면 또 원하지 않는 화면을 보여줘서 ㅋㅋㅋㅋㅋ 어쩔 수 없이 변수를 잔뜩 분리했다.. Pagination 컴포넌트에만 선언된 변수가 무려 10몇 개.. 작성하면서도 이게 맞는걸까 엄청 고민한,,ㅋㅋㅋㅋ 결과적으로 내가 작성한 페이지네이션은 엄청난 하드코딩의 산물이다..🫠