Merge pull request #239 from git-baboo/feature/238_shift_from_margin_…

…to_spacer_in_comment_list_item

CommentListItem 内のマージン周りのリファクタリング

src/components/review/CommentListItem.tsx

@@ -1,5 +1,5 @@
 import { Avatar } from "@chakra-ui/avatar";
-import { Grid, GridItem, ListItem, Text } from "@chakra-ui/layout";
+import { Grid, GridItem, Text, Box } from "@chakra-ui/layout";
 import ChakraUIRenderer from "chakra-ui-markdown-renderer";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
@@ -14,7 +14,7 @@ type Props = {
 
 const CommentListItem = ({ author, avatarUrl, body }: Props) => {
   return (
-    <ListItem m={2} p={4} border="1px" borderRadius="md" borderColor="gray.300">
+    <Box p={4} border="1px" borderRadius="md" borderColor="gray.300">
       <Grid templateColumns="auto 1fr" gap={2} alignItems="center">
         <GridItem>
           <Avatar size="sm" name={author} src={avatarUrl} />
@@ -32,7 +32,7 @@ const CommentListItem = ({ author, avatarUrl, body }: Props) => {
           </ReactMarkdown>
         </GridItem>
       </Grid>
-    </ListItem>
+    </Box>
   );
 };
 

src/components/review/Widget.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Flex, List, Spacer, Textarea } from "@chakra-ui/react";
+import { Button, Flex, Spacer, Textarea, Stack } from "@chakra-ui/react";
 import React, { ChangeEvent, useCallback } from "react";
 
 import CommentListItem from "@/components/review/CommentListItem";
@@ -39,9 +39,9 @@ const Widget = ({
   }, [onSubmit, changeKey]);
 
   return (
-    <Box m={4}>
+    <Stack direction="column" m={4}>
       {comments && (
-        <List>
+        <>
           {comments.map((comment, index) => {
             return (
               <CommentListItem
@@ -52,7 +52,7 @@ const Widget = ({
               />
             );
           })}
-        </List>
+        </>
       )}
       {isWriting && (
         <>
@@ -65,7 +65,7 @@ const Widget = ({
           </Flex>
         </>
       )}
-    </Box>
+    </Stack>
   );
 };