feat: 내 정보 수정 페이지 UI #85

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

@@ -2,8 +2,7 @@ import { notFound } from 'next/navigation'
 import { Suspense } from 'react'
 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 { MemberPostsSender, MemberProfileSender } from '@/entities/member'
 import { getMemberNameFromParam, setMetadata } from '@/shared/lib'
 import { ContentWrap, Inner } from '@/shared/ui/layout'
 
@@ -27,9 +26,9 @@ function Page({
 	return (
 		<ContentWrap pt={false}>
 			<Inner size="md">
-				<MemberInfoSender nickname={nickname}>
+				<MemberProfileSender nickname={nickname}>
 					{(memberInfo) => <MemberProfile member={memberInfo} />}
-				</MemberInfoSender>
+				</MemberProfileSender>
 				<div className="border-t border-t-gray-80 pt-2lg">
 					<Suspense
 						fallback={<SchemeListSkeleton size={2} isShowTop={false} />}

src/app/(sideNav)/my/info/page.tsx

@@ -0,0 +1,67 @@
+import { ReactNode } from 'react'
+import { MemberProfile } from '@/widget/member-profile'
+import { MemberProfileSender } from '@/entities/member/ui/MemberProfileSender'
+import { setMetadata } from '@/shared/lib'
+import { SessionSender } from '@/shared/ui/headless'
+import { ContentWrap, Inner } from '@/shared/ui/layout'
+import { Button } from '@/shared/ui/shadcn/button'
+
+export async function generateMetadata() {
+	return setMetadata('MY_INFO')
+}
+
+function Page() {
+	return (
+		<ContentWrap pt={false}>
+			<Inner size="sm">
+				<SessionSender>
+					{(memberSession) =>
+						memberSession && (
+							<>
+								<MemberProfileSender nickname={memberSession.nickname}>
+									{(memberInfo) => <MemberProfile member={memberInfo} />}
+								</MemberProfileSender>
+								<dl>
+									<InfoListItem title="이메일">
+										{memberSession.email} <Button size="compact">변경</Button>
+									</InfoListItem>
+									<InfoListItem title="비밀번호">
+										1개월 전 변경됨
+										<Button size="compact">비밀번호 변경</Button>
+									</InfoListItem>
+									<InfoListItem title="가입일">2024. 01. 01</InfoListItem>
+									<InfoListItem title="회원탈퇴">
+										<Button variant="destructive" size="compact">
+											회원탈퇴
+										</Button>
+										<span className="text-1md text-gray-30">
+											탈퇴 시 작성하신 포스트 및 댓글이 모두 삭제되며 복구되지
+											않습니다.
+										</span>
+									</InfoListItem>
+								</dl>
+							</>
+						)
+					}
+				</SessionSender>
+			</Inner>
+		</ContentWrap>
+	)
+}
+
+const InfoListItem = ({
+	children,
+	title,
+}: {
+	children: ReactNode
+	title: string
+}) => {
+	return (
+		<div className="separator-line-80 grid grid-cols-[repeat(1,100px_1fr)] items-center py-2md">
+			<dt>{title}</dt>
+			<dd className="flex items-center gap-x-2md">{children}</dd>
+		</div>
+	)
+}
+
+export default Page

src/entities/member/api/index.ts

@@ -84,7 +84,19 @@ export const deleteResign = async () => {
 }
 
 // 유저 프로필
-export const getMemberInfo = async (nickname: string) => {
+export const getMemberProfile = async (nickname: string) => {
 	const res = await http.request<Member>('GET', `/profile/${nickname}`)
 	return checkErrorReturnRes(res)
 }
+
+// 프로필 이미지 수정
+export const putMyProfileImage = async (image: string) => {
+	const res = await http.request<Member['profileImage'], { image: string }>(
+		'PUT',
+		`/my/profile-image`,
+		{
+			payload: { image },
+		},
+	)
+	return checkErrorReturnRes(res)
+}

src/entities/member/index.ts

@@ -6,6 +6,8 @@ export {
 	postSignUpForm,
 	postLogin,
 	deleteResign,
+	putMyProfileImage,
 } from './api'
 export { MemberPostsSender } from './ui/MemberPostsSender'
+export { MemberProfileSender } from './ui/MemberProfileSender'
 export type { MemberSession, Member } from './type'

src/entities/member/ui/MemberProfileSender.tsx

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

src/shared/config/metaData.ts

@@ -46,4 +46,8 @@ export const META = {
 		TITLE: '작성한 댓글',
 		DESCRIPTION: '',
 	}),
+	MY_INFO: () => ({
+		TITLE: '내 정보',
+		DESCRIPTION: '',
+	}),
 }

src/shared/config/pagePath.ts

@@ -13,6 +13,7 @@ export const PAGE_PATH = {
 	MEMBER: (nickname: string) => `/@${nickname}`,
 	MY_CONSTRUCTION: `${TOP_PAGE_PATH.MY}/under-construction`,
 	MY_COMMENTS: `${TOP_PAGE_PATH.MY}/comments`,
+	MY_INFO: `${TOP_PAGE_PATH.MY}/info`,
 }
 
 export const ONLY_NOT_MEMBER_PAGES = `${PAGE_PATH.LOGIN}|${PAGE_PATH.JOIN}`

src/shared/ui/headless/ui/SessionSender.tsx

@@ -5,14 +5,14 @@ import { AUTH_COOKIE_NAME } from '@/shared/api'
 import { getServerCookie } from '@/shared/lib/serverCookie'
 
 interface SessionSenderProps {
-	children: (userInfo: MemberSession | undefined) => ReactNode
+	children: (memberSession: MemberSession | undefined) => ReactNode
 }
 
 export const SessionSender = async ({ children }: SessionSenderProps) => {
 	const session = getServerCookie(AUTH_COOKIE_NAME)
-	const userInfo: MemberSession | undefined = session
+	const memberSession: MemberSession | undefined = session
 		? jwtDecode(session)
 		: undefined
 
-	return <>{children(userInfo)}</>
+	return <>{children(memberSession)}</>
 }

src/shared/ui/side-nav/ui/SideMemberMenus.tsx

@@ -18,28 +18,22 @@ interface SideMemberMenusProps {
 
 const menus = [
 	{
-		id: 1,
+		id: 'myConstruction',
 		title: '건축중인 건물',
 		icon: <HammerIcon />,
 		href: PAGE_PATH.MY_CONSTRUCTION,
 	},
 	{
-		id: 2,
-		title: '내 프로젝트',
-		icon: <GlobeIcon />,
-		href: PAGE_PATH.MY_CONSTRUCTION,
-	},
-	{
-		id: 4,
+		id: 'myComments',
 		title: '내 댓글',
 		icon: <ChatBubbleIcon />,
 		href: PAGE_PATH.MY_COMMENTS,
 	},
 	{
-		id: 3,
+		id: 'myInfo',
 		title: '내 정보',
 		icon: <GearIcon />,
-		href: '#',
+		href: PAGE_PATH.MY_INFO,
 	},
 ]