From 4cbcba44df6a43d301ce9481a547d8bda437dc41 Mon Sep 17 00:00:00 2001 From: yeeZinu Date: Sat, 1 Jun 2024 21:11:02 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20userInfo=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EA=B5=AC=ED=98=84=20(#35)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../otherpage/[userId]/OtherPage.module.scss | 1 - .../HTMLContent/HTMLContent.module.scss | 11 ++++ .../components/HTMLContent/HTMLContent.tsx | 16 +++++ .../[userId]/components/UserAction/.gitkeep | 0 .../components/UserActivityList/.gitkeep | 0 .../components/UserInfo/UserInfo.module.scss | 64 +++++++++++++++++++ .../[userId]/components/UserInfo/UserInfo.tsx | 61 ++++++++++++++++++ .../(userpage)/otherpage/[userId]/page.tsx | 18 ++++-- 8 files changed, 166 insertions(+), 5 deletions(-) create mode 100644 src/app/(userpage)/otherpage/[userId]/components/HTMLContent/HTMLContent.module.scss create mode 100644 src/app/(userpage)/otherpage/[userId]/components/HTMLContent/HTMLContent.tsx create mode 100644 src/app/(userpage)/otherpage/[userId]/components/UserAction/.gitkeep create mode 100644 src/app/(userpage)/otherpage/[userId]/components/UserActivityList/.gitkeep create mode 100644 src/app/(userpage)/otherpage/[userId]/components/UserInfo/UserInfo.module.scss create mode 100644 src/app/(userpage)/otherpage/[userId]/components/UserInfo/UserInfo.tsx diff --git a/src/app/(userpage)/otherpage/[userId]/OtherPage.module.scss b/src/app/(userpage)/otherpage/[userId]/OtherPage.module.scss index ddf1209..67a6eff 100644 --- a/src/app/(userpage)/otherpage/[userId]/OtherPage.module.scss +++ b/src/app/(userpage)/otherpage/[userId]/OtherPage.module.scss @@ -6,5 +6,4 @@ flex-direction: column; align-items: center; justify-content: center; - } diff --git a/src/app/(userpage)/otherpage/[userId]/components/HTMLContent/HTMLContent.module.scss b/src/app/(userpage)/otherpage/[userId]/components/HTMLContent/HTMLContent.module.scss new file mode 100644 index 0000000..7c07acd --- /dev/null +++ b/src/app/(userpage)/otherpage/[userId]/components/HTMLContent/HTMLContent.module.scss @@ -0,0 +1,11 @@ +@import "@/styles/_index"; +@import "@/styles/_media"; + +.container { + width: 100%; + color: $gray-200; + @include text-normal; + @include font-normal; + line-height: 22px; + word-break: break-word; +} diff --git a/src/app/(userpage)/otherpage/[userId]/components/HTMLContent/HTMLContent.tsx b/src/app/(userpage)/otherpage/[userId]/components/HTMLContent/HTMLContent.tsx new file mode 100644 index 0000000..61ff98d --- /dev/null +++ b/src/app/(userpage)/otherpage/[userId]/components/HTMLContent/HTMLContent.tsx @@ -0,0 +1,16 @@ +import React from "react"; +import styles from "./HTMLContent.module.scss"; + +// eslint-disable-next-line react/prop-types, @typescript-eslint/no-explicit-any +const HTMLContent = ({ html }: any) => { + // eslint-disable-next-line react/no-danger + return ( +
+ ); +}; + +export default HTMLContent; diff --git a/src/app/(userpage)/otherpage/[userId]/components/UserAction/.gitkeep b/src/app/(userpage)/otherpage/[userId]/components/UserAction/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/src/app/(userpage)/otherpage/[userId]/components/UserActivityList/.gitkeep b/src/app/(userpage)/otherpage/[userId]/components/UserActivityList/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/src/app/(userpage)/otherpage/[userId]/components/UserInfo/UserInfo.module.scss b/src/app/(userpage)/otherpage/[userId]/components/UserInfo/UserInfo.module.scss new file mode 100644 index 0000000..f674903 --- /dev/null +++ b/src/app/(userpage)/otherpage/[userId]/components/UserInfo/UserInfo.module.scss @@ -0,0 +1,64 @@ +@import "@/styles/_index"; +@import "@/styles/_media"; + +.container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + width: 340px; + padding: 30px 20px; + + gap: 40px; + + border-radius: 12px; + border: 1px solid $gray-300; + background-color: $black-200; +} + +.descriptionBox { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + gap: 20px; + + p { + @include text-xl; + color: $white-100; + } +} + +.followBox { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + width: 184px; + + div { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 10px; + + :nth-child(1) { + color: $white-100; + font-size: 20px; + font-weight: 600px; + } + + :nth-child(2) { + color: $gray-100; + @include text-normal; + @include font-normal; + } + } +} + +.buttonWidth { + width: 300px; +} diff --git a/src/app/(userpage)/otherpage/[userId]/components/UserInfo/UserInfo.tsx b/src/app/(userpage)/otherpage/[userId]/components/UserInfo/UserInfo.tsx new file mode 100644 index 0000000..c0fbc1a --- /dev/null +++ b/src/app/(userpage)/otherpage/[userId]/components/UserInfo/UserInfo.tsx @@ -0,0 +1,61 @@ +import React from "react"; +import Button from "@/components/Button/Button"; +import { UserImage } from "@/components/UserImage"; +import styles from "./UserInfo.module.scss"; +// eslint-disable-next-line no-restricted-imports +import HTMLContent from "../HTMLContent/HTMLContent"; + +type UserInfoProps = { + nickname: string; + image: string; + description: string; + follower: number; + folloing: number; + isfollow: boolean; +}; + +export default function UserInfo({ nickname, image, description, follower, folloing, isfollow }: UserInfoProps) { + // textarea에서 쓴 줄바꿈 변환해서 서버로 보내기 + // const formattedDescription = description.replace(/\n/g, "
") + + return ( +
+ +
+

{nickname}

+ +
+
+
+

{follower}

+

팔로워

+
+
+

{folloing}

+

팔로잉

+
+
+ {isfollow ? ( + + ) : ( + + )} +
+ ); +} diff --git a/src/app/(userpage)/otherpage/[userId]/page.tsx b/src/app/(userpage)/otherpage/[userId]/page.tsx index f8dd064..d98e489 100644 --- a/src/app/(userpage)/otherpage/[userId]/page.tsx +++ b/src/app/(userpage)/otherpage/[userId]/page.tsx @@ -1,18 +1,28 @@ "use client"; -import { useParams } from "next/navigation"; +// import { useParams } from "next/navigation"; import React from "react"; import cn from "@/utils/classNames"; +// 추후 데이터 연결시 받아온데이터로 변환 예정 +import { DEFAULT_PROFILE_IMAGE } from "@/utils/constant"; +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 { userId } = useParams<{ userId: string }>(); return (
-

OtherPage test

- userId: {userId} +
); }