center 스타일에서는 position: 'absolute'를 설정하고 left, right, top, bottom 값을 모두 0으로 설정했는데요. 이는 이 컴포넌트의 상위 컴포넌트 크기만큼 꽉 채우겠다는 의미입니다.

zIndex라는 속성은 컴포넌트가 다른 컴포넌트와 위치가 중첩될 때 앞 레이어에 나타날지 뒤 레이어에 나타날지 결정하는 값인데, 기본적으로 더 높은 값이 더 낮은 값을 가진 컴포넌트를 가립니다. 만약 이 값을 -1로 설정하면 다른 컴포넌트들의 뒤 레이어에 나타나게 되고, 설정하지 않으면 투명한 레이어가 기존 컴포넌트를 모두 가리는 것이나 마찬가지이기 때문에 뒤로가기나 저장, 삭제 버튼이 눌리지 않게 되겠죠?

컴포넌트를 수정한 뒤, 다음과 같이 날짜와 시간이 잘 나타나는지 확인해보세요.

▲ 그림 7-11 WriteHeader에 날짜 및 시간 보여주기