feat: member profile 컴포넌트 추출 및 데이터 연동 #85

src/app/(sideNav)/[nickname]/page.tsx

@@ -1,12 +1,11 @@
 import { notFound } from 'next/navigation'
 import { Suspense } from 'react'
-import { MemberProfileImage } from '@/widget/member-profile'
+import { MemberProfile } from '@/widget/member-profile'
 import { SchemeList, SchemeListSkeleton } from '@/widget/schematic-list'
+import { MemberInfoSender } from '@/entities/member/ui/MemberInfoSender'
 import { MemberPostsSender } from '@/entities/member/ui/MemberPostsSender'
-import { setMetadata } from '@/shared/lib'
-import { getMemberNameFromParam } from '@/shared/lib'
+import { getMemberNameFromParam, setMetadata } from '@/shared/lib'
 import { ContentWrap, Inner } from '@/shared/ui/layout'
-import { Title } from '@/shared/ui/text'
 
 export async function generateMetadata({
 	params: { nickname },
@@ -28,18 +27,9 @@ function Page({
 	return (
 		<ContentWrap pt={false}>
 			<Inner size="md">
-				<div className="flex items-center gap-2lg py-2lg">
-					<MemberProfileImage
-						nickname={nickname}
-						isLink={false}
-						size="lg"
-						profileImage=""
-					/>
-					<div className="space-y-1sm">
-						<Title mb={false}> {nickname}</Title>
-						<p>얌수의 페이지 입니다.</p>
-					</div>
-				</div>
+				<MemberInfoSender nickname={nickname}>
+					{(memberInfo) => <MemberProfile member={memberInfo} />}
+				</MemberInfoSender>
 				<div className="border-t border-t-gray-80 pt-2lg">
 					<Suspense
 						fallback={<SchemeListSkeleton size={2} isShowTop={false} />}

src/entities/member/api/index.ts

@@ -1,4 +1,4 @@
-import { MemberResponse, SignupPayload } from '@/entities/member/type'
+import { Member, MemberResponse, SignupPayload } from '@/entities/member/type'
 import { Http, checkErrorReturnRes } from '@/shared/api'
 
 const http = new Http('members')
@@ -82,3 +82,9 @@ export const deleteResign = async () => {
 	const res = await http.request<MemberResponse>('DELETE', `/resign`)
 	return checkErrorReturnRes(res)
 }
+
+// 유저 프로필
+export const getMemberInfo = async (nickname: string) => {
+	const res = await http.request<Member>('GET', `/profile/${nickname}`)
+	return checkErrorReturnRes(res)
+}

src/entities/member/ui/MemberInfoSender.tsx

@@ -0,0 +1,16 @@
+import { getMemberInfo } from '@/entities/member/api'
+import { Member } from '@/entities/member/type'
+
+interface MemberInfoSenderProps {
+	nickname: string
+	children: (memberPosts: Member) => React.ReactElement
+}
+
+export async function MemberInfoSender({
+	nickname,
+	children,
+}: MemberInfoSenderProps) {
+	const data = await getMemberInfo(nickname)
+
+	return <>{children(data)}</>
+}

src/widget/member-profile/index.ts

@@ -1 +1,2 @@
 export { MemberProfileImage } from './ui/MemberProfileImage'
+export { MemberProfile } from './ui/MemberProfile'

src/widget/member-profile/ui/MemberProfile.tsx

@@ -0,0 +1,25 @@
+import { MemberProfileImage } from '@/widget/member-profile'
+import { Member } from '@/entities/member'
+import { Title } from '@/shared/ui/text'
+
+interface MemberProfileProps {
+	member: Member
+}
+
+export const MemberProfile = ({ member }: MemberProfileProps) => {
+	const { nickname, profileImage, introduction } = member
+	return (
+		<div className="flex items-center gap-2lg py-2lg">
+			<MemberProfileImage
+				isLink={false}
+				nickname={nickname}
+				profileImage={profileImage}
+				size="lg"
+			/>
+			<div className="space-y-1sm">
+				<Title mb={false}> {nickname}</Title>
+				<p>{introduction || '얌수의 페이지 입니다.'}</p>
+			</div>
+		</div>
+	)
+}