feat: 마이페이지 컴포넌트 구현

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<typeof PostCard> = {
+  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<typeof PostCard>;
+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 },
+  },
+};

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 (
+    <article className="w-fit rounded-[8px] border border-[#353542] bg-[#252530] p-[10px] md:pb-[20px] xl:pb-[25px]">
+      <div className="flex flex-col gap-[10px] md:gap-[20px] xl:gap-[25px]">
+        <Image
+          src={thumbnail || DefaultImage}
+          alt="상품 이미지"
+          width={140}
+          height={98}
+          className="md:h-[160px] md:w-[227px] xl:h-[220px] xl:w-[284px]"
+        />
+        <div className="flex flex-col gap-[5px] md:gap-[10px] xl:mx-auto xl:w-[260px]">
+          <h1 className="text-sm font-medium leading-none text-[#F1F1F5] md:text-[16px] xl:text-[18px]">
+            {title}
+          </h1>
+          <p className="text-xs text-[#9FA6B2] md:text-sm">
+            {price?.toLocaleString()} 원
+          </p>
+          <div className="flex flex-col gap-[5px] md:flex-row md:justify-between">
+            <dl className="flex gap-[10px] text-xs font-light leading-none text-[#6E6E82] md:text-[14px] xl:text-[16px]">
+              <div className="flex gap-[5px]">
+                <dt>채팅</dt>
+                <dd>{chatCount}</dd>
+              </div>
+              <div className="flex gap-[5px]">
+                <dt>조회</dt>
+                <dd>{viewCount}</dd>
+              </div>
+            </dl>
+            <p className="flex gap-[2px] text-xs font-light leading-none text-[#6E6E82] md:text-[14px] xl:text-[16px]">
+              <span aria-hidden="true">❤️</span> {likeCount}
+            </p>
+          </div>
+        </div>
+      </div>
+    </article>
+  );
+};
+
+export default PostCard;

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<typeof Profile> = {
+  title: "User/Profile",
+  component: Profile,
+  tags: ["autodocs"],
+  argTypes: {
+    imageSrc: { control: "text" },
+    nickname: { control: "text" },
+    bio: { control: "text" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Profile>;
+
+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 },
+  },
+};

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 (
+    <article className="flex items-center justify-center w-[335px] h-[466px] px-[20px] py-[30px] rounded-[12px] border border-[#353542] bg-[#252530] md:w-[509px] md:h-[451px] md:px-[30px] xl:w-[340px] xl:h-[603px] xl:px-[20px] xl:pt-[40px]">
+      <div className="flex flex-col justify-between items-center w-full h-full">
+        <Image
+          src={imageSrc || DefaultProfileImage}
+          alt="프로필"
+          width={120}
+          height={120}
+          className="rounded-full xl:w-[180px] xl:h-[180px]"
+        />
+        <div className="w-full">
+          <h1 className="mb-[10px] text-center font-semibold text-xl leading-7 text-white xl:text-[24px]">
+            {nickname}
+          </h1>
+          <p className="font-normal text-sm leading-5 text-gray-600 xl:font-[16px] break-words">
+            {bio}
+          </p>
+        </div>
+        <div className="w-full h-[48px] bg-white" />
+        <Button className="w-full">프로필 편집</Button>
+      </div>
+    </article>
+  );
+};
+
+export default Profile;