release: 스터디 신규 공개모집 배너 추가

Author: minsoo-web

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

@@ -1,8 +1,9 @@
 'use client'
 
-import { People } from '@/_shared'
+import { BannerBox, People } from '@/_shared'
 import '@hamsurang/ui/globals.css'
 import { postMessageToParent } from '@hamsurang/utils'
+import Image from 'next/image'
 import { usePathname, useSearchParams } from 'next/navigation'
 import { type PropsWithChildren, useEffect } from 'react'
 
@@ -34,6 +35,14 @@ export default function PeopleLayout({
       </aside>
 
       <section className="flex flex-col gap-4 flex-grow">
+        <div className="flex gap-2 mobile:flex-col">
+          <BannerBox href="https://hamsurang.notion.site/7bf061d6b6f14e80803ad00388299c81?pvs=4">
+            <Image fill src="/clean-ping.png" alt="" />
+          </BannerBox>
+          <BannerBox href="https://hamsurang.notion.site/856b66d7d9824521acfc529e8e6b2f86?pvs=4">
+            <Image fill src="/under-ping.png" alt="" />
+          </BannerBox>
+        </div>
         {readme}
         {children}
       </section>

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

@@ -0,0 +1,9 @@
+import type { PropsWithChildren } from 'react'
+
+export const BannerBox = ({ children, href }: PropsWithChildren<{ href: string }>) => {
+  return (
+    <a href={href} className="relative aspect-[4] flex-grow rounded-lg overflow-hidden">
+      {children}
+    </a>
+  )
+}

apps/home/app/_shared/components/BannerBox/index.ts

@@ -0,0 +1 @@
+export { BannerBox } from './BannerBox'

apps/home/app/_shared/components/index.ts

@@ -1,6 +1,7 @@
 export * from './ActivityLog'
+export { BannerBox } from './BannerBox'
 export * from './MBTIOverview'
 export { People } from './People'
 export { Profile } from './Profile'
-export * from './Repository'
 export * from './Readme'
+export * from './Repository'