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 (
- {props.altText} + {props.altText}

{props.text}

@@ -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.
-
-
hi
+
+
+
+ + + {/* */} +
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;