diff --git a/src/App.js b/src/App.js
index 4ddc5ef..dba6cc7 100644
--- a/src/App.js
+++ b/src/App.js
@@ -7,6 +7,7 @@ import ChattingPage from "./pages/ChattingPage";
import SelfSettingPage from "./pages/SelfSettingPage";
import { BrowserRouter, Routes, Route } from "react-router-dom";
+import ChattingResultPage from "./pages/ChattingResultPage";
function App() {
return (
@@ -18,6 +19,7 @@ function App() {
} />
} />
} />
+ }/>
diff --git a/src/assets/checkIcon.png b/src/assets/checkIcon.png
new file mode 100644
index 0000000..992aab9
Binary files /dev/null and b/src/assets/checkIcon.png differ
diff --git a/src/assets/xIcon.png b/src/assets/xIcon.png
new file mode 100644
index 0000000..e10f05d
Binary files /dev/null and b/src/assets/xIcon.png differ
diff --git a/src/components/ChatBlock.jsx b/src/components/ChatBlock.jsx
index d74bffa..4e34d45 100644
--- a/src/components/ChatBlock.jsx
+++ b/src/components/ChatBlock.jsx
@@ -1,35 +1,36 @@
import React from 'react';
import chatblock from "../assets/rectangle.png";
-const styles= {
- ic: {
- position: "relative",
- marginBottom: "100px",
- left: 0
- },
- to: {
- position: "absolute",
- top: "20%",
- left: "40%",
- transform: "translate(-50%, -50%)",
- backgroundColor: "#e4e4e4",
- paddingBottom: "30px",
- color: "#4E5560",
- fontSize: "30px",
- height: '1px'
- },
- text: {
- //paddingRight: '100px',
- width: '600px',
- height: '40px'
- }
-
-}
+const styles = {
+ ic: {
+ position: "relative",
+ marginBottom: "100px",
+ left: 0,
+ },
+ to: {
+ position: "absolute",
+ top: "20%",
+ left: "40%",
+ transform: "translate(-50%, -50%)",
+ paddingBottom: "30px",
+ color: "#4E5560",
+ fontSize: "30px",
+ height: "1px",
+ },
+ text: {
+ //paddingRight: '100px',
+ width: "600px",
+ height: "40px",
+ },
+};
function ChatBlock(props) {
-
return (
-

+
@@ -37,4 +38,4 @@ function ChatBlock(props) {
);
}
-export default ChatBlock;
+export default ChatBlock;
\ No newline at end of file
diff --git a/src/pages/ChattingResultPage.jsx b/src/pages/ChattingResultPage.jsx
index dfb9bd1..7985df5 100644
--- a/src/pages/ChattingResultPage.jsx
+++ b/src/pages/ChattingResultPage.jsx
@@ -1,9 +1,30 @@
import React, { useEffect, useState } from "react";
import logoImage from "../assets/logo.png";
-import "../styles/ChattingResultPage.css";
+import "../styles/ChattingResultPags.css";
import { Link } from "react-router-dom";
import xIcon from "../assets/xIcon.png";
import checkIcon from "../assets/checkIcon.png";
+import sendIcon from "../assets/sendicon.png";
+const styles = {
+ chatBar: {
+ width: "100%",
+ display: "flex",
+ bottom: 0,
+ position: "absolute",
+ justifyContent: "center",
+ marginBottom: "20px",
+ },
+ in: {
+ width: 1200,
+ height: 70,
+ borderRadius: "20px",
+ fontSize: "30px",
+ paddingLeft: "40px",
+ border: "none",
+ boxShadow: "0 1px 4px 1px rgba(0, 0, 0, 0.2)",
+ },
+}
+
function ChattingResultPage() {
return (
@@ -11,34 +32,49 @@ function ChattingResultPage() {

-
-
+
+

-
hi
+
+ I think he is so kind and he really cares about me.
+
이렇게 표현하면 더 좋아요
-

-
hi
+

+
I like playing with Princce.
-
이렇게 표현하면 더 좋아요
-

-
hi
+
I like playing with Prince.
-
+
+
+
+
+ {/*
*/}
+
>
diff --git a/src/styles/ChattingResultPags.css b/src/styles/ChattingResultPags.css
index f02aecc..4257160 100644
--- a/src/styles/ChattingResultPags.css
+++ b/src/styles/ChattingResultPags.css
@@ -4,11 +4,13 @@
.chatWrap {
justify-content: center;
display: flex;
+ flex-direction: column;
flex-wrap: wrap;
}
.wrap {
display: flex;
- margin-left: 400px;
+ justify-content: flex-end;
+ margin-right: 173px;
}
.oChat {
width: 700px;