컴포넌트를 개발하면서 점차 개선 및 수정이 필요합니다. 개발을 할 수 있도록 최소한의 레이아웃 가이드라인만 잡아놓았다고 생각해주시면 되겠습니다.
작업사항
디테일/메인 페이지 모바일/데스크탑 레이아웃 설정
컴포넌트 폴더링
생각해볼점
Tab 컴포넌트의 경우 재사용성을 고려해서 props로 옵션과, 내용물을 전달해서 렌더하는 컴포넌트로 개발할지? (매우 좋은 방향), 혹은 그냥 재사용성 고려안하고 필요한 옵션 state로 선언해서 모든 경우의 수마다 컴포넌트를 선언할지? 를 생각해봐야한다. 전자가 좋지만.. 좀더 어렵다.. 일반적인 경우를 고려해야하기 때문이다. 공수와 코드퀄리티의 trade-off를 잘생각해보자.
css in js 코드를 컴포넌트 하단으로 내리는 것을 제안합니다. 코드가 한눈에 더 들어오도록 하는 것이 목적입니다.
추후 다른 이슈를 통해 개선되어야하는 점
하단 gif이미지에서 확인할 수 있듯이 detail 페이지 오른쪽 사이드바가 뭉개지기 전에 레이아웃이 변경되어야 한다. 혹은 왼쪽 캔들차트가 좀더 줄어들어야 한다.
메인페이지 모바일 레이아웃 기획된 버전은 아래 사진과 같은데 현재 레이아웃에는 이 사항이 반영되어 있지 않다.
디테일페이지의 모바일 레이아웃처럼. tab 컴포넌트를 활용하여 두 가지의 컴포넌트를 보여주도록 기획 디자인을 변경하는 것을 제안한다.
개요
컴포넌트를 개발하면서 점차 개선 및 수정이 필요합니다. 개발을 할 수 있도록 최소한의 레이아웃 가이드라인만 잡아놓았다고 생각해주시면 되겠습니다.
작업사항
생각해볼점
Tab
컴포넌트의 경우 재사용성을 고려해서 props로 옵션과, 내용물을 전달해서 렌더하는 컴포넌트로 개발할지? (매우 좋은 방향), 혹은 그냥 재사용성 고려안하고 필요한 옵션 state로 선언해서 모든 경우의 수마다 컴포넌트를 선언할지? 를 생각해봐야한다. 전자가 좋지만.. 좀더 어렵다.. 일반적인 경우를 고려해야하기 때문이다. 공수와 코드퀄리티의 trade-off를 잘생각해보자.추후 다른 이슈를 통해 개선되어야하는 점
디테일페이지의 모바일 레이아웃처럼. tab 컴포넌트를 활용하여 두 가지의 컴포넌트를 보여주도록 기획 디자인을 변경하는 것을 제안한다.
이미지