[#11] chore: HomePage SVG 사용하도록 수정

Author: pumpkiinbell

src/assets/image/laugh-group.svg

@@ -20,37 +20,26 @@ import {
 type Props = NativeStackScreenProps<RootStackParamList, "Home">;
 
 const Home = ({ navigation }: Props) => {
-  // TODO: 환경변수로 빼려고 합니다.
-  const host = `http://192.168.35.250: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 }} />
+        <Logo />
         <InduceParagraph>피보팅을{"\n"}시작해보세요</InduceParagraph>
         <WaitingParagraph>
           현재 <Bold>{waitingPeople}명</Bold>이 대기중이에요
         </WaitingParagraph>
-        <ProfileImage source={{ uri: profileImageURI }} />
+        <ProfileImage />
       </IntroSection>
 
-      <LaughGroup source={{ uri: laughGroupURI }} resizeMode="contain" />
+      <LaughGroup />
 
       <TouchableOpacity onPress={() => navigation.navigate("Matching")}>
-        <SlideToPivoting
-          source={{ uri: slideToPivotingURI }}
-          resizeMode="contain"
-        />
+        <SlideToPivoting />
       </TouchableOpacity>
 
-      <UpperArrow source={{ uri: upperArrowURI }} />
+      <UpperArrow />
     </Container>
   );
 };

src/assets/image/logo.png

@@ -1,5 +1,11 @@
 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%;
@@ -12,9 +18,7 @@ export const IntroSection = styled.View`
   margin: 12% 4% 0 4%;
 `;
 
-export const Logo = styled.Image`
-  width: 124px;
-  height: 18px;
+export const Logo = styled(LogoSVG)`
   margin-bottom: 12%;
 `;
 
@@ -31,35 +35,27 @@ export const WaitingParagraph = styled.Text`
   line-height: 27px;
 `;
 
-export const ProfileImage = styled.Image`
+export const ProfileImage = styled(ProfileImageSVG)`
   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%;
+export const LaughGroup = styled(LaughGroupSVG)`
   margin-top: 5%;
 `;
 
-export const UpperArrow = styled.Image`
+export const UpperArrow = styled(UpperArrowSVG)`
   position: absolute;
   align-self: center;
   bottom: 5%;
-
-  width: 12px;
-  height: 4px;
 `;
 
-export const SlideToPivoting = styled.Image`
-  height: 60px;
+export const SlideToPivoting = styled(SlideToPivotingSVG)`
+  margin: 0 auto;
   margin-top: 6%;
 `;

src/assets/image/logo.svg

@@ -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"
 }