feat: Profile 영역 동적 렌더링 #34

apps/home/app/(profile-readme)/@profile/default.tsx

@@ -0,0 +1,12 @@
+import { Profile } from '../../_shared'
+
+export default function Page() {
+  return (
+    <Profile
+      name="함수랑산악회"
+      username="hamsurang"
+      email="[email protected]"
+      description="프론트엔드의 거대한 산을 등반하자"
+    />
+  )
+}

apps/home/app/(profile-readme)/@profile/people/page.tsx

@@ -0,0 +1,15 @@
+'use client'
+
+import { useSearchParams } from 'next/navigation'
+import { Profile } from '../../../_shared'
+import { PROFILE_INFO } from './people.constants'
+
+export default function Page() {
+  const { get } = useSearchParams()
+  /**
+   * middleware에서 username을 검증하므로 타입 단언을 사용합니다.
+   */
+  const userInfo = PROFILE_INFO[get('username') as keyof typeof PROFILE_INFO]
+
+  return <Profile {...userInfo} />
+}

apps/home/app/(profile-readme)/@profile/people/people.constants.ts

@@ -0,0 +1,58 @@
+import type { PEOPLE_MBTI_INFO_MAP } from '@/(profile-readme)/people/people.constants'
+import type { ProfileProps } from '@/_shared/components/Profile/Profile'
+
+export const PROFILE_INFO = {
+  'minsoo-web': {
+    name: 'Minsoo kim',
+    username: 'minsoo-web',
+    email: '[email protected]',
+    description: 'Developer who believes in the value of sharing',
+  },
+  '2-NOW': {
+    name: 'Lee HyunJae (whale)',
+    username: '2-NOW',
+  },
+  chaaerim: {
+    name: 'chaerim kim',
+    username: 'chaaerim',
+  },
+  manudeli: {
+    name: 'Jonghyeon Ko',
+    username: 'manudeli',
+    email: '[email protected]',
+  },
+  minchodang: {
+    name: 'minsuKang',
+    username: 'minchodang',
+  },
+  minsour: {
+    name: 'Minsoo Park',
+    username: 'minsour',
+    email: '[email protected]',
+  },
+  okinawaa: {
+    name: '박찬혁',
+    username: 'okinawaa',
+    description: 'UX, DX enthusiast',
+    email: '[email protected]',
+  },
+  sonsurim: {
+    name: 'Sonny',
+    username: 'sonsurim',
+  },
+  sungh0lim: {
+    name: '임성호 (삼바)',
+    username: 'sungh0lim',
+  },
+  tooooo1: {
+    name: 'tooooo1',
+    username: 'tooooo1',
+    email: '[email protected]',
+  },
+  yejineee: {
+    username: 'yejineee',
+    email: '[email protected]',
+  },
+} satisfies {
+  [key in keyof typeof PEOPLE_MBTI_INFO_MAP]: ProfileProps
+}

apps/home/app/@readme/default.tsx → apps/home/app/(profile-readme)/@readme/default.tsx

@@ -1,9 +1,12 @@
+import { Readme } from '@/_shared'
 import { promises as fs } from 'node:fs'
 import path from 'node:path'
