diff --git a/README.md b/README.md index 3e2c3f8..2b03b3b 100644 --- a/README.md +++ b/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! +| ν•™μŠ΅ 톡계 ν™”λ©΄ | 히트맡 μ‹œκ°ν™” μ˜ˆμ‹œ(더미 데이터) | +|--------|------| +| image | image | -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 R key twice or select **"Reload"** from the **Dev Menu**, accessed via Ctrl + M (Windows/Linux) or Cmd ⌘ + M (macOS). -- **iOS**: Press R 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: +| κ·Έλ£Ή μ±„νŒ… | +|--------| +| image | -- [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-))