diff --git a/package.json b/package.json
index 70626e8..e24f61e 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
"@react-navigation/native-stack": "^6.2.5",
"@types/styled-components-react-native": "^5.1.3",
"expo": "~43.0.2",
+ "expo-linear-gradient": "~10.0.3",
"expo-splash-screen": "~0.13.5",
"expo-status-bar": "~1.1.0",
"expo-updates": "~0.10.13",
diff --git a/src/App.tsx b/src/App.tsx
index a6c09da..80dc0e1 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,6 +7,8 @@ import Matching from "./screens/Matching";
import Chat from "./screens/Chat";
import Feedback from "./screens/Feedback";
import History from "./screens/History";
+import ChatResult from "./screens/ChatResult";
+
import { NavigationContainer } from "@react-navigation/native";
import { StatusBar } from "expo-status-bar";
import styled from "styled-components/native";
@@ -30,6 +32,7 @@ export default function App() {
+
diff --git a/src/assets/image/chat_result.png b/src/assets/image/chat_result.png
new file mode 100644
index 0000000..a8413c5
Binary files /dev/null and b/src/assets/image/chat_result.png differ
diff --git a/src/assets/image/close.png b/src/assets/image/close.png
new file mode 100644
index 0000000..095e2a5
Binary files /dev/null and b/src/assets/image/close.png differ
diff --git a/src/constants/color.ts b/src/constants/color.ts
new file mode 100644
index 0000000..6792fdc
--- /dev/null
+++ b/src/constants/color.ts
@@ -0,0 +1,16 @@
+enum Color {
+ PVBlue = "#5988FF",
+ PVSkyblue = "#31BDFF",
+ PVRed = "#EF5D5D",
+ PVYellow = "#FCDE41",
+ PVGreen = "#00AD78",
+ PVBlack01 = "#303134",
+ PVBlack02 = "#6E7081",
+ PVBlack03 = "#AFB1C3",
+ PVBlack04 = "#CBCBD8",
+ PVBlack05 = "#E7E8F0",
+ PVBlack06 = "#F6F6F9",
+ White = "white"
+}
+
+export { Color }
diff --git a/src/constants/font.ts b/src/constants/font.ts
new file mode 100644
index 0000000..067e6e4
--- /dev/null
+++ b/src/constants/font.ts
@@ -0,0 +1,12 @@
+enum FontWeight {
+ Regular = 400,
+ Bold = 700
+}
+
+enum FontSize {
+ Small = "12px",
+ Medium = "16px",
+ Large = "20px"
+}
+
+export { FontWeight, FontSize }
diff --git a/src/screens/ChatResult.tsx b/src/screens/ChatResult.tsx
new file mode 100644
index 0000000..e4b5bec
--- /dev/null
+++ b/src/screens/ChatResult.tsx
@@ -0,0 +1,148 @@
+import React from "react";
+import { Button, View, Text, Image, StyleSheet, PixelRatio } from "react-native";
+import Styled from 'styled-components/native'
+import { LinearGradient } from "expo-linear-gradient"
+import { Color } from "../constants/color";
+import { FontSize, FontWeight } from "../constants/font";
+
+const CLOSE_IMAGE_URL = "../assets/image/close.png";
+const CHAT_RESULT_IMAGE_URL = "../assets/image/chat_result.png";
+
+const styles = StyleSheet.create({
+ root: {
+ flex: 1,
+ backgroundColor: "white"
+ },
+ p20: {
+ padding: 20
+ },
+ pt10: {
+ paddingTop: 10
+ },
+ pt30: {
+ paddingTop: 30
+ },
+ px20: {
+ paddingLeft: 20,
+ paddingRight: 20
+ },
+ pr10: {
+ paddingRight: 10
+ },
+ flexCenter: {
+ flex: 1,
+ justifyContent: "center",
+ alignItems: "center"
+ },
+ colorPVBlue: {
+ color: Color.PVBlue
+ },
+ colorWhite: {
+ color: Color.White
+ },
+ button: {
+ justifyContent: "center",
+ alignItems: "center",
+ height: 60,
+ borderRadius: 33.5
+ }
+})
+
+const Title = Styled.Text`
+ color: ${Color.PVBlack01};
+ font-size: ${FontSize.Large};
+ font-weight: ${FontWeight.Bold};
+ line-height: 32px;
+`;
+
+const CloseImage = Styled.Image`
+ resize-mode: contain;
+ height: 24px;
+ width: 24px;
+`
+
+const ListItem = Styled.View`
+ padding-top: 30px;
+ padding-left: 20px;
+ padding-right: 20px;
+ flex-direction: row;
+`;
+
+const ListIndex = Styled.Text`
+ color: ${Color.PVBlack03};
+ font-size: ${FontSize.Medium};
+ font-weight: ${FontWeight.Bold};
+ line-height: 26px;
+`;
+
+const ListText = Styled.Text`
+ color: ${Color.PVBlack01};
+ font-size: ${FontSize.Medium};
+ font-weight: ${FontWeight.Bold};
+ line-height: 26px;
+`;
+
+const SectionBar = Styled.View`
+ margin-top: 30px;
+ height: 9px;
+ background-color: ${Color.PVBlack06};
+`
+
+const ButtonText = Styled.Text`
+ color: ${Color.White};
+ font-size: ${FontSize.Medium};
+ font-weight: ${FontWeight.Bold};
+`;
+
+const ChatResult = ({ navigation }) => {
+ return (
+
+
+
+
+
+ 대화가 종료되었어요 :)
+
+
+
+
+ 01
+
+
+ 이번 대화에서
+ 총 23개의 반응을 받았어요!
+
+
+
+
+ 01
+
+
+ 이번 대화에서
+ 총 23개의 반응을 받았어요!
+
+
+
+
+
+ 이번 대화에 대한 피드백을 남기고
+ 서로의 피드백을 확인해보세요
+
+
+
+
+
+
+ 피드백 남기기
+
+
+
+ );
+};
+
+export default ChatResult;
diff --git a/src/screens/Home.tsx b/src/screens/Home.tsx
index e31b210..8fc0c2b 100644
--- a/src/screens/Home.tsx
+++ b/src/screens/Home.tsx
@@ -10,6 +10,10 @@ const Home = ({ navigation }) => {
onPress={() => navigation.navigate("Matching")}
/>