[FE/#74] Feat : 이슈쓰기textarea table안에 삽입

codesquad-member-2020 · Jun 24, 2020 · 9d1adf9 · 9d1adf9
1 parent 7320714
commit 9d1adf9
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 16 deletions.
diff --git a/FE/src/components/DetailedIssue/Comment/Comment.jsx b/FE/src/components/DetailedIssue/Comment/Comment.jsx
@@ -2,45 +2,59 @@ import React from "react";
 
 import { data } from "@Mock/detailedIssue";
 
-import { makeStyles } from "@material-ui/core/styles";
-import Box from "@material-ui/core/Box";
-
 import CustomTable from "@Components/common/CustomTable";
 import CustomAvatar from "@Components/common/CustomAvatar";
 import ToolBar from "./ToolBar";
+import Write from "./Write/Write";
+
+import Box from "@material-ui/core/Box";
+import Button from "@material-ui/core/Button";
+import TextareaAutosize from "@material-ui/core/TextareaAutosize";
+import { makeStyles } from "@material-ui/core/styles";
 
 const Comment = () => {
+  const authorName = data.issue.author.userName;
   const { comments } = data.issue.commentInfo;
 
   const classes = useStyles();
 
-  const tableRender = (userName, userId, description, createdAt, author) => {
+  const tableRender = (userName, userId, description, createdAt) => {
     return (
       <CustomTable
-        headContents={<ToolBar userName={userName} createdAt={createdAt} author={author} />}
-        bodyContents={[{ id: userId, contents: description }]}
+        ariaLabel={"Issue comment"}
         className={classes.table}
+        hover={false}
+        headContents={<ToolBar userName={userName} createdAt={createdAt} authorName={authorName} />}
+        bodyContents={[{ id: userId, contents: description }]}
+        bodyContents={[
+          {
+            id: userId,
+            contents: <TextareaAutosize aria-label="Comment edit" rowsMin={3} />,
+          },
+        ]}
       />
     );
   };
 
   return (
-    <>
+    <Box my={4} ml={"40px"} width="70%">
       {comments.map((comment) => {
         const { userId, userName, avatarUrl, createdAt, description, author } = comment;
 
         const commentTable = (
           <Box position="relative" mb={4} key={userId}>
             <CustomAvatar id={userName} url={avatarUrl} className={classes.avatar} tooltip />
-            <Box ml="40px" width="70%">
+            <Box>{tableRender(userName, userId, description, createdAt, author)}</Box>
+            {/* <Box ml="40px" width="70%">
               {tableRender(userName, userId, description, createdAt, author)}
-            </Box>
+            </Box> */}
           </Box>
         );
 
         return commentTable;
       })}
-    </>
+      <Write />
+    </Box>
   );
 };
 
@@ -53,14 +67,16 @@ const useStyles = makeStyles(() => ({
     "& .MuiTableRow-hover": {
       pointerEvents: "none",
     },
-    "& .author": {
-      backgroundColor: "red",
+  },
+  edit: {
+    "& textarea": {
+      width: "100%",
     },
   },
   avatar: {
     position: "absolute",
     top: 3,
-    left: -5,
+    left: -47,
   },
 }));
 

diff --git a/FE/src/components/DetailedIssue/Comment/Write/Textarea.jsx b/FE/src/components/DetailedIssue/Comment/Write/Textarea.jsx
@@ -0,0 +1,15 @@
+import React from "react";
+import TextareaAutosize from "@material-ui/core/TextareaAutosize";
+
+import Button from "@material-ui/core/Button";
+
+const TextArea = () => {
+  return (
+    <>
+      <TextareaAutosize aria-label="Comment write" rowsMin={3} placeholder="Leave a comment" />
+      <Button>ss</Button>
+    </>
+  );
+};
+
+export default TextArea;
diff --git a/...omponents/DetailedIssue/Comment/Write.jsx → ...nts/DetailedIssue/Comment/Write/Write.jsx b/...omponents/DetailedIssue/Comment/Write.jsx → ...nts/DetailedIssue/Comment/Write/Write.jsx
@@ -5,7 +5,7 @@ import CustomTable from "@Components/common/CustomTable";
 import Button from "@material-ui/core/Button";
 import TextareaAutosize from "@material-ui/core/TextareaAutosize";
 import { makeStyles } from "@material-ui/core/styles";
-import TextArea from "../TextArea";
+import TextArea from "./TextArea";
 const Write = () => {
   const WRITE_BTN_TEXT = "write";
 

diff --git a/FE/src/components/common/CustomTable.jsx b/FE/src/components/common/CustomTable.jsx
@@ -11,7 +11,7 @@ import TableHead from "@material-ui/core/TableHead";
 import TableRow from "@material-ui/core/TableRow";
 import Paper from "@material-ui/core/Paper";
 
-const CustomTable = ({ ariaLabel, headContents, bodyContents, ...props }) => {
+const CustomTable = ({ ariaLabel, headContents, bodyContents, hover, ...props }) => {
   const classes = useStyles();
 
   return (
@@ -28,7 +28,7 @@ const CustomTable = ({ ariaLabel, headContents, bodyContents, ...props }) => {
         </TableHead>
         <TableBody className={classes.table}>
           {bodyContents.map(({ id, contents }) => (
-            <TableRow hover key={id}>
+            <TableRow hover={hover} key={id}>
               <TableCell>
                 <Box display="flex" justifyContent="space-between">
                   {contents}
@@ -59,9 +59,11 @@ const useStyles = makeStyles(() => ({
 
 CustomTable.defaultProps = {
   ariaLabel: "table",
+  hover: false,
 };
 
 CustomTable.propTypes = {
+  hover: PropTypes.bool,
   ariaLabel: PropTypes.string,
   headContents: PropTypes.element.isRequired,
   bodyContents: PropTypes.arrayOf(