feat: 유저 활동 내역 및 상품 mock data 추가 (#35)

src/app/(userpage)/otherpage/[userId]/components/UserActivityList/UserActivityList.module.scss

@@ -0,0 +1,23 @@
+@import "@/styles/_index";
+@import "@/styles/_media";
+
+.container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.buttonBox {
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  gap: 40px;
+}
+
+.selectButton {
+  all: unset;
+}
+
+.active {
+  color: red;
+}

src/app/(userpage)/otherpage/[userId]/components/UserActivityList/UserActivityList.tsx

@@ -0,0 +1,51 @@
+import React, { useState } from "react";
+import { productMock } from "@/app/(userpage)/productMock";
+import cn from "@/utils/classNames";
+import styles from "./UserActivityList.module.scss";
+// eslint-disable-next-line no-restricted-imports
+import UserProductList from "../UserProductList/UserProductList";
+
+export default function UserActivityList() {
+  const [button, setButton] = useState<string>("reviewed");
+
+  return (
+    <div className={styles.container}>
+      <div className={cn(styles.buttonBox)}>
+        <div
+          className={cn(styles.selectButton, styles[`${button === "reviewed" ? "active" : ""}`])}
+          onClick={() => {
+            setButton("reviewed");
+          }}
+          onKeyDown={() => setButton("reviewed")}
+          role='button'
+          tabIndex={0}
+        >
+          리뷰 남긴 상품
+        </div>
+        <div
+          className={cn(styles.selectButton, styles[`${button === "created" ? "active" : ""}`])}
+          onClick={() => {
+            setButton("created");
+          }}
+          onKeyDown={() => setButton("created")}
+          role='button'
+          tabIndex={0}
+        >
+          등록한 상품
+        </div>
+        <div
+          className={cn(styles.selectButton, styles[`${button === "favorite" ? "active" : ""}`])}
+          onClick={() => {
+            setButton("favorite");
+          }}
+          onKeyDown={() => setButton("favorite")}
+          role='button'
+          tabIndex={0}
+        >
+          찜한 상품
+        </div>
+      </div>
+      <UserProductList list={productMock} />
+    </div>
+  );
+}

src/app/(userpage)/otherpage/[userId]/components/UserProductList/UserProductList.module.scss

@@ -0,0 +1,14 @@
+@import "@/styles/_index";
+@import "@/styles/_media";
+
+.container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 20px;
+  width: 100%;
+
+  @include respond-to(tablet) {
+    grid-template-columns: 1fr 1fr;
+    gap: 15px;
+  }
+}

src/app/(userpage)/otherpage/[userId]/components/UserProductList/UserProductList.tsx

@@ -0,0 +1,24 @@
+import Link from "next/link";
+import { ProductCard } from "@/components/ProductCard";
+import cn from "@/utils/classNames";
+import styles from "./UserProductList.module.scss";
+import type { ProductType } from "@/types/global";
+
+type ProductListProps = {
+  list: ProductType[];
+};
+
+export default function UserProductList({ list }: ProductListProps) {
+  return (
+    <div className={cn(styles.container)}>
+      {list.map((item) => (
+        <Link
+          href={`/product/${item.id}`}
+          key={item.id}
+        >
+          <ProductCard product={item} />
+        </Link>
+      ))}
+    </div>
+  );
+}

src/app/(userpage)/otherpage/[userId]/page.tsx

@@ -2,51 +2,48 @@
 
 // import { useParams } from "next/navigation";
 import React from "react";
+// user mock data
+import { userMock } from "@/app/(userpage)/userMock";
 import Activity from "@/components/Card/Activity/Activity";
 import cn from "@/utils/classNames";
 // 추후 데이터 연결시 받아온데이터로 변환 예정
