Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/prgrms-web-devcourse-final-project/web1_2_travelmaker_fe
데브코스 1-2-최종프로젝트-4팀-FE
https://github.com/prgrms-web-devcourse-final-project/web1_2_travelmaker_fe
Last synced: 10 days ago
JSON representation
데브코스 1-2-최종프로젝트-4팀-FE
- Host: GitHub
- URL: https://github.com/prgrms-web-devcourse-final-project/web1_2_travelmaker_fe
- Owner: prgrms-web-devcourse-final-project
- Created: 2024-11-18T01:36:40.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2024-12-06T08:11:50.000Z (about 1 month ago)
- Last Synced: 2024-12-06T08:22:55.014Z (about 1 month ago)
- Language: TypeScript
- Size: 5.43 MB
- Stars: 3
- Watchers: 0
- Forks: 2
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 📌 **Travel Planner**
**실시간으로 여행 계획을 공유하고, 효율적인 루트를 제작할 수 있는 여행 플래너 서비스**
### 🗺️ **프로젝트 소개**
**Travel Planner**는 멤버들이 실시간으로 여행 계획을 공유하고, 지도에서 여행 경로를 제작할 수 있는 실시간 채팅 기반 여행 플래너 서비스입니다.
사용자는 지도 위에서 원하는 장소를 핀으로 표시한 후, 이를 바탕으로 최적의 여행 루트를 생성하여 **짧은 시간 안에 효율적인 여행 계획**을 세울 수 있습니다.
### 💡 **기획 의도**
현대 사회에서는 대부분의 여행 계획이 디지털 플랫폼을 통해 이루어지고 있습니다.
하지만 **실시간으로 일정 관리를 지원하는 여행 서비스**는 많지 않다는 점에서 착안하여, **실시간 협업과 일정 관리**를 지원하는 서비스를 개발하고자 본 프로젝트를 기획하게 되었습니다.
### 🔧 **기술 스택**
| **분류** | **기술/도구** |
| ------------------ | ----------------- |
| **IDE** | VS Code |
| **언어** | TypeScript |
| **프레임워크** | React |
| **코드 포맷터** | Prettier, ESLint |
| **CSS 라이브러리** | Styled-components |
| **라이브러리** | MSW, Axios |
| **번들러** | Vite |
| **도구** | Storybook, Figma |
| **상태 관리** | Redux-toolkit |
### 🛠️ **주요 기능**
1. **실시간 채팅**을 통해 멤버 간 소통 및 일정 관리.
2. **지도 기반 장소 표시**: 원하는 여행지를 핀으로 표시.
3. **여행 루트 제작**: 표시된 장소들을 경로로 연결하여 최적화된 여행 루트 생성.
4. **협업 기능**: 멤버 간 여행 계획을 실시간으로 공유 및 수정.
### 🎨 **디자인 및 개발 환경**
- **디자인 도구**: Figma로 UI/UX 설계.
- **컴포넌트 관리**: Storybook을 활용한 컴포넌트 개발 및 문서화.
- **코드 스타일**: Prettier와 ESLint로 일관성 있는 코드 유지.
- **CSS 관리**: Styled-components를 사용하여 유연한 스타일링 제공.
---
### 🚀 **프로젝트 실행 방법**
**1. 레포지토리 클론**
```bash
git clone https://github.com/prgrms-web-devcourse-final-project/WEB1_2_TravelMaker_FE.git
cd WEB1_2_TravelMaker_FE
```
**2. Node.js 설치 및 버전 확인**
Node.js가 설치되어 있어야 하며, Node.js 20.x 버전을 사용하는 것을 권장합니다.
설치 여부를 확인하려면 아래 명령어를 실행하세요:
```bash
node -v
```
**3. 의존성 설치**
```bash
npm install
```
**4. .env 파일을 생성하고 필요한 환경 변수를 설정합니다.**
> [!TIP]
> `.env` 파일의 예시는 `.env.template` 파일을 참조하세요.
**5. 개발 서버 실행**
```bash
npm run dev
```
**6. Storybook 실행 (선택 사항)**
```bash
npm run storybook
```
**7. 빌드**
빌드가 완료되면 dist 폴더가 생성됩니다.
해당 폴더에는 배포 가능한 정적 파일이 포함되어 있습니다.
```bash
npm run build
```