main으로 머지

.gitignore

@@ -9,8 +9,8 @@
 
 # next.js
 /.next/
-/out/
 .next
+/out/
 
 # production
 /build
@@ -50,4 +50,6 @@ bower_components
 
 psd
 thumb
-sketch
+sketch
+# Sentry Config File
+.env.sentry-build-plugin

README.md

@@ -1,3 +1,322 @@
-part 4 frontend
+## 대리 여행 중개 플랫폼
 
-[양가현, 김은효, 방신철, 현준배]
+![logo](https://i.imgur.com/bvVO9xc.png)
+
+> 2025.01.07 - 2025.02.26 </br>
+> 코드잇 스프린트 풀스택 2기 고급 프로젝트 2팀 (Frontend)
+> </br> > [Backend Github 바로가기 🔗](https://github.com/GoHawaiiForMe/backend)
+
+</br>
+
+- [니가가라 하와이] 홈페이지: https://www.go-for-me.kro.kr
+- 🗂️ 팀 문서: https://spotless-file-76e.notion.site/2-15f9b6a2707e806ba711ff1f83c499d3?pvs=4
+- 🔍 API 명세: https://www.goforme.duckdns.org/docs
+
+</br>
+
+## 🛠️ 기술스택
+
+![Typescript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white) <img src="https://img.shields.io/badge/Zod-3E67B1?style=for-the-badge&logo=zod&logoColor=white"> <img src="https://img.shields.io/badge/React-61DAFB?style=for-the-badge&logo=react&logoColor=white"> <img src="https://img.shields.io/badge/Next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white"> <img src="https://img.shields.io/badge/ReactQuery-FF4154?style=for-the-badge&logo=reactquery&logoColor=white"> <img src="https://img.shields.io/badge/Zustand-47A248?style=for-the-badge"> <img src="https://img.shields.io/badge/TailwindCSS-06B6D4?style=for-the-badge&logo=tailwindcss&logoColor=white"> <img src="https://img.shields.io/badge/AWS-232F3E?style=for-the-badge&logo=amazonwebservices&logoColor=white">
+
+![github](https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white) ![slack](https://img.shields.io/badge/Slack-4A154B?style=for-the-badge&logo=slack&logoColor=white) ![discord](https://img.shields.io/badge/Discord-7289DA?style=for-the-badge&logo=discord&logoColor=white) ![notion](https://img.shields.io/badge/Notion-000000?style=for-the-badge&logo=notion&logoColor=white) ![Swagger](https://img.shields.io/badge/-Swagger-%23Clojure?style=for-the-badge&logo=swagger&logoColor=white) ...etc
+
+
+</br>
+
+## 💁 구성원
+
+|                              양가현                              |                           김은효                            |                              방신철                              |                           현준배                            |
+| :--------------------------------------------------------------: | :---------------------------------------------------------: | :--------------------------------------------------------------: | :---------------------------------------------------------: |
+|            <img src="https://github.com/user-attachments/assets/6dd2f9e4-9fd9-4ae7-9691-8ebf59155b5e" width="150px">             |          <image src = "https://avatars.githubusercontent.com/u/176313108?s=64&v=4" width = 150px>          |            <image src = "https://avatars.githubusercontent.com/u/176540649?s=64&v=4" width = 150px>             |          <image src = "https://avatars.githubusercontent.com/u/82556884?s=64&v=4" width = 150px>          |
+|                             **프론트엔드장**                     |                                                 |
+| 중간 발표 자료 제작, AWS 배포 및 관리, 발표 자료 정리, 발표 |     프론트엔드 GitHub 관리     | AWS 배포 및 관리, 시연 영상 제작 | 회의록 관리, 노션 관리 |
+|        [Github 바로가기 🔗](https://github.com/gahyeon-yang)        |    [Github 바로가기 🔗](https://github.com/kirinkiri)    |        [Github 바로가기 🔗](https://github.com/bangsinchur)        |    [Github 바로가기 🔗](https://github.com/junbaehyun)    |
+
+
+</br>
+
+## 📋 팀원별 구현 기능 상세
+
+### [양가현]
+
+- 초기세팅
+- 로그인, 회원가입, 간편로그인 페이지
+- Dreamer 프로필 등록 및 수정 페이지
+- Maker 기본정보 수정 페이지
+- 여행 요청 페이지
+- Maker 상세페이지
+- 찜한 Maker 페이지
+- 네비게이션바, 유저메뉴, 사이드바
+- 랜딩 페이지(지역 통계)
+
+- 404 페이지
+
+- 알림, 실시간 알림
+- 실시간 채팅(웹소켓)
+- 시스템 로그 페이지
+- AWS 배포
+
+
+### [김은효]
+
+- Dreamer 플랜 관리 페이지
+  - 플랜 네브바
+  - 플랜 상세 페이지 - 플랜 삭제하기
+  - 견적 상세 페이지 - 견적 확정하기
+- Dreamer 리뷰 관리 페이지
+  - 리뷰 네브바
+  - 여행 완료 페이지
+  - 리뷰 작성 페이지 - 리뷰 작성하기 모달
+  - 작성한 리뷰 페이지
+
+- FE README.md
+
+### [방신철]
+
+- Maker 프로필 등록 및 수정
+- 플랜 목록(받은 플랜, 전체 플랜)
+- 견적 보내기 / 반려하기 모달
+- Maker 견적 관리
+  - 보낸 견적 조회
+  - 취소된 견적
+  - 상세 페이지
+- Maker 마이페이지
+- 코코넛 충전하기(PortOne)
+- SNS 공유하기
+- 랜딩 페이지
+
+- AWS 배포
+
+- 시연 영상 제작
+
+### [현준배]
+
+- Maker 찾기 페이지
+
+- 회의록 작성 및 노션 팀 문서 관리
+
+</br>
+
+## ⚓️ 프론트엔드 전략
+
+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을 통한 배포 및 환경 설정
+    - **웹 접근성**: 모든 사용자가 접근할 수 있도록 웹 접근성 고려
+
+</br>
+
+## 🍰 프로젝트 회고
+
+- 프론트엔드 결과물: https://www.go-for-me.kro.kr
+- 발표 자료 및 시연 영상 : https://drive.google.com/drive/folders/1UQssCDbmnRkehWDOo0fyqkM-jvmzNdUU
+
+</br>
+
+## 📁 파일 구조
+
+```
+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
+
+```

next.config.ts

@@ -1,8 +1,17 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  trailingSlash: true,
   reactStrictMode: true,
+  images: {
+    unoptimized: true,
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "images.unsplash.com",
+      },
+    ],
+  },
 };
 
 export default nextConfig;