-import { DEFAULT_PROFILE_IMAGE } from "@/utils/constant";
+import UserActivityList from "./components/UserActivityList/UserActivityList";
 import UserInfo from "./components/UserInfo/UserInfo";
 import styles from "./OtherPage.module.scss";
 
 export default function OtherPage() {
   // userId를 받아오는 useParams function
   // const { userId } = useParams<{ userId: string }>();
 
-  const mock = {
-    name: "전자기기",
-    id: 1,
-  };
-
   return (
     <div className={cn(styles.container)}>
       <UserInfo
-        nickname='surisuri마수리' // userId 도 나중에 nickname으로 변경 예정
-        image={DEFAULT_PROFILE_IMAGE}
-        description='세상에 리뷰 못할 제품은 없다. surisuri마수리와 함께라면 당신도 프로쇼핑러! <br>
-        안녕하세요, 별점의 화신 surisuri마수리입니다'
-        follower={762}
-        folloing={102}
-        isfollow={false}
+        nickname={userMock.nickname}
+        image={userMock.image}
+        description={userMock.description}
+        follower={userMock.followersCount}
+        folloing={userMock.followeesCount}
+        isfollow={userMock.isFollowing}
       />
       <div className={styles.activity}>
         <section>
           <p className={styles.activityDetailText}>활동 내역</p>
           <div className={styles.activityDetails}>
             <Activity
               title='남긴 별점 평균'
-              averageRating={4.1}
+              averageRating={userMock.averageRating}
             />
             <Activity
               title='남긴 리뷰'
-              reviewCount={4}
+              reviewCount={userMock.reviewCount}
             />
             <Activity
               title='관심 카테고리'
-              chipCategoty={mock}
+              chipCategoty={userMock.mostFavoriteCategory}
             />
           </div>
         </section>
+        <UserActivityList />
       </div>
     </div>
   );

src/app/(userpage)/productMock.ts

@@ -0,0 +1,88 @@
+import { DEFAULT_PRODUCT_IMAGE } from "@/utils/constant";
+
+export const productMock = [
+  {
+    updatedAt: new Date("2024-05-30T09:41:57.081Z"),
+    createdAt: new Date("2024-05-30T09:41:57.081Z"),
+    writerId: 1,
+    categoryId: 1,
+    favoriteCount: 0,
+    reviewCount: 0,
+    rating: 0,
+    image: `${DEFAULT_PRODUCT_IMAGE}`,
+    name: "string",
+    id: 1,
+  },
+  {
+    updatedAt: new Date("2024-05-30T09:41:57.081Z"),
+    createdAt: new Date("2024-05-30T09:41:57.081Z"),
+    writerId: 1,
+    categoryId: 1,
+    favoriteCount: 0,
+    reviewCount: 0,
+    rating: 0,
+    image: `${DEFAULT_PRODUCT_IMAGE}`,
+    name: "string",
+    id: 1,
+  },
+  {
+    updatedAt: new Date("2024-05-30T09:41:57.081Z"),
+    createdAt: new Date("2024-05-30T09:41:57.081Z"),
+    writerId: 1,
+    categoryId: 1,
+    favoriteCount: 0,
+    reviewCount: 0,
+    rating: 0,
+    image: `${DEFAULT_PRODUCT_IMAGE}`,
+    name: "string",
+    id: 1,
+  },
+  {
+    updatedAt: new Date("2024-05-30T09:41:57.081Z"),
+    createdAt: new Date("2024-05-30T09:41:57.081Z"),
+    writerId: 1,
+    categoryId: 1,
+    favoriteCount: 0,
+    reviewCount: 0,
+    rating: 0,
+    image: `${DEFAULT_PRODUCT_IMAGE}`,
+    name: "string",
+    id: 1,
+  },
+  {
+    updatedAt: new Date("2024-05-30T09:41:57.081Z"),
+    createdAt: new Date("2024-05-30T09:41:57.081Z"),
+    writerId: 1,
+    categoryId: 1,
+    favoriteCount: 0,
+    reviewCount: 0,
+    rating: 0,
+    image: `${DEFAULT_PRODUCT_IMAGE}`,
+    name: "string",
+    id: 1,
+  },
+  {
+    updatedAt: new Date("2024-05-30T09:41:57.081Z"),
+    createdAt: new Date("2024-05-30T09:41:57.081Z"),
+    writerId: 1,
+    categoryId: 1,
+    favoriteCount: 0,
+    reviewCount: 0,
+    rating: 0,
+    image: `${DEFAULT_PRODUCT_IMAGE}`,
+    name: "string",
+    id: 1,
+  },
+  {
+    updatedAt: new Date("2024-05-30T09:41:57.081Z"),
+    createdAt: new Date("2024-05-30T09:41:57.081Z"),
+    writerId: 1,
+    categoryId: 1,
+    favoriteCount: 0,
+    reviewCount: 0,
+    rating: 0,
+    image: `${DEFAULT_PRODUCT_IMAGE}`,
+    name: "string",
+    id: 1,
+  },
+];

src/app/(userpage)/types.tsx

@@ -0,0 +1,36 @@
+export type UserDetail = {
+  updatedAt: Date;
+  createdAt: Date;
+  teamId: string;
+  image: string;
+  description: string;
+  nickname: string;
+  id: number;
+  mostFavoriteCategory: {
+    name: string;
+    id: number;
+  };
+  averageRating: number;
+  reviewCount: number;
+  followeesCount: number;
+  followersCount: number;
+  isFollowing: boolean;
+};
+
+export type UserProduct = {
+  nextCursor: number;
+  list: [
+    {
+      updatedAt: Date;
+      createdAt: Date;
+      writerId: number;
+      categoryId: number;
+      favoriteCount: number;
+      reviewCount: number;
+      rating: number;
+      image: string;
+      name: string;
+      id: number;
+    },
+  ];
+};

src/app/(userpage)/userMock.ts

@@ -0,0 +1,20 @@
+import { DEFAULT_PROFILE_IMAGE } from "@/utils/constant";
+
+export const userMock = {
+  updatedAt: "2024-06-03T10:18:50.930Z",
+  createdAt: "2024-06-03T10:18:50.930Z",
+  teamId: "string",
+  image: `${DEFAULT_PROFILE_IMAGE}`,
+  description: "string",
+  nickname: "string",
+  id: 1,
+  mostFavoriteCategory: {
+    name: "전자기기",
+    id: 1,
+  },
+  averageRating: 0,
+  reviewCount: 0,
+  followeesCount: 0,
+  followersCount: 0,
+  isFollowing: true,
+};