feat: CommentList 컴포넌트 생성 및 스토리북 작성

Co-authored-by: zereight <[email protected]>

frontend/reply-module/.storybook/main.js

@@ -1,10 +1,4 @@
 module.exports = {
-  "stories": [
-    "../src/**/*.stories.mdx",
-    "../src/**/*.stories.@(js|jsx|ts|tsx)"
-  ],
-  "addons": [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials"
-  ]
-}
+  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: ["@storybook/addon-links", "@storybook/addon-essentials"]
+};

frontend/reply-module/.storybook/preview.css

@@ -0,0 +1,4 @@
+#root {
+  width: 100%;
+  max-width: 1080px;
+}

frontend/reply-module/.storybook/preview.js

@@ -1,5 +1,6 @@
 import { configure, addDecorator } from "@storybook/react";
 import GlobalStyles from "../src/styles/GlobalStyles";
+import "./preview.css";
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },

frontend/reply-module/src/components/atoms/CommentOption/index.tsx

@@ -7,8 +7,8 @@ export interface Props {
   onDelete?: () => void;
 }
 
-const CommentOption = ({ onEdit, onDelete }) => {
-  const [isShowOptionBox, setShowOptionBox] = useState(true);
+const CommentOption = ({ onEdit, onDelete }: Props) => {
+  const [isShowOptionBox, setShowOptionBox] = useState(false);
   const onShowOptionBox = () => {
     setShowOptionBox(state => !state);
   };

frontend/reply-module/src/components/molecules/Comment/index.tsx

@@ -1,20 +1,11 @@
+import { Comment as CommentType } from "../../../types";
 import Avatar from "../../atoms/Avatar";
 import CommentOption from "../../atoms/CommentOption";
 import CommentTextBox from "../../atoms/CommentTextBox";
 import { Container, CommentTextBoxWrapper, Time, CommentOptionWrapper } from "./styles";
 
 export interface Props {
-  comment: {
-    id: number;
-    content: string;
-    user: {
-      id: number;
-      imageURL: string;
-      nickName: string;
-      type: string;
-    };
-    createdAt: string;
-  };
+  comment: CommentType;
   align?: "left" | "right";
 
   shouldShowOption?: boolean;

frontend/reply-module/src/components/organisms/CommentList/CommentList.stories.tsx

@@ -0,0 +1,41 @@
+import { Story } from "@storybook/react";
+import CommentList, { Props } from ".";
+
+export default {
+  title: "organisms/CommentList",
+  component: CommentList,
+  argTypes: { children: { control: "text" } }
+};
+
+const Template: Story<Props> = args => <CommentList {...args} />;
+
+export const Default = Template.bind({});
+
+Default.args = {
+  comments: [
+    {
+      id: 1,
+      content: "Donec accumsan neque enim sodales. Neque eget vulputate viverra convallis pharetra.",
+      user: {
+        id: 1,
+        imageURL:
+          "https://static.independent.co.uk/s3fs-public/thumbnails/image/2015/06/06/15/Chris-Pratt.jpg?width=982&height=726&auto=webp&quality=75",
+        nickName: "Robert Hill",
+        type: "Authorized"
+      },
+      createdAt: "1시간 전"
+    },
+    {
+      id: 2,
+      content: "Donec accumsan neque enim sodales. Neque eget vulputate viverra convallis pharetra.",
+      user: {
+        id: 1,
+        imageURL:
+          "https://static.independent.co.uk/s3fs-public/thumbnails/image/2015/06/06/15/Chris-Pratt.jpg?width=982&height=726&auto=webp&quality=75",
+        nickName: "Robert Hill",
+        type: "Authorized"
+      },
+      createdAt: "1시간 전"
+    }
+  ]
+};

frontend/reply-module/src/components/organisms/CommentList/index.tsx

@@ -0,0 +1,28 @@
+import { Comment as CommentType } from "../../../types";
+import Comment from "../../molecules/Comment";
+import { CommentContainer, Container, OrderButton, OrderButtonCotainer, OrderButtonWrapper } from "./styles";
+
+export interface Props {
+  comments: CommentType[];
+}
+
+const CommentList = ({ comments }: Props) => {
+  return (
+    <Container>
+      <OrderButtonCotainer>
+        <OrderButtonWrapper>
+          <OrderButton type="button">최신순</OrderButton>
+          <OrderButton type="button">공감순</OrderButton>
+          <OrderButton type="button">과거순</OrderButton>
+        </OrderButtonWrapper>
+      </OrderButtonCotainer>
+      <CommentContainer>
+        {comments.map(comment => (
+          <Comment comment={comment} key={comment.id} shouldShowOption align="right" />
+        ))}
+      </CommentContainer>
+    </Container>
+  );
+};
+
+export default CommentList;

frontend/reply-module/src/components/organisms/CommentList/styles.ts

@@ -0,0 +1,44 @@
+import { PALETTE } from "./../../../styles/palette";
+import styled from "styled-components";
+
+const Container = styled.section`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+`;
+
+const OrderButtonCotainer = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-start;
+  border-bottom: 1px solid ${PALETTE.BLACK_700};
+  padding-bottom: 1.6rem;
+`;
+
+const OrderButtonWrapper = styled.div`
+  display: flex;
+`;
+
+const OrderButton = styled.button`
+  color: ${PALETTE.BLACK_700};
+  font-size: 1.6rem;
+  font-weight: 700;
+  background-color: transparent;
+`;
+
+const CommentContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin: 3rem 0;
+
+  & > * {
+    margin-bottom: 1.6rem;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+`;
+
+export { Container, OrderButtonCotainer, OrderButtonWrapper, OrderButton, CommentContainer };

frontend/reply-module/src/styles/GlobalStyles.ts

@@ -47,6 +47,9 @@ const GlobalStyles = createGlobalStyle`
       }
       button {
         font-family: inherit;
+        outline: none;
+        border: none;
+        cursor: pointer;
       }
 `;
 

frontend/reply-module/src/styles/constants.ts

@@ -0,0 +1 @@
+const pageMaxWidth = "1080px";

frontend/reply-module/src/types/comment.ts

@@ -0,0 +1,11 @@
+export interface Comment {
+  id: number;
+  content: string;
+  user: {
+    id: number;
+    imageURL: string;
+    nickName: string;
+    type: string;
+  };
+  createdAt: string;
+}

frontend/reply-module/src/types/index.ts

@@ -0,0 +1 @@
+export { Comment } from "./comment";

frontend/reply-module/tsconfig.json

@@ -19,5 +19,5 @@
     "strictNullChecks": true,
     "noImplicitReturns": true
   },
-  "include": ["./src/**/*", "./src**/*.ts"]
+  "include": ["./src/**/*"]
 }