[#60] 코드 리팩토링을 하라

**테스트 코드 작성 전까지 컴포넌트 분리 및 코드 정리**
- [x] style 파일 정리 및 구조화
- [x] 쓸모없는 주석 제거
- [x] 컴포넌트 분리

Author: YONGJAE LEE

App.jsx

@@ -1,7 +1,7 @@
-import App from './src/App';
+import Index from './src/Index';
 
 const STORYBOOK_START = false;
 /* eslint-disable global-require */
 export default STORYBOOK_START ? require('./storybook').default
-  : App;
+  : Index;
 /* eslint-enable global-require */

package.json

@@ -14,9 +14,17 @@
     "styled-components": "^5"
   },
   "dependencies": {
+    "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "@babel/plugin-syntax-jsx": "^7.10.4",
+    "@babel/plugin-transform-react-jsx": "^7.10.4",
+    "@babel/preset-react": "^7.10.4",
     "@emotion/core": "^10.0.34",
     "@emotion/native": "^10.0.27",
     "@emotion/styled": "^10.0.27",
+    "@expo-google-fonts/inter": "^0.1.0",
+    "@expo-google-fonts/nanum-gothic-coding": "^0.1.0",
+    "@expo-google-fonts/nanum-myeongjo": "^0.1.0",
+    "@expo-google-fonts/nunito": "^0.1.0",
     "@fortawesome/free-solid-svg-icons": "^5.14.0",
     "@fortawesome/react-fontawesome": "^0.1.11",
     "@react-native-community/masked-view": "^0.1.10",
@@ -34,6 +42,7 @@
     "expo": "~38.0.1",
     "expo-auth-session": "~1.4.0",
     "expo-camera": "~8.3.1",
+    "expo-font": "~8.2.1",
     "expo-location": "~8.2.1",
     "expo-random": "~8.2.1",
     "expo-status-bar": "^1.0.0",

src/App.jsx

@@ -0,0 +1,37 @@
+/* eslint-disable camelcase */
+import React from 'react';
+
+import { ActivityIndicator, Text } from 'react-native';
+
+import { Provider } from 'react-redux';
+
+import { useFonts, Nunito_900Black } from '@expo-google-fonts/nunito';
+import { NanumGothicCoding_700Bold } from '@expo-google-fonts/nanum-gothic-coding';
+
+import store from './store';
+
+import RootStackNavigator from './components/navigation/RootStackNavigator';
+
+import { CenterView } from './components/constants';
+
+export default function Index() {
+  const [fontsLoaded] = useFonts({
+    Nunito_900Black,
+    NanumGothicCoding_700Bold,
+  });
+
+  if (!fontsLoaded) {
+    return (
+      <CenterView>
+        <ActivityIndicator color="black" size="large" />
+        <Text>aa</Text>
+      </CenterView>
+    );
+  }
+
+  return (
+    <Provider store={store}>
+      <RootStackNavigator />
+    </Provider>
+  );
+}

src/Index.jsx

@@ -1,36 +1,20 @@
 import styled from '@emotion/native';
 
-export const constantsValue = {
-  COLOR_SECONDARY: '#71C0BB',
-  COLOR_LIGHT: '#808080',
-  COLOR_LIGHTER: '#EEEEEE',
-  COLOR_LIGHTEST: '#FFF',
-  COLOR_PRIMARY: '#f44336',
-  COLOR_RED: '#c43a31',
-  COLOR_GREEN: '#BBF1C4',
-  FONTSIZE_BIGGEST: 35,
-  FONTSIZE_BIGGER: 25,
-  FONTSIZE_BIG: 22,
-  FONTSIZE_SMALL: 17,
-  FONTSIZE_SMALLER: 15,
-  FONTSIZE_SAMALLEST: 12,
-  MAX_HEIGHT: 768,
-  MAX_WIDTH: 512,
-};
-
-const {
-  // COLOR_SECONDARY,
-  // COLOR_LIGHT,
-  // COLOR_LIGHTER,
-  COLOR_LIGHTEST,
-  // COLOR_PRIMARY,
-  // FONTSIZE_BIGGEST,
-  // FONTSIZE_BIGGER,
-  FONTSIZE_BIG,
-  FONTSIZE_SMALL,
-  // FONTSIZE_SMALLER,
-  FONTSIZE_SMALLEST,
-} = constantsValue;
+export const COLOR_SECONDARY = '#71C0BB';
+export const COLOR_LIGHT = '#808080';
+export const COLOR_LIGHTER = '#EEEEEE';
+export const COLOR_LIGHTEST = '#FFF';
+export const COLOR_PRIMARY = '#f44336';
+export const COLOR_RED = '#c43a31';
+export const COLOR_GREEN = '#BBF1C4';
+export const FONTSIZE_BIGGEST = 35;
+export const FONTSIZE_BIGGER = 25;
+export const FONTSIZE_BIG = 22;
+export const FONTSIZE_SMALL = 17;
+export const FONTSIZE_SMALLER = 15;
+export const FONTSIZE_SMALLEST = 12;
+export const MAX_HEIGHT = 768;
+export const MAX_WIDTH = 512;
 
 export const Container = styled.SafeAreaView({
   flex: 1,
@@ -40,14 +24,17 @@ export const Container = styled.SafeAreaView({
 });
 
 export const TextWrap = styled.Text({
+  fontFamily: 'NanumGothicCoding_700Bold',
   fontSize: FONTSIZE_SMALLEST,
 });
 
 export const TextWrapBig = styled.Text({
+  fontFamily: 'NanumGothicCoding_700Bold',
   fontSize: FONTSIZE_BIG,
 });
 
 export const TextWrapBold = styled.Text({
+  fontFamily: 'NanumGothicCoding_700Bold',
   fontWeight: 'bold',
   fontSize: FONTSIZE_SMALL,
   marginBottom: '5%',
@@ -56,3 +43,9 @@ export const TextWrapBold = styled.Text({
 export const TextWrapContainer = styled.View({
   marginTop: '7%',
 });
+
+export const CenterView = styled.View({
+  flex: 1,
+  justifyContent: 'center',
+  alignItems: 'center',
+});