과거에 내가 태어났다면?

프로젝트 설명

평등에 관한 역사적 사실을 제공 및 간단한 테스트를 통해 사용자에게 가장 어울리는 시대를 알려주는 페이지입니다.
webpage는 여기에서 보실 수 있습니다

협업

피그마

피그마를 사용하여 와이어프레임을 제작하였습니다.

github

github commit과 PR convention을 미리 지정해놓았습니다.

github Issue & Project

깃허브 이슈와 프로젝트 칸을 이용하였으나 끝으로 갈수록 흐지부지해졌습니다.
그래도 깃허브 이슈와 프로젝트를 같이 사용하면서 task관리에 대해서 알 수 있었습니다.

구현 기능

• 로그인 / 회원가입
• 댓글 CRUD
• 설문조사(테스트)
• 카카오 맵 API 연동
• 카카오톡 공유하기 API 연동
• SNS(페이스북, 트위터) 공유하기 연동
• 클립보드 복사 기능
• 스테이터스 바
• 애니메이션(눈 내림, 커서 이미지)
• 반응형 웹(모바일, 태블릿, 데스크탑)
• 오픈메타태그 적용

역할

이름	역할
하나	메인 페이지 UI, 공유하기 기능, 반응형 웹, 스크롤업 버튼
기동	카카오 맵 API 연동, 애니메이션, 반응형 웹
지영	회원가입& 로그아웃 기능, 모달, 반응형 웹
영진	테스트 기능, 카카오맵 API, 상태 바, 반응형 웹
영주	댓글 crud, alert/confirm 모달 재사용, 반응형 웹

어려웠던 점

• 리액트에서 props를 전달할 때 타입을 지정하는 것이 어려웠습니다.
• 처음으로 미디어 쿼리를 이용해 반응형 웹 앱을 구성해보느라 힘든 점이 있었습니다 (생각보다 신경써야 할 부분이 많았다).
• 공식문서를 보고 API를 적용하는 것이 어려웠습니다.
• 상태 바 로직을 생각하는 것이 어려웠습니다.
• 유효성 검사를 UI/UX 적으로 생각하며 만드는 게 생각보다 신경 써야 할 것이 많고 오래 걸림.
• Map을 돌려 화면을 구성하는 로직을 생각하는 것이 어려웠습니다.
• 컴포넌트의 재사용성을 좀 더 고민해보지 못한 게 아쉬웠다(어려운 점은 아니지만 일단 씀)
• hooks 의 원할한 사용이 어려워 많이 사용해보지 못한 것이 아쉬웠습니다.

시연영상

YOUTUBE