feat(home): 홈 페이지의 피드 타입과 페이지를 쿼리 파라미터로 설정할 수 있도록 만들고, 파라미터가 없을 때 자동으로 기본 파라미터가 지정되도록 개선합니다.

[innocarpe]

📌 이슈 링크

• close 🌟 FEATURE: [2 Week] 메인 페이지를 개발합니다. #47

📖 작업 배경

• 홈 페이지에 설정 가능한 옵션이 피드와 페이지 두 가지가 있는데, 이에 관한 설정 기능을 아직 만들어 두지 않았어서 이것부터 개발합니다.

🛠️ 구현 내용

• (잠수함 패치) style 폴더도 Path alias 를 걸어주면 좋을 것 같아 세팅해 주었습니다.
  • AppRoutes 내의 import path 를 alias 걸어주었습니다.
• 홈 페이지에서 피드 타입과, 페이지 번호롤 쿼리 파라미터를 통해 선택할 수 있도록 만듭니다. 동시에 값 변화를 쿼리 파라미터에도 반영되도록 합니다. 홈 피드 타입은 my | global 에 더해 아티클 태그도 피드 타입이 될 수 있어서, 이를 반영하도록 타입을 선언했습니다.
• 페이지를 누를 때 의도치 않게 #이 달리길래 확인해 보니 PageButton 에서 href 를 설정하고 있었습니다. 이걸 지우니 a 태그에서 스타일이 지워지는 이슈가 생겼는데, button 태그로 변경하고 기존과 스타일이 같아지도록 수정했습니다.
• 홈 페이지에서 피드 타입과 페이지 번호를 기본으로 지정하도록 하는 기능을 개발합니다. 이를 전담으로 맡는 Custom Hook 을 작성합니다.
• 두 번째로는 파라미터 변화가 감지되었을 때 replace 를 하는 Custom Hook 을 개발합니다.
• 홈페이지가 마운트 될 때, 두 훅을 조합해서 필요에 따라 기본 파라미터를 지정해 replace 를 하도록 구현합니다.

💡 참고사항

• 최종적으로는 Custom Hook 을 두 개로 나누어서 조합해서 사용하게 되었는데, 양쪽에서 둘 다 useEffect 를 사용하고 첫 마운트 시에만 처리하도록 [] 을 주입했었는데 이렇게 하니 두 번째 훅이 타이밍 이슈로 navigate 가 처리가 안 되더라구요. 그래서 고민하다가 첫 훅을 useEffect 없이 구현하도록 변경했습니다.

🖼️ 스크린샷

Screen.Recording.2023-09-21.at.9.34.49.PM.mov