Easy Level

배포 링크: https://easylevel.biyamn.dev

구현 과정 블로깅

• 추가 기능, 빈칸 검증 기능 만들기
• CSS 추가하기
• 삭제 기능 만들기
• 삭제 기능 개선하기
• 완료 기능 만들기
• 수정 기능 만들기
• 반응형 레이아웃 만들기 + 배포하기
• CRA를 Vite로 마이그레이션
• optimistic update
• 화살표 함수 관련 겪은 오류
• 서버의 데이터와 input의 value를 동기화하려다가 겪은 문제

프로젝트 소개

• 면접 난이도를 '쉬움'으로 만들기 위한 면접 준비 서비스입니다.
• 면접 종류를 추가하고 각 면접 종류 하위에 예상 질문과 답변을 정리할 수 있습니다.
• 현황 페이지에서 각 면접 종류에 따른 답변율을 확인할 수 있습니다.

프로젝트 실행 방법

$ npm install
$ npm run dev

기능 소개

면접 종류 등록

• 면접 종류의 CRUD 기능을 구현하였습니다.
• 면접 종류에서 대분류를 선택하고 소분류를 지정할 수 있습니다.
• 모든 문항을 완료하면 '완료' 상태가, 한 문항이라도 완료하지 않으면 '미완료' 상태가 나타납니다.

면접 종류 등록 및 수정

질문, 답변 등록

• 각 면접 종류의 하위에 예상 질문과 답변 CRUD 기능을 구현하였습니다.

질문&답변 등록 및 수정

반응형

• 뷰포트에 따라 반응형 레이아웃을 구현하였습니다.
• 모바일에서는 추가한 면접 종류를 Carousel로 확인할 수 있습니다.

모바일

Firebase

• Firebase Authentication을 활용하여 Google 로그인 기능을 구현하였습니다.
• Cloud Firestore를 사용하여 로그인 한 사용자의 데이터를 저장하였습니다.

기술 스택

• frontend
  • React
  • JavaScript
• backend
  • Firestore

폴더 구조

📦src
 ┣ 📂components
 ┃ ┣ 📂Interview
 ┃ ┃ ┣ 📜Interview.jsx
 ┃ ┃ ┣ 📜InterviewInput.jsx
 ┃ ┃ ┣ 📜InterviewItem.jsx
 ┃ ┃ ┗ 📜InterviewItems.jsx
 ┃ ┣ 📂Question
 ┃ ┃ ┣ 📜Question.jsx
 ┃ ┃ ┣ 📜QuestionInput.jsx
 ┃ ┃ ┣ 📜QuestionItem.jsx
 ┃ ┃ ┣ 📜QuestionItems.jsx
 ┃ ┣ 📜Header.jsx
 ┃ ┣ 📜Progress.jsx
 ┃ ┗ 📜Status.jsx
 ┣ 📂utils
 ┃ ┗ 📜getInitialValue.js
 ┣ 📜App.jsx
 ┗ 📜main.jsx