이전 회의에서 얘기했던 PostFix에 Client Components는 CC, server Components는 SC를 붙이는 방식으로 리팩토링을 진행하고자 했지만
현재 App Router 형식에 맞게 컴포넌트 디렉토리를 구성하려고 하니 너무 복잡도가 커져서 다른 방법으로 선회했습니다.
제가 생각한 컨벤션은 다음과 같습니다.
App Router 방식에서 사용하고 있던 굵직한 도메인을 그대로 이용합니다. ( (main), (auth) 등)
그 아래에 도메인 별로 clientComponents, serverComponents 디렉토리로 분리해서 분기를 나눠줍니다.
그리고 세부 도메인에 맞게 파일명을 지정해줍니다. ( 예를 들어, /register/password에서 사용하는 SSR 버튼이라면 RegisterPasswordButtonSC)
3-1. 아직 Form 형태에 대해서는 생각을 더 해봐야될 것 같아서 일단 저렇게 배치 해뒀습니다.
️⃣연관된 이슈
24 #50
📝작업 내용
Refactor
이전 회의에서 얘기했던 PostFix에 Client Components는 CC, server Components는 SC를 붙이는 방식으로 리팩토링을 진행하고자 했지만 현재 App Router 형식에 맞게 컴포넌트 디렉토리를 구성하려고 하니 너무 복잡도가 커져서 다른 방법으로 선회했습니다. 제가 생각한 컨벤션은 다음과 같습니다.
Feature
전반적인 기능구현 요약 영상 https://github.com/user-attachments/assets/0a2a199e-75c0-4067-babd-c590e1f8255a
/search/result 에서 Data Fetching 하기 전에 Debouncing 과 함께 스켈레톤 UI가 보이게 만들었습니다.
그리고 Filter 페이지는 아직 상세 구현을 하지 않았으나 /Search/<사용자입력값>/[filter]로 이동하게 만들었습니다. (스포티파이 처럼)
장르페이지는 최신음악, 인기음악, 인기 아티스트, 인기 앨범, 인기 플레이리스트 총 5개 섹션으로 구현했습니다.
세부 페이지 이동은 Data Fetching 시에 각 오브젝트에 대한 id로 이동하게끔 만들었습니다.
비밀번호 초기화 페이지에서, 비밀번호 초기화를 하고 그 이후 페이지가 없는 것 같아서 기존 /login/reset-password/success 페이지를 /login/reset-password/code 페이지로 변경하고 success page를 새로 만들어줬습니다.
/login/reset-password/code 페이지에 코드 재전송 버튼을 추가해뒀습니다.
스크린샷 (선택)
💬리뷰 요구사항(선택)