docs: 리드미 추가

Author: AAminha

README.md

@@ -1,50 +1,98 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-
-- Configure the top-level `parserOptions` property like this:
-
-```js
-export default tseslint.config({
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
-```
-
-- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
-- Optionally add `...tseslint.configs.stylisticTypeChecked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
-
-```js
-// eslint.config.js
-import react from 'eslint-plugin-react'
-
-export default tseslint.config({
-  // Set the react version
-  settings: { react: { version: '18.3' } },
-  plugins: {
-    // Add the react plugin
-    react,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended rules
-    ...react.configs.recommended.rules,
-    ...react.configs['jsx-runtime'].rules,
-  },
-})
-```
+# 💌 To. HERO
+
+<p align="center">
+  <img src="./docs/readme-image.png" />
+</p>
+
+> To. HERO - 경찰관, 소방관들에게 감사 인사를 전달하는 편지 서비스  
+> 개발 기간 : 2024.12 ~ 2025.01  
+> 배포 주소 : https://tohero.co.kr
+
+<br />
+
+## ✅ 프로젝트 소개
+
+<img src="./docs/1.png" />
+<img src="./docs/2.png" />
+<img src="./docs/3.png" />
+<img src="./docs/4.png" />
+
+<br />
+
+## ✅ 멤버 구성
+
+- 기획 2명
+- 디자인 1명
+- 프론트엔드 1명
+- 백엔드 1명
+
+<br />
+
+## ✅ 기술 스택
+
+### Environment
+
+![visual studio code](https://img.shields.io/badge/visual_studio_code-0082CF?logo=vscode&logoColor=white)
+&nbsp;
+![Git](https://img.shields.io/badge/Git-F05032?logo=Git&logoColor=white)
+&nbsp;
+![GitHub](https://img.shields.io/badge/GitHub-181717?logo=GitHub&logoColor=white)
+
+### Config
+
+![yarn](https://img.shields.io/badge/Yarn-2C8EBB?logo=yarn&logoColor=white)
+
+### Development
+
+![React](https://img.shields.io/badge/React-v18.0.0-61DAFB?logo=react)
+&nbsp;
+![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?logo=typescript&logoColor=white)
+&nbsp;
+![TailwindCSS](https://img.shields.io/badge/Tailwind_CSS-06B6D4?logo=tailwindcss&logoColor=white)
+&nbsp;
+![ReactQuery](https://img.shields.io/badge/ReactQuery-FF4154?logo=reactquery&logoColor=white)
+&nbsp;
+![zustand](https://img.shields.io/badge/zustand-582C3D?logo=zustand&logoColor=white)
+&nbsp;
+![vercel](https://img.shields.io/badge/Vercel-000000?logo=vercel&logoColor=white)
+
+### Communication & Docs
+
+![Notion](https://img.shields.io/badge/Notion-000000?logo=Notion&logoColor=white)
+&nbsp;
+![Swagger](https://img.shields.io/badge/Swagger-85EA2D?logo=Swagger&logoColor=white)
+
+<br />
+
+## ✅ 주요 기능
+
+### ✨ 로그인 및 닉네임 등록
+
+- 카카오 로그인과 비로그인을 선택할 수 있습니다.
+- 처음 로그인을 하거나 비로그인을 선택한 경우, 닉네임 등록을 진행합니다.
+- 이전에 카카오 로그인을 했었다면, 바로 홈 화면으로 이동합니다.
+
+### ✨ 경찰관, 소방관을 위한 편지 조회
+
+- 투히어로를 통해 사람들이 작성한 편지를 확인할 수 있습니다.
+- 모바일 특성을 고려해 무한 스크롤로 편지 내용을 추가적으로 조회할 수 있습니다.
+- 누적 편지 개수에 따라 홈 화면에 보이는 이미지가 점점 밝아집니다.
+
+### ✨ 경찰관, 소방관을 위한 편지 작성
+
+- 경찰관, 소방관께 드릴 편지를 작성할 수 있습니다.
+- 특정 경찰서 혹은 소방서, 특정 경찰관 혹은 소방관에게 전달드릴 수 있습니다.
+- 경찰서와 소방서는 키워드로 검색할 수 있습니다.
+- 편지 작성에 도움이 될 수 있도록 다른 사람들이 작성한 편지를 조회할 수 있습니다.
+- 경찰관, 소방관분들의 최근 소식을 확인할 수 있습니다.
+- 편지가 실제로 전달되면 알림을 받을 수 있도록 푸시 알림 받기 여부를 선택할 수 있습니다.
+
+추가 작성 예정
+
+<br />
+
+<br />
+
+## ✅ 화면 구성
+
+작성 예정