Mobile App 'WeatherPeople' Frontend using ReactNative
사람들이 직접 경험한 오늘의 날씨정보를 토대로 옷차림을 공유한다면,
내가 직접 느낀 날씨를 기록할 수 있다면 어떨까요?
웨더피플은 날씨에 관련된 경험을 공유하고 , 소통하는 서비스 입니다.
이 레포지토리에는 프론트엔드 코드가 담겨있습니다.
백엔드에 관련된 내용은 여기서 확인할 수 있습니다: Click Here
프로젝트의 주요 구성 요소는 다음과 같습니다:
📦App
┣ 📂assets
┃ ┣ 📂fonts
┃ ┣ 📜.DS_Store
┣ 📂component
┃ ┣ 📜AppSwiper.js
┃ ┣ 📜InputTitle.js
┃ ┣ 📜WeatherModal.js
┃ ┣ 📜WeatherPopup.tsx
┃ ┣ 📜WeatherSelect.js
┃ ┣ 📜WeatherTextArea.js
┃ ┗ 📜WeatherTextInput.js
┣ 📂constant
┃ ┗ 📜mainRoutes.js
┣ 📂graphql
┃ ┣ 📜Record.js
┃ ┗ 📜USER.js
┣ 📂hooks
┃ ┣ 📜useFetchAllUser.js
┃ ┣ 📜useFetchDust.js
┃ ┣ 📜useFetchGeo.js
┃ ┣ 📜useFetchRecord.js
┃ ┣ 📜usePostRecord.js
┃ ┗ 📜useShortWeather.js
┣ 📂interfaces
┃ ┗ 📜user.ts
┣ 📂navigation
┃ ┣ 📜AuthStack.js
┃ ┣ 📜BottomTab.js
┃ ┣ 📜FeedStack.js
┃ ┣ 📜HomeStack.js
┃ ┣ 📜MainStack.js
┃ ┣ 📜PeoplePickStack.js
┃ ┣ 📜ProfileStack.js
┃ ┗ 📜UploadStack.js
┣ 📂screens
┃ ┣ 📂auth
┃ ┃ ┣ 📂component
┃ ┃ ┃ ┣ 📜LoginDashBoard.js
┃ ┃ ┃ ┗ 📜index.js
┃ ┃ ┣ 📂container
┃ ┃ ┃ ┗ 📜LoginContainer.js
┃ ┃ ┣ 📜LoginScreen.js
┃ ┃ ┣ 📜SplashScreen.js
┃ ┃ ┗ 📜auth.styled.js
┃ ┣ 📂error
┃ ┃ ┗ 📜ErrorScreen.js
┃ ┣ 📂feed
┃ ┃ ┣ 📂component
┃ ┃ ┃ ┣ 📜Feed.tsx
┃ ┃ ┃ ┣ 📜Feeds.tsx
┃ ┃ ┃ ┣ 📜TopSection.js
┃ ┃ ┃ ┗ 📜WeatherInfo.jsx
┃ ┃ ┣ 📂container
┃ ┃ ┃ ┗ 📜FeedContainer.tsx
┃ ┃ ┣ 📜Feed.Styled.js
┃ ┃ ┗ 📜FeedScreen.js
┃ ┣ 📂home
┃ ┃ ┣ 📂component
┃ ┃ ┃ ┣ 📜HotPost.js
┃ ┃ ┃ ┣ 📜OutfitPhotos.js
┃ ┃ ┃ ┣ 📜OutfitSwiper.js
┃ ┃ ┃ ┣ 📜TopSection.js
┃ ┃ ┃ ┣ 📜WeatherBoard.js
┃ ┃ ┃ ┗ 📜WeatherPick.js
┃ ┃ ┣ 📂container
┃ ┃ ┃ ┗ 📜HomeContainer.js
┃ ┃ ┣ 📜HomeScreen.js
┃ ┃ ┗ 📜home.styled.js
┃ ┣ 📂peoplePick
┃ ┃ ┗ 📜PeoplePickScreen.js
┃ ┣ 📂profile
┃ ┃ ┗ 📜ProfileScreen.js
┃ ┗ 📂upload
┃ ┃ ┣ 📂component
┃ ┃ ┃ ┣ 📜DetailRecordSelect.js
┃ ┃ ┃ ┣ 📜DetailRecordText.js
┃ ┃ ┃ ┣ 📜DetailRecords.js
┃ ┃ ┃ ┣ 📜ImageSlides.js
┃ ┃ ┃ ┣ 📜TopSection.js
┃ ┃ ┃ ┗ 📜UploadInputArea.tsx
┃ ┃ ┣ 📂container
┃ ┃ ┃ ┗ 📜UploadContainer.tsx
┃ ┃ ┣ 📜Upload.Styled.js
┃ ┃ ┗ 📜UploadScreen.js
┣ 📂store
┃ ┗ 📜user.js
┣ 📂styles
┃ ┗ 📜globalStyles.js
┣ 📂type
┃ ┗ 📜upload.ts
┣ 📂utils
┃ ┣ 📜API.js
┃ ┣ 📜DATE.js
┃ ┣ 📜SIDO.js
┃ ┗ 📜fetcher.js
┣ 📜.DS_Store
┗ 📜App.js
android 폴더에는 android project 파일이 담겨있습니다. android app을 build 할 때 사용합니다.
ios 폴더에는 ios project 파일이 담겨있습니다. ios app을 build 할 때 사용합니다.
application의 코드가 bundling 됩니다.
주요 날씨 정보 및 카카오 api 통신을 위한 주소가 API.js에 정리되어 있습니다. Base url 은 보안을 위해 환경 변수로 관리합니다. 날짜 포매팅을 위한 함수를 모듈화 하고 기상청 통신을 위한 주소 모듈이 정리되어 있습니다. fetcher.js에는 graphqlFetcher 및 fetcherWithToken 등 백엔드 통신을 위한 인스턴스를 관리합니다.
스크린을 모아둔 파일입니다. 각 스크린들은 컴포넌트들로 이루어져 있습니다.
앱의 화면 전환 및 탐색 기록을 위한 navagator를 관리하는 파일입니다.
각 스크린에 쓰이는 컴포넌트를 보관한 파일입니다. 각 컴포넌트들은 재사용 가능합니다.
이미지와 폰트를 보관하는 파일입니다.
npm install
cd ios && pod install
npm run start
npx react-native run-ios / npx react-native run-android
Distributed under Jihyoun Jung.
Jihyoun Jung - jihyoun0602@gmail.com