Issue#23/responsive layout

[baldwinIV]

개요

• 컴포넌트를 개발하여 넣을 페이지 마크업 레이아웃을 설정함 (반응형 고려하여)
• 컴포넌트 폴더링 변경
• 모바일 디테일 페이지에 MUI tabs를 적용함. (기획 디자인 일부 변경)

컴포넌트를 개발하면서 점차 개선 및 수정이 필요합니다. 개발을 할 수 있도록 최소한의 레이아웃 가이드라인만 잡아놓았다고 생각해주시면 되겠습니다.

작업사항

• 디테일/메인 페이지 모바일/데스크탑 레이아웃 설정
• 컴포넌트 폴더링

생각해볼점

• Tab 컴포넌트의 경우 재사용성을 고려해서 props로 옵션과, 내용물을 전달해서 렌더하는 컴포넌트로 개발할지? (매우 좋은 방향), 혹은 그냥 재사용성 고려안하고 필요한 옵션 state로 선언해서 모든 경우의 수마다 컴포넌트를 선언할지? 를 생각해봐야한다. 전자가 좋지만.. 좀더 어렵다.. 일반적인 경우를 고려해야하기 때문이다. 공수와 코드퀄리티의 trade-off를 잘생각해보자.
• css in js 코드를 컴포넌트 하단으로 내리는 것을 제안합니다. 코드가 한눈에 더 들어오도록 하는 것이 목적입니다.

추후 다른 이슈를 통해 개선되어야하는 점

• 하단 gif이미지에서 확인할 수 있듯이 detail 페이지 오른쪽 사이드바가 뭉개지기 전에 레이아웃이 변경되어야 한다. 혹은 왼쪽 캔들차트가 좀더 줄어들어야 한다.
• 메인페이지 모바일 레이아웃 기획된 버전은 아래 사진과 같은데 현재 레이아웃에는 이 사항이 반영되어 있지 않다.

  디테일페이지의 모바일 레이아웃처럼. tab 컴포넌트를 활용하여 두 가지의 컴포넌트를 보여주도록 기획 디자인을 변경하는 것을 제안한다.

이미지

• 모바일 뷰에서 탭뷰를 확인할 수 있다.
• width가 작아짐에 따라 사이드바가 뭉개짐을 확인할 수 있다.

[baldwinIV]

render props 방식으로 렌더하는 tab 컴포넌트 수정이 필요합니다. close하고 수정 후 다시 PR 올리겠습니다.

[baldwinIV]

브랜치는 delete하시면 안되용..