Merge pull request #5 from Java-and-Script/user-page-user-component

유저 페이지에 유저 컴포넌트 추가

src/app/(root)/user/[username]/_components/BackButton.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import BackArrow from '@/assets/backArrow.svg';
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+import { ReactNode } from 'react';
+
+export default function BackButton({ children }: { children: ReactNode }) {
+  const router = useRouter();
+
+  return (
+    <button className="flex items-center gap-3" onClick={() => router.back()}>
+      <Image src={BackArrow} alt="BackArrow" />
+      <span className="font-bold">{children}</span>
+    </button>
+  );
+}

src/app/(root)/user/[username]/page.tsx

@@ -1,10 +1,27 @@
+import BackButton from './_components/BackButton';
+import { MemberItem } from '@/app/_components/MemberItem';
 import { PostItemList } from '@/app/_components/PostItemList';
-import { getPostDatasByUsername, getUsers } from '@/app/utils';
+import { getPostDatasByUsername, getUser, getUsers } from '@/app/utils';
+import BackArrow from '@/assets/backArrow.svg';
+import Image from 'next/image';
 
-export default function Page({ params }: { params: { username: string } }) {
-  const postDatas = getPostDatasByUsername(params.username);
+export default function Page({
+  params: { username },
+}: {
+  params: { username: string };
+}) {
+  const postDatas = getPostDatasByUsername(username);
+  const userData = getUser(username);
 
-  return <PostItemList postDatas={postDatas} />;
+  return (
+    <>
+      <BackButton>다른 팀원 보기</BackButton>
+      <div className="flex flex-col gap-4">
+        <MemberItem key={username} {...userData} />
+        <PostItemList postDatas={postDatas} />
+      </div>
+    </>
+  );
 }
 
 export function generateStaticParams() {

src/app/_components/MemberItem/MemberItem.tsx

@@ -1,11 +1,10 @@
 'use client';
 
-import { useRouter } from 'next/navigation';
-import Link from 'next/link';
-import Image from 'next/image';
-
 import GitHub from '@/assets/github.svg';
 import { User } from '@/type/User';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
 
 export const MemberItem = ({
   name,
@@ -16,7 +15,7 @@ export const MemberItem = ({
   const router = useRouter();
   return (
     <div
-      className="flex items-center gap-[24px] max-w-[800px] mx-auto h-[98px] pt-[26px] pb-[26px] pr-[26px] cursor-pointer "
+      className="flex items-center gap-[24px] w-[100%] mx-auto h-[98px] pt-[26px] pb-[26px] cursor-pointer"
       onClick={() => router.push(`/user/${name}`)}
     >
       <div className="w-[50px] h-[50px] border-solid border-[1px] rounded-[100%] border-[#9ca3af] overflow-hidden">

src/app/utils/user.ts

@@ -33,3 +33,10 @@ export function getUsersByRole(role: string) {
   const users = getUsers();
   return users.filter((user) => user.role === role);
 }
+
+export function getUser(name: string) {
+  const userContent = readFileSync(`./public/${name}/index.md`, 'utf8');
+  const { data } = matter(userContent) as any;
+
+  return { name, ...data };
+}