Skip to content

DDang2 README 수정 #70

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kimjuyoung78 merged 1 commit into from
Mar 17, 2025
Merged

DDang2 README 수정 #70

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
249 changes: 200 additions & 49 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,79 +1,230 @@
This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli).

# Getting Started
<img width="1000" alt="image" src="https://github.com/user-attachments/assets/45270441-8cdd-4660-bfc0-ca5195ad7670" />

>**Note**: Make sure you have completed the [React Native - Environment Setup](https://reactnative.dev/docs/environment-setup) instructions till "Creating a new application" step, before proceeding.

## Step 1: Start the Metro Server
<div align=center>

> ## 👩🏻‍💻 DDang, 어떻게 마이그레이션 되었나요?
> ### 1. React ➡️ React Native 전환하여 iOS/Android 크로스플랫폼 지원❗️ 앱스토어 출기 대기중 <br>
> ### 2. 기존 단일 강아지 프로필 ➡️ 복수(2마리 이상) 강아지 등록 및 관리 기능 구현 <br>
> ### 3. 차단, 신고 로직 및 UX/UI 추가 <br>
> ### 4. 데이터베이스 쿼리 최적화 및 API 엔드포인트 확장<br>

First, you will need to start **Metro**, the JavaScript _bundler_ that ships _with_ React Native.

To start Metro, run the following command from the _root_ of your React Native project:

```bash
# using npm
npm start
<br/><h2>소중한 댕댕이와 새로운 산책을 원할 때!🐶🐾</h2>
반려견과 견주들의 행복한 공생을 돕는 **강아지 산책 서비스** **DDang** 입니다. </br>
**DDang(댕)** 오직 **‘산책’** 키워드에 맞춘 사용자 친화적인 서비스를 만들고자 탄생했습니다.

# OR using Yarn
yarn start
```

## Step 2: Start your Application
### $${\text{🏆웹 데브코스 최종 프로젝트(전공자반) }{\color{red}\textbf{'인기 프로젝트상'}}{\text{수상 작품}}}$$

Let Metro Bundler run in its _own_ terminal. Open a _new_ terminal from the _root_ of your React Native project. Run the following command to start your _Android_ or _iOS_ app:
### **🐕‍🦺***동물도 주인도 즐거운 산책*
*→ **강번따** : 산책 시 200미터 안에 산책하는 또다른 사용자가 있다면 해당 사용자에게 강번따 요청을 할 수 있습니다. 승낙 시 서로의 위치를 공유하며 함께 산책할 수 있는 서비스를 제공하며,산책을 마치면 친구를 맺을 수 있습니다.*

### For Android
### 👨‍👩‍👧‍👦온 가족이 케어하는 댕댕이 산책 라이프
*→ **댕로그, 패밀리댕** : 함께 사는 가족 or 연인과 함께 모든 기록을 공유하며 체계적으로 산책을 관리 합니다.*

```bash
# using npm
npm run android
</br>

# OR using Yarn
yarn android
```

### For iOS
**이전 1차 개발 레포지토리 : https://github.com/DDang-Org/FrontEnd**

```bash
# using npm
npm run ios

</div>

# OR using Yarn
yarn ios
```
## 👪 팀원 구성


<div align=center>

| Front-End | Front-End | Front-End | Back-End | Back-End |
|:-:|:-:|:-:|:-:|:-:|
| [김주영](https://github.com/kimjuyoung99) | [남원일](https://github.com/wonill) | [한규](https://github.com/ruehan) | [문재경](https://github.com/MoonJaeGyeong) | [노관태](https://github.com/Repaion24) |
| <img src="https://avatars.githubusercontent.com/u/102804323?v=4" width="150" height="150"/> | <img src="https://avatars.githubusercontent.com/u/119827402?v=4" width="150" height="150"/> | <img src="https://avatars.githubusercontent.com/u/65541546?v=4" width="200" height="150"/> | <img src="https://avatars.githubusercontent.com/u/108010440?v=4" width="150" height="150"/> | <img src="https://avatars.githubusercontent.com/u/65394501?v=4" width="150" height="150"/> |
| **패밀리댕, 로그인, 견주등록 관리, 설정** | **댕로그, 가족코드 공유, 강아지등록 관리** | **산책, 강번따, 친구 신청** | **채팅, 패밀리댕, 차단, 알림, 회원정보** | **산책, 댕댕로그, 강아지, 시큐리티, 친구** |


</div>



## 🐶 기능 소개

**산책**

<img src="https://github.com/user-attachments/assets/7619b401-19f2-44ba-b3d2-d0d53d60c61e" width="20%">



- **산책**: 산책 중 위치와 경로를 실시간으로 확인하고 기록할 수 있습니다.
- **산책 기록**: 이후 산책을 마치면 경로, 시간, 거리의 데이터을 요약해주고 해당 데이터를 아카이빙 시킵니다.

<br/>

**강번따**
강번따란? 내 동네 견주와 함께 친구를 맺어 산책을 할 수 있는 기능입니다.

<img src="https://github.com/user-attachments/assets/9fbd849f-577e-40df-afde-0faa08924727" width="40%"> <img src="https://github.com/user-attachments/assets/d8b07614-671e-4f5a-b184-2f6617546e6b" width="40%">

- **근처 강아지 알림**: 산책 도중에 사용자의 반경 내 산책 중인 다른 강아지 수를 표시해줍니다.
- **강아지 프로필**: 근처에 있는 강아지의 프로필을 확인할 수 있습니다.
- **강번따 요청 버튼**: 다른 강아지와 산책을 시작하는 버튼을 통해 강번따 요청을 보낼 수 있습니다.
- **강번따 요청**: 강아지 산책 요청이 들어왔을 때 수락/거절 옵션이 있는 알림을 제공합니다.
- **거절**: 강아지가 부끄러워하는 상황에 대한 메시지를 제공합니다.
- **수락**: 서로의 실시간 위치가 핀포인트로 공유되고 채팅방이 생성됩니다.
- **신고**: 특정 강아지를 신고하거나 차단할 수 있는 기능을 제공합니다.
- **실시간 채팅**: 강아지와 산책이 매칭된 사용자 간에 채팅이 가능합니다.
- **친구 맺기** : 함께 산책을 완료한 후엔 친구를 맺어 추후 지속적인 동네 산책 친구와 네트워킹을 할 수 있습니다. 

If everything is set up _correctly_, you should see your new app running in your _Android Emulator_ or _iOS Simulator_ shortly provided you have set up your emulator/simulator correctly.
<br/>

**홈** &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;**프로필 페이지**

This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively.
<img src="https://github.com/user-attachments/assets/47396d87-c6c4-4535-8dfd-51e2ce912193" align="center" width="25%"> <img src="https://github.com/user-attachments/assets/365c13dc-75f2-4592-9e06-ad471c5553f5" align="center" width="25%">

## Step 3: Modifying your App
이번 주 동안의 산책 횟수, 다음 산책 차례를 한눈에 확인할 수 있습니다.
알림 목록을 확인할 수 있습니다.

Now that you have successfully run the app, let's modify it.
<br/>

**소셜** &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;**채팅**

1. Open `App.tsx` in your text editor of choice and edit some lines.
2. For **Android**: Press the <kbd>R</kbd> key twice or select **"Reload"** from the **Developer Menu** (<kbd>Ctrl</kbd> + <kbd>M</kbd> (on Window and Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (on macOS)) to see your changes!
<img src="https://github.com/user-attachments/assets/9ac4bf4c-3f3e-40bd-bb83-c60845f3a8bd" align="center" width="25%"> <img src="https://github.com/user-attachments/assets/67f667f2-2ceb-4765-8a36-fcb34595849f" align="center" width="25%">

For **iOS**: Hit <kbd>Cmd ⌘</kbd> + <kbd>R</kbd> in your iOS Simulator to reload the app and see your changes!
- **댕친구 리스트**: 사용자가 추가한 친구 목록을 확인할 수 있습니다.
- **채팅**: 댕친구와의 채팅 기능을 지원합니다.

## Congratulations! :tada:
<br/>

**견주,강아지 정보입력 프로세스** <br/>
<img src="https://github.com/user-attachments/assets/075113de-2f5f-4642-908f-aa30d397b2f0" align="center" width="30%"> <img src="https://github.com/user-attachments/assets/6b7a6001-7fa9-48e2-b29f-765671f7aff8" align="center" width="30%">

You've successfully run and modified your React Native App. :partying_face:
- **소셜로그인** : 카카오 계정으로 간편하게 소셜로그인이 가능합니다.
- **회원정보 입력** : 마음에 드는 아바타와 가족 포지션을 포함한 정보를 입력 받습니다. 이때 현재 위치는 클릭 한 번으로 위치 정보를 받아올 수 있습니다.
- **강아지정보 입력** : 내 강아지 정보를 입력 받습니다. 이미지, 견종 등 여러 정보를 저장할 수 있습니다.

### Now what?
<br/>

**패밀리댕** <br/>
<img src="https://github.com/user-attachments/assets/5353a17b-a966-415b-a6a8-3e9f21117760" align="center" width="30%"> <img src="https://github.com/user-attachments/assets/d677eb52-e593-45aa-87f0-f1f5d07f4de0" align="center" width="30%">

- 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 [Introduction to React Native](https://reactnative.dev/docs/getting-started).
- **가족 역할**: 가족 구성원 역할 확인 및 산책 데이터를 한 눈에 볼 수 있습니다.
- **댕 평집 페이지**: 강아지 프로필 상세 정보를 확인 및 수정할 수 있습니다.
- **가족 초대** : 패밀리댕에 우리 가족을 초대할 수 있게 가족 코드를 공유할 수 있습니다. 해당 코드를 입력하면 패밀리에 초대됩니다.

<!-- **산책 알림** : -->
<br/>

**댕로그** <br/>
<img src="https://github.com/user-attachments/assets/7ee76683-b644-4b78-98ca-d7290d8e3bd3" align="center" width="25%"> <img src="https://github.com/user-attachments/assets/661de03d-8c06-49a7-9ef6-b9fa88236dfb" align="center" width="25%">

- **캘린더 페이지**: 일별로 산책 기록을 캘린더 형태로 확인할 수 있습니다.
- **주간 캘린더별 기록 페이지**: 주간 산책 횟수 및 주요 활동을 요약하여 제공하는 페이지입니다.
- **기록별 상세 정보 페이지**: 각 산책 기록의 상세 정보를 확인할 수 있습니다.
- **산책 기록 기반 분석 그래프**: 사용자와 강아지의 산책 횟수를 그래프로 시각화하여 제공합니다.

<br/>

**마이페이지** <br/>
<img src="https://github.com/user-attachments/assets/365c13dc-75f2-4592-9e06-ad471c5553f5" align="center" width="23%"> <img src="https://github.com/user-attachments/assets/1fd34da1-dafa-4ea2-9cbf-78f14aa74280" align="center" width="30%">


- **회원 정보 메인 페이지**: 사용자의 기본 정보와 설정 페이지로 이동할 수 있는 메뉴입니다.
- **알림 설정 페이지**: 강번따 요청, 산책 알림 등 주요 알림을 설정하는 페이지입니다.
- **회원 정보 상세 페이지**: 사용자 정보 수정 및 관리 기능을 제공합니다.



## 기획서

## **📅 개발 기간 및 작업 관리**

### **⏰ 개발 기간**

- 2024.11.15 ~ 2024.12.09

### **👥 UserFlow**
<img src="https://github.com/user-attachments/assets/4fbe61a1-5851-4306-999c-22ff5032377e" align="center" width="70%">


### **📊 작업 관리**

- 프로젝트 기간이 짧았던 만큼, 매주 월요일마다 스프린트 하였습니다.
- 데일리 스크럼을 통해 팀원 간 작업 상황을 공유하였습니다.
- [Github Project](https://github.com/orgs/prgrms-web-devcourse-final-project/projects/4)에서 Stroy Point를 이용해 작업을 관리하였습니다.

## 브랜치 전략

## 컨벤션, PR


## ♻️ 개발 환경
<img width="931" alt="image" src="https://github.com/user-attachments/assets/a834c7ef-eafe-4422-8ef2-8e215eaa7768" />
<img width="933" alt="image" src="https://github.com/user-attachments/assets/46f36c10-7bcb-4c05-b7a1-15135c25cbac" />

- Front : Vite React Typescript
- Back : Java Spring
- Version & Issue Management : Github Project
- Tools : Discord, Slack, Notion
- Service : Cloudflare
- Design : Figma

## 📃 커밋 컨벤션

| Type | Description |
| --- | --- |
| ✨`Feat` | 새로운 기능 추가 |
| 🐛`Fix` | 버그 수정 |
| 📝`Docs` | 문서 수정, 주석 관련 |
| ♻️`Refactor` | 코드 리펙토링 |
| ✅`Test` | 테스트 코드, 리펙토링 테스트 코드 추가 |
| 🔧`Chore` | 빌드 업무 수정, 패키지 매니저 수정 (package.json 수정) |
| 🎨`Design` | CSS |
| 🔥`Remove` | 파일 제거 |
| 🚚`Rename` | 파일 혹은 폴더명 수정 |
| 🔨`Setting` | 개발 환경 셋팅 관련 |
| 🚀`Perf` | 성능 최적화 관련 |
| 🚨`Hotfix` | 핫픽스 |


## **🏗️ 프로젝트 구조**


```jsx
📦src
┣ 📂apis
┣ ...
┃ ┗ 📜axiosInstance.ts
┣ 📂assets
┣ 📂components
┃ ┣ 📂Button
┃ ┣ 📂DogProfile
┃ ┣ 📂Header
┃ ┣ 📂Input
┃ ┣ 📂PushNotification
┃ ┣ ...
┣ 📂constants
┣ 📂data
┣ 📂hooks
┃ ┣ 📜useClearModal.ts
┃ ┣ 📜useGeolocation.ts
┃ ┣ 📜useScrollPreservation.ts
┃ ┣ ...
┣ 📂modals
┣ 📂pages
┣ 📂stores
┣ 📂styles
┣ 📂types
┣ 📂utils
┣ 📂stores
┣ 📂styles
┣ 📂types
┣ 📂utils
```
## 설치 및 실행 방법

# Troubleshooting

If you can't get this 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:

- [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.
Loading