10_[항해99 2주차 주특기 과제 제출]_2021.09.29

오늘의 공부

styled-component 로 keyframe animation 구현하는 법

Firebase의 이용방법

Firebase를 통해 리액트 웹사이트를 배포하는 법

정리 링크 https://jjyabbu.tistory.com/32

스파르타 코딩클럽 React 리액트 기초반 4주차 정리 - Keyframes, Firebase 설정부터 연동, 컬랙션 가져

 

오늘의 작업

 

[과제] 기능 추가, 수정 및 디자인 개선

 

삭제기능 테스트

편집기능 테스트

기능 추가

• 단어카드 삭제기능 추가 

 

기능 수정 

• 편집기능 사용시 변경된 부분만 반영
• 뒤로가기 클릭시 메인이 아닌 이전페이지로 이동
• Firestore에 단어 저장.

 

디자인 개선 

• 메인페이지에서는 뒤로가기버튼이 보이지 않도록 변경.
• 슬라이더 위치 조정
• 디테일 카드 하이라이트 위치 조정
• 텍스트가 특정 글자수를 넘기면 "..." 표시

 

Firebase를 통한 배포 

https://seona-react-dictionary.web.app/

React App

 

이후 개선해야할 부분

• 단어가 3개일때 슬라이더 안움직여 에러로 보이는 문제
• 편집기능 사용시 input과 textarea 에 기존 내용을 미리 적어두어 편집하기 수월하게 만들기
• 검색기능 추가 - 단어가 많아지면 슬라이더만으로는 이용하기 힘듦
• 단어 추가시 공란일경우 경고창 뜨게 하기
• 삭제버튼 디자인 개선 필요
• 단어장 가나다순 정렬

 

과제 깃허브 링크 

https://github.com/jjubbu/hh99_react_dictionary.github.io