영단어 기록, 시험, 오답노트 서비스
진행 기간 : 12월 23일 ~ 1월 31일
토익 공부를 시작하게 되면서 단어를 외우기 시작했습니다.
단어를 외우기 위해 의미 없이 종이에 여러 번 쓰인 단어들을 보면서,
웹 페이지에서 한번 단어를 입력하는 것으로 나만의 단어장을 만들고 단어장 안에서 재미있는 퀴즈를 만들면
단어를 좀 더 재미있게 외울 수 있겠다는 생각에 wordCheck 서비스를 기획하게 되었습니다.
- axios 통신 라이브러리를 사용해 유저가 로그인을 성공했을 때 서버에서 토큰 값을 받아와 쿠키에 저장시킨 후 home 창으로 이동될 수 있도록 했습니다.
- 로그인 실패 시 toast로 알림 창을 띄워줬습니다.
- 한 컨텐츠 내에서 여러 단어를 한번에 저장할 수 있도록 만들었습니다.
+ 단어카드 추가하기버튼을 누르면 단어를 추가할 수 있는 div가 생성 됩니다.- 추가 버튼을 누르면
inputData(빈 배열)이wordList기존 배열에 추가됩니다.
- 추가 버튼을 누르면
- 이후
만들기버튼을 누르면Promise.all()으로 단어 배열이 서버에 추가됩니다.
const onClickCardAddHandler = () => {
let WordInputs = [...wordList];
WordInputs.push(inputData);
setWordList(WordInputs);
};
const onClickConfirmAnswerHandler = (ans) => {
const formData = new FormData();
// 모달에서 user의 answer가 true라면 단어배열 추가
if (ans) {
Promise.all(
wordList.map((wordList) => {
formData.append("contents", wordList.contents);
formData.append("spelling", wordList.spelling);
formData.append("category", wordList.category);
formData.append("meaning", wordList.meaning);
return axios.post(`${process.env.REACT_APP_API}words/`, formData, {
headers: {
Authorization: cookies.token,
},
});
})
)
.then(() => {
navigate(-1);
})
.catch((err) => {
//단어 추가 실패시 실패 토스트
setFailAlert(true);
});
} else {
//user의 answer가 false라면 모달 해제
setConfirm(false);
}
};
- 단어 리스트 화면에서는 오른쪽 하단의 아이콘들을 눌러 수정하거나 지울 수 있습니다.
- 별 아이콘을 클릭하여 중요한 단어 표시를 할 수 있습니다((5)북마크 기능 참고).
- 확성기 아이콘을 통해 해당 단어의 발음을 들어볼 수 있습니다.
- 시험선택 페이지에서 원하는 시험을 선택해 시험을 볼 수 있습니다.
- 사지선다 보기는 정답 단어 1개와 이외 틀린단어 3개를 랜덤으로 가져와 보여줄 수 있도록 했습니다.
- 정답이 틀렸을 때는 모달 창을 띄워, 틀린 답과 올바른 답을 확인할 수 있도록 했습니다.
- 별 아이콘을 눌러 북마크에 단어를 저장할 수 있습니다.
- 북마크은 로컬 스토리지에 저장되어 오프라인 환경에서도 북마크 단어를 확인할 수 있습니다.
- '단어 찾기'화면에서는 유저가 저장해놓은 단어를 검색할 수 있습니다.
- '검색하기'버튼의 onClickEvent는 아래와 같이 구현했습니다.
const onClickSearchButtonHandler = () => {
axios
.get(`${process.env.REACT_APP_API}words/search/?target=${searchWord}`, {
headers: {
Authorization: cookies.token,
},
})
.then((res) => {
if (res.data.length === 0) {
// 단어가 없을 때
setAnswerShow(false);
setEmptyAnswer(true);
} else {
// 단어가 있을 때
setAnswerWord(res.data);
setAnswerShow(true);
}
})
.catch((err) => {
// 에러 처리 (ex. 빈 값 입력)
setAnswerShow(false);
setEmptyAnswer(true);
});
};