경완

업무 목록 1. 강의실 현황 UI 재구현 ( 조회 )2. 강의실 현황 UI 재구현 ( 상세 )3. 강의실 현황 UI 재구현 ( 작성 )4. 헤더, 바텀바 크기 축소5. 갤러리형 UI 수정 (깨지는 상태)6. 게시글 상세 UI 수정 ( 댓글, 대댓글 )7. 캘린더 이미지 수정8. 검색 레이아웃 수정  1. 강의실 현황 UI 재구현 (조회)- 여백 조절, overflow -> 스크롤 처리  2. 강의실 현황 UI 재구현 (상세)- 여백 조절, 폰트 크기 통일 ( + global.css 적용 )    3. 강의실 현황 UI 재구현 (작성)- 여백 조절, 폰트 크기 통일 ( + global.css 적용 )- react-select   4. 헤더, 바텀바 크기 축소- 헤더 108px -> 80px- 바텀바 82p..

컴포넌트 설명RoomStatus 화면은, 아래와 같이 36개로 분리된 타임 테이블에 각각 RoomItemDetail 컴포넌트가 배정된 형태로 구현되어 있습니다.각 타임 테이블 바로 위에 위치한 해당 컴포넌트는, 클릭된 index와 해당 위치가 일치할 경우 보여지게 됩니다.    수정사항 정의 문제는 왼/오른쪽에 치우쳐져 있는 타임 테이블을 클릭할 때 발생합니다. 코딘(Codin)의 모든 View는 레이아웃으로 구성되어 있는데, 기본 padding이 양쪽에 12px씩 있기 때문에, absolute 속성을 주더라도 해당 레이아웃의 하단으로 가려지기 때문입니다.  하지만 padding과는 별개로 화면 자체를 벗어나는 경우도 있으므로, 치우져진 타임 테이블의 경우 치우지지 않은 위치의 Detail컴포넌트를 빌..

로그인 프로세스코딘(Codin)의 로그인 프로세스는 스플래시 화면 -> 로그인 화면 -> 계정 등록화면 으로 이루어져 있습니다.그 중 로그인 화면이 주먹구구식으로 구현되어 있었던 관계로, 새로운 로그인 UI를 구상하고 구현했습니다.   UI 디자인스플래시 화면에서의 로고를 바라보던 시선이 그대로 머물면서, 동시에 다음 페이지의 버튼들과 시스템상 일관성을 유지하고 싶었습니다. 그러기 위해서는 화면의 중간 -> 하단으로 이동하는 시선처리 방식을 고민해야 했는데요.   방안 1 : linear-gradient  생각한 첫 번째 방안은 선형 그레디언트를 활용하는 것이었습니다. 중간에 위치한 로고가 흐려지면서 중요성을 잃고, 동시에 그라데이션을 통해 하단부로 자연스러운 시선 이동이 이루어지도록 유도해보았는데요, ..