Skip to content

✨[Feat] WrittenReview를 활용한 ClubReview 컴포넌트 생성 #154 #156

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wynter24 merged 3 commits into from
Dec 14, 2024
Merged

✨[Feat] WrittenReview를 활용한 ClubReview 컴포넌트 생성 #154 #156

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a471274
💄[Design] nav, 공통 레이아웃 수정 #154
wynter24 Dec 13, 2024
fd0304f
✨[Feat] ClubReview 컴포넌트 생성 #154
wynter24 Dec 13, 2024
80b6be7
✅[Test] WrittenReview 스토리북 수정 #154
wynter24 Dec 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,10 @@ export default function RootLayout({
}>) {
return (
<html lang="ko">
<body className="min-h-screen bg-white">
<body className="flex h-full min-h-screen flex-col bg-white">
<ReactQueryProviders>
<HeaderBar />
<main className="mx-auto min-h-screen max-w-[1200px] bg-white pt-[56px]">
<main className="mx-auto flex w-full max-w-[1200px] flex-1 flex-col bg-white">
{children}
</main>
</ReactQueryProviders>
Expand Down
2 changes: 1 addition & 1 deletion src/components/header/HeaderBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ function HeaderBar() {
};

return (
<nav className="fixed top-0 w-full bg-green-normal-01 px-4 text-white md:px-7">
<nav className="w-full bg-green-normal-01 px-4 text-white md:px-7">
<div className="mx-auto flex h-14 max-w-[1200px] items-center justify-between">
<div className="flex items-center gap-4 md:gap-6">
{NAV_ITEMS.map((item) => (
Expand Down
53 changes: 38 additions & 15 deletions src/components/written-review/WrittenReview.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,41 +15,64 @@ interface StoryProps {
}

const meta = {
title: 'Components/WrittenReview',
title: 'Components/WrittenReview/Base',
component: WrittenReview,
parameters: {
layout: 'centered',
docs: {
description: {
component:
'WrittenReview 컴포넌트는 컴파운드 패턴으로 구성된 리뷰를 렌더링하는 데 사용됩니다. 하위 컴포넌트는 독립적으로도 활용할 수 있습니다.',
},
},
},
} satisfies Meta<typeof WrittenReview>;

export default meta;
type Story = StoryObj<StoryProps>;

export const FindClubReview: Story = {
render: (args) => (
<WrittenReview>
<div className="flex flex-col gap-y-2">
<WrittenReview.Rating ratingCount={args.ratingCount} />
<WrittenReview.Comment text={args.comment} />
<WrittenReview.UserProfile
profileImage={args.profileImage}
userName={args.userName}
createdAt={args.createdAt}
/>
</div>
</WrittenReview>
),
export const Rating: Story = {
render: (args) => <WrittenReview.Rating ratingCount={args.ratingCount} />,
args: {
ratingCount: 4,
},
};

export const Comment: Story = {
render: (args) => <WrittenReview.Comment text={args.comment} />,
args: {
comment:
'아침부터 자기발전을 위한 시간을 가져서 좋았어요. 각자의 길 위에서 달려가는 생생한 순간을 공유해주셔서 감사합니다!',
},
};

export const UserProfile: Story = {
render: (args) => (
<WrittenReview.UserProfile
profileImage={args.profileImage}
userName={args.userName}
createdAt={args.createdAt}
/>
),
args: {
profileImage:
'https://cdn.pixabay.com/photo/2024/02/17/00/18/cat-8578562_1280.jpg',
userName: '다람쥐',
createdAt: '2024.01.25',
},
};

export const ClubImage: Story = {
render: (args) => (
<WrittenReview.ClubImage src={args.clubImage} alt={args.clubImageAlt} />
),
args: {
clubImage:
'https://cdn.pixabay.com/photo/2024/02/17/00/18/cat-8578562_1280.jpg',
clubImageAlt: '모임 이미지',
},
};

export const MypageReview: Story = {
render: (args) => (
<div className="w-[311px] md:w-full">
Expand Down
27 changes: 27 additions & 0 deletions src/components/written-review/club-review/ClubReview.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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<typeof ClubReview>;

export default meta;
type Story = StoryObj<typeof meta>;

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',
},
},
};
28 changes: 28 additions & 0 deletions src/components/written-review/club-review/ClubReview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<WrittenReview>
<div className="flex flex-col gap-y-2">
<WrittenReview.Rating ratingCount={ratingCount} />
<WrittenReview.Comment text={comment} />
<WrittenReview.UserProfile
profileImage={userProfile.profileImage}
userName={userProfile.userName}
createdAt={userProfile.createdAt}
/>
</div>
</WrittenReview>
);
}
export default ClubReview;
Loading