댓글 내역 컴포넌트 구현

src/components/comment/CommentCard.stories.tsx

@@ -0,0 +1,137 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+
+import { fn } from 'storybook/test';
+
+import CommentCard from './CommentCard';
+
+const meta = {
+  title: 'Components/CommentCard',
+  component: CommentCard,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  args: {
+    name: '안해나',
+    content: '오늘 할 일 목록을 정리했습니다.',
+    date: '2025.01.15',
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 460 }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof CommentCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithProfileImage: Story = {
+  args: {
+    profileImage: (
+      <div style={{ width: 32, height: 32, borderRadius: 12, background: '#cbd5e1' }} />
+    ),
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    profileImage: (
+      <div style={{ width: 32, height: 32, borderRadius: 12, background: '#cbd5e1' }} />
+    ),
+    icon: (
+      <button
+        type="button"
+        onClick={fn()}
+        style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, fontSize: 16 }}
+      >
+        ⋮
+      </button>
+    ),
+  },
+};
+
+export const WithActions: Story = {
+  args: {
+    profileImage: (
+      <div style={{ width: 32, height: 32, borderRadius: 12, background: '#cbd5e1' }} />
+    ),
+    icon: (
+      <button
+        type="button"
+        onClick={fn()}
+        style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, fontSize: 16 }}
+      >
+        ⋮
+      </button>
+    ),
+    actions: (
+      <div style={{ display: 'flex', gap: 8 }}>
+        <button
+          type="button"
+          onClick={fn()}
+          style={{
+            background: 'none',
+            border: 'none',
+            cursor: 'pointer',
+            fontSize: 12,
+            color: '#64748b',
+          }}
+        >
+          취소
+        </button>
+        <button
+          type="button"
+          onClick={fn()}
+          style={{
+            background: 'none',
+            border: 'none',
+            cursor: 'pointer',
+            fontSize: 12,
+            color: '#3b82f6',
+          }}
+        >
+          수정하기
+        </button>
+      </div>
+    ),
+  },
+};
+
+export const Overview: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16, width: 460 }}>
+      <CommentCard name="안해나" content="기본 댓글입니다." date="2025.01.15" />
+      <CommentCard
+        name="안해나"
+        content="프로필 이미지가 있는 댓글입니다."
+        date="2025.01.15"
+        profileImage={
+          <div style={{ width: 32, height: 32, borderRadius: 12, background: '#cbd5e1' }} />
+        }
+      />
+      <CommentCard
+        name="안해나"
+        content="모든 슬롯이 채워진 댓글입니다."
+        date="2025.01.15"
+        profileImage={
+          <div style={{ width: 32, height: 32, borderRadius: 12, background: '#cbd5e1' }} />
+        }
+        icon={<span style={{ fontSize: 16, cursor: 'pointer' }}>⋮</span>}
+        actions={
+          <div style={{ display: 'flex', gap: 8 }}>
+            <span style={{ fontSize: 12, color: '#64748b', cursor: 'pointer' }}>취소</span>
+            <span style={{ fontSize: 12, color: '#3b82f6', cursor: 'pointer' }}>수정하기</span>
+          </div>
+        }
+      />
+    </div>
+  ),
+  parameters: {
+    controls: { disable: true },
+  },
+};

src/components/comment/CommentCard.tsx

@@ -0,0 +1,40 @@
+import styles from './styles/CommentCard.module.css';
+import type { CommentCardProps } from './types/types';
+
+/**
+ * 댓글 카드 컴포넌트.
+ * 프로필 이미지, 이름, 내용, 날짜를 표시합니다.
+ * icon 슬롯에 케밥 메뉴를, actions 슬롯에 수정/취소 버튼을 주입할 수 있습니다.
+ */
+export default function CommentCard({
+  profileImage,
+  name,
+  content,
+  date,
+  dateTime,
+  icon,
+  actions,
+}: CommentCardProps) {
+  return (
+    <article className={styles.card}>
+      {profileImage && (
+        <div className={styles.avatar} aria-hidden="true">
+          {profileImage}
+        </div>
+      )}
+      <div className={styles.body}>
+        <div className={styles.header}>
+          <span className={styles.name}>{name}</span>
+          {icon}
+        </div>
+        <p className={styles.content}>{content}</p>
+        <div className={styles.footer}>
+          <time className={styles.date} dateTime={dateTime}>
+            {date}
+          </time>
+          {actions}
+        </div>
+      </div>
+    </article>
+  );
+}

src/components/comment/index.ts

@@ -0,0 +1,2 @@
+export { default as CommentCard } from './CommentCard';
+export type { CommentCardProps } from './types/types';

src/components/comment/styles/CommentCard.module.css

@@ -0,0 +1,66 @@
+.card {
+  display: flex;
+  gap: 12px;
+}
+
+.avatar {
+  flex-shrink: 0;
+}
+
+.body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.name {
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--color-text-tertiary);
+}
+
+.content {
+  font-weight: 500;
+  font-size: 14px;
+  color: var(--color-text-secondary);
+  margin: 0;
+}
+
+.footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.date {
+  font-weight: 400;
+  font-size: 12px;
+  color: var(--color-text-disabled);
+}
+
+@media (max-width: 375px) {
+  .card {
+    gap: 8px;
+  }
+
+  .avatar {
+    width: 24px;
+    height: 24px;
+  }
+
+  .name {
+    font-size: 12px;
+  }
+
+  .content {
+    font-size: 13px;
+  }
+}

src/components/comment/types/types.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+
+export type CommentCardProps = {
+  /** 프로필 이미지 (ReactNode로 자유롭게 주입, 예: `<Image />`) */
+  profileImage?: ReactNode;
+  /** 댓글 작성자 이름 */
+  name: string;
+  /** 댓글 본문 내용 */
+  content: string;
+  /** 화면에 표시할 날짜 텍스트 (예: "2024년 7월 29일") */
+  date: string;
+  /** `<time>` 태그의 datetime 속성값 (예: "2024-07-29") */
+  dateTime?: string;
+  /** 우측 상단 아이콘 슬롯 (예: 케밥 메뉴 버튼) */
+  icon?: ReactNode;
+  /** 하단 우측 액션 슬롯 (예: 취소/수정하기 버튼) */
+  actions?: ReactNode;
+};