2025.01.07 - 2025.02.26
코드잇 스프린트 풀스택 2기 고급 프로젝트 2팀 (Frontend)
> Backend Github 바로가기 🔗
- [니가가라 하와이] 홈페이지: https://www.go-for-me.kro.kr
- 🗂️ 팀 문서: https://spotless-file-76e.notion.site/2-15f9b6a2707e806ba711ff1f83c499d3?pvs=4
- 🔍 API 명세: https://www.goforme.duckdns.org/docs
| 양가현 | 김은효 | 방신철 | 현준배 |
|---|---|---|---|
 |
 |
 |
 |
| 프론트엔드장 | |||
| 중간 발표 자료 제작, AWS 배포 및 관리, 발표 자료 정리, 발표 | 프론트엔드 GitHub 관리 | AWS 배포 및 관리, 시연 영상 제작 | 회의록 관리, 노션 관리 |
| Github 바로가기 🔗 | Github 바로가기 🔗 | Github 바로가기 🔗 | Github 바로가기 🔗 |
-
초기세팅
-
로그인, 회원가입, 간편로그인 페이지
-
Dreamer 프로필 등록 및 수정 페이지
-
Maker 기본정보 수정 페이지
-
여행 요청 페이지
-
Maker 상세페이지
-
찜한 Maker 페이지
-
네비게이션바, 유저메뉴, 사이드바
-
랜딩 페이지(지역 통계)
-
404 페이지
-
알림, 실시간 알림
-
실시간 채팅(웹소켓)
-
시스템 로그 페이지
-
AWS 배포
-
Dreamer 플랜 관리 페이지
- 플랜 네브바
- 플랜 상세 페이지 - 플랜 삭제하기
- 견적 상세 페이지 - 견적 확정하기
-
Dreamer 리뷰 관리 페이지
- 리뷰 네브바
- 여행 완료 페이지
- 리뷰 작성 페이지 - 리뷰 작성하기 모달
- 작성한 리뷰 페이지
-
FE README.md
-
Maker 프로필 등록 및 수정
-
플랜 목록(받은 플랜, 전체 플랜)
-
견적 보내기 / 반려하기 모달
-
Maker 견적 관리
- 보낸 견적 조회
- 취소된 견적
- 상세 페이지
-
Maker 마이페이지
-
코코넛 충전하기(PortOne)
-
SNS 공유하기
-
랜딩 페이지
-
AWS 배포
-
시연 영상 제작
-
Maker 찾기 페이지
-
회의록 작성 및 노션 팀 문서 관리
Next.js와 Type script를 기반으로 한 프론트엔드는, 빠르고 안정적이면서도 다양한 기능으로 유저의 사용 편의성을 극대화 시키며 완성도를 높였습니다. Zustand와 React Query를 활용하여 상태 관리 및 데이터 관리를 효율적으로 처리하며, Tailwind CSS와 Styled-Components를 통해 스타일링을 구현합니다. 또한, 실시간 알림과 결제 기능을 통합하여 사용자 경험을 향상시킵니다.
- 프레임워크: Next.js
- 프로그래밍 언어: TypeScript
- 스타일링: Tailwind CSS, Styled-Components
- 상태 관리: Zustand
- 데이터 관리: React Query
- 주요 기능:
- 인증: 사용자 인증 및 권한 관리
- 검색 및 필터링: 다양한 필터 옵션을 통한 Maker 검색
- 무한 스크롤: React Query를 활용한 무한 스크롤 구현
- 팔로우 기능: Maker 팔로우 및 관리
- 반응형 디자인: 다양한 디바이스에 대응하는 반응형 UI
- 이미지 관리: Next.js Image 컴포넌트를 활용한 최적화된 이미지 처리
- 알림 기능: 실시간 알림을 통해 사용자에게 중요한 정보를 전달
- 결제 기능: 안전하고 신뢰할 수 있는 결제 시스템 통합
- 설계 특징:
- 컴포넌트 기반 설계: 재사용 가능한 컴포넌트 구조
- API 연동: Axios를 통한 서버와의 통신
- CI/CD: GitHub Actions를 통한 자동화된 배포 및 테스트
- 코드 품질 관리: Prettier를 통한 코드 스타일 및 품질 유지
- 환경 설정: Vercel을 통한 배포 및 환경 설정
- 웹 접근성: 모든 사용자가 접근할 수 있도록 웹 접근성 고려
- 프론트엔드 결과물: https://www.go-for-me.kro.kr
- 발표 자료 및 시연 영상 : https://drive.google.com/drive/folders/1UQssCDbmnRkehWDOo0fyqkM-jvmzNdUU
public
├── assets
| └── images
├── favicon. ico
└── korea-topo.json
src
├── components
| ├── Common
| | ├── Bubble.tsx
| | ├── Button.tsx
| | ├── Calander.tsx
| | ├── CardFindMaker.tsx
| | ├── ClipboardCopy.tsx
| | ├── CompleteTrip.tsx
| | ├── ConfirmedPlan.tsx
| | ├── DreamerFilter.tsx
| | ├── DropdownSort.tsx
| | ├── FollowedCard.tsx
| | ├── ImageModal.tsx
| | ├── Input.tsx
| | ├── Label.tsx
| | ├── Layout.tsx
| | ├── ModalLayout.tsx
| | ├── Pagination.tsx
| | ├── ReviewForm.tsx
| | ├── SearchBar.tsx
| | ├── Selector.tsx
| | ├── ShareSNS.tsx
| | └── SocialLogin.tsx
| ├── Gnb
| | ├── ChargeModal.tsx
| | ├── NavBar.tsx
| | ├── Notification.tsx
| | └── UserMenu.tsx
| ├── Landing
| | ├── FeatureCard.tsx
| | ├── Features.tsx
| | ├── Hero.tsx
| | └── MapMarker.tsx
| ├── MyPlans
| | ├── Cards
| | | ├── PlanCard.tsx
| | | ├── QuotationCard.tsx
| | | └── QuotationCardCompleted.tsx
| | ├── MyPlanDetail.tsx
| | ├── MyPlanDetailCompleted.tsx
| | ├── MyPlanList.tsx
| | ├── MyPlanNav.tsx
| | ├── QuotationCardList.tsx
| | └── QuotationCardListCompleted.tsx
| ├── MyReviews
| | ├── Cards
| | | ├── ReviewCard.tsx
| | | └── TripCard.tsx
| | ├── MyCompletedTripList.tsx
| | ├── MyReviewList.tsx
| | └── MyReviewNav.tsx
| └── Receive
| ├── CheckFilter.tsx
| ├── CustomerInput.tsx
| ├── FastDropdown.tsx
| ├── ModalFilter.tsx
| ├── Quotation.tsx
| ├── QuotationDetailsContainer.tsx
| ├── ReceiveModalLayout.tsx
| ├── Reject.tsx
| ├── RequestDetails.tsx
| ├── ReviewGraph.tsx
| ├── SendQuotation.tsx
| └── StarRating.tsx
├── features
| ├── ChattingForm.tsx
| ├── DetailMaker.tsx
| ├── FollowedMaker.tsx
| ├── InformEditMaker.tsx
| ├── LoginForm.tsx
| ├── OAuthSignupForm.tsx
| ├── PlanRequest.tsx
| ├── ProfileDreamer.tsx
| ├── ProfileEditDreamer.tsx
| ├── ProfileEditMaker.tsx
| ├── ProfileMaker.tsx
| ├── SignupForm.tsx
| └── SystemLog.tsx
├── pages
| ├── 404
| | └── index.tsx
| ├── activity-logs
| | └── index.tsx
| ├── all-receive-plan
| | └── index.tsx
| ├── chatting
| | └── index.tsx
| ├── finding-maker
| | └── index.tsx
| ├── follow-maker
| | └── index.tsx
| ├── login
| | └── index.tsx
| ├── maker-detail
| | └── index.tsx
| ├── managequo
| | └── index.tsx
| ├── myreview-manage
| | ├── completed-trip
| | | └── index.tsx
| | ├── reviewable-trip
| | | └── index.tsx
| | └── reviewed-trip
| | └── index.tsx
| ├── mytrip-manage
| | ├── completed-plan
| | | └── index.tsx
| | ├── ongoing-plan
| | | └── index.tsx
| | ├── overdue-plan
| | | └── index.tsx
| | └── quotationdetail-dreamer
| | └── [planId].tsx
| ├── plan-detail
| | └── [id].tsx
| ├── plan-request
| | └── index.tsx
| ├── profile
| | ├── dreamer
| | | ├── edit
| | | | └── [id].tsx
| | | └── index.tsx
| | └── maker
| | | ├── edit
| | | | ├── profileEdit
| | | | | └── [id].tsx
| | | | └── informEdit.tsx
| | | ├── mypage
| | | | └── [id].tsx
| | | └── index.tsx
| ├── quotation-detail
| | └── [id].tsx
| ├── receive
| | └── index.tsx
| ├── reject-list
| | └── index.tsx
| ├── signup
| | ├── index.tsx
| | └── oauth.tsx
| ├── _app.tsx
| ├── _document.tsx
| └── index.tsx
├── services
| ├── api.ts
| ├── apiClient.ts
| ├── authService.ts
| ├── chargeService.ts
| ├── chatService.ts
| ├── followService.ts
| ├── notificationService.ts
| ├── planService.ts
| ├── quotationService.ts
| ├── quotationServiceDreamer.ts
| ├── requestService.ts
| ├── reviewService.ts
| └── userService.ts
├── stores
| ├── SignUpContext.tsx
| ├── useAuthStore.tsx
| ├── useRealTimeNotification.ts
| └── withAuthAccess.tsx
├── styles
| └── globals.css
├── types
| ├── chatData.ts
| ├── facebook.d.ts
| ├── kakao.d.ts
| └── planData.ts
└── utils
├── errorStatus.ts
├── formatDate.ts
├── formatImage.ts
├── formatRegion.ts
├── formatTripType.ts
├── random.ts
├── tokenUtils.ts
└── validate.ts