react-wedding-card

리액트로 만든 모바일 청첩장입니다.

페이지 구성

1. 커버

- 커버 사진, 이름, 시간, 장소를 표시

- 움직이는 하트 애니메이션 구현

- 플레이 버튼 클릭하면 노래 재생

2. 초대장

- 초대문구 표시

- 버튼 클릭으로 연락처 모달 띄우기

- 모바일에서 통화, 문자 아이콘을 클릭하면 연락가능

3. 달력

- 결혼식 날짜를 하트로 표시

- 결혼식까지 남은 시간 카운트다

4. 갤러리

- react-image-gallery 라이브러리 사용

- 스와이프해서 좌우로 이동가능

- 작은 사진을 클릭해서 이동가능

- 화살표 버튼으로 이동가능

5. 위치 안내

- 네이버지도 api 사용

- 네이버지도, 카카오지도 링크 연결

6. 퀴즈

- 3개의 퀴즈와 5개의 답이 있음

- 정답, 오답을 알려줌

- 맞은 개수를 알려줌

- 다시 풀기 가능

7. 계좌번호 안내

- 아이콘을 클릭하면 계좌번호 모달을 띄움

- 계좌번호 복사 가능

- 카카오페이 송금 링크를 연결

8. 방명록

Firebase로 데이터를 저장함

이름, 비밀번호, 축하메시지를 입력하여 메시지 작성

등록한 비밀번호를 작성하면 삭제가능

- 댓글이 5개가 초과되면 더보기로 넘어감

- 최신 댓글순으로 보여줌

설치 및 실행 방법

프로젝트 클론

git clone https://github.com/YOUNGEUN100/react-wedding-card.git

프로젝트 디렉토리로 이동

cd repository

의존성 설치

npm install

서버 실행

npm start