[Chore] README 작성

README.md

@@ -1,97 +1,140 @@
-This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli).
+# 📚 StudyPals
 
-# Getting Started
+## 📌 개요
+- 학습 시간을 기록하고 관리할 수 있는 크로스 플랫폼 애플리케이션
+- React Native 기반 (Android / iOS / macOS / Windows 지원)
+- STOMP + SSE 기반 실시간 그룹 채팅
+- SQLite 기반 로컬 데이터 캐싱 및 오프라인 대응
 
-> **Note**: Make sure you have completed the [Set Up Your Environment](https://reactnative.dev/docs/set-up-your-environment) guide before proceeding.
+## 👭 친구들과 함께 공부하며 성장 기록 남기기
 
-## Step 1: Start Metro
+혼자 공부할 때는 목표를 꾸준히 유지하기 어렵고, 스터디를 하더라도 서로의 학습량을 확인하기 어려운 경우가 많습니다.
 
-First, you will need to run **Metro**, the JavaScript build tool for React Native.
+StudyPals는 이러한 문제 상황에서 착안하여 **학습 기록을 시각화**하고, **스터디 그룹 단위의 공동 목표를 설정하여 함께 공부하며 동기부여**를 받을 수 있도록 설계된 서비스입니다.
 
-To start the Metro dev server, run the following command from the root of your React Native project:
+## 🌐 크로스 플랫폼 애플리케이션
 
-```sh
-# Using npm
-npm start
+StudyPals는 **Android, iOS, macOS, Windows** 환경에서 동작하는 **크로스 플랫폼 애플리케이션**입니다.
 
-# OR using Yarn
-yarn start
-```
+### 📱 Mobile Demo
 
-## Step 2: Build and run your app
+| Android | iOS |
+|--------|------|
+|![Android](https://github.com/user-attachments/assets/f37713e7-440a-4fa4-8295-1a4ab7feb267) | ![iOS](https://github.com/user-attachments/assets/77e25935-4d5e-46f5-a04b-b447303908a9) |
+| [Android 영상 원본](https://github.com/user-attachments/assets/ca288215-a813-49e4-ac1f-66b5bf950380) | [iOS 영상 원본](https://github.com/user-attachments/assets/90912110-1029-4611-add2-0162b543fa1f) |
 
-With Metro running, open a new terminal window/pane from the root of your React Native project, and use one of the following commands to build and run your Android or iOS app:
+### 🖥️ Desktop Demo
 
-### Android
+| Windows | MacOS |
+|--------|------|
+| ![Windows](https://github.com/user-attachments/assets/433440a1-db70-4d0e-9a87-2df409c8e4e1) | ![MacOS](https://github.com/user-attachments/assets/84ffa68b-7fb3-4303-b116-634317532bcd) |
+| [Windows 영상 원본](https://github.com/user-attachments/assets/9d04d551-084b-4b7a-bdac-eed73f024ab1) | [MacOS 영상 원본](https://github.com/user-attachments/assets/2faaa132-b3e0-40be-8e68-bc96bd009be5) |
 
-```sh
-# Using npm
-npm run android
+# ✨ 주요 기능
 
-# OR using Yarn
-yarn android
-```
+## 👋 서비스 가입하기
 
-### iOS
+아이디와 비밀번호 기반으로 계정을 생성하고, 자신의 프로필을 설정할 수 있습니다.
 
-For iOS, remember to install CocoaPods dependencies (this only needs to be run on first clone or after updating native deps).
+| 회원가입 Flow |
+|--------|
+| ![signup](https://github.com/user-attachments/assets/d5f14437-437c-405f-90c3-da70905a6da9) |
 
-The first time you create a new project, run the Ruby bundler to install CocoaPods itself:
+## 🏃‍♂️ 학습 목표 설정하기
 
-```sh
-bundle install
-```
+사용자는 목표 시간과 수행 요일을 설정하여 학습 목표를 관리할 수 있습니다. **목표 시간**과 **목표를 수행할 요일**을 지정하여 구체적인 학습 계획 수립이 가능합니다.
 
-Then, and every time you update your native dependencies, run:
+| 목표 생성 | 목표 수정 | 목표 삭제 |
+|--------|------|--------|
+| ![create_category_1](https://github.com/user-attachments/assets/d5e9b606-d9cb-4b8c-aa25-50318270b7e5) | ![category_edit_2](https://github.com/user-attachments/assets/801d31f5-3985-4e59-b69e-5ad249b3d6f3) | ![category_delete_3](https://github.com/user-attachments/assets/2a3adead-fd14-450d-9450-9ab574981005) |
 
-```sh
-bundle exec pod install
-```
+## 📝 학습 기록 남기기
 
-For more information, please visit [CocoaPods Getting Started guide](https://guides.cocoapods.org/using/getting-started.html).
+공부 시작과 종료 시간을 기록하여 학습 시간을 관리할 수 있습니다.
 
-```sh
-# Using npm
-npm run ios
+| 학습 시작 / 종료 |
+|--------|
+| ![start_end_study](https://github.com/user-attachments/assets/513d900a-f818-4c9b-a5bc-aa50d6b94d23) |
 
-# OR using Yarn
-yarn ios
-```
+- 타이머 기반 학습 기록 기능
+- 학습 세션 단위 공부 시간 저장
 
-If everything is set up correctly, you should see your new app running in the Android Emulator, iOS Simulator, or your connected device.
+---
 
-This is one way to run your app — you can also build it directly from Android Studio or Xcode.
+## 📊 학습 통계
 
-## Step 3: Modify your app
+사용자의 학습 기록을 캘린더 형태로 한 눈에 확인할 수 있습니다.
 
-Now that you have successfully run the app, let's make changes!
+| 학습 통계 화면 | 히트맵 시각화 예시(더미 데이터) |
+|--------|------|
+| <img width="300" height="660" alt="image" src="https://github.com/user-attachments/assets/864e9f38-b82c-4379-92e5-bf34bba6d24c" /> | <img width="300" height="660" alt="image" src="https://github.com/user-attachments/assets/96d8aba7-1c28-4074-9aab-5efd658d7fa9" /> |
 
-Open `App.tsx` in your text editor of choice and make some changes. When you save, your app will automatically update and reflect these changes — this is powered by [Fast Refresh](https://reactnative.dev/docs/fast-refresh).
 
-When you want to forcefully reload, for example to reset the state of your app, you can perform a full reload:
+- 월별 최소 / 최대 공부 시간을 기준으로 **컬러 스케일 기반 히트맵 시각화**
+- 날짜별 학습량을 직관적으로 파악할 수 있는 **캘린더 UI**
 
-- **Android**: Press the <kbd>R</kbd> key twice or select **"Reload"** from the **Dev Menu**, accessed via <kbd>Ctrl</kbd> + <kbd>M</kbd> (Windows/Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (macOS).
-- **iOS**: Press <kbd>R</kbd> in iOS Simulator.
+---
 
-## Congratulations! :tada:
+## 👥 스터디 그룹
 
-You've successfully run and modified your React Native App. :partying_face:
+스터디 그룹을 생성하고, 공유 목표를 설정하여 함께 공부할 수 있습니다.
 
-### Now what?
+| 그룹 생성 | 그룹 목표 생성 |
+|--------|------|
+| ![create_group_1](https://github.com/user-attachments/assets/9cf800bf-1c28-47ca-a937-32c6a7b60456) | ![create_group_category_2](https://github.com/user-attachments/assets/bdeed817-d726-4c1b-a2aa-639484dc90b3) |
 
-- If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps).
-- If you're curious to learn more about React Native, check out the [docs](https://reactnative.dev/docs/getting-started).
+- 그룹 단위 학습 관리
+- 디바이스별 그룹 색상 커스터마이징
 
-# Troubleshooting
+---
 
-If you're having issues getting the above steps to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page.
+## 💬 실시간 그룹 채팅
 
-# Learn More
+스터디 그룹 내에서 **실시간 채팅**을 통해 대화를 주고받을 수 있습니다.
 
-To learn more about React Native, take a look at the following resources:
+| 그룹 채팅 |
+|--------|
+| <img width="300" height="660" alt="image" src="https://github.com/user-attachments/assets/0b883968-6617-456b-92a6-fcfb1f5d8c23" /> |
 
-- [React Native Website](https://reactnative.dev) - learn more about React Native.
-- [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment.
-- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**.
-- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts.
-- [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native.
+- STOMP 기반 WebSocket 통신
+- SSE 기반 메시지 수신으로 채팅 안읽음 개수 실시간 반영
+- 무한 스크롤 기반 단계적 렌더링으로 메모리 사용 최적화
+- 수신한 채팅은 로컬 스토리지에 캐싱하여 네트워크 비용 절감
+
+---
+
+## 🔠 언어 설정
+
+앱 내에서 언어를 설정할 수 있습니다.
+
+| 언어 설정 |
+|--------|
+| ![change_lang](https://github.com/user-attachments/assets/c6fb965b-ea19-45da-b66a-2944dca86ac0) |
+
+- `react-i18next` 라이브러리를 사용하여 구현
+
+# 🛠 기술 스택
+
+| 구분 | 기술 |
+|---|---|
+| **프론트엔드** | React Native, TypeScript |
+| **내비게이션** | React Navigation |
+| **로컬 데이터 관리** | AsyncStorage, EncryptedStorage, SQLite |
+| **상태 관리** | TanStack Query, Zustand |
+| **실시간 통신** | STOMP, SSE |
+| **외부 데이터 검증** | Zod, React Hook Form |
+| **코드푸시** | Hot Updater |
+
+---
+
+# 📖 기술 문서
+
+프로젝트의 기술적인 설계와 구현 과정은 **Wiki**에서 확인할 수 있습니다.
+
+[👉 **Wiki 바로가기**](https://github.com/study-pals/frontend-wiki/wiki)
+
+---
+
+# 📷 Screenshots
+
+[👉 **모든 화면에 대한 명세 바로가기**](https://github.com/study-pals/frontend-wiki/wiki/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%A7%84%ED%96%89%EC%83%81%ED%99%A9-(-26.02.25-))