Feature/#11 개발 환경 추가

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "sort-imports.default-sort-style": "module-scoped"
+}

babel.config.js

@@ -1,7 +1,7 @@
-module.exports = function(api) {
+module.exports = function (api) {
   api.cache(true);
   return {
-    presets: ['babel-preset-expo'],
-    plugins: ['react-native-reanimated/plugin']
+    presets: ["babel-preset-expo"],
+    plugins: ["react-native-reanimated/plugin", "inline-react-svg"],
   };
 };

declarations.d.ts

@@ -0,0 +1,5 @@
+declare module "*.svg" {
+  import { SvgProps } from "react-native-svg";
+  const content: React.FC<SvgProps>;
+  export default content;
+}

ios/Podfile.lock

@@ -333,6 +333,8 @@ PODS:
   - RNScreens (3.8.0):
     - React-Core
     - React-RCTImage
+  - RNSVG (12.1.1):
+    - React
   - Yoga (1.14.0)
 
 DEPENDENCIES:
@@ -383,6 +385,7 @@ DEPENDENCIES:
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNScreens (from `../node_modules/react-native-screens`)
+  - RNSVG (from `../node_modules/react-native-svg`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -480,6 +483,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-reanimated"
   RNScreens:
     :path: "../node_modules/react-native-screens"
+  RNSVG:
+    :path: "../node_modules/react-native-svg"
   Yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
@@ -501,7 +506,7 @@ SPEC CHECKSUMS:
   EXUpdates: 061b67c33f0e7f8fd335bbb48697c4a4fc8a5157
   EXUpdatesInterface: e1c01b4f5ec76bd1d6cc714938f9edf5ef6379b9
   FBLazyVector: c71c5917ec0ad2de41d5d06a5855f6d5eda06971
-  FBReactNativeSpec: 59cd42b527c2626408fa5538e2d36d840c77e0ec
+  FBReactNativeSpec: 3b304bde59db01cca21677bb69d23a0215b141da
   glog: 73c2498ac6884b13ede40eda8228cb1eee9d9d62
   RCT-Folly: ec7a233ccc97cc556cf7237f0db1ff65b986f27c
   RCTRequired: d34bf57e17cb6e3b2681f4809b13843c021feb6c
@@ -530,6 +535,7 @@ SPEC CHECKSUMS:
   RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211
   RNReanimated: 024eff8202342abf4b24e11575a16afc441dabfe
   RNScreens: 6e1ea5787989f92b0671049b808aef64fa1ef98c
+  RNSVG: 551acb6562324b1d52a4e0758f7ca0ec234e278f
   Yoga: e6ecf3fa25af9d4c87e94ad7d5d292eedef49749
 
 PODFILE CHECKSUM: 47b8eda49859f102b3f066d23a7b68843b55644f

ios/pivotingclient.xcodeproj/project.pbxproj

@@ -377,7 +377,7 @@
 				COPY_PHASE_STRIP = NO;
 				ENABLE_STRICT_OBJC_MSGSEND = YES;
 				ENABLE_TESTABILITY = YES;
-				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "arm64 ";
+				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "";
 				GCC_C_LANGUAGE_STANDARD = gnu99;
 				GCC_DYNAMIC_NO_PIC = NO;
 				GCC_NO_COMMON_BLOCKS = YES;
@@ -434,7 +434,7 @@
 				COPY_PHASE_STRIP = YES;
 				ENABLE_NS_ASSERTIONS = NO;
 				ENABLE_STRICT_OBJC_MSGSEND = YES;
-				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "arm64 ";
+				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "";
 				GCC_C_LANGUAGE_STANDARD = gnu99;
 				GCC_NO_COMMON_BLOCKS = YES;
 				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;

metro.config.js

@@ -1,4 +1,18 @@
-// Learn more https://docs.expo.io/guides/customizing-metro
-const { getDefaultConfig } = require('expo/metro-config');
+// Reference : https://github.com/kristerkari/react-native-svg-transformer
 
-module.exports = getDefaultConfig(__dirname);
+const { getDefaultConfig } = require("expo/metro-config");
+
+module.exports = (async () => {
+  const {
+    resolver: { sourceExts, assetExts },
+  } = await getDefaultConfig(__dirname);
+  return {
+    transformer: {
+      babelTransformerPath: require.resolve("react-native-svg-transformer"),
+    },
+    resolver: {
+      assetExts: assetExts.filter((ext) => ext !== "svg"),
+      sourceExts: [...sourceExts, "svg"],
+    },
+  };
+})();

package.json

@@ -21,6 +21,7 @@
     "react-native-reanimated": "~2.2.0",
     "react-native-safe-area-context": "3.3.2",
     "react-native-screens": "~3.8.0",
+    "react-native-svg": "^12.1.1",
     "react-native-web": "0.17.1",
     "styled-components": "^5.3.3"
   },
@@ -30,6 +31,8 @@
     "@types/react": "^17.0.35",
     "@types/react-native": "^0.66.4",
     "@types/react-test-renderer": "^17.0.1",
+    "babel-plugin-inline-react-svg": "^2.0.1",
+    "react-native-svg-transformer": "^0.14.3",
     "typescript": "^4.4.4"
   },
   "private": true

