{NAV_ITEMS.map((item) => (
diff --git a/src/components/written-review/WrittenReview.stories.tsx b/src/components/written-review/WrittenReview.stories.tsx
index b80fe80d..5e1d2f2c 100644
--- a/src/components/written-review/WrittenReview.stories.tsx
+++ b/src/components/written-review/WrittenReview.stories.tsx
@@ -15,34 +15,46 @@ interface StoryProps {
}
const meta = {
- title: 'Components/WrittenReview',
+ title: 'Components/WrittenReview/Base',
component: WrittenReview,
parameters: {
layout: 'centered',
+ docs: {
+ description: {
+ component:
+ 'WrittenReview 컴포넌트는 컴파운드 패턴으로 구성된 리뷰를 렌더링하는 데 사용됩니다. 하위 컴포넌트는 독립적으로도 활용할 수 있습니다.',
+ },
+ },
},
} satisfies Meta
;
export default meta;
type Story = StoryObj;
-export const FindClubReview: Story = {
- render: (args) => (
-
-
-
-
-
-
-
- ),
+export const Rating: Story = {
+ render: (args) => ,
args: {
ratingCount: 4,
+ },
+};
+
+export const Comment: Story = {
+ render: (args) => ,
+ args: {
comment:
'아침부터 자기발전을 위한 시간을 가져서 좋았어요. 각자의 길 위에서 달려가는 생생한 순간을 공유해주셔서 감사합니다!',
+ },
+};
+
+export const UserProfile: Story = {
+ render: (args) => (
+
+ ),
+ args: {
profileImage:
'https://cdn.pixabay.com/photo/2024/02/17/00/18/cat-8578562_1280.jpg',
userName: '다람쥐',
@@ -50,6 +62,17 @@ export const FindClubReview: Story = {
},
};
+export const ClubImage: Story = {
+ render: (args) => (
+
+ ),
+ args: {
+ clubImage:
+ 'https://cdn.pixabay.com/photo/2024/02/17/00/18/cat-8578562_1280.jpg',
+ clubImageAlt: '모임 이미지',
+ },
+};
+
export const MypageReview: Story = {
render: (args) => (
diff --git a/src/components/written-review/club-review/ClubReview.stories.tsx b/src/components/written-review/club-review/ClubReview.stories.tsx
new file mode 100644
index 00000000..ad6fa079
--- /dev/null
+++ b/src/components/written-review/club-review/ClubReview.stories.tsx
@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ClubReview from './ClubReview';
+
+const meta = {
+ title: 'Components/WrittenReview/ClubReview',
+ component: ClubReview,
+ parameters: {
+ layout: 'centered',
+ },
+} satisfies Meta
;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ ratingCount: 4,
+ comment:
+ '아침부터 자기발전을 위한 시간을 가져서 좋았어요. 각자의 길 위에서 달려가는 생생한 순간을 공유해주셔서 감사합니다!',
+ userProfile: {
+ profileImage:
+ 'https://cdn.pixabay.com/photo/2024/02/17/00/18/cat-8578562_1280.jpg',
+ userName: '다람쥐',
+ createdAt: '2024.01.25',
+ },
+ },
+};
diff --git a/src/components/written-review/club-review/ClubReview.tsx b/src/components/written-review/club-review/ClubReview.tsx
new file mode 100644
index 00000000..501fb714
--- /dev/null
+++ b/src/components/written-review/club-review/ClubReview.tsx
@@ -0,0 +1,28 @@
+import WrittenReview from '../WrittenReview';
+
+interface ClubReviewProps {
+ ratingCount: number;
+ comment: string;
+ userProfile: {
+ profileImage: string;
+ userName: string;
+ createdAt: string;
+ };
+}
+
+function ClubReview({ ratingCount, comment, userProfile }: ClubReviewProps) {
+ return (
+
+
+
+
+
+
+
+ );
+}
+export default ClubReview;