diff --git a/src/entities/post/ui/card/PostCard.stories.ts b/src/entities/post/ui/card/PostCard.stories.ts new file mode 100644 index 00000000..a604515d --- /dev/null +++ b/src/entities/post/ui/card/PostCard.stories.ts @@ -0,0 +1,76 @@ +import type { Meta, StoryObj } from "@storybook/nextjs-vite"; +import PostCard from "./PostCard"; + +const meta: Meta = { + title: "Post/PostCard", + component: PostCard, + tags: ["autodocs"], + argTypes: { + postingId: { control: "number" }, + title: { control: "text" }, + price: { control: "number" }, + sellerId: { control: "number" }, + content: { control: "text" }, + createdAt: { control: "text" }, + likeCount: { control: "number" }, + chatCount: { control: "number" }, + viewCount: { control: "number" }, + thumbnail: { control: "text" }, + }, +}; + +export default meta; +type Story = StoryObj; +export const Mobile: Story = { + args: { + postingId: 101, + title: "다이슨 슈퍼소닉 블루 판매", + price: 1200000, + sellerId: 12, + content: "사용감 있어서 싸게 팝니다", + createdAt: "2025-09-13T15:23:45Z", + likeCount: 5, + chatCount: 2, + viewCount: 101, + thumbnail: "", + }, + globals: { + viewport: { value: "mobile2", isRotated: false }, + }, +}; + +export const Tablet: Story = { + args: { + postingId: 101, + title: "다이슨 슈퍼소닉 블루 판매", + price: 1200000, + sellerId: 12, + content: "사용감 있어서 싸게 팝니다", + createdAt: "2025-09-13T15:23:45Z", + likeCount: 5, + chatCount: 2, + viewCount: 101, + thumbnail: "", + }, + globals: { + viewport: { value: "tablet", isRotated: false }, + }, +}; + +export const Desktop: Story = { + args: { + postingId: 101, + title: "다이슨 슈퍼소닉 블루 판매", + price: 1200000, + sellerId: 12, + content: "사용감 있어서 싸게 팝니다", + createdAt: "2025-09-13T15:23:45Z", + likeCount: 5, + chatCount: 2, + viewCount: 101, + thumbnail: "", + }, + globals: { + viewport: { value: "desktop", isRotated: false }, + }, +}; diff --git a/src/entities/post/ui/card/PostCard.tsx b/src/entities/post/ui/card/PostCard.tsx new file mode 100644 index 00000000..f3ff2b7c --- /dev/null +++ b/src/entities/post/ui/card/PostCard.tsx @@ -0,0 +1,64 @@ +import Image from "next/image"; + +import DefaultImage from "./assets/product_image.png"; + +interface PostCardProps { + postingId: number; + title: string; + price: number; + sellerId: number; + content: string; + createdAt: string; + likeCount: number; + chatCount: number; + viewCount: number; + thumbnail: string; +} + +const PostCard = ({ + title, + price, + likeCount, + chatCount, + viewCount, + thumbnail, +}: PostCardProps) => { + return ( +
+
+ 상품 이미지 +
+

+ {title} +

+

+ {price?.toLocaleString()} 원 +

+
+
+
+
채팅
+
{chatCount}
+
+
+
조회
+
{viewCount}
+
+
+

+ {likeCount} +

+
+
+
+
+ ); +}; + +export default PostCard; diff --git a/src/entities/post/ui/card/assets/product_image.png b/src/entities/post/ui/card/assets/product_image.png new file mode 100644 index 00000000..6fa6076a Binary files /dev/null and b/src/entities/post/ui/card/assets/product_image.png differ diff --git a/src/entities/user/ui/card/Profile.stories.tsx b/src/entities/user/ui/card/Profile.stories.tsx new file mode 100644 index 00000000..c6b775ed --- /dev/null +++ b/src/entities/user/ui/card/Profile.stories.tsx @@ -0,0 +1,49 @@ +import type { Meta, StoryObj } from "@storybook/nextjs-vite"; +import Profile from "./Profile"; + +const meta: Meta = { + title: "User/Profile", + component: Profile, + tags: ["autodocs"], + argTypes: { + imageSrc: { control: "text" }, + nickname: { control: "text" }, + bio: { control: "text" }, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Mobile: Story = { + args: { + imageSrc: "", + nickname: "홍길동", + bio: "간단한 자기소개만 있는 프로필입니다.", + }, + globals: { + viewport: { value: "mobile2", isRotated: false }, + }, +}; + +export const Tablet: Story = { + args: { + imageSrc: "", + nickname: "홍길동", + bio: "간단한 자기소개만 있는 프로필입니다.", + }, + globals: { + viewport: { value: "tablet", isRotated: false }, + }, +}; + +export const Desktop: Story = { + args: { + imageSrc: "", + nickname: "홍길동", + bio: "간단한 자기소개만 있는 프로필입니다.", + }, + globals: { + viewport: { value: "desktop", isRotated: false }, + }, +}; diff --git a/src/entities/user/ui/card/Profile.tsx b/src/entities/user/ui/card/Profile.tsx new file mode 100644 index 00000000..48140ba9 --- /dev/null +++ b/src/entities/user/ui/card/Profile.tsx @@ -0,0 +1,38 @@ +import Image from "next/image"; + +import Button from "@/shared/ui/Button/Button"; +import DefaultProfileImage from "./assets/profile.jpg"; + +interface ProfileProps { + imageSrc: string; + nickname: string; + bio: string; +} + +const Profile = ({ imageSrc, nickname, bio }: ProfileProps) => { + return ( +
+
+ 프로필 +
+

+ {nickname} +

+

+ {bio} +

+
+
+ +
+
+ ); +}; + +export default Profile; diff --git a/src/entities/user/ui/card/assets/profile.jpg b/src/entities/user/ui/card/assets/profile.jpg new file mode 100644 index 00000000..3ed44b2f Binary files /dev/null and b/src/entities/user/ui/card/assets/profile.jpg differ