https://github.com/shuttle-cock/shuttle-cock_client

🚌 셔틀콕 - ShuttleCock 사내 셔틀버스 위치 정보 확인 서비스
https://github.com/shuttle-cock/shuttle-cock_client

dayjs framer-motion react react-hook-form react-leaflet react-query storybook typescript vanilla-extract vite zustand

Last synced: 4 days ago
JSON representation

🚌 셔틀콕 - ShuttleCock 사내 셔틀버스 위치 정보 확인 서비스

• Host: GitHub
• URL: https://github.com/shuttle-cock/shuttle-cock_client
• Owner: shuttle-cock
• Created: 2024-07-18T08:27:50.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-09-17T07:22:21.000Z (16 days ago)
• Last Synced: 2024-09-26T08:39:51.772Z (7 days ago)
• Topics: dayjs, framer-motion, react, react-hook-form, react-leaflet, react-query, storybook, typescript, vanilla-extract, vite, zustand
• Language: TypeScript
• Homepage:
• Size: 11.5 MB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        






  



셔틀콕 - ShuttleCock


사내 셔틀버스 위치 정보 확인 서비스

![License](https://img.shields.io/badge/license-MIT-blue)






## ✨ Features

- 실시간 셔틀버스 위치 정보 확인

- 셔틀버스 운영 시간표 확인

- 실시간 마을버스 위치 정보 확인

- 사용자 데이터 연동

- 게시판



  맨 위로



## 🚀 Getting Started

로컬 환경에서 앱을 실행하는 방법입니다.

### ✅ Prerequisites

해당 앱을 실행하기 위한 필수 조건입니다.

|        | 버전     | 설명                                                                                                                      |

| ------ | -------- | ------------------------------------------------------------------------------------------------------------------------- |

| nodejs | v20.15.1 | - 2024년 7월 기준 LTS 버전.
- .nvmrc에 버전 명시되어있음.
- 최초 프로젝트 클론 시 nvm use 입력하여 버전 맞추기. |

| pnpm   | v9.6.0   | - 패키지 매니저는 pnpm 으로 통일.
- package.json에 버전 명시되어있음.                                                |

1. pnpm 설치

```shell

# pnpm 설치

npm install -g pnpm

```

2. node setup

```shell

# .nvmrc 기준 node version 설치

# nvm을 사용하지 않는다면 수동으로 노드버전을 맞춰주세요.

nvm use

```

### 📦 Installation

1. 프로젝트 클론

```shell

git clone https://github.com/shuttle-cock/shuttle-cock_client

```

2. 프로젝트 디렉토리로 이동

```shell

cd shuttle-cock_client

```

3. 종속성 설치

```shell

pnpm install

```

4. 개발 서버 시작

```

pnpm dev

```



  맨 위로



## 🔧 Tech Stack

| 라이브러리      | Link                                                                   | Description                                |

| --------------- | ---------------------------------------------------------------------- | ------------------------------------------ |

| dayjs           | [https://day.js.org/](https://day.js.org/)                             | 자바스크립트 날짜 라이브러리               |

| framer-motion   | [https://www.framer.com/motion/](https://www.framer.com/motion/)       | 애니메이션 라이브러리                      |

| pnpm            | [https://pnpm.io/ko/](https://pnpm.io/ko/)                             | 패키지 매니저                              |

| react           | [https://ko.legacy.reactjs.org/](https://ko.legacy.reactjs.org/)       | UI 자바스크립트 라이브러리                 |

| react-hook-form | [https://www.react-hook-form.com/](https://www.react-hook-form.com/)   | React 폼 라이브러리                        |

| react-leaflet   | [https://react-leaflet.js.org/](https://react-leaflet.js.org/)         | Leaflet 지도를 위한 React 컴포넌트         |

| react-query     | [https://tanstack.com/query/latest](https://tanstack.com/query/latest) | 데이터 페칭 라이브러리                     |

| storybook       | [https://storybook.js.org/](https://storybook.js.org/)                 | UI 개발, 테스트 및 문서화                  |

| typescript      | [https://www.typescriptlang.org/](https://www.typescriptlang.org/)     | 자바스크립트의 타입이 있는 상위 언어       |

| vanilla-extract | [https://vanilla-extract.style/](https://vanilla-extract.style/)       | 런타임이 없는 CSS-in-TypeScript 프레임워크 |

| vite            | [https://ko.vitejs.dev/guide/](https://ko.vitejs.dev/guide/)           | 프론트엔드 번들링                          |

| zustand         | [https://zustand-demo.pmnd.rs/](https://zustand-demo.pmnd.rs/)         | 상태 관리 라이브러리                       |



  맨 위로



## ⚙️ Environment Variables

환경 변수를 설정하는 방법입니다.

```shell

# .env.example 기준으로 .env 파일 생성

```



  맨 위로