Feature/#8 메인 페이지 퍼블리싱

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,57 @@
+import {
+  Bold,
+  Container,
+  InduceParagraph,
+  IntroSection,
+  LaughGroup,
+  Logo,
+  ProfileImage,
+  SlideToPivoting,
+  UpperArrow,
+  WaitingParagraph,
+} from "./style";
+
+import { NativeStackScreenProps } from "@react-navigation/native-stack";
+import React from "react";
+import { RootStackParamList } from "../../App";
+import { TouchableOpacity } from "react-native-gesture-handler";
+
+type Props = NativeStackScreenProps<RootStackParamList, "Home">;
+
+const Home = ({ navigation }: Props) => {
+  // TODO: 환경변수로 빼려고 합니다.
+  const host = `http://192.168.35.5:19000`;
+
+  const logoURI = `${host}/src/assets/image/logo.png`;
+  const laughGroupURI = `${host}/src/assets/image/laugh-group.png`;
+  const upperArrowURI = `${host}/src/assets/image/upper-arrow.png`;
+  const slideToPivotingURI = `${host}/src/assets/image/slide-to-pivoting.png`;
+  const profileImageURI = `${host}/src/assets/image/profile-image.png`;
+  const waitingPeople = 65;
+
+  return (
+    <Container>
+      <IntroSection>
+        <Logo source={{ uri: logoURI }} />
+        <InduceParagraph>피보팅을{"\n"}시작해보세요</InduceParagraph>
+        <WaitingParagraph>
+          현재 <Bold>{waitingPeople}명</Bold>이 대기중이에요
+        </WaitingParagraph>
+        <ProfileImage source={{ uri: profileImageURI }} />
+      </IntroSection>
+
+      <LaughGroup source={{ uri: laughGroupURI }} resizeMode="contain" />
+
+      <TouchableOpacity onPress={() => navigation.navigate("Matching")}>
+        <SlideToPivoting
+          source={{ uri: slideToPivotingURI }}
+          resizeMode="contain"
+        />
+      </TouchableOpacity>
+
+      <UpperArrow source={{ uri: upperArrowURI }} />
+    </Container>
+  );
+};
+
+export default Home;

src/screens/Home/index.ts

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

src/screens/Home/style.ts

@@ -0,0 +1,65 @@
+import styled from "styled-components/native";
+
+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.Image`
+  width: 124px;
+  height: 18px;
+  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.Image`
+  position: absolute;
+  right: 0;
+  bottom: 60px;
+
+  width: 63px;
+  height: 63px;
+`;
+
+export const Bold = styled.Text`
+  font-weight: 700;
+`;
+
+export const LaughGroup = styled.Image`
+  width: 100%;
+  height: 41%;
+  margin-top: 5%;
+`;
+
+export const UpperArrow = styled.Image`
+  position: absolute;
+  align-self: center;
+  bottom: 5%;
+
+  width: 12px;
+  height: 4px;
+`;
+
+export const SlideToPivoting = styled.Image`
+  height: 60px;
+  margin-top: 6%;
+`;