src/App.tsx

@@ -1,16 +1,24 @@
-import React from "react";
 import { SafeAreaView, StyleSheet } from "react-native";
-import { createNativeStackNavigator } from "@react-navigation/native-stack";
 
-import Home from "./screens/Home";
-import Matching from "./screens/Matching";
 import Chat from "./screens/Chat";
 import Feedback from "./screens/Feedback";
 import History from "./screens/History";
+import Home from "./screens/Home";
+import Matching from "./screens/Matching";
 import { NavigationContainer } from "@react-navigation/native";
+import React from "react";
 import { StatusBar } from "expo-status-bar";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import styled from "styled-components/native";
 
+export type RootStackParamList = {
+  Home: undefined;
+  Matching: undefined;
+  Chat: undefined;
+  Feedback: undefined;
+  History: undefined;
+};
+
 const SafeAreaViewContainer = styled(SafeAreaView)`
   flex: 1;
 `;

src/screens/Home/Home.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { TouchableOpacity } from "react-native-gesture-handler";
+
+import { NativeStackScreenProps } from "@react-navigation/native-stack";
+
+import { RootStackParamList } from "../../App";
+import {
+  Bold,
+  Container,
+  InduceParagraph,
+  IntroSection,
+  LaughGroup,
+  Logo,
+  ProfileImage,
+  SlideToPivoting,
+  UpperArrow,
+  WaitingParagraph,
+} from "./style";
+
+type Props = NativeStackScreenProps<RootStackParamList, "Home">;
+
+const Home = ({ navigation }: Props) => {
+  const waitingPeople = 65;
+
+  return (
+    <Container>
+      <IntroSection>
+        <Logo />
+        <InduceParagraph>피보팅을{"\n"}시작해보세요</InduceParagraph>
+        <WaitingParagraph>
+          현재 <Bold>{waitingPeople}명</Bold>이 대기중이에요
+        </WaitingParagraph>
+        <ProfileImage />
+      </IntroSection>
+
+      <LaughGroup />
+
+      <TouchableOpacity onPress={() => navigation.navigate("Matching")}>
+        <SlideToPivoting />
+      </TouchableOpacity>
+
+      <UpperArrow />
+    </Container>
+  );
+};
+
+export default Home;

src/screens/Home/index.ts

@@ -0,0 +1 @@
+export { default } from "./Home";

src/screens/Home/style.ts

@@ -0,0 +1,61 @@
+import styled from "styled-components/native";
+
+import LaughGroupSVG from "../../assets/image/laugh-group.svg";
+import LogoSVG from "../../assets/image/logo.svg";
+import ProfileImageSVG from "../../assets/image/profile-image.svg";
+import SlideToPivotingSVG from "../../assets/image/slide-to-pivoting.svg";
+import UpperArrowSVG from "../../assets/image/upper-arrow.svg";
+
+export const Container = styled.View`
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+`;
+
+export const IntroSection = styled.View`
+  position: relative;
+  height: 25%;
+  margin: 12% 4% 0 4%;
+`;
+
+export const Logo = styled(LogoSVG)`
+  margin-bottom: 12%;
+`;
+
+export const InduceParagraph = styled.Text`
+  width: 156px;
+  font-weight: 700;
+  font-size: 30px;
+  line-height: 42px;
+  margin-bottom: 5%;
+`;
+
+export const WaitingParagraph = styled.Text`
+  font-size: 17px;
+  line-height: 27px;
+`;
+
+export const ProfileImage = styled(ProfileImageSVG)`
+  position: absolute;
+  right: 0;
+  bottom: 60px;
+`;
+
+export const Bold = styled.Text`
+  font-weight: 700;
+`;
+
+export const LaughGroup = styled(LaughGroupSVG)`
+  margin-top: 5%;
+`;
+
+export const UpperArrow = styled(UpperArrowSVG)`
+  position: absolute;
+  align-self: center;
+  bottom: 5%;
+`;
+
+export const SlideToPivoting = styled(SlideToPivotingSVG)`
+  margin: 0 auto;
+  margin-top: 6%;
+`;

tsconfig.json

@@ -5,7 +5,9 @@
     "esModuleInterop": true,
     "isolatedModules": true,
     "jsx": "react-native",
-    "lib": ["es2017"],
+    "lib": [
+      "es2017"
+    ],
     "moduleResolution": "node",
     "noEmit": true,
     "strict": true,
@@ -16,5 +18,6 @@
     "babel.config.js",
     "metro.config.js",
     "jest.config.js"
-  ]
+  ],
+  "extends": "expo/tsconfig.base"
 }