docs: readme를 작성한다 (#902)

* docs: 리드미 기본 구조 이식 [#874] * docs: 리드미 1차 수정 Co-authored-by: YoungWoo Kim <[email protected]> Co-authored-by: Dain Lee <[email protected]> [#874] * docs: 리드미 수정 Co-authored-by: YoungWoo Kim <[email protected]> Co-authored-by: Dain Lee <[email protected]> [#874] * docs: 리드미 수정 Co-authored-by: YoungWoo Kim <[email protected]> Co-authored-by: Dain Lee <[email protected]> [#874] * docs: 리드미 수정 Co-authored-by: YoungWoo Kim <[email protected]> Co-authored-by: Dain Lee <[email protected]> [#874] * docs: 리드미 수정 Co-authored-by: YoungWoo Kim <[email protected]> Co-authored-by: Dain Lee <[email protected]> [#874] * docs: 사진을 추가한다 [#874] * refactor: SEO 개선 시도 [#874] * docs: readme 개선 [#874] * Update README.md * docs: 메인 화면 이미지 추가 [#874] * Update README.md * docs: ga4 문서 추가 [#874] * docs: 리드미 수정 --------- Co-authored-by: YoungWoo Kim <[email protected]>
woowacourse-teams · Oct 25, 2023 · 2e7257f · 2e7257f
1 parent 8ed5424
commit 2e7257f
Show file tree

Hide file tree

Showing 22 changed files with 273 additions and 118 deletions.
diff --git a/README.md b/README.md
@@ -1,8 +1,149 @@
+![title](./docs/title.png)
+
 # 2023 우아한테크코스 5기 카페인 팀
+<a href="https://carffe.in">
+  <p align="center">
+    <img src="./frontend/public/icons/192.png"/>
+  </p>
+  <p align="center" style="font-size: larger;">
+    카페인 바로가기
+  </p>
+</a>
+<p align="center" style="font-size: xx-small;">
+  실시간 전기자동차 충전소 지도 및 사용 통계 조회 서비스
+</p>
+
+## 프로젝트 소개
+
+카페인 서비스는 전국 24만개의 충전기 정보를 실시간으로 제공하고, 각 충전소의 혼잡도 정보를 제공함으로써 전기차 사용자들의 자발적인 분산 이용을 유도하는 서비스 입니다.
+
+<br>
+
+### 설치할 필요가 없습니다.
+
+이 서비스는 웹 브라우저만 있다면 설치하지 않아도 구동할 수 있습니다. PC와 모바일 모두 대응하며, 앱 환경에서 사용을 원하시는 경우 브라우저에서 `홈 화면에 바로가기 추가`를 눌러 사용할 수 있습니다.
+
+<br>
+
+### 기존의 웹 서비스를 대체합니다.
+
+기존에 출시된 전기자동차 충전소 조회 웹 서비스들은 굉장히 느리고 불편합니다. 카페인에서는 `사용자 경험을 네이티브 앱 환경만큼 크게 개선`하였습니다. 전국 충전소를 검색할 수 있는 것은 물론이고, 원하시는 지역을
+검색하여 바로 이동할 수도 있습니다.
+
+<br>
+
+### 충전소 사용량을 통계로 제공합니다.
+
+충전소의 상세한 정보를 제공하는 것은 물론이고, 지속적으로 수집한 충전기 사용량을 통계로 제공합니다. 충전소가 얼마나 인기있는 충전소인지 확인할 수 있습니다.
+
+<br>
+
+### 충전소 평가 및 고장 신고
+
+정보가 잘못된 충전소는 운전자를 당황하게 합니다. 평소에 관리가 잘 되고 있는 충전소인지 확인할 수 있습니다.
+
+<br>
+
+## 주요 기능 소개
+
+### 충전소 조회
+
+<img src="./docs/main.png" alt="main" />
 
-실시간 전기자동차 충전소 지도 및 사용 통계 조회 서비스
+
+<table>
+  <tr>
+    <td><img src="./docs/station_marker_big.png" alt="station_marker_big" /></td>
+    <td><img src="./docs/station_marker.png" alt="station_marker" /></td>
+  </tr>
+</table>
+
+<table>
+  <tr>
+    <td><img src="./docs/cluster_region.png" alt="cluster_region" /></td>
+    <td><img src="./docs/cluster_city.png" alt="cluster_city" /></td>
+  </tr>
+</table>
+
+### 전국 충전소 검색 및 필터링
+
+<table>
+  <tr>
+    <td><img src="./docs/search.gif" alt="search" /></td>
+    <td><img src="./docs/filter_server.gif" alt="filter_server" /></td>
+  </tr>
+</table>
+
+### 충전소 정보 조회
+
+<table>
+  <tr>
+    <td><img src="./docs/station_info.png" alt="station_info" /></td>
+    <td><img src="./docs/station_details.png" alt="station_details" /></td>
+  </tr>
+</table>
+
+<table>
+  <tr>
+    <td><img src="./docs/station_chargers.png" alt="station_chargers" /></td>
+    <td><img src="./docs/statistics.png" alt="statistics" /></td>
+  </tr>
+</table>
+
+<table>
+  <tr>
+    <td><img src="./docs/reports.png" alt="reports" /></td>
+    <td><img src="./docs/reviews.png" alt="reviews" /></td>
+  </tr>
+</table>
+
+### 지원 플랫폼
+
+<table>
+  <tr>
+    <td align="center">
+        <img src="docs/pc.png" alt="PC" />
+    </td>
+    <td align="center">
+        <img src="./docs/mobile.png" alt="Mobile" />
+    </td>
+  </tr>
+  <tr>
+    <td align="center">
+        PC
+    </td>
+    <td align="center">
+        Mobile
+    </td>
+  </tr>
+</table>
+
+## 프로젝트 구조
+
+- CI/CD
+    - GitHub Actions
+    - Docker
+- 기술
+    - Frontend
+        - React + Typescript
+        - Tanstack Query
+        - Google Maps API
+        - webpack
+        - styled-components
+        - Storybook
+        - Jest
+        - React Testing Library
+        - Eslint / Prettier
+        - GitHub Actions
+        - AWS S3 (예정)
+        - AWS CloudFront (예정)
+    - Backend
+        - ?
+
+## 팀원 소개
 
 ### Frontend
+
 <table>
   <tr>
     <td align="center" width="200px">
@@ -40,8 +181,8 @@
   </tr>
 </table>
 
-
 ### Backend
+
 <table>
   <tr>
     <td align="center" width="200px">
@@ -89,4 +230,10 @@
   </tr>
 </table>
 
+## 사용자 유치
+
+[확인하기](./ga4/ga4.md)
+
+## 더보기
 
+- [카페인팀 블로그](https://car-ffeine.github.io/archive)
diff --git a/docs/cluster_city.png b/docs/cluster_city.png
diff --git a/docs/cluster_region.png b/docs/cluster_region.png
diff --git a/docs/filter_server.gif b/docs/filter_server.gif
diff --git a/docs/ga4/ga4-1.png b/docs/ga4/ga4-1.png
diff --git a/docs/ga4/ga4-2.png b/docs/ga4/ga4-2.png
diff --git a/docs/ga4/ga4-3.png b/docs/ga4/ga4-3.png
diff --git a/docs/ga4/ga4.md b/docs/ga4/ga4.md
@@ -0,0 +1,6 @@
+# Google Analytics 4
+
+2023년 9월 11일 ~ 2023년 10월 24일 기준
+![ga4-1](ga4-1.png)
+![ga4-2](ga4-2.png)
+![ga4-3](ga4-3.png)
diff --git a/docs/main.png b/docs/main.png
diff --git a/docs/mobile.png b/docs/mobile.png
diff --git a/docs/pc.png b/docs/pc.png
diff --git a/docs/reports.png b/docs/reports.png
diff --git a/docs/reviews.png b/docs/reviews.png
diff --git a/docs/search.gif b/docs/search.gif
diff --git a/docs/station_chargers.png b/docs/station_chargers.png
diff --git a/docs/station_details.png b/docs/station_details.png
diff --git a/docs/station_info.png b/docs/station_info.png
diff --git a/docs/station_marker.png b/docs/station_marker.png
diff --git a/docs/station_marker_big.png b/docs/station_marker_big.png
diff --git a/docs/statistics.png b/docs/statistics.png
diff --git a/docs/title.png b/docs/title.png