피드백 페이지 구현

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() {
           <Route path="/end" element={<EndPage />} />
           <Route path="/new" element={<SelfSettingPage />} />
           <Route path="/chatroom" element={<ChattingPage />} />
+          <Route path="/result" element={<ChattingResultPage />}/>
         </Routes>
       </div>
     </BrowserRouter>

src/components/ChatBlock.jsx

@@ -1,40 +1,41 @@
 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 (
     <div style={styles.ic}>
-      <img src={chatblock} alt={props.altText} style={{width: "722px", height: "85px"}} />
+      <img
+        src={chatblock}
+        alt={props.altText}
+        style={{ width: "722px", height: "85px" }}
+      />
       <div style={styles.to}>
         <p style={styles.text}>{props.text}</p>
       </div>
     </div>
   );
 }
 
-export default ChatBlock;
+export default ChatBlock;

src/pages/ChattingResultPage.jsx

@@ -1,44 +1,80 @@
 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 (
     <>
       <Link to="/">
         <img src={logoImage} alt="" className="logoimage" />
       </Link>
-      <div className="chatWrap">
-        <div className="wrap">
+      <div className="chatWrap" style={{marginTop: "60px"}}>
+        <div className="wrap" style={{marginBottom: "83px"}}>
           <img
             src={checkIcon}
             alt=""
-            width="30px"
-            height="30px"
-            marginTop="20px"
+            width="61px"
+            height="49px"
+            style={{
+              marginTop: "20px",
+              marginRight: "20px"
+            }}
           ></img>
-          <div className="oChat">hi</div>
+          <div className="oChat" style={{fontSize: "28px", color: "#4e5560", textAlign: "center", lineHeight: "84px"}}>
+            I think he is so kind and he really cares about me.</div>
         </div>
+        <div style={{width: "631px", height: "32px", fontSize: "28px", marginLeft: "1163px", color: "#730000"}}>이렇게 표현하면 더 좋아요</div>
         <div className="wrap">
-          <img
-            src={checkIcon}
-            alt=""
-            width="30px"
-            height="30px"
-            marginTop="20px"
-          ></img>
-          <div className="oChat">hi</div>
+          <img src={xIcon} alt="" width="52px" height="52px" style={{
+              marginTop: "20px",
+              marginRight: "20px"
+            }}></img>
+          <div className="xChat" style={{fontSize: "28px", color: "#4e5560", textAlign: "center", lineHeight: "84px"}}>I like playing with Princce.</div>
         </div>
-        <div>이렇게 표현하면 더 좋아요</div>
         <div className="wrap">
-          <img src={xIcon} alt="" width="30px" height="30px"></img>
-          <div className="xChat">hi</div>
+          <div className="Chat" style={{fontSize: "28px", color: "#4e5560", textAlign: "center", lineHeight: "84px"}}>I like playing with Prince.</div>
         </div>
-        <div className="wrap">
-          <div className="Chat">hi</div>
+      </div>
+      <div style={styles.chatBar}>
+        <div>
+          <input
+            style={styles.in}
+            type="text"
+            className="chatinput"
+          />
+
+          {/* <button style={styles.btn_style} onClick={handleMessageSend}>
+                    입력
+                </button>                 */}
+          <img
+            src={sendIcon}
+            alt=""
+            className="sendicon"
+          />
         </div>
       </div>
     </>

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;