컴포넌트별 스타일 조정

1. DraggableWindow 공통
   1. 너비, 높이 props로 제공할 수 있도록 변경
   2. 아래 창 위치 조정을 위한 z-index 추가
   3. 헤더 백그라운드 색상 변경(단일 색상→리니어 그래디언트)
2. DirectoryBlock
   1. 헤더쪽 이미지 드래그 불가 처리
3. RegisterBlock
   1. 하단 등록/취소버튼 색상 복구(부트스트랩 css 무시처리로 인해 별도로 선언해줌)
4. Message/MessageWriteBlock
   1. DraggableWindow 통합으로 body에 마진이 없어진 것 복구
   2. MessageWriteBlock의 경우 메세지 작성 부분 resize 불가하도록 수정(resize가 가능할 경우 컴포넌트 영역을 넘어서 크기를 키울 수 있어서 이 부분 차단)

창 클릭시 z-index 조정 기능

• 필요기능 정의 : 창을 클
• 구현 방식

  1. onFocus, onBlur를 이용한 구현

     불가능.

     이유 : div에는 onFocus, onBlur 이벤트가 존재하지 않는다. 이 이벤트는 input 계열의 태그에만 존재하기 때문에 사용이 불가능하다.

  2. onClick, context를 이용한 구현

     • 구현방식

       창을 클릭하면 창 컴포넌트의 고유 id를 Application 자체에 클릭한 창으로 값을 저장하고, 값을 props로 각 창 컴포넌트로 내려주어 본인의 고유 id와 Application에 저장되어있는 값이 동일하다면 z-index 속성을 특정 값으로 설정. 아닌 경우는 auto로 원상복구하면 원래대로 돌아갈 것.

     • 수정이 필요한 부분

       현재는 고유 id를 컴포넌트별로 지정해뒀는데, 차후에는 메세지 블럭의 경우 여러개의 메세지 블럭을 바탕화면에 띄울 수 있도록 할 예정이기 때문에, 이 경우 하나의 그룹으로 묶여 z-index가 조절될 것이다. 따라서 고유 id를 랜덤하게 주도록 변경해야 한다.

     • 수정이 필요 없는 부분

       현재 클릭중인 창을 제외한 모든 창은 z-index가 auto이기 때문에 MainPage 컴포넌트에서 JSX로 작성된 태그 순서대로 창이 쌓이게 된다. 따라서 1,2,3 컴포넌트에서 1을 누른 뒤 3을 누르면 보통 OS에서는 2,1,3 순서로 창이 보이겠지만, 프로젝트 내에서는 1,2,3 순서대로 보이게 된다.

       이 경우는 다중 창을 띄울 상황이 많지 않기 때문에(메세지 창만 가능하며 최대 4개정도까지 가능할 예정) 크게 신경 쓰지 않아도 될 듯 싶다.