From ae3fe880bab90ce61db57a0fad0f19030a734061 Mon Sep 17 00:00:00 2001
From: hwanheejung <hwanheejung117@gmail.com>
Date: Sun, 3 Nov 2024 00:24:29 +0900
Subject: [PATCH] feat: implement board background and transparent header

---
 src/app/board/[boardId]/page.tsx |  9 ++++++++-
 src/components/Header/index.tsx  | 10 ++++++++--
 src/types/board.ts               |  3 +++
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/app/board/[boardId]/page.tsx b/src/app/board/[boardId]/page.tsx
index 52b8de5..4d8617b 100644
--- a/src/app/board/[boardId]/page.tsx
+++ b/src/app/board/[boardId]/page.tsx
@@ -56,9 +56,14 @@ const BoardPage = async ({ params }: BoardPageProps) => {
 
   const session = await auth()
 
+  const background = `/images/boardThemas/${board.options.THEMA}.png`
+
   return (
     <TutorialProvider>
-      <div className="relative flex h-dvh flex-col bg-gray-50">
+      <div
+        className="relative flex h-dvh flex-col bg-cover"
+        style={{ backgroundImage: `url(${background})` }}
+      >
         <Header
           title={
             <div className="flex items-center justify-center gap-[3px] text-center">
@@ -76,6 +81,8 @@ const BoardPage = async ({ params }: BoardPageProps) => {
               <ShareBtn boardName={board.title} />
             )
           }
+          className="bg-transparent"
+          shadow={false}
         />
         {board.items.length === 0 ? (
           <Empty />
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index ef53df6..2691a30 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -1,5 +1,6 @@
 import { ReactNode } from 'react'
 import HeaderBackButton from '@/components/Header/HeaderBackButton'
+import { twMerge } from 'tailwind-merge'
 
 interface HeaderProps {
   title?: ReactNode
@@ -7,6 +8,7 @@ interface HeaderProps {
   leftButton?: ReactNode
   rightButton?: ReactNode
   shadow?: boolean
+  className?: string
 }
 
 const Header = ({
@@ -15,14 +17,18 @@ const Header = ({
   leftButton = null,
   rightButton = null,
   shadow = true,
+  className = '',
 }: HeaderProps) => {
   return (
     <>
       <header
-        className={`fixed z-10 flex h-16 w-full max-w-md justify-between bg-gray-0 p-5 ${shadow && 'shadow-header'}`}
+        className={twMerge(
+          `fixed z-10 flex h-16 w-full max-w-md justify-between bg-gray-0 p-5 ${shadow && 'shadow-header'}`,
+          className,
+        )}
       >
         <div className="w-6 cursor-pointer">{leftButton}</div>
-        <div className="text-gray-700">
+        <div className="text-gray-900">
           <div className="text-center text-md font-semiBold leading-6">
             {title}
           </div>
diff --git a/src/types/board.ts b/src/types/board.ts
index 93164d9..0999936 100644
--- a/src/types/board.ts
+++ b/src/types/board.ts
@@ -4,6 +4,9 @@ export interface Board {
   title: string
   items: Polaroid[]
   mine: boolean
+  options: {
+    THEMA: BoardThemaKeyType
+  }
 }
 
 export interface CreateBoardPayload {