chore: 리드미 1차 작성

README.md

@@ -1,39 +1,78 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+## 프로젝트 소개
+- **[2024 서울 열린데이터광장 공공데이터 활용 창업경진대회]** 출품작 
+- 서울시의 폐의류, 폐형광등/폐건전지, 폐의약품, 쓰레기통 위치 정보를 제공하고 방문 기록을 남길 수 있는 서비스
 
-## Getting Started
+## 서비스 링크
+<p align="center">
+  <a href="https://woosuham.site/" target="_blank">
+    <img src="https://i.ibb.co/LQHcgpm/image.png" alt="HEARUS-logo" border="0" width="100"/>
+  </a> 
+</p>
 
-First, run the development server:
+## 서비스 플로우
+![image](https://github.com/user-attachments/assets/0f2a5aa8-9d6b-41b7-9e27-a7d277fdd02f)
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+### **1. 수거함 종류 필터링** 
+- 카테고리 버튼 선택시 마커 색상으로 구분하여 위치 표시
+- 필터링을 모두 끄려고 할 시 또는 데이터가 없을 때 토스트 메시지
+
+|  모바일  |  PC  |
+|--|--|
+| ![A-001-04  필터링을 모두 끄려고 할 시](https://github.com/user-attachments/assets/70a04b85-8af8-4207-be14-ad357497541c) | ![A-001-04  필터링을 모두 끄려고 할 시 (1)](https://github.com/user-attachments/assets/4b0ce7e5-348a-4126-bd8a-f5df08f9c563) |
+
+### **2. 수거함 상세 정보**
+- 위치 정보(이름, 주소, 카카오맵 길찾기, 카카오맵 로드뷰), 최근 방문기록, 배출방법 제공 
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+<table>
+  <tr>
+    <td align="center" colspan="3">
+      <b>모바일</b>
+    </td>
+  </tr>    
+  <tr>
+    <td>
+      <img src="https://github.com/user-attachments/assets/73e4e3f9-0e23-4f11-81b4-0fe0c10b8c47" width="33%">
+      <img src="https://github.com/user-attachments/assets/83d56487-b210-487f-91cb-29bb136f46ec" width="33%">
+      <img src="https://github.com/user-attachments/assets/39a599ba-e565-4993-b84f-b99f31cb0b56" width="33%">
+    </td>
+  </tr>
+</table>
 
-## Learn More
+| PC |
+|--|
+|![A-002-01  수거함 정보창](https://github.com/user-attachments/assets/20f5cfb6-b421-4422-90c4-8d656042a92c) |
 
-To learn more about Next.js, take a look at the following resources:
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+### **3. 수거함 방문기록**
+- 정보의 신뢰도를 확인하기 위해 방문시 수거함의 존재여부 등록 가능
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+<table>
+  <tr>
+    <td align="center" colspan="3">
+      <b>모바일</b>
+    </td>
+  </tr>    
+  <tr>
+    <td>
+      <img src="https://github.com/user-attachments/assets/9f20c30f-85e0-4fda-9d26-60b7d5cd6527" width="24%">
+      <img src="https://github.com/user-attachments/assets/588f8041-ea65-47ad-888d-f24fe7554a7d" width="24%">
+      <img src="https://github.com/user-attachments/assets/9cd9c95c-8e1c-46f6-9fd0-7bb21231b54c" width="24%">
+      <img src="https://github.com/user-attachments/assets/dea9e638-d39c-429a-8dd3-36d8274323f3" width="24%">
+    </td>
+  </tr>
+</table>
 
-## Deploy on Vercel
+## 기술 스택
+| Language | Library | CSS | State Management | Data Fetching | 배포 | CI/CD |
+|--|--|--|--|--|--|--|
+| ![image](https://github.com/user-attachments/assets/e5450c28-4022-4e1e-9c15-d962c8d0fe47) |  |  | ![image](https://github.com/user-attachments/assets/f4eb48fc-d54b-4ab5-9299-bc27c6ae93da) | ![image](https://github.com/user-attachments/assets/03506e89-883b-4da8-a334-e5cad795b420) |  |  |
+| TypeScript | Next.js | Tailwind CSS | Zustand | Tanstack React Query | Vercel | Github Actions |
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+## 주요 기여자
+| FE | FE | 
+|--|--|
+|[김나연](https://github.com/Nangniya) |[김동현](https://github.com/cham0287)|
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
 
-## Readme test
-## Readme test