Merge pull request #155 from prgrms-web-devcourse-final-project/feature/

#39

feat: Comment 컴포넌트 개발

src/components/organisms/Comment/index.tsx

@@ -0,0 +1,50 @@
+import { useState } from "react";
+import { Text } from "components/atoms";
+import { InputWithButton } from "components/molecules";
+import { CommentItem } from "components/organisms";
+import {
+  CommentListWrapper,
+  CommentWrapper,
+  CommentWriteBoxWrapper,
+} from "./styled";
+import { type ICommentItemProps } from "../CommentItem";
+
+interface ICommentProps {
+  /** 작성된 Comment 목록 */
+  comments: ICommentItemProps[];
+  /** Comment 작성시 실행할 함수 */
+  onWriteComment: (comment: string) => void;
+}
+
+export const Comment = ({ comments, onWriteComment }: ICommentProps) => {
+  const [comment, setComment] = useState("");
+  const handleWriteButtonClick = () => {
+    if (!comment.trim()) {
+      return;
+    }
+    onWriteComment(comment);
+  };
+
+  return (
+    <CommentWrapper>
+      <Text variant="h5" content="문의사항" />
+      <CommentListWrapper>
+        {comments.map((comment, idx) => (
+          <CommentItem
+            key={`comment_${idx}_${comment.commentId}`}
+            {...comment}
+          />
+        ))}
+      </CommentListWrapper>
+      <CommentWriteBoxWrapper>
+        <InputWithButton
+          value={comment}
+          setValue={setComment}
+          placeholder="댓글을 입력하세요."
+          buttonText="작성"
+          onButtonClick={handleWriteButtonClick}
+        />
+      </CommentWriteBoxWrapper>
+    </CommentWrapper>
+  );
+};

src/components/organisms/Comment/stories.ts

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Comment } from ".";
+import { DEFAULT_IMG_PATH } from "constants/imgPath";
+
+const meta: Meta<typeof Comment> = {
+  title: "Organisms/Comment",
+  component: Comment,
+  tags: ["autodocs"],
+};
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    onWriteComment: (comment) => console.log(comment),
+    comments: [
+      {
+        commentId: 1,
+        imgUrl: DEFAULT_IMG_PATH,
+        nickname: "작성자",
+        createdAt: "2024-11-29 09:40:27",
+        content:
+          "내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용용",
+        isMyComment: false,
+      },
+      {
+        commentId: 2,
+        imgUrl: "https://github.com/ppyom.png",
+        nickname: "작성자는바로나",
+        createdAt: "2024-11-29 15:40:27",
+        content:
+          "내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용용",
+        isMyComment: true,
+      },
+      {
+        commentId: 3,
+        imgUrl: DEFAULT_IMG_PATH,
+        nickname: "작성자",
+        createdAt: new Date().toString(),
+        content: "내용",
+        isMyComment: false,
+      },
+    ],
+  },
+};
+
+export default meta;

src/components/organisms/Comment/styled.ts

@@ -0,0 +1,20 @@
+import styled from "@emotion/styled";
+import { InputWrapper } from "components/atoms/Input/styled";
+
+export const CommentListWrapper: ReturnType<typeof styled.div> = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+`;
+
+export const CommentWriteBoxWrapper: ReturnType<typeof styled.div> = styled.div`
+  ${InputWrapper} {
+    flex: 1;
+  }
+`;
+
+export const CommentWrapper: ReturnType<typeof styled.div> = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+`;

src/components/organisms/CommentItem/index.tsx

@@ -6,7 +6,7 @@ import { useEffect, useRef, useState } from "react";
 import { useKebabMenuManager } from "hooks/useKebabMenuManager";
 import { KebabMenu } from "components/molecules";
 
-interface ICommentItemProps {
+export interface ICommentItemProps {
   /** 댓글 아이디 */
   commentId: number;
   /** 프로필 img Url */

src/components/organisms/index.ts

@@ -1,7 +1,7 @@
 export { Map } from "./Map";
 export { PostImageItem } from "./PostImageItem";
 export { SearchHistoryItem } from "./SearchHistoryItem";
-
 export { ChatMessage } from "./ChatMessage";
 export { ChatBubble } from "./ChatBubble";
-export { ChatList } from "./ChatList";
+export { CommentItem } from "./CommentItem";
+export { ChatList } from "./ChatList";