경완

0. 안쓰는 파일들 제거 4.71. 대댓글 오류 수정 4.72. 강의실 현황 기능 추가 ( 현재 시간 시각화 )3. 강의실 현황 리팩토링 -> 민T 피드백 적용4. 강의실 현황 민T 피드백 이론 공부 -> 블로그 정리5. 로그인 버튼 인터랙션 추가 ( 글씨 깨지는 현상 해결)6. 커뮤니티 뷰 디자인 7. 리디자인 팀 컨펌 -> 리퍼블리싱 ( + 카드 뷰 컴포넌트 제작 )8. 상시 모집 페이지 디자인9. 상시 모집 페이지 팀 컨펌 -> 제작  2-1. 글씨 깨지는 현상 해결- 로그인 버튼 안내문 "@inu.ac.kr 계정만 사용할 수 있습니다" 가 레이아웃 밖에 생성되는 현상 -> text가 svg위에 올라가는데, svg보다 빠르게 랜더링될 경우 갈 곳을 잃는 것..! (수정 완료)  2-2. 로그인 버튼..

업무 목록 0. 안쓰는 파일들 제거 4.71. 대댓글 오류 수정 4.72. 강의실 현황 기능 추가 ( 현재 시간 시각화 )3. 강의실 현황 리팩토링 -> 민T 피드백 적용4. 강의실 현황 민T 피드백 이론 공부 -> 블로그 정리5. 로그인 버튼 인터랙션 추가 ( 글씨 깨지는 현상 해결)6. 커뮤니티 뷰 디자인 7. 리디자인 팀 컨펌 -> 리퍼블리싱 ( + 카드 뷰 컴포넌트 제작 )8. 상시 모집 페이지 디자인9. 상시 모집 페이지 팀 컨펌 -> 제작 2. 강의실 현황 기능 추가- (추가) 현재 시간 시각화- *ResizeObserver 등 옵저버에 대한 포스팅 할 것 인스타 투표 결과 이전에 추가했던 애니메이션은 없애는 것으로 정해졌습니다.. 애니메이션 제거 후, 현재 시간에 해당하는 강의실 영역을 쉽게..

스크롤 힌트란?스크롤을 구현했는데, 스크롤바를 넣으면 이쁘지 않아서 hidden처리를 하는 경우가 많습니다. 저만 그런가요?! 아무튼 그런 경우 유저에게 스크롤에 대한 힌트를 제공하지 않으면, 스크롤이 되는지 모르는 경우가 생길 수 있기 때문에,, 접근성을 해치지 않으면서 스크롤이 가능함을 인지하도록 도움을 주려 합니다.  개선하려는 상황"강의실 현황" 은 강의실의 수업 정보를 타임 테이블로 시각화하는 기능인데요, 기존 구현 상황의 경우 너무 작아 잘 눌리지 않아서 크기를 키웠습니다. 개선 과정 중, 기존에는 기기의 width에 딱 맞게 w-full로 구현 되었던 레이아웃이 overflow-x-scroll로 바뀌면서 스크롤이 필요하게 되었는데요! 문제는 스크롤을 할 수 있는 것인지가 모호해 보인다는 것입..

업무 목록 0. 안쓰는 파일들 제거1. 대댓글 오류 수정2. 강의실 현황 기능 추가 ( 요일 별 조회, 현재 시간 시각화 )3. 강의실 현황 리팩토링 -> 민T 피드백 적용4. 강의실 현황 민T 피드백 이론 공부 -> 블로그 정리5. 로그인 버튼 인터랙션 추가 ( 글씨 깨지는 현상 해결)6. 커뮤니티 뷰 디자인 7. 리디자인 팀 컨펌 -> 리퍼블리싱 ( + 카드 뷰 컴포넌트 제작 )8. 상시 모집 페이지 디자인9. 상시 모집 페이지 팀 컨펌 -> 제작 0. 안쓰는 파일들 제거- (1) 프론트 리팩토링, (2) CSS -> tailwind (3) 레이아웃 컴포넌트 통일 이후 사용하지 않는 상태로 방치된 파일들을 찾아 제거하는 작업입니다. https://github.com/CodIN-INU/front-end..

코딘 IOS 출시 1주차정보대 공식 커뮤니티인 코딘을 출시하고 1주차가 흘렀습니다..! 유저 피드백 + 내부 회의를 통해 서비스의 다양한 개선점들을 찾아 보았는데요.. 1. 메인 페이지의 각 기능이 눈에 띄지 않는다는 점과2. 학생회 공지를 인스타에서 코딘으로 대체시키기 위한 UI 변경 작업을 하게 되었습니다.  직접 디자인을..디자인을 맡아 주셨던 디자이너분께서 아프셔서.. 직접 디자인을 진행했습니다. 저는 디자인 하는 거 좋아하니 오히려 좋습니다.먼저 기존 디자인입니다.         작업 결과물 (확정은 X)기존에 작은 아이콘으로 나열만 했었던 부분들을 미리보기로 표현해보았습니다. 유저 피드백 중, 기존 UX의 문제점으로 "항상 누르고 들어가야 볼 수 있다" 라는 의견이 있었고.. 미리보기에서 당장..

@inu.ac.kr 계정만 사용할 수 있 ..코딘은 인천대 학생들을 위한 어플이라 학교 계정(inu.ac.kr)을 통해서만 로그인이 가능합니다.그런데, 공지를 읽어 주는 사람이 드문지,, gmail.com으로 로그인을 시도하시는 분들이 많다고 하네요  개선 방안이에 대한 개선책으로, 팀장께서 버튼을 늦게 띄우는 것은 어떻냐 라는 의견을 주셨고, setTimeout을 통해 구현하면 되는 것이라 그리하기로 하였습니다. 다만 구현하는 김에 로딩하는 느낌 + 더 시선을 오래 끌도록 유도 한다면 좋을 것 같아 약간의 애니메이션을 넣어보기로 했습니다.  결과물 확인그 결과로 변경된 로그인 화면은 다음과 같습니다.https://codin.inu.ac.kr    소스 코드@keyframes floatBtnBeforeT..

업무 목록 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  생각한 첫 번째 방안은 선형 그레디언트를 활용하는 것이었습니다. 중간에 위치한 로고가 흐려지면서 중요성을 잃고, 동시에 그라데이션을 통해 하단부로 자연스러운 시선 이동이 이루어지도록 유도해보았는데요, ..

기능 추가 - 클릭해서 조회하기 강의실 정보 조회 화면의 가독성을 높이기 위해 유저 인터랙션을 추가하자고 의견을 제시했다. 물론 구현도 내가 할거니 상관 없다! 다행히 내가 생각했던 대로 진행하기로 했다.  타임라인 중 아무곳이나 누르면, 그 곳에 해당하는 강의실 정보와 정확한 시간이 보여진다.    BoundaryList추가 백엔드 Api에서 보내주는 강의 정보는 "HH:mm ~ HH:mm" 이라는 string 형식의 정보이다. 인터랙션을 추가하려면, string 형식의 강의 정보를 [0, 1, 1, 1, 0, 0 , ... ] 과 같은 바이너리 배열 형태로 변환하고 그에 맞게 네모 모양 div의 색을 결정해서 그래프처럼 보이게 해야했다. ( 0 : 강의가 없는 하늘색 네모, 1: 강의가 있는 파란색 ..