오늘한일 팀 서비스 발표 녹화 PPT 제작 PPT GIF 고화질 업데이트 PPT 수정 사항 GIF 고화질로 변경 미디어쿼리 해야할일 개인 기술 발표 - 구현사항작성, PPT/발표영상 등 업데이트 팀 발표 재녹화 프로젝트 리팩토링

진행 사항 배포 후 에러 핸들링 메뉴얼 페이지 구현 배포 후 에러 핸들링 1. sub 네비게이션 이미지(책모양)와 paint page의 붓모양이 사라지는 현상 font awesome 의 아이콘 이미지를 i 엘리먼트로 가져옴에 따라 배포 환경에서 이미지를 불러오는 것이 불안정해짐. 대신에 직접 이미지를 다운받아 적용. 2. 일기쓰기 완료 후 모달창 제거 그림이 모달창을 침범하는 현상이 발생하여, 모달창을 삭제하고 등록 메세지를 보여주는 것으로 변경. 3. 구글, 카카오 OAuth API의 사이트 도메인 변경 http://localhost:3000 => https://royaldiary.ml . Redirection URI 도 변경(동일) 4. OAuth clientID 를 .env 에 저장하여 사용 환경변..

구현 사항 로딩 구현(완료) CSS 리팩토링(완료) 네비게이션 바를 통해 페이지 이동과 일기 작성 및 수정 시에 아래와 같이 로딩 이미지가 뜨도록 구현했다. 로딩 중에는 마우스 클릭이나 키보드 입력이 불가한데 이는 pointer-events: stroke; 를 이용했다. SVG 형식만 클릭이 가능. 해당 로딩 엘리먼트는 최상위 App 컴포넌트 에 위치시켰는데, useEffect 가 실행될때마다 세션스토리지에 loadingImg 키 값을 확인하고(페이지 이동 버튼을 클릭할 시점에 세션스토리지에 해당 키값을 저장해준다. )visible 일 경우에만 해당 엘리먼트를 찾아 CSS display 값을 flex 로 바꿔준다. 그리고 setTimeOut 을 이용하여 일정 시간이 지난 후 none 으로 바꾸어 주었다...

구현 사항 CSS 리팩토링(버튼 등 디자인 가다듬기) => 완료 미디어쿼리 모두 손보기=> 완료 애니메이션 효과 적용하기 => 완료 개발자 소개 페이지 완성시키기 => 완료 배포 세팅하기 => 명일 예정 기술발표 준비 => 명일 예정 CSS 리팩토링 모든 버튼에 후버 효과 적용. 특히 메인 페이지의 버튼에는 참고사이트(codepen.io/bartekd/pen/qFsDf) 의 4번 효과를 적용했다. 개발자 소개페이지 구현 완료 개발자 소개페이지를 완성했는데, 팀원 소개는 캐릭터를 적용했다. 반응형 웹 구현을 위한 미디어 쿼리 완료 제작자 소개 페이지의 작은 사이즈는 아래 모습과 같다. 480px 이하일때. 백그라운드 이미지 는 아무래도 이 웹서비스와 어울리는 배경을 쓰는 것이 좋을 것 같다. 도움받은 사이..

확인한 내용 구글 엑세스 토큰의 경우, 로컬스토리지에 담기지 않는것 같다. 라이브러리를 사용해서 그런것 같긴한데, 어떻게 로그아웃을 시켜야 할지 좀 더 알아봐야겠다. => 구글 소셜 로그인의 경우 브라우저에서 구글 로그아웃을 해주면 된다.(따로 로직이 필요없다.) 이제와 생각해보니, 유저가 소셜 로그인으로 들어와 추가 정보를 기입할 때 a 이메일(유저 제공)로 들어와서 b 이메일(추가 정보 기입할 때 이메일 변경)로 가입을 하게 될경우 문제가 발생할 것 같다. 생각 좀 해봐야겠다. => 아래와 같은 문구를 추가했다.만약 소셜서비스와 다른 이메일을 등록할 경우, 다음 소셜 로그인 때 해당 모달이 다시 보여질 것이다. 메뉴얼 페이지와 제작자 페이지 구현이 필요하다. 그리고 CSS와 반응형 웹을 더 손봐야겠다..

구현 사항 카카오, 구글 소셜 로그인 및 로그아웃 메인 페이지(로그인 화면) CSS 리팩토링 (파트별 크기) 카카오, 구글 소셜 로그인 및 로그아웃 구현 1. 카카오 카카오는 SDK 를 이용하여 구현했는데, 카카오 OAuth 의 경우, 유저의 이메일 제공 여부가 선택사항이기 때문에 아래와 같은 경우의 수가 발생한다. Email 이 제공되지 않았을 경우엔 바로 추가정보 기입 모달로 보내고, Email 이 제공된 경우는, 구현 상 크게 어려운 부분은 의외로 없었는데, 소셜 로그인 모달에서 추가정보 기입 모달로 이동 시킬때 상태 끌어올리기를 사용했는데, 좀 헷갈렸다. 유저가 로그아웃을 할 경우에는, 아래 로직으로 로컬 스토리지에 저장되어 있던 카카오 인증 엑세스 토큰을 삭제해준다. if (window.Kaka..