From dccc52f8a71ec77b5276e8ff33c64d9c5e4b1b0c Mon Sep 17 00:00:00 2001 From: yeeZinu Date: Mon, 3 Jun 2024 22:31:52 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EC=9C=A0=EC=A0=80=20=ED=99=9C=EB=8F=99?= =?UTF-8?q?=20=EB=82=B4=EC=97=AD=20=EB=B0=8F=20=EC=83=81=ED=92=88=20mock?= =?UTF-8?q?=20data=20=EC=B6=94=EA=B0=80=20(#35)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/UserActivityList/.gitkeep | 0 .../UserActivityList.module.scss | 23 +++++ .../UserActivityList/UserActivityList.tsx | 51 +++++++++++ .../UserProductList.module.scss | 14 +++ .../UserProductList/UserProductList.tsx | 24 +++++ .../(userpage)/otherpage/[userId]/page.tsx | 29 +++--- src/app/(userpage)/productMock.ts | 88 +++++++++++++++++++ src/app/(userpage)/types.tsx | 36 ++++++++ src/app/(userpage)/userMock.ts | 20 +++++ 9 files changed, 269 insertions(+), 16 deletions(-) delete mode 100644 src/app/(userpage)/otherpage/[userId]/components/UserActivityList/.gitkeep create mode 100644 src/app/(userpage)/otherpage/[userId]/components/UserActivityList/UserActivityList.module.scss create mode 100644 src/app/(userpage)/otherpage/[userId]/components/UserActivityList/UserActivityList.tsx create mode 100644 src/app/(userpage)/otherpage/[userId]/components/UserProductList/UserProductList.module.scss create mode 100644 src/app/(userpage)/otherpage/[userId]/components/UserProductList/UserProductList.tsx create mode 100644 src/app/(userpage)/productMock.ts create mode 100644 src/app/(userpage)/types.tsx create mode 100644 src/app/(userpage)/userMock.ts diff --git a/src/app/(userpage)/otherpage/[userId]/components/UserActivityList/.gitkeep b/src/app/(userpage)/otherpage/[userId]/components/UserActivityList/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/(userpage)/otherpage/[userId]/components/UserActivityList/UserActivityList.module.scss b/src/app/(userpage)/otherpage/[userId]/components/UserActivityList/UserActivityList.module.scss new file mode 100644 index 0000000..3b52539 --- /dev/null +++ b/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; +} diff --git a/src/app/(userpage)/otherpage/[userId]/components/UserActivityList/UserActivityList.tsx b/src/app/(userpage)/otherpage/[userId]/components/UserActivityList/UserActivityList.tsx new file mode 100644 index 0000000..f263ec8 --- /dev/null +++ b/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("reviewed"); + + return ( +
+
+
{ + setButton("reviewed"); + }} + onKeyDown={() => setButton("reviewed")} + role='button' + tabIndex={0} + > + 리뷰 남긴 상품 +
+
{ + setButton("created"); + }} + onKeyDown={() => setButton("created")} + role='button' + tabIndex={0} + > + 등록한 상품 +
+
{ + setButton("favorite"); + }} + onKeyDown={() => setButton("favorite")} + role='button' + tabIndex={0} + > + 찜한 상품 +
+
+ +
+ ); +} diff --git a/src/app/(userpage)/otherpage/[userId]/components/UserProductList/UserProductList.module.scss b/src/app/(userpage)/otherpage/[userId]/components/UserProductList/UserProductList.module.scss new file mode 100644 index 0000000..dac69f5 --- /dev/null +++ b/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; + } +} diff --git a/src/app/(userpage)/otherpage/[userId]/components/UserProductList/UserProductList.tsx b/src/app/(userpage)/otherpage/[userId]/components/UserProductList/UserProductList.tsx new file mode 100644 index 0000000..00accf4 --- /dev/null +++ b/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 ( +
+ {list.map((item) => ( + + + + ))} +
+ ); +} diff --git a/src/app/(userpage)/otherpage/[userId]/page.tsx b/src/app/(userpage)/otherpage/[userId]/page.tsx index aa497ec..71df47d 100644 --- a/src/app/(userpage)/otherpage/[userId]/page.tsx +++ b/src/app/(userpage)/otherpage/[userId]/page.tsx @@ -2,10 +2,12 @@ // 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"; @@ -13,21 +15,15 @@ export default function OtherPage() { // userId를 받아오는 useParams function // const { userId } = useParams<{ userId: string }>(); - const mock = { - name: "전자기기", - id: 1, - }; - return (
@@ -35,18 +31,19 @@ export default function OtherPage() {
+
); diff --git a/src/app/(userpage)/productMock.ts b/src/app/(userpage)/productMock.ts new file mode 100644 index 0000000..1672753 --- /dev/null +++ b/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, + }, +]; diff --git a/src/app/(userpage)/types.tsx b/src/app/(userpage)/types.tsx new file mode 100644 index 0000000..a775226 --- /dev/null +++ b/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; + }, + ]; +}; diff --git a/src/app/(userpage)/userMock.ts b/src/app/(userpage)/userMock.ts new file mode 100644 index 0000000..7779ddd --- /dev/null +++ b/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, +};