나의 개발일지

[React] 리액트 아웃소싱 프로젝트 (마무리) 본문

과제 및 팀프로젝트

[React] 리액트 아웃소싱 프로젝트 (마무리)

heew0n 2023. 12. 11. 19:51

2023.12.07 - [React/과제] - [React] 리액트 아웃소싱 프로젝트 (지도 api 이용해서 웹사이트 만들기)

 

[React] 리액트 아웃소싱 프로젝트 (지도 api 이용해서 웹사이트 만들기)

🔥 React 심화주차 아웃소싱 프로젝트 🔥 지도상의 Marker를 표시하고 활용하기 네이버 / 카카오 / 구글 지도 등을 선택하여 웹사이트 만들기 프로젝트명 : 'my아포' 병원 검색 사이트 소개 : 내 주

heenee.tistory.com

 

 

 

로그인 페이지

 

 

 

회원가입 페이지

 

실시간 유효성 검사 가능!

로그인 만료 기능

 

 

 

 

메인 페이지

 

 

 

리뷰 창

 

 

 

모달창을 이용한 예약 가능

예약한 곳은 마커가 로고로 바뀌면서 지도상에서 한 눈에 파악이 가능하다

 

 

마이페이지 (수정 및 삭제 가능)

 

 

 

Keep - 현재 만족하고 있는 부분

  • 예약현황 실시간 반영
  • 현재위치 실시간 추적
  • thunk에 조금 더 익숙해진 것
  • 로그인 및 회원가입 입력시 실시간 유효성 검사
  • 아무리 바빠도 도중에 문제 없이 프로젝트를 잘 완성한것

 

 

Problem - 불편하게 느끼는 부분

  • confirm modal이 이쁘지 않음
  • 반응형 웹사이트를 만들지 못한 점
  • 마이페이지 프로필 수정이 안되는 점
  • 맵 로딩이 살짝 버벅임
  • 맵 초기 로드시 바로 오버레이를 띄우는 기능을 구현하지 못한 점

 

 

Try - Problem에 대한 해결책, 당장 실행 가능한 것

  • window.confirm을 sweetAlert으로 교체
  • redux-thunk를 react-query로 리팩토링
  • API사용시 javascript 버전의 코드를 react용으로 리팩토링
  • 프로필 사진 수정기능
  • 다른 API를 사용

 

 

깃헙 주소

https://github.com/HIITMEMARIO/outsourcingProject_7

 

GitHub - HIITMEMARIO/outsourcingProject_7

Contribute to HIITMEMARIO/outsourcingProject_7 development by creating an account on GitHub.

github.com

 

 

배포 주소

https://outsourcing-project-7.vercel.app/

 

my아포

 

outsourcing-project-7.vercel.app

 

 

발표 자료

아웃소싱프로젝트 - 7조.pptx
1.54MB