오늘 한 일

• 메인페이지, 탭메뉴 컴포넌트 보다 더 세분화, 재사용성 고려
• 헤더, 탭메뉴 ui 수정
• 이번 프로젝트 첫 PR, 첫 merge
• chat 페이지 (채팅 목록) 스켈레톤 작성
• chat 페이지 구현 시 레이아웃 구성 관련 고민, 레퍼런스 서치

과제

chat 페이지 구성 구현

모바일에서는 chat(목록)과 chat(id) 페이지가 분리되는데, 데스크탑에서는 화면을 둘로 나눠서 같이 띄워주는 작업이 필요. url이 다른데 어떻게 구현해야 좋을지.

레퍼런스 서치

별 거 없지만, 인스타그램을 많이 참고했기에 인스타그램의 url을 한 번 봤다.
주소 구조는 모르겠지만 어쨌든, url이 바뀌면서 한쪽에만 띄워주는 건 가능하다는 것을 봄.

인스타그램...
채팅 목록만 보이는 주소 : https://www.instagram.com/direct/inbox/
채팅 item 누르면 바뀌는 주소 : https://www.instagram.com/direct/t/[id]

고민

• 모바일 width에서는 chat/[id]에 목록 컴포넌트를 hidden으로 처리할까?
• 다른 깔쌈한 방법이 있을 것 같은데, 이건 확실히 서치가 필요하다.

결론

은 아직 안 났다... 내일 해결해보고 남기도록...

TIL

url에 따라서? 동적으로 레이아웃 위치에 있는 헤더를 변경하는 기능에 대한 얘기를 나누다가 본 개념.
파라미터 사용... 공부가 필요할 것 같다.
https://nextjs.org/docs/app/api-reference/file-conventions/page

내일 계획

• chat 페이지 레이아웃 구성 작업 (모바일과 데스크탑 모두 고려)
• chat 페이지 리스트 컴포넌트 ui 작업
• chat 상세 페이지 ui 작업 시작