https://bitbucket.org/sedohyeon/mini-project-react/src/main/
여행을 다녀온 사람들의 즐거웠던 경험을 공유하는 플랫폼 개발
2023. 4. 18 ~ 05.10
| 김서현 | 변혜빈 |
|---|---|
 |
 |
1. 역할 분담 👩🏻💻
2. 기술스택 🛠️
3. Collaboration Tools 🫂
4. 기술 선정 이유 🧐
5. 페이지별 기능 소개 🚀
6. 프로젝트 사용법 ⭐️
7. 피그마 시안 🌈
-
Input 컴포넌트
-
Card 컴포넌트
-
Header 컴포넌트
-
Footer 컴포넌트
-
Home
- Weather api 사용
- 이미지 슬라이더 구현
- tripData.json 파일에서 데이터를 가져와 각각의 카드 생성
-
Review
- 사용자가 리뷰를 작성하고 제출 작성된 리뷰는 Firebase Firestore에 저장
- whenOptionsData.json 파일에서 옵션 데이터를 가져와 Select 요소를 렌더링
- 이미지 업로드 기능을 구현하고, 파일 선택 시 파일을 Blob URL로 변환하여 미리보기 기능을 구현
-
Liked
- 사용자가 좋아요한 후기를 모아서 보여주는 기능 구현
- 로그인한 사용자만 접근할 수 있도록 하고, 로그인하지 않은 사용자는 로그인 페이지로 이동
- 좋아요한 후기가 없을 경우 "찜한 목록이 없습니다."라는 메시지 보이게 구현.
-
Community
- Meetup 데이터를 생성된 날짜순으로 정렬하여 보여주기 구현
- 카드 설명 길이가 일정 이상일 경우에는 생략 부호로 표시
- 후기 카드클릭시 클릭된 Meetup의 제목과 정보를 선택된 Meetup 상태로 설정 후 선택된 Meetup의 URL 경로를 생성하여 이동 구현
- Detail
- 여행 후기 상세 페이지를 보여주는 컴포넌트
- 제목이 변경될 때마다 데이터베이스에서 해당하는 Meetup 정보를 가져오는 기능을 구현
- 현재 사용자가 작성한 리뷰인지 여부를 확인한 후, 조건에 따라 수정 가능하게 버튼을 표시하거나 없애는 기능을 구현
- 현재 사용자의 좋아요 상태를 확인하고, 선택한 미팅 문서의 필드를 업데이트 로직 구현
-
Vite
vite는 CRA에 비해 개발 환경에서 더 빠른 성능을 제공하며, 빌드 성능도 향상되어 더 빠르게 개발을 할 수 있습니다. -
TypeScript
TypeScript를 사용하면 코드 안정성을 높이고, 모던 자바스크립트를 지원하여 코드의 간결성과 가독성을 높이며, 명시적인 타입 선언을 통해 타입 오류를 최소화하여 안정적인 코드를 작성할 수 있었습니다. -
Style-Component
styled-components를 사용하면 컴포넌트 스타일링을 간편하게 할 수 있으며, 재사용성이 높아지고 CSS 클래스 네임 충돌을 방지할 수 있습니다. 또한, Props를 이용한 동적인 스타일링이 가능하고, 테마 기능을 활용하여 전체적인 디자인 시스템을 구성할 수 있습니다.
✅ Weather 인풋창
✅ Popular Country 슬라이더
✅ Country 인풋창
✅ 이메일 회원가입
✅ 이메일 로그인
✅ 리뷰 작성
✅ 상세 후기
✅ 좋아요 기능
✅ 뉴스
