[fix] 91afc35 : 강의실 현황 VIEW를 벗어나는 현상

컴포넌트 설명

RoomStatus 화면은, 아래와 같이 36개로 분리된 타임 테이블에 각각 RoomItemDetail 컴포넌트가 배정된 형태로 구현되어 있습니다.

각 타임 테이블 바로 위에 위치한 해당 컴포넌트는, 클릭된 index와 해당 위치가 일치할 경우 보여지게 됩니다.

 

 

 

 

수정사항 정의

 문제는 왼/오른쪽에 치우쳐져 있는 타임 테이블을 클릭할 때 발생합니다. 코딘(Codin)의 모든 View는 <DefaultBody/> 레이아웃으로 구성되어 있는데, 기본 padding이 양쪽에 12px씩 있기 때문에, absolute 속성을 주더라도 해당 레이아웃의 하단으로 가려지기 때문입니다.

 

 하지만 padding과는 별개로 화면 자체를 벗어나는 경우도 있으므로, 치우져진 타임 테이블의 경우 치우지지 않은 위치의 Detail컴포넌트를 빌려쓰는 방향으로 구현하려 합니다. 

 

 

화면 밖으로 벗어남

 

수정 결과

 계획한 대로 아래와 같이 index 5 미만에서는 5번 인덱스의 Detail 컴포넌트를 빌려 쓰고, 같은 방법으로 오른 쪽 부분도 처리해줍니다. 이 부분을 처리해주는 getIsActive 함수를 추가하는 것으로 간단하게 해결되었습니다.

 

 

안정적인 위치의 컴포넌트를 빌려 씀