폴더 구조는 asset / atoms / components / connect / pages / types / customHooks 로 구성

• asset : 랜더링에 필요한 자원을 저장하는 위치
  • font : 메인 폰트를 저장하는 위치
  • img : 랜더링에 필요한 이미지를 저장하는 위치
• atoms : recoil에서 사용하는 atom, selector를 저장하는 위치
• components : 서로다른 라우터 주소에서 공통으로 사용되는 모든 컴포넌트를 모아놓는 폴더
  • broadcast : 그래픽으로 움직이는 고양이 부분 ( 추후 수정 필요 )
  • common : 공통으로 사용되는 컴포넌트 중에 구조가 단일 구조로 끝나는 파일들
    • board : 게시글 목록
    • boardDetail : 게시글 상세
    • button : 커스텀 button 태그
    • input : 커스텀 input 태그
    • modal : 공통되는 검은화면 & 클릭시 꺼짐 + x버튼 로직
    • pagenation : JPA에 최적화 된 페이지네이션
    • selectBox : 커스텀 select 태그
  • header : 헤더
  • sideNav : Navigation들이 들어있는 폴더( 테마를 변경하면 메인페이지 Nav가 변경 )
    • myPageNav : 마이페이지 / 관리자페이지에 있는 Navigation
    • tapeNav : 메인페이지에 있는 Navigation
    • …Nav : 테마 변경시 Navigation 교체
• connect
  • axios : 인터셉터를 비롯한 axios통신을 설정하는 폴더
  • socket : 방송에 필요한 소켓연결에 관련된 로직을 모아놓는 폴더
• customHooks : 커스텀 훅을 모아놓는 폴더
• types : 커스텀 interface를 따로 모아놓는 definition 파일들 저장소
• pages : 라우터 주소를 할당받은 개별 페이지를 모아놓는 폴더
  • roture.ts : 페이지 구조에 필요한 라우터 정보 저장
  • home : 방송화면 부문의 페이지
    • chat : 채팅 페이지
    • introduce : 홈페이지 소개 페이지
    • songRequest : 신청곡 페이지
    • story : 사연 신청 페이지
  • mypage : 마이페이지 부분의 페이지
    • inventory : 인벤토리 페이지
    • myinfo : 나의 정보 페이지
    • notice : 알림 / 공지사항 페이지
    • noticeManage : 공지사항 관리
    • userManage : 유저 관리

• atomic-design 패턴?

• ant-design(css 라이브러리)?

• sockJS, StompJS (소켓 통신)

• @mantine/hooks만 들고오기

mantinedev/mantine: React components library with native dark theme support (github.com)

• spotify api

Web API Reference | Spotify for Developers