feat: userInfo 컴포넌트 구현 (#35)

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

@@ -6,5 +6,4 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-
 }

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;
+}

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 (
+    <div
+      className={styles.container}
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  );
+};
+
+export default HTMLContent;

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;
+}

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, "<br>")
+
+  return (
+    <div className={styles.container}>
+      <UserImage
+        image={image}
+        nickname={nickname}
+        size='large'
+      />
+      <div className={styles.descriptionBox}>
+        <p>{nickname}</p>
+        <HTMLContent html={description} />
+      </div>
+      <div className={styles.followBox}>
+        <div>
+          <p>{follower}</p>
+          <p>팔로워</p>
+        </div>
+        <div>
+          <p>{folloing}</p>
+          <p>팔로잉</p>
+        </div>
+      </div>
+      {isfollow ? (
+        <Button
+          styleType='tertiary'
+          disabled
+          className='profile'
+        >
+          팔로우 취소
+        </Button>
+      ) : (
+        <Button
+          styleType='primary'
+          disabled={false}
+          className='profile'
+        >
+          팔로우
+        </Button>
+      )}
+    </div>
+  );
+}

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 (
     <div className={cn(styles.container)}>
-      <h1> OtherPage test </h1>
-      <span>userId: {userId}</span>
+      <UserInfo
+        nickname='surisuri마수리' // userId 도 나중에 nickname으로 변경 예정
+        image={DEFAULT_PROFILE_IMAGE}
+        description='세상에 리뷰 못할 제품은 없다. surisuri마수리와 함께라면 당신도 프로쇼핑러! <br>
+        안녕하세요, 별점의 화신 surisuri마수리입니다'
+        follower={762}
+        folloing={102}
+        isfollow
+      />
     </div>
   );
 }