-import { Readme } from '@/_shared'
 
 export default async function Page() {
-  const filePath = path.join(process.cwd(), './app/@readme/_shared/content/main.mdx')
+  const filePath = path.join(
+    process.cwd(),
+    './app/(profile-readme)/@readme/_shared/content/main.mdx',
+  )
   const mainReadme = await fs.readFile(filePath, { encoding: 'utf8' })
 
   return <Readme text={mainReadme} />

apps/home/app/@readme/people/page.tsx → apps/home/app/(profile-readme)/@readme/people/page.tsx

@@ -1,14 +1,17 @@
+import { Readme } from '@/_shared'
 import { promises as fs } from 'node:fs'
 import path from 'node:path'
-import { Readme } from '@/_shared'
 
 export default async function Page({
   searchParams,
 }: {
   searchParams: { username: string }
 }) {
   const { username } = searchParams
-  const filePath = path.join(process.cwd(), `./app/@readme/_shared/content/${username}.mdx`)
+  const filePath = path.join(
+    process.cwd(),
+    `./app/(profile-readme)/@readme/_shared/content/${username}.mdx`,
+  )
   const readme = await fs.readFile(filePath, { encoding: 'utf8' })
 
   return <Readme text={readme} />

apps/home/app/(profile-readme)/layout.tsx

@@ -0,0 +1,43 @@
+'use client'
+
+import { People } from '@/_shared'
+import '@hamsurang/ui/globals.css'
+import { postMessageToParent } from '@hamsurang/utils'
+import { usePathname, useSearchParams } from 'next/navigation'
+import { type PropsWithChildren, useEffect } from 'react'
+
+export default function PeopleLayout({
+  children,
+  readme,
+  profile,
+}: PropsWithChildren<{
+  readme: React.ReactNode
+  profile: React.ReactNode
+}>): JSX.Element {
+  const searchParams = useSearchParams()
+  const pathname = usePathname()
+
+  useEffect(() => {
+    const fullRoute = `/home${pathname}?${searchParams}`
+    console.log(fullRoute)
+
+    postMessageToParent({
+      type: 'routeChange',
+      route: fullRoute,
+    })
+  }, [pathname, searchParams])
+
+  return (
+    <main className="flex gap-6 mobile:flex-col px-4 mt-2 max-w-[1200px] mx-auto">
+      <aside className="mobile:w-full w-[296px]">
+        {profile}
+        <People />
+      </aside>
+
+      <section className="flex flex-col gap-4 flex-grow">
+        {readme}
+        {children}
+      </section>
+    </main>
+  )
+}

apps/home/app/page.tsx → apps/home/app/(profile-readme)/page.tsx

@@ -1,5 +1,5 @@
 import { ActivityLog, RepositoryList } from '@/_shared'
-import { REPOSITORY_ITEMS, sampleData } from './home.constants'
+import { REPOSITORY_ITEMS, sampleData } from '../home.constants'
 
 export default function Page() {
   return (

apps/home/app/_shared/components/Profile/Profile.tsx

@@ -1,10 +1,10 @@
 import { Email } from '@hamsurang/icon'
 import { Avatar, AvatarFallback, AvatarImage } from '@hamsurang/ui'
 
-type ProfileProps = {
-  name: string
+export type ProfileProps = {
+  name?: string
   username: string
-  email: string
+  email?: string
   description?: string
 }
 
@@ -21,20 +21,22 @@ export const Profile = ({ name, username, description, email }: ProfileProps) =>
         </Avatar>
 
         <div className="flex flex-col py-4 mobile:flex-grow mobile:py-0">
-          <span className="text-3xl font-semibold mobile:text-lg">{name}</span>
+          {name && <span className="text-3xl font-semibold mobile:text-lg">{name}</span>}
           <span className="text-gray-500">{username}</span>
           {description && <p>{description}</p>}
         </div>
       </div>
 
-      <div className="flex gap-4 text-gray-500 mobile:flex-col mobile:gap-2 mobile:text-sm">
-        <span className="flex items-center gap-1">
-          <Email />
-          <a className="hover:underline" href={`mailto:${email}`}>
-            {email}
-          </a>
-        </span>
-      </div>
+      {email && (
+        <div className="flex gap-4 text-gray-500 mobile:flex-col mobile:gap-2 mobile:text-sm">
+          <span className="flex items-center gap-1">
+            <Email />
+            <a className="hover:underline" href={`mailto:${email}`}>
+              {email}
+            </a>
+          </span>
+        </div>
+      )}
     </div>
   )
 }

apps/home/app/home.constants.ts

@@ -18,15 +18,15 @@ export const REPOSITORY_ITEMS: RepositoryItem[] = [
     url: 'https://hamsurang.notion.site/fc592575d8374a64bda88b6639cadaf1',
   },
   {
-    id: 2,
+    id: 3,
     title: '함수랑마라톤',
     category: 'Repo',
     tag: '정규활동',
     description: '함수랑산악회에서 진행되는 해커톤에서 함께 달려요',
     url: 'https://hamsurang.notion.site/4d15bc3cb2b54e6ca804871be3fccabc',
   },
   {
-    id: 2,
+    id: 4,
     title: '함수랑학예회',
     category: 'Repo',
     tag: '대외활동',

apps/home/app/layout.tsx

@@ -1,52 +1,14 @@
-'use client'
-
 import '@hamsurang/ui/globals.css'
-import { postMessageToParent } from '@hamsurang/utils'
 import { Inter } from 'next/font/google'
-import { usePathname, useSearchParams } from 'next/navigation'
-import type { PropsWithChildren } from 'react'
-import { useEffect } from 'react'
-import { People, Profile } from './_shared'
+import { type PropsWithChildren, Suspense } from 'react'
 
 const inter = Inter({ subsets: ['latin'] })
 
-export default function RootLayout({
-  children,
-  readme,
-}: PropsWithChildren<{
-  readme: React.ReactNode
-}>): JSX.Element {
-  const pathname = usePathname()
-  const searchParams = useSearchParams()
-
-  useEffect(() => {
-    const fullRoute = `/home${pathname}?${searchParams}`
-
-    postMessageToParent({
-      type: 'routeChange',
-      route: fullRoute,
-    })
-  }, [pathname, searchParams])
-
+export default function RootLayout({ children }: PropsWithChildren): JSX.Element {
   return (
     <html lang="ko">
       <body className={inter.className}>
-        <main className="flex gap-6 mobile:flex-col px-4 mt-2 max-w-[1200px] mx-auto">
-          <aside className="mobile:w-full w-[296px]">
-            <Profile
-              name="함수랑산악회"
-              username="hamsurang"
-              email="[email protected]"
-              description="프론트엔드의 거대한 산을 등반하자"
-            />
-            <People />
-          </aside>
-
-          <section className="flex flex-col gap-4 flex-grow">
-            {readme}
-            {children}
-          </section>
-        </main>
+        <Suspense>{children}</Suspense>
       </body>
     </html>
   )

apps/home/middleware.ts

@@ -1,6 +1,6 @@
-import { PEOPLE_MBTI_INFO_MAP } from '@/people/people.constants'
-import { NextResponse } from 'next/server'
+import { PEOPLE_MBTI_INFO_MAP } from '@/(profile-readme)/people/people.constants'
 import type { NextRequest } from 'next/server'
+import { NextResponse } from 'next/server'
 
 export function middleware(request: NextRequest) {
   const { searchParams, origin } = request.nextUrl

apps/home/next.config.js

@@ -6,9 +6,8 @@ const nextConfig = {
   transpilePackages: ['@hamsurang/ui', '@hamsurang/icon'],
   experimental: {
     typedRoutes: true,
-    missingSuspenseWithCSRBailout: false,
     outputFileTracingIncludes: {
-      '/people': ['./app/@readme/_shared/content/**/*'],
+      '/people': ['./app/(profile-readme)/@readme/_shared/content/**/*'],
     },
   },
   webpack(config) {